Version 8.3.2
 —  Ajax Developer  —

Getting Started with the Layout Painter

This document covers the following topics:


General Information

Ajax Developer follows the commonly accepted paradigm of separating the layout (view) as much as possible from the application logic (model). You design the layout using the WYSIWYG Layout Painter. The result is kept in an XML page layout file. When you save the XML page layout, an HTML page is generated.

On the one hand, the XML layout contains the used controls of a page; on the other hand, it keeps information about how these controls are bound to the application code.

If you implement your application in Natural, the controls are bound to a Natural adapter. The Natural adapter is generated as soon as you save the page layout. The Natural adapter becomes part of the Natural application and forms the interface between the Natural application code and the user interface.

If you implement in Java, the controls are bound to the properties and methods of a Java adapter. This is a Java class that you can generate with the Code Assistant (which is part of the Layout Painter).

In addition, the XML layout may optionally contain so called "literals". Literals are text identifiers (text IDs) that are replaced at runtime with language-specific texts. For each language you want to support, there must be a comma-separated value (CSV) file that contains the language-specific text per literal. You maintain these translation files using the Literal Assistant (which is part of the Layout Painter).

Top of page

Creating a Layout

The layouts that you create as described below are stored in the xml folder of the user interface component.

Start of instruction setTo create a layout

  1. In the Navigator view or in the Natural Navigator view, select the user interface component or the xml folder.

  2. From the File menu or context menu, choose New > Page Layout.

    The New Ajax Page Layout dialog box appears, providing several tabs from which you can select a layout template.

    New page layout

  3. In the Layout page text box, enter the name of the file that is to contain your layout definition. Do not specify an extension; the extension ".xml" will automatically be added.

    The Natural adapter text box is only visible when the Natural Page tab is currently selected. Here, you enter the name of the Natural adapter that will be generated when you save the page layout. This name must match the naming conventions for Natural objects.

  4. Select the layout template for your page. See also Layout Templates.

  5. Choose the Finish button.

    The Layout Painter appears (see below).

Top of page

Layout Templates

When you create a layout, you have to select a layout template in the New Ajax Page Layout dialog box. The following tabs, which contain different types of layout templates, are offered by default:

If you have created your own custom layout templates, they are also offered for selection. For further information, see Creating Custom Layout Templates.

Top of page

Opening an Existing Layout

Layouts are stored in the xml folder of the user interface component. They have the extension .xml.

Start of instruction setTo open a layout

Top of page

Elements of the Layout Painter

The Layout Painter appears when you create a new layout or when you open an existing layout.

Layout

The Layout Painter is divided into several areas:

When you select a control in the layout tree or in the preview area, the properties for this control are shown in the Properties view. You can modify the properties as required.

When the Layout Painter is active, the additional menu Ajax Developer is shown in the menu bar. Using this menu, you can invoke additional tools which are helpful for the creation of layouts:

Some commands of the Ajax Developer menu (such as Refresh Preview) are also available as buttons in a toolbar.

Toolbar

Top of page

Creating Custom Layout Templates

You can create your own custom layout templates. When you create a layout, your custom layout templates are offered for selection together with the default layout templates in the New Ajax Page Layout dialog box.

You can create your custom layout templates in any Natural project. Your custom layout templates can always be used from all other Natural projects in the current workspace.

Tip:
It is helpful to create a single project which contains all of your custom layout templates. Other developers can then import this project into their own workspaces. Thus, they can also use your custom layout templates.

Start of instruction setTo create a custom layout template

  1. In the user interface component of your project, create a folder with the name "cisconfig".

    Note:
    In the Navigator view, the cisconfig folders are hidden by default. To make these folders visible, go to the view menu of the Navigator view and choose Filters. In the resulting dialog box, deselect the cisconfig check box and choose the OK button.

  2. In the cisconfig folder, create one or more layout template files. Or copy your template files into this folder.

    The layout template files have the same XML format as the page layout files (for an example, see Viewing the XML Code). Therefore, you can also copy an existing layout file into the cisconfig folder and rename it to, for example, "editorTemplateNATPage1.xml".

  3. In the cisconfig folder, create an XML configuration file with the name "editortemplates.xml". This file defines all custom layout templates that are to be used. Example:

    <?xml version="1.0" encoding="UTF-8"?>
    <editortemplates>
        <group name="Natural Page">
             <xmltemplate filename="editorTemplateNATPage1.xml" 
             image="templatenatural.jpg" 
             info="My Natural Page Template"/>         		 		 
        </group>
    </editortemplates>

    The XML configuration file uses the following tags:

    <editortemplates>

    Each XML configuration file must have exactly one <editortemplates> tag.

    <group>

    You can define one or more <group> tags inside the <editortemplates> tag.

    Each <group> tag has a mandatory name attribute which defines the tab in the New Ajax Page Layout dialog box on which the custom layout template is to be shown (see Creating a Layout).

    You can also add a new tab to the New Ajax Page Layout dialog box by specifying a new group name (for example, "My Templates"). However, keep in mind that such a new tab is not suited for Natural pages because the text box in which you specify the adapter name will not be shown for the templates on your new tab.

    <xmltemplate>

    You can define one or more <xmltemplate> tags inside a <group> tag.

    Each <xmltemplate> tag has the following mandatory attributes:

    • filename

      The name of an existing custom layout file in the cisconfig folder.

      Tip:
      If you want to create a custom layout template for a Natural page (that is, a page which has the NATPAGE control as the top node), it is recommended that the name of your layout file starts with either "editorTemplateNAT" or "editorTemplateNJX". Otherwise, if you define a different file name, the text box Natural adapter, in which you specify the name of the adapter that is to be generated, will not be shown for your custom layout template in the New Ajax Page Layout dialog box.

    • image

      The name of an image file. This image will be shown in the New Ajax Page Layout dialog box. If the image file is not stored in the root of the cisconfig folder, you have to specify a relative path with the file name.

      If you want, you can copy the standard image file for Natural pages. Its name is templatenatural.jpg and you can find it in your Eclipse workspace, under .naturalone\apache-tomcat\webapps\cisnatural\HTMLBasedGUI\images. You can copy it, for example, to your cisconfig folder.

      You can also add subfolders to your cisconfig folder. For example, you can add a templates folder which is to contain all of your custom layout templates, and an images folder which is to contain all of your images. It is important that the editortemplates.xml configuration file can always be found in the root of the cisconfig folder - you must not move this file to a subfolder.

    • info

      A brief text describing the custom layout template. For example, "My Natural Page Template". This info text will be shown in the New Ajax Page Layout dialog box, next to the image.

  4. To check whether your custom layout template is shown in the New Ajax Page Layout dialog box, create a new layout.

    The following example shows a custom layout template with the info text "My Natural Page Template". This template has been defined with the above editortemplates.xml file.

    Custom template

    The information in parentheses behind the info text indicates the location of the template (project name and user interface component).

    Your custom templates are always shown below the default layout templates. They are shown in the same sequence as defined in the editortemplates.xml file.

Top of page