Lesson 4: Use box widgets to lay out a page

Use the EGL editor to create a logon page using box widgets to control formatting.

EGL Rich UI follows the Visual Formatting Model of the World Wide Web Consortium (W3C). This recommendation discusses concepts such as containing boxes, default positioning, and the flow of objects on the page. For more information, see http://www.w3.org/TR/CSS2/visuren.html.

In this lesson, you build the page without using absolute positioning of the boxes. This best practice allows the page to adapt more easily to different screen resolutions, browsers, fonts, and other factors that affect display.

In Rich UI, you typically use boxes to create rows, and then use columns to divide those rows.

Use box widgets for layout

Refer to the sketches that you made in Lesson 1. Your first version of the logon screen will use boxes for formatting.

EGL provides a default box to hold everything, named ui. You will divide ui in half by creating an upperBox to contain the text fields and the labels associated with them, and a lowerBox to contain the Submit button. Next, you will create separate boxes within the upperBox for the text fields and the labels. Finally, you will add the label, text field, and button widgets to the appropriate boxes.

In this way, the hierarchy of the elements is clear:
  • ui has two children:
    • upperBox
    • lowerBox
  • upperBox has two children:
    • upperLeftBox
    • upperRightBox
And so on. The following chart shows the complete hierarchy:

When you construct the layout that follows, you add boxes moving from left to right and top to bottom. By adding boxes in this order, you can be sure that you are not leaving areas of the outer box orphaned and inaccessible.

The following demonstration shows the steps in this task:

To create a layout by using boxes:

  1. Make sure you are in the Design view for your Rich UI Handler (logon1.egl). Notice that EGL has created a default box in the editor. The default box is named ui. EGL also sets ui as the value for the initialUI property.
    An empty screen except for a dotted line forming a large square.
  2. Drag a Box widget from the EGL Widgets palette onto the default box. By default, the Palettes view is located to the right of the editor pane. The entire default box turns green, indicating that you can drop the widget anywhere on the surface:
    The thin box at the top of the screen is available to receive the new box
    When you release your mouse button, the New Variable window appears.
  3. In the New Variable window, in the Variable name field, enter the following string:
    upperBox
  4. Click OK.
  5. Drag a second box onto the ui widget, to the right of upperBox.
    The new box goes next to the upper box widget.
    Study this picture for a moment. The yellow regions indicate locations where you can place a new box. The following locations are available:
    • The thin yellow line at the top of the screen. This indicates a position that is outside of the ui widget and that precedes it in the visual design.
    • The thin yellow line to the left of upperBox. This indicates a position that is inside the ui widget, but that precedes upperBox in the hierarchy.
    • The yellow square that represents the upperBox widget itself.
    • The larger green area to the right of upperBox. This position is also inside of the ui widget, but comes after upperBox in the hierarchy.

    After you click the Box icon in the Palette, try dragging it to various locations in the layout without releasing the mouse button. Watch the pop-up box to see how the green line that represents the new box moves in relation to the other widgets.

    You can also see the hierarchy of widgets in the Outline view, located in the lower left corner of the workbench by default. In this view, you can use your mouse to move the widgets; you can even drag widgets from the Palette onto the outline.

  6. In the New Variable window, in the Variable name field, enter the following string:
    lowerBox
  7. Click OK. Note that upperBox and lowerBox are displayed side by side. Later, you will use the columns property to adjust the positions of the boxes.
  8. Drag a new box onto upperBox.
    The new box goes into the small green square that represents the upperBox widget.
  9. Enter the following string as the Variable name:
    upperLeftBox
  10. Click OK.
  11. Drag a second box onto upperBox, to the right of upperLeftBox. Your target is a narrow line to the right of upperLeftBox. The pop-up box should show that your new box, which is represented by the green line, is a child of upperBox and a sibling of upperLeftBox.
    The target for the new box is a narrow green line next to the existing two inner boxes.
  12. Enter the following string as the Variable name:
    upperRightBox
  13. Click OK. You now have all the boxes you need to lay out the page. The next step is to arrange them.
  14. Select the ui widget by clicking inside the box until the outline of the box is displayed as a dotted line. Locate the Properties view, which is located by default in the lower left corner of the workbench. Enter 1 in the columns field.
    The columns property is the first in the list.
    When the columns property is blank, EGL places all objects one after another, left to right. When you set the columns property to 1, you tell EGL to place elements in a single column, with each element below the previous.
    The window is now divided into three parts; two divisions in the top half and one in the bottom.

    Although the shape is small, it should look familiar; this is one of the layout patterns that you sketched in Lesson 1. Next, you will fill in the page elements.

  15. Press Ctrl+S to save the file.

Add controls to the layout

Now that you have a layout defined by three separate boxes, you can add appropriate widgets to perform the work of the page.

The following demonstration shows the steps in this task:

To add widgets to the layout:

  1. From the EGL Widgets palette, drag a TextLabel widget onto the upperLeftBox widget.
  2. In the New Variable window, in the Variable name field, enter the following string:
    uidLabel
  3. Click OK. The label is displayed on the page with the name TextLabel.
  4. Make sure that uidLabel is selected and go to the Properties view. Change the text property to the following string:
    User name:
  5. Press Ctrl+S to save the file.
  6. Drag a second TextLabel widget onto the upperLeftBox widget.
  7. Enter the following string as the Variable name:
    pwdLabel
  8. Click OK. The label is displayed on the page with the name TextLabel.
  9. With the uidLabel selected, go to the Properties view and change the text property to the following string:
    Password:
    The label is displayed on the same line with the previous label.
    The Password and User Name labels are next to each other on the line.
     This is not the behavior you want; however, you can control it with the columns property of the containing box.
  10. Click the white space surrounding the label to select the upperLeftBox widget. In the Properties view, set the columns property to 1.
  11. Press Ctrl+S to save the file.
  12. Drag a TextField widget onto the upperRightBox widget.
  13. Enter the following string as the Variable name:
    uidField
  14. Click OK. A text entry field is displayed on the page as a small rectangle.
    The text field appears with a dotted line around it.
  15. Drag a PasswordTextField widget onto the upperRightBox widget and enter the following name as the Variable name:
    pwdField
  16. Click OK. As with the text label, the second widget appears next to the first.
  17. Click the white space surrounding the label to select the upperRightBox widget. In the Properties view, set the columns property to 1.
  18. Press Ctrl+S to save the file.
  19. Drag a Button widget to the lowerBox widget.
  20. In the New Variable dialog, in the Variable name field, enter the following string; then click OK:
    submitButton
  21. Click OK.
  22. Make sure that the new button is selected and go to the Properties view view. Change the text property to the following string:
    Submit
  23. Press Ctrl+S to save the file.
  24. Click the Preview tab at the bottom of the editor window. The completed UI is displayed.
    The completed UI has two text entry fields with labels and a Submit button.
  25. Compare this version of the logon window with the original sketch. Note the following issues:
    • The labels do not line up horizontally with their related fields.
    • The Submit button does not line up vertically with the labels.
    • The label font size does not match the font size on the button.

    You can resolve the font issue by using widget properties, but the other issues are more difficult. The next lesson offers a different approach to laying out the page, one that addresses the first two issues.

  26. Close the file by clicking the X icon on the tab that shows the file name (logon1.egl).

Lesson checkpoint

You created a layout by using boxes, and then added widgets to those boxes.
You learned how to perform the following tasks:
  • How to create boxes in a hierarchy
  • How to select objects
  • How to use the Properties view

Feedback