skip to main content
OpenEdge Getting Started: Progress OpenEdge Studio
Overview of the OpenEdge Studio : Overview of the OpenEdge AppBuilder
 
Overview of the OpenEdge AppBuilder
This section provides an overview of the OpenEdge AppBuilder and includes information on starting the AppBuilder and a description of the AppBuilder windows, menu options, and the AppBuilder Object Palette. The AppBuilder is a visual programming environment that allows you to rapidly build complex applications. After you read this section, you should be familiar with the components of the AppBuilder and how to work with the AppBuilder and Object Palette options. For more detailed information about using the AppBuilder and Object Palette, see OpenEdge Development: AppBuilder.
Note: The components and menu options available in the AppBuilder differ depending upon the products you have licensed and the components that you choose to install. If you decide that you want access to a component that you did not initally install, you can add it to your installation. See OpenEdge Getting Started: Installation and Configuration for details.
To start the AppBuilder, choose the AppBuilder tool icon on the Desktop. The AppBuilder main window appears with its Object Palette, as shown in Figure 1–2.
Figure 1–2: AppBuilder main window and Object Palette—initial display
Note: If your screen resolution is not standard SVGA (800 x 600 pixels), the appearance of the Object Palette might be different.
AppBuilder main window
When you start the AppBuilder, the main window and the Object Palette open. You can move these two windows independently on your screen. The Object Palette has several display options that do not depend on the AppBuilder main window. See the “AppBuilder Object Palette” section for a discussion of these options.
The AppBuilder main window has four elements, as shown in Figure 1–3.
Figure 1–3: The AppBuilder main window
The following sections describe the four elements of the AppBuilder main window.
Menu bar
The menu bar provides access to most of the AppBuilder functions. Some menu options are not available when working in WebSpeed development mode:
*File — Provides access to file and window operations such as New, Open, Close, Save, and Print. You can also use this option to view and select from a list of most recently used files. The Most Recently Used File List option is enabled by default, and you can specify the number of files you want to appear in this list through the OptionsPreferences menu item.
*Edit — Provides access to general editing operations such as copying, deleting, and pasting objects. In addition to these general operations, the Edit menu provides options for copying and inserting files, specifying the tab order for a frame, and accessing a specific page.
*Compile — Provides access to a number of options you can use to run, view, test, and debug your code.
*Tools — Provides access to a number of AppBuilder tools, such as the Data Dictionary and Procedure Editor, and a number of other options to help you design and build applications, such as a Color Editor and Property Sheets.
*Options — Provides access to AppBuilder preference options including colors and grid alignments.
*Layout — Provides access to options that you use to align objects using predefined layouts or customized layouts.
*Window — Provides access to the Section Editor, properties windows, and editors.
*Help — Provides access to help information, including error message explanations and Cue Cards for SmartObjects.
As you complete the tutorial exercises in this guide, you will become familiar with many of the menu selections. The menus and icons of the AppBuilder main window also provide access to all of the functions available in the Desktop, including the ability to start other tools and to access the online help system.
For more detailed information about the AppBuilder menu bar options, see the online help for that menu or the chapter on the AppBuilder interface in OpenEdge Development: AppBuilder.
Toolbar
Each icon in the AppBuilder toolbar provides quick access to frequently used menu options. Table 1–1 describes the function of each icon.
 
