4.3 Aligning, Sizing and Spacing Added Parts
Now that all the parts required
to make the Customer Information window have been created, you might want to re-arrange
them within the window.
If you are comfortable with the features of the GUI designer, you can skip this lesson.
You can proceed to the next lesson, even if some of the fields are not perfectly aligned
or spaced. Remember that in order for Exercise 4 to show a complete checkmark, you will
have to click on the completed lesson button.
Aligning Static Text Parts
Let's align all Static text parts containing descriptive information
in the Customer Information window to the same vertical axis.
Follow these steps:
- Move the mouse pointer above the Customer
Number Static text part, and to the left of all the Static text
parts.
- Press and hold the left mouse
button and drag the gray rectangle so that it covers all Static text
parts.
Maximize the Customer Information Window to easily
select all the parts. Also make sure all the parts you want to align are underneath each
other. This makes it easier to select all the parts.
- Release the left mouse button. All
Static text parts are selected.
- To display the pop-up menu for the
Customer Name Static text, click on the right mouse button while the
mouse pointer is located somewhere over this part.
- Select Align, and
then the fourth alignment choice offered for left justification. All Static text
parts are aligned to the left.
If you selected the wrong alignment/spacing option so
that the selected parts are overlaying each other, you can use the UNDO
function to return to the original state. To do this, select the window part by clicking
the left mouse button on the title bar of the window. Press the right mouse button, and
then select Edit and Undo from the pop-up menus.
The Customer Information window should look similar to the following:
Spacing Static Text Parts
Let's evenly space the Static text parts Customer Name,
Customer Contact, Phone Number and Address.
Follow these steps:
- Select the Static text
parts as described in the previous section for vertical alignment.
- Display the pop-up menu for these
parts.
- Select Space, and
then the fourth spacing choice offered. It looks like this:
. This evens out the spacing between the selected parts.
Aligning Text and Entry Field
Parts
Now let's horizontally align the Entry field parts to the
corresponding Static text parts.
Follow these steps:
- Select the Customer Number
Static text part and the CUSTNO Entry field part.
- Display the pop-up menu for the Customer
Number Static text part.
- Select Align and
then the second alignment choice. It looks like this:
The selected parts are aligned to an imaginary horizontal line
running through the Customer Number Static text part.
- Repeat these steps for all
remaining Static text parts and Entry field parts so
that each Static text part is horizontally aligned with each Entry field
part.
The Combination box requires some
consideration before aligning. First you need to create a Static text
part called Zip Location.
- Click on the Static text
icon from the Parts Palette window and move the icon to the Customer Information window.
Use the Properties notebook to change the title to Zip Location.
- Click OK to save
and close the Properties notebook. Remember to left align the Zip Location
Static text part with the other Static text parts.
- To align the Combination box with
the Zip Location Static text part, first resize the Combination box so it
will hold two or three entries. Then top align the two parts.
The Customer Information window
should look similar to the following:
Aligning and Sizing Entry
Field Parts
Let's align all Entry field parts to the same vertical axis.
Follow these steps:
- Select all Entry field
parts.
Maximize the Customer Information Window to easily
select all the parts.
- Display the pop-up menu for the CUSTNO
Entry field part.
- Select Align and
then select the fourth choice offered for left justification.
The Customer Information window
should look similar to the following:
Changing the Size of Entry
Field Parts
You might also want to change the size of some of the Entry field
parts. These parts are long because of the definition from DB2/400. You can resize the CPHONE
Entry field part to be the same size as the CCITY Entry field part.
Even though fields
are sized according to their definition when field references are used, you may want to go
through the following steps to familiarize yourself with the sizing tools that are
available.
Follow these steps:
- Click on the CCITY
Entry field part to make it the active part. Sizing handles mark its border.
- Move the middle square on the
right-hand side until the field size is reduced to the right border of the CZIP
Entry field part.
- Use the arrow keys to move to the CPHONE
Entry field part.
- Select this part also by using the
Ctrl key and the space bar.
- Select Size and
then select the first choice offered
from the pop-up menu over the CCITY Entry field part. The
size of the CPHONE Entry field part is reduced to the size of the CCITY
Entry field part.
Adding a Push Button Part
Let's add a Push button part to the Customer Information window that
allows the user to close this window and return to the Customer Inquiry window.
Follow these steps:
- Move the mouse pointer to the
bottom border of the Customer Information window so that it turns into a double-arrow.
- Press and hold the left mouse
button and move the window frame so that it can accommodate the additional Push
button part.
All parts in the Customer Information window stay at
the top of the window. The focal point for all parts in a Window with canvas
part is the upper left corner of the window.
- Select the Push button
part in the Parts Palette window and click below the Zip location Static
text part.
- To align the Push button
part with the Static text part, select the Zip location
Static text part and the Push button part.
- Display the pop-up menu for the Static
text part.
- Select Align and
then left justification. The Push button part is vertically aligned with
the Static text parts in the window.
- To display the Properties notebook
for this part, double-click on the Push button.
- Change the Part name
field to INFOOK and its Label field to OK
- Move to the Style
tab of the notebook.
- Select the Default
setting. This action makes the OK push button part the default action if
the Enter key is pressed.
- Click OK to save
and close the notebook.
Your design window should look
like the following:
- To save the changes to your
project, select the Save Project icon on the tool bar.
Click on
to indicate that you've done all the steps.