Version 8.2 (2013-03-18)
 —  Development Workplace  —

Defining the XML Layout

This document covers the following topics:


Previewing the Layout

If you want to find out how the current layout definitions are rendered on the page, you can preview the layout. The HTML preview of the layout is shown in the preview area. For example:

Preview

The preview area is a sensitive area. When you select a control in the preview area (for example, the title bar), this control is automatically selected in the layout tree.

Start of instruction setTo preview the layout

When the preview button is used with one of the other tools which are shown in the preview area, the tool is refreshed so that the latest information is shown. This is helpful, for example, if the Code Assistant is currently active in the preview area and you define a new method in the properties area. If you want to display this new method immediately in the Code Assistant, you choose the preview button.

You can define that a quick preview button is to be shown in addition to the regular preview button. See Preferences in the section Configuration, Log and Status Information.

Preview Modes

You set the preview mode on the Edit tab of the Layout Painter.

Note:
In the SWT client, you set the preview mode on a separate tab with the name Preview.

There are two different preview modes:

Run Application

This is the default setting.

As long as Run Application is activated, the latest changes to the adapter class (which have been made in the Java development environment) are used when you preview your layout.

Screen Test Only

When the name of an adapter class has not been defined in the model property of the page, or when an adapter class has been defined which does not yet exist, an error screen is shown when you try to preview your layout. In this case, you have the possibility to activate Screen Test Only. Your layout will then be loaded with an empty adapter. This means that you will not have any functionality. Any changes that you make in your Java development environment will not be reflected in the preview.

You can define which preview mode is to be active by default when the Layout Painter is started. See Preferences in the section Configuration, Log and Status Information.

Preview Configuration (SWT Client Only)

In the SWT client, the following options are available from the Preview tab:

SWT

When this option is selected, the preview is shown as in the SWT client.

HTML

When this option is selected, the preview is shown as in the browser.

When you change the preview configuration, this is immediately considered in the preview area.

Top of page

Setting Properties for a Control

When you select a control in the layout tree or in the HTML preview, its properties are shown in the properties area below the layout tree. Example:

Properties

If required, you have expand the layout tree until the control is shown for which you want to set the properties (for example, by clicking the plus sign in front of a node).

Note:
By clicking the icon of a node, you hide or expand the node's subnodes.

You can set properties in different ways:

The properties are explained in the Layout Elements documentation in which you can view the descriptions for all properties of a control at one glance.

Properties Area

You can set the properties directly in the properties area.

Start of instruction setTo set a property in the properties area

  1. Select the node for the control in the layout tree.

    Or:
    Select the control in the HTML preview.

    The properties for this control are now shown in the properties area at the bottom. For some properties, default entries are provided.

  2. Specify the value for the required property.

    Note:
    The values of some important properties (for example, the name or textid of the Title Bar control) are shown in the layout area: in round brackets after the XML tag. If you modify the value of such a property, the changed value will be visible when you click on the layout tree.

Property Editor

You can set the properties using the Property Editor. In this case, you can access detailed help information on each property.

Start of instruction setTo set a property using the Property Editor

  1. Select the node for the control in the layout tree.

    Or:
    Select the control in the HTML preview.

  2. From the Edit tab of the Layout Painter, choose Property Editor.

    The Property Editor dialog appears, listing all properties of the control. Example:

    Property editor

    For some controls, the properties are spread over several pages.

  3. If required, choose the Next button to display more properties for this control.

    Or:
    Choose the corresponding entry on the right of the dialog.

  4. Choose the name of a property to display detailed information on this property. This information is shown below the list of properties.

  5. Enter the required value for a property in the text box or, if available, choose the value from the drop-down list box.

  6. Choose the Finish button to close the dialog.

    Any changes you have applied in the dialog are saved.

Event Editor

You can set the properties using the Event Editor. The Event Editor is used in the same way as the Property Editor, but it shows only the properties which bear a reference to the program code.

Start of instruction setTo set a property using the Event Editor

  1. Select the node for the control in the layout tree.

    Or:
    Select the control in the HTML preview.

  2. From the Edit tab of the Layout Painter, choose Event Editor.

    The Event Editor dialog appears, listing only the *prop and *method properties of the control. Example:

    Event editor

  3. Choose the name of a property to display detailed information on this property. This information is shown below the list of properties.

  4. Enter the required value for a property in the text box or, if available, choose the value from the drop-down list box.

  5. Choose the Finish button to close the dialog.

    Any changes you have applied in the dialog are saved.

Top of page

Adding Controls to the Layout

