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