6 - Starting the Application

Top  Previous  Next

 

Using the Application Generator

With the Data Dictionary complete, you now can use the Application Generator to create your application. This chapter shows you:

·

How to create the .APP file, which stores all your work for the project.

·

How to define the first (Main) procedure to create an MDI application frame, and how to call procedures from the application’s menu.

 

Starting Point:

The Clarion environment should be open, and all dialog windows closed.

 

 

Creating the application (.APP) file

1.

From the IDE Menu, choose File  New  Solution, Project or Application.

The New Solution, Project or Application dialog appears.

 

 

2.

Select the Clarion for Windows item in the left Categories pane, and click or select the Application Quick Starts as shown above.

3.

Verify that the Location is set to the …\Lessons\LearningClarion directory.

4.

Type LCLesson in the Name field.

5.

Uncheck the Auto create project subdir checkbox.

6.

Press the Create button.

 

The Application Properties dialog appears.

1.

Type LCLESSON.DCT in the Dictionary File entry, or select it from the ellipsis button.

2.

Clear the Application Wizard check box.

This Application Generator lesson will not use any Wizards so that it can demonstrate how to use all the other tools that Clarion provides. We will also use the ABC template chain in this lesson.

 

 

3.

Press OK to close the Application Properties dialog.

 

Creating the Main Procedure

The Application Tree dialog appears. This lists all the procedures for your application in a logical procedure call tree, which provides a visual guide to show the order by which one procedure calls another. You previously saw it in the Getting Started lessons.

The Main procedure is the starting point. The lesson application will be an MDI (Multiple Document Interface) program. Therefore the natural starting point is to define the Main procedure using the Frame Procedure template to create an application frame. A frame is a type of visual program-wide starting point, providing menus, toolbars, and other options.

 

Select the procedure type for Main

1.

With Main highlighted in the Application Tree dialog, press the Properties  button.

 

 

2.

Choose the Defaults tab and highlight Default MDI Frame in the Select Procedure Type dialog, then press the Select button.

The Procedure Properties dialog appears. It defines the functionality and data structures for the procedure.

 

 

3.

Press the Actions button

4.

In the Main – Properties dialog, type SplashScreen in the Splash Procedure field.

5.

Press OK to close the Main – Properties dialog.

This names the procedure containing an opening screen that will appear for just a brief period when the user first opens the application.

 

Usually the first task when creating a procedure is to edit the main window. You can place controls, or if the procedure template has controls already, you can customize them.

The application frame itself never has controls. Windows doesn’t allow it. We will, however, customize the window caption (the text that appears on its title bar). Then we will add items to the predefined menu, which is also built into the Frame Procedure template, and create a toolbar for the application (a toolbar can have controls).

 

Edit the Main window

1.

Press the Window tab. The Window Editor appears:

 

 

2.

Press the Designer button shown above. The Window Designer appears. Here are all the tools that allow you to visually edit the window and its controls.

3.

Choose View  Properties to display the Property Pad (if it is not already present).

You’ll notice under the View menu that there are several toolboxes, or pads, that are available—all of these are fully dockable and resizable. This means you can configure your workspace, as you want. Because of this configurability, throughout the rest of the lessons some screen shots taken within the Window Designer may not appear the same as on your computer.

4.

CLICK on the window’s title bar to make sure it has focus (that is, the white "handles" appear to the right and bottom edge of the window).

5.

Type LCLesson Application in the Title entry of the Property Pad, then press TAB.

This updates the caption bar text in the sample window.

 

 

Editing the Menu

From the Window Designer or Properties Pad, you can call the Menu Editor, which allows you to add or edit menu items for the application frame window. As you add each menu item, you can access the Actions dialog to name the procedure to call when the user chooses that menu item.

For each new procedure you name for the menu to call, the Application Generator automatically adds a "ToDo" procedure to the Application Tree. You can then define that procedure’s functionality, just as you are now defining the application frame procedure’s functionality.

When the Application Generator generates the source code for your application, it automatically starts a new execution thread for each procedure you call from the main menu (this is required for an MDI application).

 

Add menu items

1.

From the Window Designer, click on the menu action bar in your window design. In the Property Pad, click on the Edit Menu link as shown here:

 

 

The Menu Editor appears. It displays the menu in hierarchical form in a list box at the left. The fields at the right allow you to name and customize the dropdown menus and menu items.

This template already provides you with a "standard" menu. It contains basic window commands such as an Exit command on a File menu, the standard editing Cut, Copy, and Paste commands, and the standard window management commands commonly found in an MDI application.

 

 

2.

Highlight the ?Paste menu item (see the illustration above).

The Menu Editor inserts new items immediately below the currently highlighted selection. The menu you’ll add will be called Browse. It will contain three items: Products, Customers, and Orders. It will appear on the menu bar just before the Window menu.

3.

Press the Add New Menu button (or press SHIFT+INSERT).

This inserts a new MENU statement, and its corresponding END statement.

4.

Press the Menu Down button to position the MENU inline with the other MENUs.

 

 

5.

In the Text field in the right hand pane, type &Browse in the field then press TAB.

 

This defines the text that appears on the menu to the end user. The ampersand (&) indicates that the following character (B) is underlined and provides keyboard access (the user can press ALT+B to drop down this menu).

 

Add the first menu item

1.

Press the New Item button (or press INSERT).

This updates the list on the left side of the dialog, changing the text of the menu you just added to "&Browse." It adds a new menu ITEM—a command on the dropdown menu—under &Browse.

2.

Type &Customers in the Text field then press TAB.

3.

