Lesson 6: Format the page

You can use the EGL editor Properties view to format the elements in your Rich UI Handler.

Most of these properties have CSS equivalents. After you experiment with page formatting by using the editor properties, try to make changes to the PasswordWindow project CSS file to accomplish the same effects.

This lesson uses the following properties:

Use properties to format boxes

When you use properties, be aware of which widget you have selected in the editor. For example, if you change the font for a box, you change all text elements within the box to the new font. If you meant to change the font for a label only, you might end up with a surprise.

The first exercise use the logon1 program. The multiple boxes in this program make some aspects of the formatting clearer.

The following demonstration shows the steps involved in this task:

To format boxes using properties:

  1. Open logon1.egl in the EGL editor.
  2. In the Design view, select the upperLeftBox widget.
  3. In the Properties view, click the button for backgroundColor. In the Color selection window, click Name format to choose a color by name from the center section of the window. Select a pastel color such as AliceBlue and click OK. To remove the color, you must click Custom and leave the value blank.
  4. Expand the Border group and make the following changes:
    1. Click the borderColor button. In the Color selection window, click Name format to choose a color by name. Select Black and click OK.
    2. For borderWidth, enter the number 3. This represents 3 pixels; unlike other properties that take a unit of measure, such as fontSize, borderWidth accepts numerals only.
    3. For borderStyle, select Solid.
    4. Switch to Preview mode, where you should see the following layout:
      The quadrant that contains the labels is displayed with a blue background.
  5. Save and close the file.

Use properties to format content

Be aware of your selection border. Your selection determines whether you change the format of a single element on the page or all elements within a container.

The following demonstration shows the steps in this task:

To format content by using properties:

  1. Open logon2.egl in the EGL Rich UI editor if it is not already open.
  2. Select the uidLabel widget ("User name:"), then specify monospace for the font property. The Courier typewriter font is a typical monospace font.

    To see what fonts are available on your system, open a word processor such as Lotus Symphony and look at the Font menu. The EGL editor accepts font family designations like "serif", "sans-serif", and "monospace" as well as specific font names like "Courier New." Before you get too creative, remember that if the user's system does not have the specified font installed, the browser will use a default.

    Most browsers default to Times New Roman. However, the default font for the EGL widgets is Arial (a common Windows sans-serif font), which is specified in the CSS for the Rich UI widgets project, com.ibm.egl.rui.

  3. Select the ui widget and specify serif for the font property. Nothing changes in the display because the CSS of the individual widgets overrides the properties of the outer container.
  4. Select the uidLabel widget and clear the font name. The label changes to the default sans serif font.
  5. Select the ui widget. Clear the font property and specify a fontSize of 10 pt. The fontSize property defaults to pixels (px), so to use point sizes, you must specify that unit of measure (pt). You can also specify relative sizes, as you can in CSS, from xx-large to xx-small. The font in the labels now matches the font on the Submit button.
  6. Select the uidLabel widget, expand the Spacing group, and set the paddingRight field to 6. There is now a reasonable space between the labels and the input fields.
  7. Select the pwdLabel widget, go to the Spacing group, and set the paddingBottom field to 20. This moves the Submit button to a more comfortable distance from the labels.
  8. Select the ui widget, go to the Spacing group, and set the margin field to 10. The elements move away from the edges of the window.
  9. Save the file and click Preview. The completed page layout is easy to read and use:
    The completed page layout includes two entry fields and a Submit button.
You have finalized the layout for the logon page. In the next lesson, you will learn how to bind a function to the Submit button that validates the name and password you enter. But first, here is a brief introduction to using style sheets with Rich UI.

Use CSS to format content

This tutorial is not intended as a course in cascading style sheets (CSS). However, one example should give you an idea of how to use CSS with the EGL editor.

The following demonstration shows the steps in this task:

To format content by using CSS:

  1. In your PasswordWindow project, open the file WebContent/css/PasswordWindow.css.
  2. In the CSS editor, add the following lines to the end of the file:
    .sans {
      font-family:sans-serif;
      font-size:10pt
      }
    This defines a class named "sans" that specifies the same font characteristics that you had previously specified by using properties. Save the file.
    The left pane shows samples of the styles; the right pane shows the code in the CSS file.
  3. Close PasswordWindow.css and open logon2.egl again.
  4. Select the ui widget and clear the fontSize property. Both labels revert to the default font size.
  5. For the class property, specify sans.
  6. Save the file and click Preview. The labels display in 10-point Arial again.
    The completed page again.

Lesson checkpoint

You learned several different ways to format EGL Rich UI widgets.
Working with boxes, you changed the following properties:
  • Background color
  • Borders
Working with elements within a container, you changed the following properties:
  • Font style and size
  • Padding

You also saw how you can use cascading style sheets instead of properties to format content.


Feedback