Lesson 4 - The Window Designer and Control Properties

Top  Previous  Next

This topic:

 Tells you how to use the Window Designer to create a new WINDOW structure or edit an existing one.

 Tells you how to use the Properties Pad to set window properties.

 Tells you how to configure the Window Designer to work the way you prefer.

 Tells you how to set control properties with the Data Dictionary.

 Explains the types of controls available

 Tells you how to set Common Control Attributes using the Properties Pad.

 

The first half of this lesson will focus on the Window structure. The second half will focus on the basic controls that can be populated on a window. Click here to skip to that part of the lesson.

 

Window Creation Overview

Use the Window Designer to visually design window elements—windows and controls—on screen. The Window Designer generates the Clarion language source code that describes the window, then the Application Generator places the generated source code at the appropriate point in your application.

Most likely, your application will use a number of windows to display instructions, accept input, and provide data or other information to the user. In general, this is what you will do to put such a window on the screen:

 

1.

Select or create the procedure that manages the window.

 

See the Application Generator topic for more information.

 

2.

From the Application Tree dialog, RIGHT-CLICK the procedure name and select Window from the popup menu.

If no default window is defined, select a window type from the New Structure dialog. See Choosing a Window Type.

If a default window is already defined, the Window Designer opens.

 

You can also access the Window Designer from the Text Editor! To create a new window from the Text Editor, place the cursor on a blank line, then in the IDE Menu choose Edit  Structure Designer or press CTRL+D. To edit an existing window, place the cursor anywhere within the source code structure that defines the window, then choose Edit  Structure Designer or press CTRL+D.

 

3.

Using the Properties Pad, customize the window by setting its size and properties.

See the Window Properties help topic located in the core help.

 

4.

Optionally, place a menu in the window with the Menu Editor.

See Lesson 5 - Exploring the Menu/Frame Procedure for more information on this process.

 

5.

Place controls in the window—these might include entry boxes for editing fields from the database, command buttons for initiating or canceling actions, text, strings, or prompts containing instructions for the user, and other controls to enhance the appearance and ease of use of the window.

 

6.

Using the Property Pad, set the target control properties.

You can do this by selecting the control, and pressing the F12 Key. See the Controls and Their Properties topic.

 

7.

Exit the Window Designer and Save your work as you return to the Application Tree.

 

Choosing a Window Type

 

Clarion’s Procedure templates usually provide an appropriate default window for you. So if you create your procedure with a code generation Wizard or with a Frame, Browse, Form, Viewer, or Splash Procedure template, then you need not choose a window type, although you can change the default if you want to.

However, if you use the Window - Generic Window Handler Procedure template, or if you start the Window Designer from within the Text Editor (CTRL+D) the Application Generator opens the New Structure dialog so you can choose from a list of default window definitions. Following are some guidelines to help you choose the right window for the job at hand.

 

STARTing Modeless Windows (new thread)

When you START a procedure on its own thread, the procedure and its window operate independently of other threads in the same program; that is, the end user can switch focus between each execution thread at will. This is true regardless of whether the windows on each thread are MDI or non-MDI. These are "modeless" windows.

 

MDI and Non-MDI Windows (same thread)

If you start a procedure on an existing thread (call a procedure without START), program behavior depends on whether or not the procedure’s window has the MDI attribute.

A non-MDI window on the same thread as its parent blocks access to its parent window, blocks access to all other threads in the program, and prevents subsequent opening of non-MDI windows on the same thread. This is an "application modal" window. When the application modal window closes, the other execution threads are available again.

An MDI window on the same thread as its parent blocks access only to its parent window. When the MDI child window closes, its parent window regains focus.

 

Default Window Structures

Some of the types of windows you can create with Clarion appear in the New Structure dialog. The items in the New Structure dialog represent Clarion language data structures.

You may see window structures, report structures, or both, depending on how you access the dialog. A window structure is a group of Clarion language statements that define all the attributes of a window. You may want to think of a window structure as the definition of the window. See the WINDOW help topic in the Language Reference.

This section discusses only the default window structures supplied with this release; however, you may modify these default windows, and you may even add your own default window structures by editing the \LIBSRC\DEFAULTS.CLW file. If you edit the DEFAULTS.CLW file, be sure to precede each new structure with the following line:

!!> title

where "title" is the structure name that appears in the New Structure dialog.

Following is a description of the default window structures provided with this package.

 

Simple Window

To create a general-purpose document window or dialog box, choose Simple Window from the New Structure dialog. The Window Designer generates a non-MDI WINDOW structure with no controls. That is, a bare or empty window.

This window accepts any controls (listboxes, entry boxes, buttons, etc.) you want to add. Because the window is non-MDI, it can move "outside" its application window.

 

