This document covers the following topics:

• Previewing the Layout

• Setting Properties for a Control

• Adding Controls to the Layout

• Changing the Appearance of Text

• Defining a Background Image

• Defining a Style Sheet

• Defining Hot Keys

• Managing the Nodes in the Layout Tree

• Saving the Layout

• Displaying the Layout in a New Browser Window

---

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:

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.

To preview the layout

• Choose the following button which is shown at the top of the Layout Painter.

  

  The preview area is updated according to the defined preview mode (see below).

  If the system finds wrong definitions, a corresponding message is displayed in the status bar. You can view the protocol to display more information about the problems that occurred when generating the preview page. See Protocol in the section Configuration, Log and Status Information.

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.

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.

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:

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).

You can set properties in different ways:

• Properties Area

• Property Editor

• Event Editor

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.

To 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.

To 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:

   

   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.

To 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:

   

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.

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.

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

To 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:

   

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:

   

   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.

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.

You can change the following:

• font

• font size

• style (bold, italic, underline)

• alignment (left, center, right)

• border (not available in the SWT client)

• font color

To 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.

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.

To 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.

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.

To 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.

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.

To 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:

   

3. When hot keys have already been defined, choose the Add New Line button to add an additional hot key.

   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.

Managing the Nodes in the Layout Tree

The following topics are covered below:

• Moving Nodes

• Using the Clipboard

• Drag-and-Drop

• Context Menus

Moving Nodes

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

Button	Description
	Moves the selected node up to first position in the tree.
	Moves the selected node up to the previous position in the tree.
	Moves the selected node down to the next position in the tree.
	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	Cuts the selected node.
	Copy	Copies the selected node.
	Delete	Deletes the selected node.
	Undo	Undoes the previous action. The previous action can be, for example, a move operation or a changed property value.
	Redo	Redoes the previous undo action.
	Paste as first	Pastes the cut or copied node as the first subnode of the selected node.
	Paste as last	Pastes the cut or copied node as the last subnode of the selected node.

Drag-and-Drop

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

To 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.

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.

To save the page

• Choose the following button which is shown at the top of the Layout Painter.

  

To 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.

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.

To display the layout in a new browser window

• From the Tools tab of the Layout Painter, choose Start in New Browser Window.