Version 8.3.2
 —  Development Workplace  —

Getting Started with the Layout Painter

This document covers the following topics:


General Information

Application Designer 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 layout description file. The HTML page is generated out of the XML layout description. 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 properties and methods of a server-side Java adapter. The class does not provide a large amount of logic - but connects to existing application logic. You generate the necessary property and method code inside the adapter class with the Code Assistant (which is part of the Layout Painter).

graphics/dt-layout.png

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 also part of the Layout Painter).

Top of page

Creating a Layout

You can create a layout in different ways:

Start of instruction setTo create a layout from the navigation frame

  1. In the navigation frame, choose the button for the project that is to contain the new layout.

    Project

  2. Choose the New Layout command in the navigation frame.

    The following dialog appears, providing several tabs from which you can select a layout template. A default file name for your new layout is automatically provided.

    New layout

  3. In the Name text box, enter the name of the file that is to contain your layout definition. The name must end with ".xml".

  4. Select the layout template that you want to use.

    When you move the mouse pointer over a template, a tool tip appears indicating the type of template (for example, "HTML Page"). See also Layout Templates.

    The Layout Painter appears (see below).

Start of instruction setTo create a layout directly from the Layout Painter

  1. From the Home tab of the Layout Painter, choose New Form.

    If your latest changes to your current layout have not yet been saved, a message box appears and you can decide whether to save your data, lose your data, or to go back to the unsaved layout.

    When you decide to save or lose data in the above mentioned message box, or when this message box does not appear since all data have already been saved, the dialog appears in which you have to enter the name of the file that is to contain your layout definition (see above).

  2. Enter a file name and select the template that you want to use.

Top of page

Layout Templates

When you create a layout, you have to select a layout template. The following types of layout templates are available:

Top of page

Opening a Layout

You can open an existing layout in different ways:

Start of instruction setTo open a layout from the navigation frame

  1. In the navigation frame, choose the button for the project which contains your layout.

    The existing layouts are contained in the Layouts node.

  2. If the layouts are grouped into folders, open the folder which contains your layout. See also Preferences.

  3. Select the name of your layout.

    The Layout Painter appears (see below).

Start of instruction setTo open another layout in the Layout Painter

  1. From the Home tab of the Layout Painter, choose Open.

    If your latest changes to your current layout have not yet been saved, a message box appears and you can decide whether to save your data, lose your data, or to go back to the unsaved layout.

    When you decide to save or lose data in the above mentioned message box, or when this message box does not appear since all data have already been saved, the dialog appears listing a layouts that have been defined for the current project.

  2. Choose the layout that you want to open.

Top of page

Elements of the Layout Painter

The Layout Painter appears when you create a new layout or when you modify an existing layout. The following is an example for the template type "HTML Page":

Layout

The Layout Painter is subdivided into several areas:

Layout Tree

The layout tree is located on the left side of the Layout Painter. It contains the controls that represent the XML layout definition. You drag these controls from the controls palette into the layout tree. Each node in the layout tree represents an XML tag.

Using the button which is located to the right of the layout tree's title bar, you can hide the layout tree and the properties area. This enlarges the preview area. To redisplay the layout tree and property area, choose the small arrow which is shown in the left of the preview area's title bar.

Properties Area

The properties area is located below the layout tree. In this area, you specify the properties for the control which is currently selected in the layout tree.

Preview Area

The preview area is located in the middle of the Layout Painter. The following can be shown in the preview area:

HTML Preview Shows the page which is created using the controls in the layout area. This page is refreshed when you choose the preview button. See Defining the XML Layout for further information.
Code Assistant Helps you to write the adapter code. You can generate set/get methods and event-reaction methods based on your layout definitions. See Using the Code Assistant for further information.
Literal Assistant Helps you to prepare your layout for multiple languages. You can maintain texts of different languages for the literals that are referenced within the XML layout. See Using the Literal Assistant for further information.
XML Binding Helps you if you want to use XML files in order to access property values. See Using the XML Binding Tool for further information.

Using the toggle button which is located to the right of the preview area's title bar, you can

Controls Palette

The controls palette is located on the right side of the Layout Painter. It contains icons which represent the Application Designer controls. The controls palette is structured into sections (for example, Page and Container), where each section represents a certain type of control.

The sections that are shown in the controls palette and the content of a section depend on the layout template that has been used for the current layout.

A tool tip is provided which appears when you move the mouse pointer over a control. This tool tip also displays the XML tag which will be used in the XML layout.

Top of page