Window with OK & Cancel

This window is exactly like the Simple Window described above, except it contains OK and Cancel buttons. There are no actions associated with the buttons; you must add any needed functionality. If you want buttons with functionality already attached, see the Control Templates —CancelButton, CloseButton, etc.

There are seven other variations to this window, adding an optional Help button, default icons for each button, and STD attributes that perform standard Windows functions.

 

MDI Child Window

To create a document window that appears only inside an application frame, choose MDI Child Window. The Window Designer generates a WINDOW structure with the MDI attribute.

The child window typically appears as a normal window, with frame, system menu, maximize and minimize buttons, and icon. The user should be able to manipulate it like any other window—except that the child window cannot move outside the main application window.

All MDI windows must reside in separate procedures and execution threads from the APPLICATION window (see Application Main MDI Frame below). This means you must initiate a thread (use START) when you start this window’s procedure from the Application frame.

There are two variations to the MDI Child Window. The first adds OK and Cancel buttons. There are no actions associated with the buttons; you must add any needed functionality. The second variation also adds default icons to those buttons.

Any menus and toolbars you create for an MDI window will automatically merge with the APPLICATION’s menu and toolbar when the MDI child is the active window!

 

Application Main MDI Frame

To create the APPLICATION frame, or main window, for an MDI application, choose Application Main MDI Frame. This provides the "outside" frame in which the MDI child windows appear.

Typically, the APPLICATION window should have a resizable frame, plus a system menu, maximize and minimize buttons, and a menu. The File menu should provide commands to open the MDI child windows, and the Window menu should provide commands for managing the separate child windows. The Frame template provides all these features automatically!

The APPLICATION window may only have controls on its toolbar. MDI child windows contain all other controls in an MDI application. In other words, the APPLICATION window should hold only its child windows, and optionally, its toolbar.

The APPLICATION window and its MDI children must not reside in the same procedure. You must START the MDI child’s procedure so that the MDI child window is in a separate thread from the APPLICATION. Multiple MDI windows may run in the same thread, but not on the same thread as the APPLICATION window.

 

Progress Window

A progress window is designed to provide the user with a visual indication of progress during a process or report.

This window starts exactly like the Simple Window described above, and then centers the window position, gives it a GRAY attribute, and adds a TIMER attribute. Next, it adds a progress control, two strings for messaging, and a Cancel button. There are no actions associated with the default controls; you must add any needed functionality.

There are four other variations to this window, adding three types of default icons and, in the fourth variation, a vertical progress control.

 

 

Window Designer Configuration

Before beginning your first session with the Window Designer, it is important to understand your configuration options.

The Window Designer Options dialog sets the default position and size values applied when auto-populating controls, or when aligning controls with the alignment tools. To access the dialog, choose Tools Options  Window Designer Options from the environment menu. The dialog is divided into two areas: General and Grid Options.

 

 

Using the Window Designer

Choosing the window type is just the beginning. The Window Designer provides a rich assortment of visual tools and menus to help you create and edit your window.

The Window Designer lets you directly manipulate the window and the controls inside it. The sample window, for example, contains ‘handles’—tiny boxes located at the corners and sides of the window. By selecting a handle and dragging the mouse, you may resize the sample window. The window the user sees when your application runs is the same size as the window you create by dragging.

When the Window Designer generates the source code for the window, it places the data determining the size and position of the window (as you specified by dragging the mouse) in the AT attribute of the statement declaring the window.

Similarly, the Window Designer supplies the other attributes by presenting you with options, check boxes and fields in which you specify your design preferences.

 

Window Designer Tools

During the design process, there are several Window Designer tools at your disposal.

Sample Window

The Window Formatter is a visual design tool. You always see a sample of the window you're working on, as you work on it. For example, place a list box in the sample window and drag its handles to the size you want. Toggle the Visual Styles and Control Transparency settings to fine-tune your visual display.

Properties Pad

The Window Designer's Properties Pad allows you to quickly specify the appearance and content of the text on each control within the window and on the window title bar. Control the font, size, style, and content of all your text, using standard word processor buttons and drop down lists.

Display and get focus to the Properties Pad by choosing View Properties. Resize the Properties Pad by placing the cursor on the border of the box. When the cursor changes to a double headed arrow, CLICK and DRAG.

 

Alignment Toolbar

The Window Designer's Alignment toolbar allows you to quickly, professionally, and precisely align the controls in your window.

Select the controls to align (CTRL+CLICK allows you to select multiple controls, or you can "lasso" multiple controls with CLICK+DRAG), then click on the appropriate alignment tool. All the alignment actions are also available from the Window Designer > Format menu.

For most alignment functions, the last set of controls selected (black handles) are aligned with the first control selected (white handles). That is, the first control selected is the anchor control. It doesn't move, the others do.

