Version 8.2 (2013-03-18)
 —  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, select the user interface component or the xml folder.

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

    The following 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:

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