Top
PowerCOBOL V11.0 User's Guide
FUJITSU Software

3.1.2 Developing the Graphical User Interface

In this case, you will have a single application module entitled Main [Module]. This represents the main module of your application. Main is the module that will execute first when you start the application.

Now click on the + sign next to Main [Module]. This will open the top level of components associated with the Main module. The top level will show all forms (windows) associated with this module.

You should have a single form shown and its name should be MainForm[Form]. The main form is the form (window) that will be presented when the application starts.

Go ahead and click on the + sign next to the MainForm[Form] form. This will open up the current list of controls (components and controls) associated with MainForm.

This will show a control named [COBOL Script]. This represents the level at which COBOL Scripts (also called scriptlets or event procedures) will appear. These are small COBOL programs that you write to deal with individual application events that you are interested in. The Project Manager window should now appear as follows:

Figure 3.4 The Project Manager window with all application components expanded

Notice that the naming convention in the hierarchical tree uses a name on the left side and the control type in brackets on the right side.

For example, Main[Module] identifies a module named Main, and MainForm[Form] identifies a form (window) named MainForm. MainForm will be our main application window when we execute the project.

Let's begin the development process by changing the title displayed in the top of the MainForm from "MainForm" to "Hello". A form's caption property controls the title of the form when it is displayed on the screen.

In the left windowpane, click on the MainForm[Form] control to highlight it. This will display the properties and their current values for this form in the right windowpane.

In the right windowpane, click on the Caption property value that should currently contain the value MainForm. Change this value to Hello by simply typing over it and pressing the ENTER key.

The caption property has now been changed. It's that simple.

Note that you changed MainForm's title (caption) only - you did not change the object name of MainForm as it's referred to in the development facility.

During the development process you may select any application control's property at any time and modify its initial value in this manner.

You can also dynamically modify the vast majority of these properties during application execution from COBOL procedural code (scripts) that you may choose to create.

For example, if you wanted your form to display initially with a blue background color, you would select the BackColor property and choose blue from the Custom Color palette.

If you instead wanted to wait for some specific event to take place at application run-time to change the background color (such as the user clicking a button), you would do this with a simple COBOL statement at the appropriate script location.

The following chapters will discuss how to write COBOL event procedures to manipulate properties dynamically at application run-time.

For the purpose of this simple application you will modify only the initial properties.

Let's have a look at our MainForm form. Move the mouse to MainForm[Form] in the left windowpane and click on it with the right mouse button to display a pop-up menu.

From the pop-up menu that appears, click on Open. This will display the blank form (window) along with the Form Editor and development tools as follows:

Figure 3.5 The blank MainForm in the Form Editor and the form development tools

Note that the title (caption) of this window is Hello, given the change you made to the value of the caption property.

If the window that appears on your screen does not match the window shown above, you may have selected the wrong project template. If this is the case, go back and close your project and create a new project using the correct project template.

If you examine the small window to the left of the MainForm form, you will note that it represents a toolbox palette. If this palette is not visible on your screen, simply select Toolbox from the View menu.

To develop the Hello application, you will place two of the graphical controls from the Toolbox directly on the Hello application window (MainForm). The first item you will place on MainForm will be a simple push button (called a CommandButton).

Find the PowerCOBOL CommandButton Control icon in the Toolbox palette and click on it with the left mouse button. This icon is second from the top in the right column. Notice that as you hover the mouse over the toolbox palette controls, a small window (known as a tooltip) will appear stating the name of each control.

Move the mouse over to the MainForm window and position the floating push button near the bottom center of the window. Click on the left mouse button again to paste the push button on the window. If you do not like your initial positioning, simply click on the push button item with the left mouse button, hold it down and drag the button to a new location. You may use this technique at any time to re-position items you place on a form.

The MainForm window should now look something like the following:

Figure 3.6 The MainForm window with the push button positioned

Notice that this push button is labeled "CmCommand1". PowerCOBOL automatically assigns default names and captions (where appropriate) to controls as you create them. You can change the caption or the actual control name at any time. In most cases the default caption and the control name will be identical. They do not have to be identical however.

You will now change the text displayed on the push button from "CmCommand1" to "Hello". Note that this will only change the caption of the push button. It will not change the name of the push button, which will remain as "CmCommand1".

You accomplish this by bringing up the Properties dialog box for this control. You can modify properties for most graphical controls in the manner described below.

Move the mouse over the push button and right-click once to display a pop-up menu.

At the bottom of the pop-up menu, click on Properties. This will display the following Properties dialog box:

Figure 3.7 The Properties dialog box for the push button control

The text displayed on the push button is known as its caption. Select the Caption field in the Properties dialog box and change "CmCommand1" to "Hello".

Now click on the OK button.

The push button on MainForm should now be labeled "Hello".

You will now place a static text control on MainForm. Move the mouse back to the Toolbox palette and click the left mouse button on the PowerCOBOL Static Text control icon. This icon is fifth down from the top in the left column.

Now move the mouse back over to MainForm and position the floating text box control near the top center of the form. Click on the left mouse button again to paste the static text control on the form.

Note that the text string "CmStatic1" is displayed in the new static text control and that it is located in the upper left corner of this control.

You will change this by bringing up the Properties dialog box for the static text control. Move the mouse over the static text control and right-click once to display a pop-up menu.

Select Properties from the bottom of the pop-up menu by clicking on it. The following Properties dialog box will appear:

Figure 3.8 The Properties dialog box for the text control

Move to the Caption field and change "CmStatic1" to "Begin".

Additionally, it would be nice to center any text displayed in this static text control. You can do this in the Properties dialog box by clicking on the Horiz. Center and Vert. Center check boxes. Do this now.

Now click the OK button. The text displayed should now be "Begin", and it should be nicely centered within the static text control.

You have now completed the 'painting' of the application. The MainForm window should now look something like the following:

Figure 3.9 The MainForm application window after painting

You are now ready to write the event procedures (COBOL Scripts) to complete the application.