Table 1–1: Toolbar icons
Icon
ToolTip
Description
New
Creates a new object file and displays an associated design window or tree view. The New icon on the toolbar corresponds to the FileNew menu option.
The AppBuilder creates a design window or displays a tree view when you create a new object or open an existing procedure file. The design window is analogous to a canvas on which you visually assemble all or part of an application. For each action you take that modifies the appearance or functionality of the object, the AppBuilder adds, deletes, or modifies the ABL code contained in the object’s procedure file.
Open
Opens an existing procedure file and displays its associated design window. The Open icon corresponds to the FileOpen menu option.
Save
Saves the current procedure file. The Save icon corresponds to the FileSave menu option.
Print
Prints the currently selected procedure. When you select the Print icon, a Windows Print dialog box opens. From this Print dialog box, you can specify printing options and properties. By default, the Print dialog box is enabled. You can use OptionsPreferences on the AppBuilder menu bar to disable the Print dialog box or to specify preferences for the page length and font. For more information on enabling the Windows Print dialog box and setting preferences, see OpenEdge Development: AppBuilder.
Procedure Settings
Displays and allows editing of the procedure settings for the current procedure file. The Procedure Settings icon corresponds to the ToolsProcedure Settings menu option.
Procedure settings maintain information about procedure files, the attributes they possess, and standardized ways in which they interact with other procedures.
Run
Compiles and runs the current procedure file. The Run icon corresponds to the CompileRun menu option.
Stop
Stops the currently running procedure. The Stop icon replaces the Run icon when you run a procedure.
Edit Code
Opens the Section Editor, which enables you to edit certain sections of the procedure file. The Edit Code icon corresponds to the WindowCode Section Editor menu option.
List Objects
Opens the List Objects dialog box. This dialog box lists all of the objects currently in use in any design window. You can access an individual object’s property sheet by double‑clicking an object in the list.
Object Properties
Opens the property sheet for the current object. A property sheet gives you control over settings that pertain to individual objects, including fonts, geometry (window size), and other window settings. The Object Properties icon corresponds to the ToolsProperty Sheet menu option.
Colors
Opens the Choose Color dialog box. Use this dialog box to specify a foreground and background color for the selected objects. The Colors icon corresponds to the ToolsColor menu option.
Switch to Remote/Local Development
Changes the development mode between local (client/server) mode and remote (WebSpeed) mode. The tutorial exercises require that you run in local mode. For more information on using the remote mode, see OpenEdge Getting Started: WebSpeed Essentials.
Note: You might not see this icon, depending upon your license.
Current object fields
The current object fields display information about the current object, which is a single object in a design window that has design focus. If you select multiple objects in a design window, then no current object information is displayed.
The current object fields display the following information:
*Object — Specifies the name of the current object.
*Title/Label/Text/Master/File/OCX — For a basic object, this field specifies the object’s title or label, if it has one. For example,text objects have no label or title, so for a text object this field displays its contents.
For SmartObject instances, which are based on prefabricated masters stored in separate files, this field displays the object’s title bar text (SmartWindows and SmartDialogs) or the pathname of the master file (all other SmartObjects).
For an ActiveX (OCX), this field displays the name of the ActiveX object.
Status area
From left to right, the four fields in the status area display are:
*File status — Information about current AppBuilder processing
*Page status — The current page (applicable to SmartContainers only)
*Object Palette status — The type of object currently selected on the Object Palette
*Lock status — For inserting objects (see the “How the Object Palette responds to the mouse” section for more information on lock status)
AppBuilder Object Palette
From the Object Palette, you can select basic objects, SmartObjects, and ActiveX (OCX) controls to insert into a design window. You can also create and insert new SmartObjects from the Object Palette.
Object Palette Options
The Object Palette’s menu options allow you to control some characteristics of the Object Palette itself. For example, when you choose MenuOptionsShow Menu Only, the icons are hidden and only the Menu options appear in the Object Palette. This option is useful when you are working with a low resolution and do not want to use valuable screen space to display the palette’s icons.
The other two Object Palette options give you control over other aspects of its appearance. If you choose MenuOptionsTop-Only Window, the Object Palette stays on top of all other windows, including design windows. If you choose MenuOptionsSave Palette, the AppBuilder saves the options, position, and size of the Object Palette for future sessions in the registry or in the progress.ini file.
You can resize the Object Palette and move it to a more convenient area on your desktop or minimize it until you are ready to begin assembling your applications. To view an icon’s name, place the cursor over the icon to display the ToolTip.
The icons in the bottom rows of the Object Palette represent SmartObjects, as shown in Figure 1–4. With the exception of the Pointer, which represents no object, all other icons on the Object Palette represent basic objects, which are also referred to as widgets.
Figure 1–4: The AppBuilder Object Palette
Table 1–2 lists the icons on the Object Palette and their functions. For more information about the objects in the Object Palette, see OpenEdge Development: AppBuilder, OpenEdge Development: ADM and SmartObjects, and OpenEdge Development: ADM Reference.
 
