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

Pre-release version at the moment.

Introduction

In order to develop efficiently with Magnolia you need to rely on some tools. Aside from the actual webapp you will also need some kind of text editor. Preferably one that has Freemarker and YAML syntax highlighters. CSS and JavaScript development tools would also be helpful. You will need a servlet container like Tomcat. Also, some tool to help facilitate the development process can be nice, so let's go ahead and throw in the Magnolia CLI tool for that.

Let's take an inventory. So I have an ee bundle downloaded (community here). I started it using my command line utility. I've finished the install in Firefox and I'm tailing the log from the command window. I've got a second command window open for the CLI tool. I've moved myself into the modules directory of the author instance and I'm ready to start creating modules and templates. I'm using the Atom text editor and I have the modules directory opened as a project. Atom also provides syntax highlighting for YAML but not Freemarker. As a substitute I will associate Freemarker files as HTML to at least get partial highlighting. No so bad, with a little finagling I can probably get that all showing at one time.

One tool

Eclipse IDE is a powerful tool. It is the most popular Java IDE today. It can integrate a lot of technologies and also provides a framework for plugins. Let's set up the light development version. No Maven, no Git is needed for this. Front end, back end, those evaluating the product can find this approach useful. 

  1. Make sure you have Java 8 JDK.
  2. Download a copy of Eclipse Oxygen.
  3. Download a copy of Tomcat Server.

    It should not matter which server you use. Tomcat tends to be the lightest.

  4. Download a copy of the war file you would like to use.
  5. In your user home directory create a folder named Eclipse and a sub-folder called light-development-workspace.

    MacBook-Pro-3:/Users/rgange/Eclipse/light-development-workspace rgange$
  6. Move the tomcat zip inside the workspace and unzip it.
  7. Move the Magnolia war file inside the workspace.
  8. Open Eclipse
    1. Select the new light-development-workspace when prompted.
    2. Close the Welcome tab to get to the Project Explorer.
    3. From the Project Explorer import the war file.
    4. Add a new server and attach the war to the server.
  9. Configure the environment.
    1. Close the tabs: Markers, Properties, Data Source Explorer, Snippets, Outline, and Task List.

      These are really not needed for light development so we move them out of the way.

    2. Open the Internal Browser for convenience.
    3. Hide the Tool Bar. (Window > Appearance)

Eclipse plugin

With this plugin you can create light modules, apps, dialogs, templates, and more with the assistance of wizards.

Light modules

With light modules select only the registries you need. Create only the files you want.

Templates

Create a page or component template using the wizard. Link templates to existing dialogs or create new dialogs via wizard.

Content apps

Create a content app with basic features that can be customized. The content app will be created with both the browser and detail subapps. The app will be generated with with a main configuration (the app level config) and a sub-folder which divides the supporting configuration into separate include files.

The browser subapp will come with some of the common actions already configured and arranged. The details subapp will be created with four fields using some of the more popular fields configured in the editor.

With the magnolia eclipse support module installed into your running instance the wizard will also create the following:

  • New workspace with the same name as your app.
  • New node type with the same name as your app.
  • Permissions for the superuser to access the workspace.
  • Registration in the app launcher.

In all cases a README file is created which provides further info on how to register the workspace in the target system and how to create the appropriate bootstraps.

Dialogs

Create a dialog configuration quickly using a wizard. The dialog must be created within a dialogs registry and a name is required.

Adding Fields

Selecting fields from the drop-down populates the field configuration of the dialog.

By default the field selector drop-down will be populated from fields provided by the UI Framework module. To see all fields available in the system use the show all button.

Actions block

Use the default actions or edit the configuration of the actions block to some custom setting.

Example

Here is an example of the output. The user should now adjust the names and labels.

/my-module/dialogs/home.yaml
form:
  tabs:
    - name: tabMain
      label: Main
      fields:
        - name: field0
          class: info.magnolia.ui.form.field.definition.TextFieldDefinition
          label: Field0
          required: false

        - name: field1
          class: info.magnolia.ui.form.field.definition.RichTextFieldDefinition
          label: Field1
          required: false

actions:
  save:
    class: info.magnolia.ui.dialog.action.SaveDialogActionDefinition
    label: save
  cancel:
    class: info.magnolia.ui.dialog.action.CancelDialogActionDefinition
    label: cancel


Decorations

Creating decorations can be confusing for some. The wizard walks you through the steps to get the appropriate module and registry folders as well as the definition you wish to target.

Internationalization

Get the base configuration automated using the light module wizard. When selecting this option during the light-module creation a translation properties files is created in the proper folder.

Themes

Get the base configuration automated using the light module wizard. When selecting this option during the light-module creation a simple theme is created.

# cssFiles:
#   <module-name>-css:
#     media: screen
#     addFingerPrint: false
#     link: /.resources/<module-name>/webresources/css/<module-name>.css

# jsFiles:
#   <module-name>-js:
#     addFingerPrint: false
#     link: /.resources/<module-name>/webresources/js/<module-name>.js

imaging:
  class: info.magnolia.templating.imaging.VariationAwareImagingSupport
  variations:
    large-teaser:
      class: info.magnolia.templating.imaging.variation.SimpleResizeVariation
      width: 450
    medium-teaser:
      class: info.magnolia.templating.imaging.variation.SimpleResizeVariation
      width: 300
    small-teaser:
      class: info.magnolia.templating.imaging.variation.SimpleResizeVariation
      width: 150

Virtual URI mappings

Quickly create virtual URI mappings using a wizard.

Magnolia Eclipse Support module

The Magnolia eclipse support module provides rest endpoints which allow Eclipse to query things from the registries. For example, when creating a page template you can select your preferred dialog from a drop-down rather then having to try and remember the correct format.

Installation

<dependency>
   <groupId>info.magnolia.eclipse</groupId>
   <artifactId>magnolia-eclipse-plugin-support</artifactId>
   <version>0.1</version>
</dependency>

Source code

Source code for both the plugin and the support module are available in the Services repo.

Bugs, Suggestions, Feature requests

Please open a ticket here: ECLIPSEPLG.

  • No labels