Position the cursor over any tool and wait for half a second. A tool tip appears telling you the type of alignment this tool will accomplish.

 

Command Toolbar

The Window Designer shares a Command toolbar with the Alignment toolbar. The toolbar lets you quickly execute a variety of Report Designer functions at the touch of a button.

All the commands in the Command toolbar section are also available from the IDE menu.

Position the cursor over any tool and wait for half a second. A tool tip shows you the type of control this tool creates.

Save and Close

Exit the Report Designer and save changes.

Cancel

Exit the Report Designer and abandon changes.

Bring to Front

For overlapping controls, select this item to move the active control to the top.

Send to Back

For overlapping controls, select this item to move the active control to the back.

Tab Order

Not applicable in the Report Designer.

Print Preview

Calls the Print Preview dialog in the Report Designer, allowing to you render a sample report for viewing.

Switch SupressTransparency

Allows the proper display of special static parent controls when populated "on top of" multiple tab controls. This property is set to TRUE by default, and ensures a proper display regardless of Visual Styles used. No effect on runtime window.

Use Visual Styles

This button controls the display of Visual Styles for all valid controls in design mode (controls appear as if the XP manifest was active).

 

Data / Tables Pad

The Window Designer has access to the Data / Tables Pad. This pad allows you to quickly "populate" a window with entry controls and prompts for fields in your data dictionary tables.

Display or hide the Data / Tables Pad by choosing View Data / Tables Pad. Resize the pad by placing the cursor on the border of the box. When the cursor changes to a double headed arrow, CLICK and DRAG.

1.

Select a table from the top pane.

2.

Select the column you want on your window in the bottom pane.

3.

DRAG the column in the sample window to place the control and its associated prompt.

The type of control (entry box, check box, radio button, etc.) is determined by the settings for this particular column in the Data Dictionary.

 

Controls Toolbox

The Window Designer contains a floating Controls toolbox, similar to those found in many draw or paintbrush programs. Simply choose a control from the toolbox (CLICK on it), then DRAG to the sample window at the target location to place the control in the window.

Display or hide the Controls toolbox by choosing View Toolbox. Resize the Controls toolbox by placing the cursor on the border of the box. Select a control by clicking on it, and DRAG to the desired location on the target window.

 

Window Designer Menus

The Window Designer provides many features available from standard and popup menus.

 

The Window Designer menu is visible during any Designer session, and provides populating controls options and alignment (Format) commands for spacing and sizing the controls within the window.

 

 

There is also a dynamic popup menu for all controls and the window itself. For example. Right click on any button template control, and you will see the following:

 

 

The popup menu is an invaluable tool. As you can see above, it incorporates key items from the IDE Menu, Window Designer Menu, and Smart Links from the Properties Pad.

 

Window Properties Dialog

 

Use the Properties Pad to set all the properties or attributes of a WINDOW or APPLICATION. Properties include the window caption, whether the window is resizable, whether the window is scrollable, icons associated with the window, messages, help files, and cursor types associated with the window, and many others. In short, all the properties associated with windows as opposed to properties associated with procedures, controls, columns, etc.

To open the Properties Pad dialog from the Window Designer:

 RIGHT-CLICK on the sample window then choose Properties from the popup menu.

 Select the sample window then press the F4 KEY.

 Select the sample window then choose View  Properties from the menu.

 

 

Placing Controls on a Window

 

This section explains how to place a control in a window. The Controls and Their Properties topic explains how to customize the controls you place.

 

To place a control:

1.

CLICK on an entry in the Controls toolbox, or choose a control from the Data / Tables Pad or the Window Designer Populate menu. You can also select a control template from the Control Templates Pad.

2.

After you have selected a control or control template, pass the cursor over the sample window.

The cursor changes to a crosshair (+). Position the crosshair where you want the control to appear.

3.

CLICK the mouse.

The Window Designer places the upper left hand corner of the control at the position of the cursor crosshair when you click the mouse. By default, the control takes on the size of the other controls of that type already in the window. If there are no like controls in the window, the control is the default size.

Control templates generate source code to declare controls and manage their associated data. For example, the BrowseBox control template not only generates source code to display a listbox control, it also generates code to load data from a table into a QUEUE, then display the data in the listbox with complete scrolling and mouse-click selection capability.

 

Generally, it is to your advantage to use a Control template rather than a simple control.

 

When using the Window Designer Populate option to place a Dictionary Column, it automatically opens the Select Column dialog so you can select or define a data dictionary column or memory variable to associate with the control. Once placed, you can access the control’s Properties Pad dialog from the View menu or from the right-click popup menu.

 

4.

If necessary, CLICK and DRAG on a control handle to resize the control. CLICK