Table 1–2: Object Palette icons
Icon
ToolTip
Description
Pointer
Selects an object in the design window or frame.
DB‑Fields
Adds a database field and a query for that field.
Query
Adds a query and starts the QueryBuilder. The QueryBuilder widget is visible only at design time.
Browse
Adds a browser.
Frame
Adds a frame. Frames are used to visually and functionally group other objects.
Rectangle
Adds a rectangle. Rectangles are used to visually group other objects.
Image
Adds a static image.
Radio‑Set
Adds a radio button set. This object creates a three‑button radio set with generic text.
Toggle‑Box
Adds a single check box with a generic label.
Slider
Adds a slider. You can define sliders as horizontal or vertical.
Button
Adds a pushbutton with a generic label.
Selection-List
Adds a scrollable selection list.
Editor
Adds a multi‑line text editor.
Combo‑Box
Adds a non‑OCX combo box.
Fill‑In
Adds a single‑line editor.
Text
Adds text to a window. You can specify a font and color for the text.
OCX
Adds an ActiveX control.
CSSpin
Adds a OpenEdge Spin Button control.
CSComboBox
Adds a OpenEdge OCX combo box.
PSTimer
Adds a OpenEdge OCX Timer object.
SmartDataObject
Adds a SmartDataObject (SDO) I/O interface. SmartDataObjects manage the data stream to and from disk, filter records, and respond to requests from other SmartObjects.
DataView
Adds a DataView. DataViews organize data from groups of temp-tables and ProDataSets.
SmartObject
Adds a generic ADM Smart template. You use this template to create new types of SmartObjects.
SmartFolder
Adds an ADM tabs widget. Tabs widgets are used in SmartFolders to provide a context in which you can visually and functionally divide an interface.
SmartPanel
Adds one of the predefined ADM button arrays. SmartPanels provide upstream control of other SmartObjects.
SmartDataBrowser
Adds an ADM data browser. SmartDataBrowsers provide a multi‑record row/column interface to data.
SmartDataViewer
Adds an ADM data viewer. SmartDataViewers provide a single-record interface to data that you can arrange for a specific design.
SmartDataField
Adds customized capabilities to a SmartDataViewer.
SmartLOBField
Adds a SmartLOBField.
SmartFilter
Adds an ADM Smart Query‑By‑Form.
SmartToolBar
Adds an ADM menu and toolbar.
SmartContainer
Adds an outer‑level container object, such as a SmartWindow, to another container, imposing a parent/child relationship on objects that do not normally inherit from each other.
SmartBuisnessObject
Adds a special ADM SmartContainer that organizes the data streams of several SmartDataObjects.
SmartProducer
Adds an ADM message handler that creates messages to be transmitted by a Progress message service.
SmartConsumer
Adds an ADM message handler that receives messages transmitted by a Progress message service.
SmartRouter
Adds an ADM message handler that routes incoming messages from a SmartConsumer to appropriate SmartB2BObjects.
SmartB2BObject
Adds an ADM transformation object that transforms information to and from XML, based on a protocol shared between the message’s sender and recipient.
SmartSender
Adds a customizable ADM object that transforms information acording to your rules, passing the result to a SmartProducer.
SmartReciever
Adds a customizable ADM object that recieves information from a SmartConsumer and then transforms it acording to your rules.
In addition to choosing an object from the Object Palette, you can choose an object from the Object Palette menu. When you choose an object from the menu, some options include specific properties for the object. For example, if you choose an Editor object from the menu, you have the additional option of choosing a Read‑Only Editor object.
You can add OCX icons or submenu options to the Object Palette by choosing MenuAdd OCX and then choosing Add as Palette Icon or Add to Palette SubMenu. Specify the appropriate OCX file information. The icon or submenu option appears on the Object Palette.
Customizing the Object Palette
In addition to providing a variety of display options for the Object Palette, the AppBuilder allows you to customize its contents. Choose MenuUse Custom to add to or modify the files that determine the Object Palette’s behavior and appearance.
For example, if you create new SmartObject templates, you can add them to the Object Palette. You can also change certain default settings for the standard SmartObject templates.
Note: Creating a new SmartObject template is different from fabricating a SmartObject master from an existing template, as you do in Chapter 4, “Overview of SmartObject Technology.”
How the Object Palette responds to the mouse
The icons on the Object Palette respond differently to the left and right mouse buttons:
*Left mouse button — When you click the left button, the AppBuilder immediately enters insertion mode for basic objects and the SmartFolder. For other SmartObjects, the AppBuilder displays a dialog box from which you can choose a SmartObject master. After you select a SmartObject, the AppBuilder enters insertion mode. When you choose the OCX icon, the AppBuilder displays a dialog box from which you choose an ActiveX control.
You can lock an Object Palette icon to insert multiple instances of an object. To lock an icon for SmartObjects or ActiveX controls, click it once. If there is more than one object of this type available, select one from the Choose dialog box that opens. After the dialog box closes, a click the object’s icon again before inserting to lock it. To lock an icon for other objects on the palette, click twice on an object. A lock image appears over an icon when you lock it. Choose the Pointer object to remove the lock.
*Right mouse button — When you click the right button, the AppBuilder displays a pop‑up menu for the object you chose. The options available on the pop‑up menu depend on the selected object.
For basic objects, the menu allows you to choose from among the available variations of the object; if there is only one type of that object available, the menu has only the Default option. This also applies to the SmartFolder.
For SmartObjects, with the exception of the SmartFolder, the pop‑up menu generally allows you to choose from among any available prefabricated SmartObject masters, or to create a new master from one of the SmartObject templates provided with the product. Instead of allowing you to create a new master, the pop‑up menu for the SmartPanel allows you to create a new instance of one of the four SmartPanel templates.
The pop‑up menu for the SmartContainer has a Choose SmartContainer option. You use this option to select an existing container, such as a SmartWindow, SmartFrame, or SmartDialog. To create a new SmartContainer, choose the New icon on the AppBuilder toolbar and select the container you want from the New dialog box.
Advanced editing features in OpenEdge Studio
If your OpenEdge Studio installation runs under a development license, you have access to the following advanced editing features:
*Color coding — Also called color syntax‑highlighting, color coding is a powerful feature in which the editor displays various types of ABL syntax elements such as keywords, comments, and character strings in distinct colors.
For example, all keywords might appear in blue. Color coding makes it easy to understand the syntax and structure of a ABL program. You can customize the color coding used for language elements and/or change their style, for example, to apply a bold or italic typeface.
Color coding is supported for the ABL and for many other programming and scripting languages, including HTML, C/C++, Perl, and Java.
*Embedded color coding — Embedded color coding recognizes multiple languages in the same file and can display them with their own color‑coding schemes. Using embedded color coding simplifies editing source files that contain code in multiple languages: the editor displays each language’s code using a distinct color‑coding scheme and all other language‑specific features.
By default, the editors recognize only embedded SpeedScript, JavaScript, VBScript, and/or Java in HTML files.
*Syntax expansion — Syntax expansion occurs when you type a ABL keyword, statement, or block structure and then press the SPACEBAR. The editor expands the syntax of the keyword or other language element by inserting a template specific to it.
*Alias expansion — Alias expansion allows you to define shortcuts that extend or modify syntax expansion in the editors. You can use the aliases to insert more complete code and syntax templates when you type the shortcut and press the SPACEBAR.
For example, when you type in DISP, then press the SPACEBAR, the editor does not expand this syntax by default. However, you can use alias expansion to define a code template to insert more of the statement’s syntax. Then when you type DISP and press the SPACEBAR, the editor expands to the template you defined.
OpenEdge provides a number of default aliases. These aliases are in the file p4gl.als located in your working editor configuration directory. By default, this is the PROEDIT directory in your OpenEdge working directory. Whenever you use the Alias Editor dialog box to modify or add aliases for ABL source files, the editor saves the changes to the p4gl.als file.
*Syntax indenting — Syntax indenting in the editors occurs when you press the ENTER key at the end of a block statement. The editor inserts a new line and indents the cursor relative to the block statement.
For example, if you create a ABL source file with the cursor positioned at the end of a line that contains the DO keyword, and you press the ENTER key, the editor inserts a new line and indents the cursor relative to the DO keyword.
*SmartPaste — The SmartPaste feature allows you to paste lines of text into a ABL source file and indent them relative to the surrounding code. This feature saves coding time by making it unnecessary to indent pasted code manually. It is especially useful when you copy and paste code among several source files.
For example, if you select several lines of code in a source file, copy them to the clipboard using CTRL-C, then paste them inside a FOR block using CTRL-V, the editors use SmartPaste to indent the pasted lines correctly relative to the indentation level of the FOR loop.
For more information about the advanced editing features, see OpenEdge Development: AppBuilder and Procedure Window and Common Dialog help system.
Now that you are familiar with the Desktop and the AppBuilder main window, you are ready to learn more about developing applications using the tools and SmartObject technology. To help you learn, this guide introduces the SportsPro sample application, which was designed to highlight these features.