Make cosmetic changes to the second DataWindow object

Note

Now you modify the DataWindow object. You:

NoteColumns on freeform DataWindows Data fields on freeform DataWindow objects are still called columns, even though they are shown in a nontabular display.

Rearrange the columns and labels

Now you rearrange the columns and labels in the new DataWindow object. You can maximize the Design view for greater ease in manipulating the columns and their labels.

  1. Click the Address: label in the Design view.

    Hold the Ctrl key and click the address column.

    The two items are selected.

  2. Keep the Ctrl key pressed and click the following column labels and column controls:

    Label

    Column

    City:

    city

    State:

    state

    Zip Code:

    zip

    If necessary, scroll down until you can see all the columns in the DataWindow.

  3. Release the Ctrl key.

    Position the cursor on one of the selected objects and drag it to the top-right corner of the DataWindow object.

    The objects move together.

  4. Use the Ctrl+click technique to move the following label and column controls to the location indicated:

    Label

    Move with column

    Move under

    Company Name:

    company_name

    Last Name:

    Phone Number:

    phone

    Company Name:

  5. Drag the Detail band up below the last column label.

    This removes any extra space in the detail area.

    Some of the fields might overlap others. You fix this in the next exercise. The DataWindow should now look like this in the Design view:

    Shown is the Detail band of the Design view of the Data Window painter. It includes a series of labeled text fields, one for each of the columns included in the Data Window object. The labeled fields are arranged two to a line. Labels appear on the left of each pair and are right justified. The column names are left justified next to them. The zip code field and company name overlap each other on the same line.

    The DataWindow Preview view looks like this:

    Shown is the Preview view of the Data Window object. It includes a series of labeled text fields, one for each of the columns included in the Data Window object. The labeled fields are arranged two to a line and have actual data in them.

Align the columns and labels

Now you align the columns and labels on the new DataWindow.

  1. Select the Zip Code: label in the Design view.

    Move the Zip Code: label as close as possible to the company_name column.

    A narrow space should separate the left edge of the label box from the right edge of the column box.

  2. While the Zip Code: label is still selected, use the Ctrl+click technique to select the Address:, City:, and State: labels.

  3. Select Format>Align from the menu bar.

    A cascading menu of align options displays.

  4. Select the first option (Align left edges).

    PowerBuilder aligns the left edges of the selected objects with the left edge of the first item you selected (the Zip Code: label).

    Align left edges button with the text label Align L

    NoteSelecting an alignment tool from the PainterBar You can access a drop-down list of alignment tools by clicking the Align button on PainterBar2.

  5. Move the zip column so that it is next to the Zip Code: label.

    Align the address, city, and state columns with the zip column, just as you aligned the column labels.

    Shown is the Detail band of the Design view of the Data Window painter. It includes a series of labeled text fields  that are arranged two to a line. Labels appear on the left of each pair and are right justified. The column names are left justified next to them. The zip code field and company name, which share a line, no longer overlap each other. All the other fields on the right of the screen are aligned with the zip code field.

Display the arrow for a drop-down DataWindow edit style

The column for the customer state of residence has a DropdownDataWindow edit style. This is an extended attribute associated with the State column in the EAS Demo DB database. The (drop-down) DataWindow with which the column is associated has a list of states and their two-letter postal codes.

You can make the state selection list visible at all times in your application or you can display an arrow at all times to indicate that a selection list is available. Now you change the property for the state column to show the arrow at all times.

  1. Click the state column in the Design view.

    Make sure the Properties view displays.

    The Properties view displays properties of the column.

  2. Click the Edit tab in the Properties view.

    You might need to click the arrow keys near the top of the Properties view to display the Edit tab before you can click it. Notice that the Style Type selection is DropDownDW.

  3. Select the Always Show Arrow check box.

    Make sure the state column in the Design view is wide enough to display two characters plus the arrow symbol.

    An arrow appears next to the state column in the Design and Preview views. While the column is selected in Design view, you can make the column wider by holding the cursor over the right edge of the column until the cursor symbol changes to a double-headed arrow, then dragging the edge toward the rightmost frame of the view.

  4. Click the Save button in PainterBar1.

    Click the Close button in PainterBar1.