Type ?BrowseCustomers in the Use field. This is an equate for the menu item so code statements can reference it. The leading question mark (?) indicates it is a field equate label.

 

 

4.

Right-click on the ITEM just added, and select the Actions item from the popup menu.

 

 

The prompts allow you to name a procedure to execute when the end user selects the Browse  Customers menu item.

5.

Choose Call a Procedure from the When Pressed drop list.

New prompts appear to allow you to name the procedure to call and choose options.

6.

Type BrowseCustomers in the Procedure Name field.

This names the "ToDo" procedure for the Application Tree.

7.

Check the Initiate Thread box.

The BrowseCustomers procedure will display an MDI "child" window, and you must always start a new execution thread for any MDI window called directly from the application frame. The Thread Stack field defaults to the minimum recommended value.

8.

Press OK to close the ?BrowseCustomers Prompts dialog

 

Add the second menu item

1.

Press the New Item  button.

2.

Type &Products in the Text field and press TAB.

3.

Type ?BrowseProducts in the Use field.

 

Normally, the next step is to define the action for the menu item—what happens when the end user executes it from the menu. We’ll skip over this step for now, for this menu item only. Later, you’ll create a procedure by copying it, then attaching it to this menu, just to show you this capability of the Clarion environment.

 

Add the third menu item

1.

Press the New Item  button.

2.

Type &Orders in the Text field and press TAB.

3.

Type ?BrowseOrders in the Use field.

4.

Right-click on the ITEM just added, and select the Actions item from the popup menu.

5.

In the Actions dialog, choose Call a Procedure from the When Pressed drop list.

6.

Type BrowseOrders in the Procedure Name field.

7.

Check the Initiate Thread box.

8.

Press OK to close the ?BrowseOrders Prompts dialog

 

Close the Menu Editor and Window Designer and save your work

1.

Press the Save and Close  button to close the Menu Editor.

This returns you to the Window Designer.

2.

Press the Save and Close button.

This returns you to the Window Designer Editor dialog.

3.

Press the Save and Close button to close the Window Editor and the Procedure Properties dialog.

This returns you to the Application Tree dialog. There are now three new procedures marked as "(ToDo)": BrowseCustomers, BrowseOrders, and SplashScreen. These were the procedures you named in the Menu Editor.

4.

Choose File  Save, or press the Save button on the toolbar.

 

 

Creating the SplashScreen Procedure

We named a Splash procedure, and now we’ll create it.

1.

Highlight the SplashScreen (ToDo) procedure and press the Properties  button.

2.

Choose the Defaults tab, highlight Default Splash Window in the Select Procedure Type dialog, then press the Select button.

The Procedure Properties dialog appears. There’s nothing we really have to do to this procedure except accepting all of the defaults.

3.

Press the Save and Close button.

4.

In the Application Tree toolbar, press the Save button to save your work.

 

Adding an Application Toolbar and Toolbar Controls

Call the Window Designer and create the tool bar

1.

Highlight the Main procedure.

2.

RIGHT-CLICK to display the popup menu.

 

 

Notice that this popup menu contains a set of menu selections that match the set of tabs on the top of every Procedure Properties window. It also aligns closely with the right hand pane.

This popup menu provides you with direct access to all the Clarion tools that you use to modify existing procedures, so that you don’t have to go through the Procedure Properties window every time.

3.

Choose the Window menu item. The Window Designer Editor opens. If you are not automatically taken there, press the Designer button to access the Window Designer.

 

You can bypass the Window Designer Editor and load Designer directly, by setting the following Application Options (this dialog can be found in the IDE Tools menu):

 

 

4.

With the Window Designer active, choose View  Toolbox from the main IDE Menu (or press CTRL + ALT + X).

5.

Locate and highlight the TOOLBAR control in the Toolbox, and DRAG and DROP to the window:

 

 

This adds the toolbar—always immediately below the menu—to the sample window. You can add any control to your toolbar by CLICKing on a control in the Controls toolbox, then CLICKing in your toolbar.

 

Place the first button

If the control toolbox is not present, choose View  Toolbox from the Window Designer menu.

1.

CLICK on the BUTTON control, drag the mouse to the toolbar design area (not the Designer’s toolbar!), just below the upper left corner, and drop to place the button.

 

 

2.

RIGHT-CLICK on the button you just placed, then choose Properties from the popup menu. Or you can press the F4 key.

The Properties dialog appears.

3.

Clear the Text property.

 Do not use the spacebar to do this! Use the DELETE or BACKSPACE keys.

We’ll place images on these buttons, instead of text, to give the application a more modern look.

4.

Type ?CustomerButton in the Use property.

This is the field equate label for referencing the button in code. We included the word "Button" for code readability.

5.

Set the Flat property to TRUE.

You can simply click on the Flat property, and it will toggle the TRUE/FALSE values!

 

 

6.

Drop down the Icon property, scroll to the bottom and CLICK on Select File.....

The Select Icon File dialog appears.

7.

Select GIF Files from the Files of type drop list.

8.

Select the CUSTOMER.GIF file, then press the Open button.

 

 

9.

Type Browse Customers into the Tip property.

This adds a tool tip to the button that will display whenever the mouse cursor hovers over the button.

10.

Expand the AT property in the Properties Pad, and then set the Default property to False for both Width and Height.

11.

Set the Width to 16 and Height to 14.

 

 

12.

Near the bottom of the Property Pad, click on the Actions link:

 

 

13.

Choose Call a Procedure from the When Pressed drop list.

14.

Choose BrowseCustomers from the Procedure Name drop list.

This is the procedure name you typed for the Browse