Lesson 5: Use columns to lay out a page

Use the EGL editor to create a logon page that uses the columns property to control formatting.
In the previous lesson, you forced elements to line up on the page by confining them in containers. This ultimately proved inefficient, as it took too much effort to control every aspect of the page. In this lesson, you will use the built-in behavior of the widgets to more efficiently accomplish the same task.

Use columns for layout

In a new file, you will create a version of the page that uses only a single box widget, which is required to hold the other elements. You will use less code to end up with a better result.

The following demonstration shows the steps in this task:

To create a layout by using columns:

  1. Create a second Rich UI Handler named logon2.egl:
    1. Right-click the PasswordWindow project, then click New > Other. Expand EGL and double-click Rich UI Handler.
    2. For the package name, specify ruihandlers. For the file name, type logon2. Click Finish.
    The new file eventually opens in the editor.
  2. Make sure that you are in the Design view for your Rich UI Handler (logon2.egl). Notice that EGL has created the ui box in the editor by default. Drag a TextLabel widget onto the ui widget.
  3. In the New Variable window, in the Variable name field, enter the following string:
    uidLabel
    Note: Names must be unique within a handler only.
  4. Click OK. The label is displayed on the page with the name TextLabel.
  5. Make sure that uidLabel is selected and go to the Properties view. Change the text property to the following string:
    User name:
  6. Drag a TextField widget onto the ui widget, after the uidLabel.
    The cursor points to a green box to the right of the User name label
  7. Enter the following string as the Variable name:
    uidField
  8. Click OK. A text entry field is displayed on the page as a small rectangle immediately after the label.
    The text field is displayed with a dotted line around it.
  9. Press Ctrl+S to save the file.
  10. Drag a second TextLabel widget onto the ui widget.
  11. Enter the following string as the Variable name:
    pwdLabel
    The label is displayed on the page with the name TextLabel. The label appears on the line below the previous two widgets.
    All the elements appear on a single line
     As you saw in the previous lesson, the number of widgets per line is controlled by the columns property. EGL automatically set this property to 2 for the ui widget, which happens to be the correct value for this lesson. To see how the columns property affects this display, try clearing the value in the Properties view.
  12. In the Properties view, change the text property to the following string:
    Password:
  13. Drag a PasswordTextField widget onto the upperRightBox widget in the upper right quadrant of the page.
  14. Enter the following string as the Variable name:
    pwdField
  15. Click OK.
    The labels alternate with the text input fields
  16. Press Ctrl+S to save the file.
  17. Drag a Button widget to the ui widget.
  18. Enter the following string as the Variable name:
    submitButton
  19. Click OK.
  20. Make sure that the new button is selected and go to the Properties view. Change the text property to the following string:
    Submit
  21. Press Ctrl+S to save the file.
  22. 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.

    Notice that the labels are better aligned with the corresponding input fields. The left margin of the second column, which holds the input fields, begins at the right edge of longest element in the first column.

    The page can still be improved. For example, the uidLabel is too close to the uidField and the Submit button is too close to the field labels. Also, the font size on the labels does not match the font size on the button. You can fix these and other issues by using various widget formatting properties, which you will learn about in the next lesson.

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

Lesson checkpoint

You just recreated the logon page, using columns to format the elements on the page.
You learned more about the way EGL uses columns to format a page:
  • In a two-column format, EGL places elements alternately in each column.
  • The default width of a column is determined by the widest element within it.
  • You can use columns to solve many basic layout problems, giving you smaller programs than you would have if you used boxes for formatting.

In this case, using columns alone proved to be a better solution than using boxes. However, you might find other situations where boxes are necessary to format the page properly.


Feedback