Progress
Application Development
Environment — Getting Started


Detailed Main Window Procedure

The following sections lead you through assembling your main window in more detail.

Creating a SmartWindow

The first step in assembling the main window is to create a new SmartWindow to serve as a container for other SmartObjects.

Follow these steps to create a new SmartWindow:

  1. Open the New dialog box and choose a SmartWindow:
  2. A new, untitled SmartWindow opens:

    A SmartWindow Cue Card also opens:

    Each time you create a new SmartObject, the AppBuilder displays a Cue Card for the type of SmartObject you are creating. The Cue Card provides useful information including an explanation of how the SmartObject works and key steps to follow while creating that SmartObject.You do not need to use the Cue Cards for this tutorial.

    Remember, when you use the AppBuilder to develop an application, Progress Cue Cards are available to assist you. If you close the Progress Cue Cards, you can always open them again using the Help Cue Card option from the AppBuilder menu bar.

  3. Choose the Object Properties icon in the AppBuilder toolbar.
  4. The property sheet for the new SmartWindow opens. A property sheet allows you to specify various properties such as the dimensions and position of a widget, a visual element of a graphical user interface. A basic property sheet of a widget allows you to specify the column, row, height, and width in character units, as shown in the following figure:

    The Advanced button on the Property Sheet opens the Advanced Properties dialog box. A widget’s Advanced property sheet allows you to specify the x and y coordinates of the widget and its height and width in pixels. In both the Basic and Advanced property sheets, the widget’s coordinates are relative to its parent. The coordinates of a window are relative to the screen:

  5. In the Geometry section of the Basic property sheet, type 147.00 for the Width and 25.50 for the Height. These dimensions resize the window so that it is large enough to hold the objects you are going to add.
  6. Choose OK in the property sheet. The main window reopens with its new dimensions:
  7. Notice that the default frame retained the original dimensions of the SmartWindow. Because SmartContainers can contain more than one frame, their default frames do not automatically resize when you expand the SmartContainer.The frames in design windows for other types of SmartObjects do resize automatically with the window.

  8. Use the frame’s handles to make the frame fill the entire SmartWindow:

You are now ready to define the sections of the main window. When you ran the sample application in "Working With the Sample Application," you saw that the Order Tracking System main window is divided into these sections:

Defining Sections Of the Main Window

In this section, you add a graphic banner to the main window. After adding the banner, you define the Customer, Order, and Order Line sections.

Follow these steps to define the sections in the main window:

  1. Choose the Image button in the Object Palette and place one on your window.
  2. A black square opens in the main window:

  3. Double-click the square to open its property sheet.
  4. The IMAGE–1 property sheet opens:

  5. Choose the Image button to open the Choose Image Files dialog. Browse to the images folder in your working directory. By default, this is the \Progress\wrk\images directory.
  6. Select the s2_banr.jpg image and choose Open.
  7. The s2_banr.jpg file and the other image files appear in the File list. The selected image previews to the right of the file list:

    NOTE: The image appears in the Preview section only if you have selected the Preview option.

  8. Accept the selected image and close the property sheet to return to your workspace.
  9. Resize the banner and position it, as shown in the following figure:
Outlining the Customer, Order, and Order Line Sections

After creating the main window and adding the banner, your next task is to divide the window into Customer, Order, and Order Line sections.

Follow these steps to outline the sections:

  1. Double-click the Rectangle icon in the Object Palette. A lock appears on the icon indicating that you can add multiple rectangles without reselecting the icon for each.
  2. NOTE: To identify an object in the palette, select the Object Palette and pass the cursor over an object. As the pointer passes over an object, a ToolTip identifies that object. For more information about the Object Palette, see Overview Of the Progress Application Development Environment."

  3. Draw rectangles to roughly outline the Customer, Order, and Order Line sections.
  4. Select each rectangle in turn and open its property sheet:
  5. Set the following values for each rectangle’s Geometry attributes:
  6. Rectangle
    Column
    Row
    Width
    Height
    RECT-1
    1.00
    2.10
    147
    5.48
    RECT-2
    1.00
    7.48
    147
    8.33
    RECT-3
    1.00
    15.81
    147
    10.67

    The AppBuilder resizes the rectangles to reflect the new settings. Your main window should now look like this:

Adding Text Labels To the Sections

Now that you have divided your main window into sections for Customer, Order, and Order Line information, you need to add text labels to identify the sections.

Follow these steps to add text labels:

  1. Double-click the Text icon in the Object Palette.
  2. Place a text label in each section of the SmartWindow, as shown:
  3. Open the property sheet for the text label in the Customer section:
  4. In the Text field, type Customer:
  5. Choose the Color icon to open the Choose Color dialog box:
  6. Under Foreground Colors, choose the dark blue color, setting 1.
  7. NOTE: The colors labeled with a question mark indicate the default colors.

  8. Commit the changes and return to the main window.
  9. Resize the text label so that all the text is visible.
  10. Return to Step 3 and repeat the procedure for the Order and Order Line text labels.
  11. When you are finished, the window looks like the following:

Naming and Saving the New SmartWindow

Now that you have your main window’s basic design, you should name the SmartWindow and save your work before adding SmartObjects to it.

Follow these steps to name the window and save your work:

  1. Choose the List Objects icon on the AppBuilder toolbar to open the List Objects dialog box:
  2. From the list of objects, double-click the WINDOW object to open the property sheet:
  3. In the Title field, type SportsPro Order Tracking System and commit the change.
  4. Return to your window.
  5. The new window title appears in the title bar:

  6. Save your file as wordtrk.w in your working directory.

You are now ready to add objects to your window.


Copyright © 2004 Progress Software Corporation
www.progress.com
Voice: (781) 280-4000
Fax: (781) 280-4095