Designing Pages

The primary design activity involves adding containers and components and arranging them with layouts to create the application's visual appearance. The best way to do this is to use different layouts applied to nested containers to control the positioning and sizing of components.

The following procedure demonstrates the basic steps for defining a UI. This example uses the Nexaweb Java schema.

Using the Palette and Properties views, drag and drop components into the java-index.xal UI file, and modify them to create a Login dialog as described in the following steps.

1. Drag a Dialog component from the Containers drawer of the Palette view onto the java-index.xal file.

2. Add a gridPane with two columns to the dialog as follows:

Click on the Layout Panes drawer
Drag a gridPane onto the dialog component in the Outline view.

3. Add a label to the dialog as follows:

Click on the Components drawer to open it.
Drag a label component from the Components drawer onto the dialog.
Right click on the label and select Edit Component Text.
Enter: Name: in the Change Component Text dialog and click OK.

4. Drag a textField component from the Components drawer onto the dialog.
Studio aligns the textField in a gridLayout beside the label.

5. Drag a label component from the Components drawer onto the dialog.
Studio aligns the label in the first column beneath the first label that you added.

Right click on the label and select Edit Component Text.
Enter: Password: in the Change Component Text dialog and click OK.

6. Drag a passwordField component from the Components drawer onto the dialog.
Studio aligns the passwordField in the second column beneath the textField and beside the second label that you added to the dialog.

7. To change the height and width of the dialog, either:

Visual Editor	Properties view
Click on the dialog component to select it and resize handles appear around the component Place your cursor over one of the resize handles and then drag the edge of the dialog to the size you want it. Or, to resize the component proportionally, place your cursor over one of the corners of the component until a double arrow appears, then drag the corner to the size that you want the component.	Click on the dialog component to select it. The Properties view displays the dialog's properties Scroll through the Properties view to the Size & Location section. Specify the height or width in pixels (px)

8. To add a title to the dialog:

Click in the dialog.
The Properties view displays the dialog's properties.
Scroll through the Properties view to the Window section
Click in the Value field beside Title and enter: Login.
Click in the dialog, the title that you entered appears in the dialog title bar.

The login dialog that you created appears similar to the following:

$image\img00010.gif$

Figure 8: Login Dialog

The source for this dialog appears similar to the following:

</gridPane>

</dialog>

</freePane>

</rootPane>

</xal>