IBM Workplace Forms: Guide to Building and Integrating a Sample Workplace Forms Application

80 IBM Workplace Forms: Guide to building and integrating a sample Workplace Forms application

Relative positioning defines an item’s position relative to an anchor item (Example 4-2).

Example 4-2 XFDL code for relative positioning of an item

<itemlocation>

<ae>

<ae>before</ae>

<ae>FIELD1</ae>

</ae>

</itemlocation>

Regardless of whether you choose to use absolute or relative positioning, you can use the

Arrange tools to assist you in placing items. The Arrange tools include these:

򐂰 Reposition:

Allows you to precisely place an item above, below, or to the right or left of another item.

򐂰 Align:

Aligns an edge or center of an item with the edge or center of another item.

򐂰 Resize:

Allows you to move an item’s border so that it lines up with another item’s edge or center.

If you use absolute positioning, the Arrange tools place items using x and y coordinates. If

you use relative positioning, the tools define item positions relative to the anchor item.

Building the layout

To build the layout of the form follow these basic steps:

򐂰 Place Lines and Boxes:

Begin by placing all the necessary lines and boxes on your form. Start at the top and place

each horizontal or vertical line as you work down the paper form.

򐂰 Place Labels:

Begin at the top of the page and work through the paper form placing each label as you

come to it.

򐂰 Preview:

Once you have placed all lines, boxes and labels on your form, preview and print the form

to check that everything lines up correctly and prints properly. Repeat the preview,

correction, and modification process until all you have resolved any problems with the

form.

4.4.8 Reviewing the layout for the traditional form page

We have divided the traditional form page into five parts:

򐂰 Sales person section

򐂰 Customer section

򐂰 Products section

򐂰 File attachments section

򐂰 Signature and approval section

Chapter 4. Building the base scenario: Stage 1 81

For each of these sections, we created different boxes that produced a table layout for the

labels and fields to be positioned on. You can use different background colors for the boxes to

mark up headings and sections of your page as shown in Figure 4-18.

Figure 4-18 Basic layout of the traditional form page

82 IBM Workplace Forms: Guide to building and integrating a sample Workplace Forms application

You can configure the background colors in the Appearance section of the item properties by

clicking into the background color box as shown in Figure 4-19.

Figure 4-19 Background color selection of box items