The controls that you can add to the layout can be found in the various sections of the controls palette. You simply drag them from the controls palette onto the corresponding node in the layout tree or to the HTML preview. The HTML preview is immediately refreshed.

Control palette

For detailed information on the controls, see the Layout Elements documentation.

Note:
You can also add controls to the layout tree as described in Managing the Nodes in the Layout Tree.

Start of instruction setTo add a control to the layout

  1. Open the required section of the controls palette by choosing the corresponding button (for example, the Controls button).

    When you move the mouse over a control, a tool tip appears which also displays the control name which will be used in the XML layout. For example:

    Tooltip

  2. Drag the control from the controls palette onto the required node in the layout tree.

    Or:
    Drag the control from the controls palette and drop it in the HTML preview.

    Note:
    A control can only be inserted at a valid position. Thus, it may happen that the control is not inserted in the node which was highlighted when you dropped the control, but at a different position.

    When you drop information, the system will sometimes respond by offering a context menu with certain options about where to place the control. Depending on the current context, different commands are available. For example:

    Context menu

    Note:
    When you move the mouse outside the context menu, the context menu disappears. The control is not inserted in this case.

    The new node is automatically selected in the layout tree so that you can maintain its properties directly in the properties area.

Top of page

Changing the Appearance of Text

Instead of setting the corresponding property for a control, you can change the appearance of text (for example, on a button) using the commands in the Text section of the Edit tab.

Text

You can change the following:

Start of instruction setTo change the appearance of text

  1. Select the node for the control in the layout tree.

    Or:
    Select the control in the HTML preview.

  2. Open the Edit tab of the Layout Painter and choose the desired effect in the Text section.

    Your change is immediately shown in the HTML preview.

Top of page

Defining a Background Image

Not available in the SWT client.

You can define a background image for your page. The image must be a file with the extension gif, jpeg or jpg.

Start of instruction setTo define a background image

  1. From the Insert tab of the Layout Painter, choose Background Image.

    A dialog appears.

  2. Specify the path to your image file or use the Browse button to do so.

    You have to specify an image file from your local file system. The file must be located in the same directory as your web application (or any subdirectory). When you specify an absolute path, this will automatically be converted to a relative path.

  3. Choose the Take Over button.

Top of page

Defining a Style Sheet

Not available in the SWT client.

You can assign a style sheet to your page. This can either be a predefined style sheet or one of your own style sheets that you have created using the Style Sheet Editor. The style sheet must be a file with the extension css.

Instead of setting the corresponding property for the page (see Static Selection of the Style Sheet File in the Special Development Topics), you can define a style sheet as described below.

Start of instruction setTo define a style sheet

  1. From the Insert tab of the Layout Painter, choose Style Sheet.

    A dialog appears.

  2. Specify the path to your style sheet or use the Browse button to do so.

    You have to specify a style sheet from your local file system. The file must be located in the same directory as your web application (or any subdirectory). When you specify an absolute path, this will automatically be converted to a relative path.

  3. Choose the Take Over button.

Top of page

Defining Hot Keys

You can assign hot keys to the controls PAGE, FIELD and ROWTABLEAREA2. For example, you can define the hot key CTRL+S for calling the method onSave. When hot keys can be defined for a control, a Hot keys tab is available in the properties area.

See also Extended Hot Key Management in the Special Development Topics.

Start of instruction setTo define hot keys

  1. Select the control for which you want to define hot keys.

    Note:
    When a control is selected for which hot keys cannot be defined, your hot key definition will apply to the PAGE control.

  2. From the Insert tab of the Layout Painter, choose Hot Key.

    A dialog appears. When hot keys have already been defined, they are shown. Example:

    graphics/dt-layout-hotkeys.png

  3. When hotkeys have already been defined, choose the Add New Line button to add an additional hotkey.

    Note:
    To remove a hot key, select the corresponding row and choose the Remove Selected Lines button.

  4. From the drop-down list box in the first column, select the key that you want to use as a hot key. For example, "83" represents the S key and "120" represents the F9 key.

    Or:
    In the text box of the drop-down list box in the first column, enter a text ID that is to be translated by the multi language management.

  5. Define each key (CTRL, SHIFT and/or ALT) which is to be used for the hot key by selecting "true" from the corresponding drop-down list box.

    Note:
    If neither "true" nor "false" is selected for a key, the default setting "false" is used.

  6. In the Method column, specify the name of the method that is to be invoked when the user presses the hot key.

  7. When all hot keys have been defined, choose the Take Over button.

Top of page

Managing the Nodes in the Layout Tree

