Page tree
Skip to end of metadata
Go to start of metadata

Supporting materials and information for the 2015-09-02 light development webinar.

Webinar recording

Download the 5.4.2 Snapshot

You can get the Magnolia 5.4.2 SNAPSHOT Tomcat bundle used in webinar here: https://www.dropbox.com/s/5pk0p9rf0f5axce/mgnl-5.4.2-SNAPSHOT.zip

Key documentation

Installing Magnolia

https://documentation.magnolia-cms.com/display/DOCS/Installing+Magnolia

Template definition

https://documentation.magnolia-cms.com/display/DOCS/Template+definition

Template scripts

https://documentation.magnolia-cms.com/display/DOCS/Template+scripts

Magnolia's templating functions

https://documentation.magnolia-cms.com/display/DOCS/Templating+functions

Dialog definition

https://documentation.magnolia-cms.com/display/DOCS/Dialog+definition

YAML

https://documentation.magnolia-cms.com/display/DOCS/YAML

Important commands, files & paths

magnolia.properties configuration file

Find the magnolia.properties file at

magnolia-5.4.2-SNAPSHOT/apache-tomcat-7.0.47/webapps/magnoliaAuthor/WEB-INF/config/default/magnolia.properties

Alternately, use ag, find or grep on the command line to find the file

Finding magnolia.properties on the command line
pwd # magnolia-5.4.2-SNAPSHOT
ag -l magnolia.develop .
find . magnolia.properties
grep -rl magnolia.develop *

Starting/stopping Magnolia

Directory tree for a light module
cd mag*5.4.2/apache*
bin/magnolia_control.sh start
bin/magnolia_control.sh stop

Tailing the logs

Directory tree for a light module
cd mag*5.4.2/apache*
tail -f logs/catalina.out

Filtering the stack trace from your log tail

If you want to remove the stack trace data from your running log tail, use this command

Directory tree for a light module
cd mag*5.4.2/apache*
tail -f logs/catalina.out | \
grep -v --line-buffered --invert-match "^\t\(at\|\.\.\.\) "
 

Light development module structure

Directory tree for a light module
${magnolia.resources.dir} # Whatever path you set in the magnolia.properties file
└── ${module.name}
    ├── dialogs           # Dialog definitions in YAML format
    │   ├── components
    │   └── pages
    ├── templates         # Component & page definitions (YAML) & templates (FTL)
    │   ├── components
    │   └── pages         # Page defs & templates also contain area defs & templates
    └── webresources
        ├── css
        ├── img
        └── js

 

Code snippets

HTML 5 template
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
</head>
<body>
 <h1></h1>
 <p></p>
</body>
</html>
"Basic" page definition
title: Basic    # The name shown in the Pages App
templateScript: /webinar/templates/pages/basic.ftl
renderType: freemarker
visible: true

 
dialog: webinar:pages/basic
 
areas:
  main:
    renderType: freemarker
    availableComponents:
      image:
        id: webinar:components/image
"Basic" freemarker template
[#assign title = content.title!"Title not found"]
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>${title}</title>
  [@cms.page /]
</head>
<body>
  <h1>${title}</h1>
  ${cmsfn.decode(content).description}
  [@cms.area name="main"/]
</body>
</html>
"Basic" dialog definition
form:
  tabs:
    - name: tabText
      label: Texts
      fields:
        - name: title
          class: info.magnolia.ui.form.field.definition.TextFieldDefinition
          label: Title
        - name: description
          class: info.magnolia.ui.form.field.definition.RichTextFieldDefinition
          label: Description
actions:
  commit:
    class: info.magnolia.ui.admincentral.dialog.action.SaveDialogActionDefinition
  cancel:
    class: info.magnolia.ui.admincentral.dialog.action.CancelDialogActionDefinition
"Image" component definition
title: Image
templateScript: /webinar/templates/components/image.ftl  # Path to template
renderType: freemarker
visible: true
 
dialog: webinar:components/image
"Image" dialog definition
form:
  tabs:
    - name: tabText
      label: Select image from DAM
      fields:
        - name: image
          class: info.magnolia.ui.form.field.definition.LinkFieldDefinition
          targetWorkspace: dam
          appName: assets
          label: Select image
          identifierToPathConverter:
            class: info.magnolia.dam.app.assets.field.translator.AssetCompositeIdKeyTranslator
          contentPreviewDefinition:
            contentPreviewClass: info.magnolia.dam.app.ui.field.DamFilePreviewComponent

actions:
  commit:
    class: info.magnolia.ui.admincentral.dialog.action.SaveDialogActionDefinition
  cancel:
    class: info.magnolia.ui.admincentral.dialog.action.CancelDialogActionDefinition
Image component freemarker template
[#if content.image?has_content]
  [#assign link = damfn.getAssetLink(content.image)]
  <img src="${link}">
[/#if]

Useful tools

Fish Shell

Humorously described as, "A command line shell for the 90's", fish is a user-friendly command line shell that features nice command auto-completions, easier scripting and good usability (well, for a command line shell.)

Homepage at http://fishshell.com/

Silver Searcher

A command-line tool for quickly searching files (and optimized for searching in code files)

Homepage at http://geoff.greer.fm/ag/

 

  • No labels