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:

  1. Move the mouse pointer above the Customer Number Static text part, and to the left of all the Static text parts.
  2. Press and hold the left mouse button and drag the gray rectangle so that it covers all Static text parts.
  3. 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.

  4. Release the left mouse button. All Static text parts are selected.
  5. 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.
  6. Select Align, and then the fourth alignment choice offered for left justification. All Static text parts are aligned to the left.
  7. 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:

  1. Select the Static text parts as described in the previous section for vertical alignment.
  2. Display the pop-up menu for these parts.
  3. 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:

  1. Select the Customer Number Static text part and the CUSTNO Entry field part.
  2. Display the pop-up menu for the Customer Number Static text part.
  3. 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.
  4. 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.
  5. The Combination box requires some consideration before aligning. First you need to create a Static text part called Zip Location.

  6. 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.
  7. 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.
  8. 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.
  9. 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:

  1. Select all Entry field parts.
  2. Maximize the Customer Information Window to easily select all the parts.

  3. Display the pop-up menu for the CUSTNO Entry field part.
  4. Select Align and then select the fourth choice offered for left justification.
  5. 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:

  1. Click on the CCITY Entry field part to make it the active part. Sizing handles mark its border.
  2. 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.
  3. Use the arrow keys to move to the CPHONE Entry field part.
  4. Select this part also by using the Ctrl key and the space bar.
  5. 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:

  1. Move the mouse pointer to the bottom border of the Customer Information window so that it turns into a double-arrow.
  2. Press and hold the left mouse button and move the window frame so that it can accommodate the additional Push button part.
  3. 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.

  4. Select the Push button part in the Parts Palette window and click below the Zip location Static text part.
  5. To align the Push button part with the Static text part, select the Zip location Static text part and the Push button part.
  6. Display the pop-up menu for the Static text part.
  7. Select Align and then left justification. The Push button part is vertically aligned with the Static text parts in the window.
  8. To display the Properties notebook for this part, double-click on the Push button.
  9. Change the Part name field to INFOOK and its Label field to OK
  10. Move to the Style tab of the notebook.
  11. Select the Default setting. This action makes the OK push button part the default action if the Enter key is pressed.
  12. Click OK to save and close the notebook.
  13. Your design window should look like the following:

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