The following topics are covered below:

Moving Nodes

You can manage the nodes in the layout tree using the following buttons which are shown below the layout tree:

Button Description
Move to top Moves the selected node up to first position in the tree.
Move up Moves the selected node up to the previous position in the tree.
Move down Moves the selected node down to the next position in the tree.
Move to bottom Moves the selected node down to last position in the tree.

When an operation is not allowed, a corresponding message is shown in the status bar.

Using the Clipboard

You can manage the nodes in the layout tree using the following commands from the Edit tab of the Layout Painter:

Button Command Description
Cut Cut Cuts the selected node.
Copy Copy Copies the selected node.
Delete Delete Deletes the selected node.
Undo Undo Undoes the previous action. The previous action can be, for example, a move operation or a changed property value.
Redo Redo Redoes the previous undo action.
Paste as first Paste as first Pastes the cut or copied node as the first subnode of the selected node.
Paste as last Paste as last Pastes the cut or copied node as the last subnode of the selected node.

Note:
To copy and paste information in the properties area, use the key combinations CTRL+C and CTRL+V.

Drag-and-Drop

You copy or move the nodes in the layout tree using drag-and-drop.

Start of instruction setTo copy or move a node using drag-and-drop

  1. Select the node you want to move so that it is highlighted.

    Press SHIFT or CTRL, if you want to select more than one node.

  2. Press the left mouse button and keep it pressed.

  3. Drag the mouse to the target node.

    While you drag the mouse, a tool tip in light colors is shown for the node(s) you are currently dragging.

  4. Release the mouse button.

    A context menu appears and you have choose one of the following commands:

    Command Description
    Add a Copy in front of Node Adds a copy of the selected node before the target node.
    Add a Copy behind Node Adds a copy of the selected node after the target node.
    Move Item in front of Node Moves the selected node and inserts it before the target node.
    Move Item behind Node Moves the selected node and inserts it after the target node.

    Note:
    When the copy or move operation is not allowed, the context menu does not appear. Instead, a corresponding message is shown in the status bar.

  5. Choose the required command from the context menu.

    Note:
    To cancel the drag process, move the mouse outside the context menu. The context menu will disappear and any selected nodes will keep their current position.

Context Menus

You can manage the nodes in the layout tree using context menus. The following commands may appear in a context menu:

Command Description
Add as first Subnode Adds a control as the first subnode of the selected node. A cascading menu is available for this command, containing all controls that can be added as a subnode of the selected node.
Add as last Subnode Adds a control as the last subnode of the selected node. A cascading menu is available for this command, containing all controls that can be added as a subnode of the selected node.
Add as preceding Sidenode Adds a control before the selected node, on the same level as the selected node. A cascading menu is available for this command, containing all controls that can be added as a sidenode of the selected node.
Add as subsequent Sidenode Adds a control after the selected node, on the same level as the selected node. A cascading menu is available for this command, containing all controls that can be added as a sidenode of the selected node.
Cut Cuts the selected node.
Copy Copies the selected node.
Paste as first Subnode Pastes the cut or copied node as the first subnode of the selected node.
Paste as last Subnode Pastes the cut or copied node as the last subnode of the selected node.
Remove Deletes the selected node.
Properties Invokes the Property Editor.
Open all Subnodes Opens all subnodes of the selected node.
Close all Subnodes Closes all subnodes of the selected node.

Top of page

Saving the Layout

When you save the layout, all of your changes in the Layout Painter are saved. This includes, for example, code that has been generated with the Code Assistant and language-specific texts that have been defined with the Literal Assistant.

When you save a layout for the first time, an HTML file is generated (in addition to the XML file) which is placed into the root directory of your application project. This HTML file is updated each time you save the layout.

Note:
When you save the page, the preview area is automatically updated.

Start of instruction setTo save the page

Start of instruction setTo save the page with a different name

  1. From the Home tab of the Layout Painter, choose Save As.

    A dialog box appears.

  2. Enter the new file name. The name must end with ".xml"

  3. Choose the Save button.

    A copy of the previous layout is now available in the current project. It can be edited immediately.

Top of page

Displaying the Layout in a New Browser Window

Not available in the SWT client.

You can display and test the current layout, which is normally shown in the preview area, in a separate browser window. The browser shows the URL that is used to invoke this page, for example, http://localhost:51000/cis/servlet/StartCISPage?PAGEURL=/cisyourfirstproject/helloworld.html&POPUPTITLE=cisyourfirstproject/helloworld.

Start of instruction setTo display the layout in a new browser window

Top of page