skip to main content
OpenEdge Getting Started: Progress OpenEdge Studio
Assembling the Order Tracking System : Assembling the main window
Assembling the main window
The first stage of creating the SportsPro Order Tracking System module is building the main window and dividing it into sections. When you are finished with this stage, your window should look something like the following:
Task list and short procedure
To reach this point, you must know how to perform the following tasks:
1. Access the New dialog box.
2. Access an object’s Property Sheet.
3. Use your mouse to move and resize an object.
4. Add an image to a frame.
5. Create and resize a rectangle.
6. Create text labels.
7. Access the List Objects dialog box.
8. Save your file.
Note: During application assembly, the main window is sometimes referred to as the workspace or design window.
The following short procedure outlines how to complete these tasks.
To assemble the main window:
1. Create a new SmartWindow. See the “Detailed main window procedure” section to review this procedure.
2. Set it to be 147.00 units wide and 25.50 units high. See Step 3 in the “Detailed main window procedure” section to review this procedure.
3. Resize the default frame. See Step 5 in the “Detailed main window procedure” section to review this procedure.
4. Add the application banner. See the “Adding a banner image” section to review this procedure.
5. Divide the window into three sections using rectangles with the following properties:
See the “Outlining the Customer, Order, and Order Line sections” section to review this procedure.
6. Add dark blue text labels naming the three sections: Customer, Order, Order Line. See the “Adding text labels to the sections” section to review this procedure.
7. Set the title of your window to SportsPro Order Tracking System. See the “Naming and saving the new SmartWindow” section to review this procedure.
8. Save your window in a file named wordtrk.w. See Step 5 in the “Naming and saving the new SmartWindow” section to review this procedure.
Detailed main window procedure
The sections that follow guide 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. The SmartWindow serves as a container for other SmartObjects.
To create a new SmartWindow:
1. Open the New dialog box and select SmartWindow:
A new, untitled SmartWindow and the SmartWindow Cue Card appear:
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, the Cue Cards are available to assist you. If you close the Cue Cards, you can always open them again using the HelpCue Card option from the AppBuilder menu bar.
2. Click the Object Properties icon in the AppBuilder toolbar. The property sheet for the new widget appears. Widget is a general term for a visual element of the GUI. The basic property sheet allows you to specify the column, row, height, width in character units, and other object-specific attributes as shown in the following figure:
The Advanced button opens the Advanced Property dialog box with additional properties.
3. Type 147.00 for the Width and 25.50 for the Height in the Geometry section. These dimensions resize the window so that it is large enough for the objects you will add.
4. Click OK in the property sheet. The main window resizes to its new dimensions:
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.
5. Use the frame’s handles to fit the frame to the SmartWindow:
You are now ready to define the sections of the main window. When you ran the sample application in Chapter 2, “Working with the Sample Application,” you saw that the Order Tracking System main window is divided into these sections:
*Order Line
Adding a banner image
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.
To add a banner to the main window:
1. Click the Image button in the Object Palette and place one on your window. A placeholder image appears in the main window:
2. Double‑click the placeholder image. The IMAGE–1 property sheet appears:
3. Click the Image button. The Choose Image Files dialog box appears.
4. Browse to and select <wrk>\images\s2_banr.jpg, where <wrk> is your working directory.
5. Click Open. The File list displays all the images in the directory. 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.
6. Click OK, and close the property sheet to return to your workspace.
7. 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.
To outline the window’s 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.
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 Chapter 1, “Overview of the OpenEdge Studio.”
2. Draw rectangles to roughly outline the Customer, Order, and Order Line sections.
3. Double-click each rectangle in turn to open its property sheet:
4. Set the following values for each rectangle’s Geometry attributes:
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.
To add text labels to the sections:
1. Double‑click the Text icon in the Object Palette.
2. Place a text label in each section, as shown:
3. Open the property sheet for the text label in the first section:
4. Type Customer in the Text field:
5. Click the Color icon to open the Choose Color dialog box:
6. Select dark blue, setting 1, for the Foreground Colors.
Note: The colors labeled with a question mark indicate the default colors.
7. Click OK and return to the main window.
8. Resize the text label so that all the text is visible.
9. Repeat Step 3 through Step 8 for the Order and Order Line text labels. 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.
To name the SmartWindow and save your work:
1. Click the List Objects icon on the AppBuilder toolbar. The List Objects dialog box appears:
2. Double‑click the wWin object from the list to open the property sheet:
3. Type SportsPro Order Tracking System for the Title and click OK.
4. Close the property sheet. The title appears in the title bar:
5. Save your file as wordtrk.w in your working directory.
You are now ready to add objects to your window.