Clarion Community Help

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 and DRAG on the interior of the control to move the control.

 

You can also resize multiple controls at the same time if they are selected.

 

 

 

Controls and Their Properties

This section shows you how to set control properties. It assumes you understand how to use the Window Designer to choose, place, and size controls.

It provides an overview of the types of controls as they relate to data entry, discusses the properties applicable to the controls, then covers each control type individually. It also shows you how to associate the contents of a variable with an entry or display control.

Setting Control Properties with the Data Dictionary

Control properties may be set for a single control using the Window Designer. Better still, with the Data Dictionary, you may set control properties for every control associated with a specific database column (press the Controls tab of the Column Properties dialog). When control properties are set in this manner (with the Data Dictionary), the Application Generator applies these properties every time you place the column on a window or report and every time you synchronize your application and data dictionary.

Types of Controls

For this discussion, we will divide controls into three categories: Interactive Controls, Non-Interactive Controls, and Custom Controls.

Interactive Controls

Interactive controls are clicked on or typed into by the user.

·Action controls'BUTTON'lead to an instantaneous result. For example, closing a dialog box and completing its pending operations. Clarion also supports associating a continuous action with a button'pressing the button and holding it down is the same as clicking the button repeatedly.

·User Choice controls'CHECK, OPTION, RADIO, COMBO, SPIN and LIST'let the user enter data by choosing from a finite group of alternatives. No keyboard input is required. They create streamlined user entry since it is usually faster to pick an item from a list than to type the name of an item you may not remember. Use choice controls to force the user to choose only one of a set of mutually exclusive selections'create “latched” buttons that stay depressed until pressed again, or groups of radio buttons where only one button can be selected at a time.

·Entry controls'ENTRY and TEXT'allow data entry from the keyboard. Clarion provides extensive options for automatically validating user data entry, plus supports Windows standard Cut, Copy, and Paste operations for these text controls.

·{ Hybrid controls'SHEETs, TABs and REGIONs'interact with the user by guiding them to other controls, and by generating events that your program can detect and act upon.

Non-Interactive Controls

Non-interactive controls provide visual cues that help the user understand and operate the interactive controls.

·Static controls'PANEL, PROMPT, GROUP, BOX, ELLIPSE, LINE and IMAGE'don't perform an action, but instead guide the user to other controls or otherwise provide visual candy. They can take the form of a group box, a line, or a graphic image, all of which visually organize or emphasize other controls. GROUP controls also help you develop and maintain your application by letting you apply common attributes such as positioning, enabling, or hiding to several controls at once.

Custom Controls

Custom controls are defined outside the Clarion Development Environment and may be either interactive or non-interactive. Custom controls are discussed in a later topic.

 

Common Control Attributes

The attributes you add to a control determine how the control looks and acts. Different controls support different functions, and so require different attributes. However, all Clarion controls allow you to set two common attributes: USE and AT. Additionally, most controls allow you to set TEXT, COLOR, KEY, ALRT, FONT, SKIP, HIDE, DISABLE, SCROLL, CURSOR, HLP, MSG, and TIP attributes. This section explains how to set these common control attributes. Each attribute is discussed fully in the Language Reference.

 

RIGHT-CLICK on a control and select Properties from the popup menu, or press the F4 KEY to access its properties in the Properties Pad.

Setting the USE Attribute

The Use property takes either a Field Equate Label or a variable label. If you placed a control template, you can accept the default label or you may specify your own label.

Field Equate Labels

Use a Field Equate Label when you don't need to assign a value from the control to a variable. A field equate label is a valid Clarion label prefixed by a question mark(?). This label references the control within your source code (see the Language Reference for more information). For example:

HIDE(?MyButton)    !hides the control with USE attribute ?MyButton

 

Variable Labels

Use a variable label when you do need to assign a value from the control to a variable or vice versa.

Some controls, such as PROMPTs and LINEs, cannot accept variable values and therefore only accept Field Equate Labels as their USE attribute.

The variable must be declared in your program, module, or procedure. Press the ellipsis (…) button in the control's properties dialog to declare the variable or to select the variable from those already declared.

The variable label automatically serves as the field equate label for the control too! For example:

 

MESSAGE('My Variable = '& MyVar)  !displays the variable MyVar

HIDE(?MyVar)                      !hides the ?MyVar entry control

Duplicate Field Equate Labels

Two or more entry controls may update the same variable. However, they cannot have the same field equate label. In this circumstance, the Window Designer automatically creates unique field equate labels by appending a sequence number to the field equate labels that would otherwise be duplicated. The unique field equate label is specified by the third parameter of the USE attribute (see USE in the Language Reference). For example, if you place three controls on a single window that all update the same variable, the Window Designer generates code something like this:

window WINDOW('Caption'),AT(,,183,119),GRAY

       SPIN(@s20),AT(66,27),USE(MyVar)

       COMBO(@s20),AT(66,50),USE(MyVar,,?MyVar:2)

       ENTRY(@s20),AT(67,7),USE(MyVar,,?MyVar:3)

      END

 

To set the USE attribute

1.RIGHT-CLICK the control, then choose Properties from the popup menu.

This displays the Properties Pad for the selected control, which lets you specify the USE property for your control.

2.If the control is an entry control or has an associated variable (CHECK, COMBO, CUSTOM, ENTRY, LIST, OPTION, PROGRESS, SHEET, SPIN, STRING, or TEXT), press the Use column ellipsis (…) button to select or define a data dictionary column or memory variable from the Select Column dialog.

If the control does not have an associated variable (BOX, BUTTON, ELLIPSE, GROUP, IMAGE, LINE, PANEL, PROMPT, RADIO, REGION, or TAB), type a valid Clarion label prefixed with a question mark ( ? ). Notice there is no Use column ellipsis (…) button for these controls.

Remember, you can always use the default label supplied by the Window Designer.

3.Press the OK button.

 

Field equate labels and Clarion's property syntax let you modify the control at run-time. For example, you can use the DISABLE statement to “dim out” controls in situations when they should be unavailable to the user:

DISABLE(?MyList)

 

Following is an alternative method for setting the USE attribute. This method works best for controls with no associated variable.

1. From the Window Designer Options dialog, check Show Properties Toolbar. Press OK to save the Options.

On the next Designer open, this displays the Property toolbox, which lets you specify the USE attribute for your controls.

2. Click the control you want to change.

3. In the Property toolbox Use entry, type a Field Equate Label or the label of a variable to use with the control.

Setting the AT Attribute

The AT attribute defines the control's position and size. The Window Designer lets you visually set the AT attribute of each control simply by dragging it wherever you want. You may also specify position and size by manually typing coordinates in the control's properties dialog and by using the Alignment tools. To set the AT attribute, which defines the control's position and size:

1. RIGHT-CLICK on the control, then choose Properties in the popup menu. This displays the Properties Pad, and the Position category as shown here:

2.  Specify coordinates for the top left corner of the control.

Type in an 'X' (horizontal) and 'Y' (vertical) coordinate. This places the top left corner of the control relative to the top left corner of the window. The unit of measurement for the coordinates is the dialog unit. See the Glossary for the definition of dialog units. These provide a relative measure based on the size of the character set currently in use.

3. Specify Width and Height options.

Choose Default and Clarion automatically selects a size based on the display picture on an entry control. Or choose Fixed and type in width and height values for the control in dialog units.

For IMAGE controls, Default displays the picture at the size it was created.

You may also specify that the control fills the window by choosing the Full options. This adds the FULL attribute to the control. See the Language Reference for more information on this attribute.

Default and Full are mutually exclusive choices. For example, you cannot set Width to Full and Height to Default.

You can provide your users a full window text editor for MEMO columns. Create a window and place a TEXT control in it. Optionally change the cursor to an I-Beam, then set the Width and Height of the TEXT control to Full.

Setting the Text Property

Many controls, such as BUTTONs, TABs, CHECKs, GROUPs, etc., display constant text on their face. This is the most straightforward and common method for telling the user how and when to use the control.

To set the text property:

1. RIGHT-CLICK on the control then choose Properties from the popup menu.

This displays the Properties of the respective control, which lets you specify the text attribute for your control.

2. In the Text property, enter the text to display.

An ampersand (&) within the text means the next character is the mnemonic key for the control. When displayed, the character is underlined, and when the user presses ALT plus the mnemonic key, the control's action initiates. For example type &Print to display Print and to let ALT +P initiate the control's action.

Field equate labels allow you to use executable statements and Clarion's property syntax to modify the text of the control at run-time. For example, you can change text on the fly with:

?MyButton{PROP:Text}='new text'

Following is an alternative method for setting the USE attribute. This method works best for controls with no associated variable.

1. From the Window Designer Options dialog, check Show Properties Toolbar. Press OK to save the Options.

On the next Designer open, this displays the Property toolbox, which lets you specify the Text attribute for your controls.

2. Click the control you want to change.

3. In the Property toolbox TEXT entry, enter a text value to use with the control.

There is still another way to set the text attribute. This is done through the use of a control's Smart Tag.

As you click on the smart tag (shown above), a menu of smart choices appears. Selecting the Edit Text item allows you to update the Text property as needed.

Setting the Display Picture

Many controls, such as ENTRYs, COMBOs, STRINGs, etc., display variable values as well as constant text. These controls provide a Picture property instead of the Text property.

To set the display picture for variable values, type a picture token in the Picture entry or press the ellipsis button to use the Edit Picture String dialog (see the Picture Editor chapter). See the Language Reference for more information on pictures. See also Dictionary Editor'Defining Column Properties.

Setting the COLOR Attribute

The sparing use of color can improve the look and functionality of your program. See Windows Design Issues for more information on the use of colors in the Windows environment.

Enter a valid color value in any of the following properties to add the COLOR attribute to your control declaration. See ..\LIBSRC\EQUATES.CLW for a list of valid color equates.

TextColor

To apply a specific color to the control text, type a valid color equate in this entry, or press the drop list to select a color from the Color dialog.

Background

To apply a specific color to the entire control, except for selected text, type a valid color equate in this entry, or press the drop list to select a color from the Color dialog.

SelForeGround

To apply a specific color to the control's selected text, type a valid color equate in this entry, or press the drop list to select a color from the Color dialog.

SelBackGround

To apply a specific color to the background of control's selected text, type a valid color equate in this entry, or press the the drop list to select a color from the Color dialog.

GridColor (LIST and COMBO only)

To apply a specific color to the LIST's grid lines, type a valid color equate in this entry, or press the the drop list to select a color from the Color dialog.

BorderColor (BOX, ELLIPSE, and REGION only)

To apply a specific color to the control's border, type a valid color equate in this entry, or press the the drop list to select a color from the Color dialog.

FillColor (BOX, ELLIPSE, REGION, and PANEL only)

To apply a specific color to the control's interior, type a valid color equate in this entry, or press the the drop list to select a color from the Color dialog.

The Color Dialog

You invoke the Color dialog from several places within the Clarion environment, but primarily when setting color for a window or for a window control. The Color dialog is a Microsoft product, but is documented here for your convenience.

Custom Colors

Choose from 48 custom color samples that you define. click on the color you want.

Define Custom Colors

To define a custom color, righ-click on one of the 16 Custom Color sample boxes. The Color dialog expands so you can define the custom color.

Color Continuum Pad

Displays a continuum of color choices. click on this pad to set the gross definition for your custom color. Fine tune your color definition with the controls described below.

Luminance Continuum Slider

Displays a continuum of luminance choices. click and drag inside the elongated rectangle to adjust the luminance of the color from darkest (black) to lightest (white).

Color|Solid

Displays a sample of the currently defined (mixed) color and its nearest solid color equivalent. To convert the currently defined color to its nearest solid color equivalent, type Alt+O. The conversion automatically adjusts the values of the six components listed below to make the appropriate solid color equivalent.

Add to Custom Colors

When you are satisfied with the custom color definition press the Add Colors button.

Web Colors

Choose from a list of standard colors deemed safe and compatible with all modern general use browsers.

System Colors

Choose from a drop-down list of the system colors that Clarion uses to create its default Windows standard application interface. These colors match the default colors used by Clarion's template generated procedures.

Setting the KEY Attribute

The KEY attribute applies to any control which may receive focus (Combo Box, Entry Box, Group Box, List Box, Option Box, Property Sheet, Spin Box, Tab, Text Column, Button, Check Box, Custom Control, and Radio Button). It specifies a hot key which gives immediate focus to the control. For an action control, such as a command button, the hot key initiates the action as well. See the Language Reference for more information.

To set the KEY attribute:

1. RIGHT-CLICK on the control, and choose Key in the popup menu.

This opens the Input Key dialog, which lets you specify the KEY attribute for your control.

2. Press the desired key or key combination.

The key or key combination you press appears in the Key entry, and is used as the parameter to the KEY attribute for this control. Alternatively, press a character or function (f1, f2, etc.) key and check a combination of the Ctrl, Shift, or Alt boxes to specify a hot key combination.

Mouse clicks may be used as hot keys; however, mouse clicks cannot be specified by clicking the mouse. For mouse clicks, check the corresponding box(es). For example, to give focus to a control when the user ALT+DOUBLE-CLICKS, check the Alt box, the Left Button box, and the Double Click box.

The ESC, ENTER, and TAB keys cannot be specified by simply pressing them, because these keys are standard Windows navigation keys. For these keys, press the ellipsis (…) button and type “esc,” “enter,” or “tab.”

3. Press the OK button.

Avoid using ALT plus letter combinations as hot keys. These combinations should be reserved for menu accelerator keys.

Setting the ALRT Attribute

The ALRT attribute applies to any control which may receive focus. It specifies an alert key which is enabled when the control has focus. When the user presses an alerted key, it generates an EVENT:AlertKey. This lets you execute an action while the user is still in the entry control. For example, you may set an ALRT to display additional information to the user upon a function key press.

To set the ALRT attribute:

1. RIGHT-CLICK on the control, then choose Alert in the popup menu.

This opens the Alert Keys dialog, which manages the ALRT attributes for your control. You may set as many alert keys as you like for a control.

2. Press the Add button.

This opens the Insert Key dialog, which lets you specify the ALRT attribute for your control. This is the same dialog used to specify the KEY attribute. See Key above for information on how to use this dialog.

3. Press the OK button.

Setting the FONT Attribute

You may specify the appearance of the text displayed on a control. Select typeface, size, color, style, and script from standard drop-down lists. Choose strikeout and underline effects too. See FONT in the Language Reference for more information.

To set the FONT attribute:

1.RIGHT-CLICK on the control and choose Properties in the popup menu.

This displays the Properties Pad dialog. The Font properties are grouped as follows:

2.Press the ellipsis to the right of the TextFont property. The Font Dialog is displayed.

3.Select typeface, size, color, style, and script from standard drop-down lists.

The dialog displays a sample of the text design you have chosen.

4.Optionally check the Strikeout or Underline boxes if needed.

5.Press the OK button.

Be sure the font you pick is present on the user's system. If not, Windows will try to substitute an equivalent font; however, since you have no control over the substitution, you cannot be sure of the result. If you must use a font that may not be on your user's system, you must ship the font with your install set.

Following is an alternative method for setting the FONT attribute:

1. From the Window Designer Options dialog, check Show Properties Toolbar. Press OK to save the Options.

On the next Designer open, this displays the Property toolbox, which lets you specify the USE attribute for your controls.

2. CLICK on the control you want to change.

3. In the Property toolbar, select the font typeface and size from standard drop-down lists.

4. In the Property toolbar, theselect font style with standard bold, italic, and underline buttons.

Setting Control Modes

The Properties Pad of the various control properties dialogs lets you set several attributes that control the “mode” of your window controls. To set the control's mode:

1.RIGHT-CLICK on the control, and choose Properties in the popup menu.

This displays the Properties Pad dialog for the selected control.

2.You should see a Mode category, which displays a list of toggle properties.

3.Toggle any combination of the Mode properties. The choices and their effects are:

Skip

Instructs the Window Designer to omit the control from the Tab Order (the order in which controls get input focus as the user presses the TAB key). When the user tabs from control to control in the dialog box, Windows will not give the control focus. This is useful for seldom-used controls, because the user can still access the control by clicking on it. The Window Designer places the SKIP attribute on the control (see the Language Reference).

Disable

Disables (or dims) the control when your program initially displays it, so it is unavailable to the user. The Window Designer places the DISABLE attribute on the control. You can use the ENABLE statement to allow the user to access the control (see the Language Reference).

Hide

Makes the control invisible at the time Windows would initially display it. Windows actually creates the control ' it just doesn't display it on screen. The Window Designer places the HIDE attribute on the control. You can use the UNHIDE statement to display the control (see the Language Reference).

Scroll

Specifies whether the control should remain in the window when the user scrolls the window. By default (unchecked), the control remains in the window. Check the Scroll box to create a control that can be “scrolled off” the window. The Window Designer places the SCROLL attribute on the control (see the Language Reference).

Transparent

Specifies whether the control is drawn on the window, or only its text or icon. By default (unchecked), the control is drawn. Check the Transparent box to create a control that is invisible, except for its text or icon. The Window Designer places the TRN attribute on the control (see the Language Reference).

Locked

This property is actually located in the Design Mode category, and “Freezes” the control, and all its children, so that subsequent data dictionary changes are not applied (see Synchronize). You can override the #Freeze attribute for all controls, or for individual controls.

Setting Help Attributes

The Help category of the various control properties dialogs lets you set several attributes that supply information to the user about the control.

1. RIGHT-CLICK on the control, and choose Properties in the popup menu.

This displays and selects the Properties Pad dialog for the selected control.

2. Locate the Help category, where the common properties for the Help attribute are located.

The default view of the Properties Pad is the Category View (shown above)

3. In addition to the Alrt and Key properties that were discussed above, optionally fill in any of the four entries.

The entries and their effects are:

Cursor

Lets you specify an alternate shape for the cursor when the user passes it over the control. The Cursor drop-down list provides standard cursor choices such as I-Beam and Crosshair. To select an external cursor file (whose extension must be .CUR), choose Select File… from the drop-down list, then pick the file using the standard file dialog. The Window Designer places the CURSOR attribute on the control (see the Language Reference).

The I-Beam, which signals text entry, is an excellent choice for the active cursor for an entry or text control.

Help ID

Sets the HLP attribute for a control (see the Language Reference). When the control has focus and the user presses F1, the Windows Help file opens to the topic referenced by the HLP attribute. In the Help ID entry, type either a help keyword or a help context string present in a .HLP file.

A Help keyword is a word or phrase indexed so the user may search for it in the Help Search dialog. If more than one topic matches a keyword, the search dialog appears.

A Help context string is the arbitrary string that uniquely identifies each topic page for the Windows Help Compiler. A help context string must be prefixed with a tilde (~).

When authoring a Windows Help file, you indicate a keyword with the 'K' footnote. A Help context string is the arbitrary string that uniquely identifies each topic page for the Windows Help Compiler. When creating the Help file, the '#' footnote marks a context string. These tasks are all done for you by many help authoring tools.

Message

Sets the MSG attribute for the control (see the Language Reference). The MSG attribute specifies text to display in the first zone of the status bar when the control has focus. In the Message entry, type the text to display in the status bar.

Tip

Sets the TIP attribute for the control (see the Language Reference). TIP displays text in a small box near the cursor when the cursor is idle on the control for a specified period. The default period is half a second. This technique is also known as “Balloon Help.” In the Tip entry, type the text to display in the tip box.

The Tip entry supports multi-line tool tips, but they do not automatically word wrap. To create a tip that spans more than one line, include carriage returns in the text (press the ENTER key between lines).

Interactive Controls

Button Properties

A BUTTON is a control that performs an action when the user presses it. In addition to the common control attributes described above, the Window Designer lets you set the following button properties:

·The Button text.

·The Button icon or picture.

·The action to take When Pressed.

·The STD ID specifying a standard windows action for the button to take.

·Whether the button's action is the default action.

·The Drop ID specifying drag and drop operations for which the button is a valid target.

By convention, a button is a rectangular area containing text, picture, or both. When the user presses (clicks on) the button, it executes the command described by the text or picture.

To specify button properties, RIGHT-CLICK the button control and choose Properties from the popup menu. The Properties Pad dialog is selected. This dialog helps you to specify the attributes for the BUTTON statement.

See the Button Control Properties help topic in the core help for a detailed examination of the Button Properties dialog.

 

Radio Button Properties

A Radio Button, also called an option button, provides the user a set of mutually exclusive choices. For example, in a group of three buttons, only one can be selected at a time.

By default, Radio Buttons display as small circles; the selected button is filled. You can make Radio Buttons look like push buttons simply by adding icons to each button; the selected button remains depressed.

Relationship Between RADIOs and OPTIONs

An option box'an OPTION structure'must always surround the radio button choices. The Window Designer automatically prompts you to create an option box if you try to place a radio button outside an option box. The option box appears at run time as a rectangle with a caption in the top border, and radio buttons inside. When you set radio button properties, you should also set the properties for the option box.

When the user selects a radio button, the OPTION's USE variable receives a value indicating which button was selected: either the text of the selected button, the button number, or another value that you specify. Your program can then take appropriate action based on the value of the OPTION's USE variable.

To place a radio button and an associated option box, CLICK the RADIO entry in the Controls Toolbox, then CLICK in the sample window. The Window Designer automatically adds an option box and a radio button.

See the Option Control Properties help topic in the core help for a detailed examination of the Option Control Properties dialog.

See the Radio Button Control Properties help topic in the core help for a detailed examination of the Radio Button Properties dialog.

Check Box Properties

A check box manages a variable that the user may turn on or off. Select the CHECK entry in the Controls Toolbox, then DRAG AND CLICK to the sample window. Once placed, RIGHT-CLICK the check box and select Properties from the popup menu; the Properties Pad dialog for the control is selected.

See the Check Box Control Properties help topic in the core help for a detailed examination of the Check Box Control Properties dialog.

List Boxes

List Box controls are covered in detail in Lesson 6 - Exploring the Browse Procedure .

Combo Boxes

The COMBO control combines an entry box with a list box. It is useful for selecting data which usually is a member of the list, but sometimes is not.

Combo Box properties are set exactly like List Box properties except for four additional properties associated with the entry box portion of the COMBO control.

See the Combo Box Control Properties help topic in the core help for a detailed examination of the Combo Box Control Properties dialog.

Spin Boxes

A SPIN control is a specialized entry box that only accepts values in a predefined range. The SPIN also provides 'increase' and 'decrease' buttons, which many people like because they can use the mouse to change the value. You can also type a value directly into the control.

See the Spin Box Control Properties help topic in the core help for a detailed examination of the Spin Box Control Properties dialog.

Entry Box

An ENTRY control allows the user to enter data from the keyboard. Clarion provides extensive options for automatically validating user entry.

·You may specify a picture for the column, automatically formatting the data the user enters.

·You may specify an initial value for the column.

·You may validate the data the user enters either at the time it's typed, or when the focus changes to another control.

To set the properties for an entry box RIGHT-CLICK the entry box then select Properties from the popup menu.

See the Entry Control Properties help topic in the core help for a detailed examination of the Entry Control Properties dialog.

Text Box

The TEXT control provides a multi-line data entry control. This control is especially suitable for holding a long STRING or a MEMO. The TEXT control provides automatic word wrapping.

To set the properties for a text box RIGHT-CLICK the text box then select Properties from the popup menu.

See the Text Box Control Properties help topic in the core help for a detailed examination of the Text Box Control Properties dialog.

Sheet Controls

The SHEET control declares a group of TAB controls that offer the user multiple pages of controls for a single window. The multiple TAB controls in the SHEET structure define the pages displayed to the user. The SHEET structure's USE variable receives the text of the TAB control selected by the user.

See the Sheet Control Properties help topic in the core help for a detailed examination of the Sheet Control Properties dialog.

Tab Controls

The TAB structure declares a group of controls. This group is one of multiple pages of controls that may be contained within a SHEET structure. The multiple TAB structures within the SHEET structure define the pages displayed to the user. The SHEET structure's USE attribute receives the text of the TAB control selected by the user.

The Windows standard to change from tab to tab is CTRL+TAB. Clarion TAB controls follow this standard, both in the development environment and in a compiled application.

If you nest TABS, only the top level is controlled by CTRL+TAB.

See the Tab Control Properties help topic in the core help for a detailed examination of the Tab Control Properties dialog.

Region Controls

A REGION control is simply a rectangular area of the screen. Its main purpose is to provide a reference to test whether a given event'such as a mouse event'occurred within that region.

You may give a region control color, a bevel, or provide for a cursor change when the user passes the mouse over the region.

See the Region Control Properties help topic in the core help for a detailed examination of the Region Control Properties dialog.

Non-Interactive Controls

Non interactive controls do not accept data, but instead guide the user to other controls with text or graphics. For example:

·A string in a dialog box can provide directions for filling out a data control.

·One of the simplest graphic elements'a group box'can visually associate a group of controls, signalling the user that the entries all relate to the same thing.

·An image or graphic can do more than embellish a dialog. It can convey meaning to a process that might otherwise take many, many words.

String

The String control lets you place a string constant on screen. It optionally lets you display a variable value.

Strings do not support multi-line text; for multi-line text (word wrap) use a Prompt control or a Text control.

See the String Control Properties help topic in the core help for a detailed examination of the String Control Properties dialog.

Prompt

The PROMPT control lets you place a string on screen that automatically provides an accelerator key to the next active control following the prompt. It is identical to the STRING control, except it has no variable capability and no angle capability; however, unlike a STRING, a PROMPT supports word wrapping (multi-line text).

See the Prompt Control Properties help topic in the core help for a detailed examination of the Prompt Control Properties dialog.

Group Box

A GROUP control draws a box around other controls. It visually associates the controls for the user, and lets you address all the controls as one entity'making it easy, for example, to disable all at once.

See the Group Control Properties help topic in the core help for a detailed examination of the Group Control Properties dialog.

Progress Bar

The PROGRESS control declares a control that displays a progress bar. This usually displays the current percentage of completion of a batch process by incrementally “filling” the bar as the process progresses.

See the Progress Control Properties help topic in the core help for a detailed examination of the Progress Control Properties dialog.

Image

The IMAGE control lets you place bitmapped and vector images in a window. The bitmap file formats supported are .BMP, .CUR, .PCX, .GIF, .ICO and .JPG. The vector file format supported is .WMF. Clarion supports up to 16.7 million color resolution.

GIF images are substantially faster than .JPG images although they do not compress quite as well. 32-bit JPG images are significantly faster than 16-bit JPG images. Clarion does not support printing of ICO images (because Windows doesn't support it). BMP images are fast, but take lots of space because they are not compressed.

Use the PALETTE attribute on your window to ensure ample color support for your images. The PALETTE attribute specifies how many colors you want this window to use when it is the foreground window. This is applicable in hardware modes where a palette is in use and spare colors are available.

See the Image Control Properties help topic in the core help for a detailed examination of the Image Control Properties dialog.

Line

The LINE control lets you place a straight line in your windows. You may set the line's color, thickness and position. The Line control cannot receive focus, nor can it generate events.

See the Line Control Properties help topic in the core help for a detailed examination of the Line Control Properties dialog.

Box

The Box control lets you place a square or rectangle in your windows. You may fill the box with a color, and specify a border color. You may also specify it should have rounded corners. The Box control cannot receive focus, nor can it generate events.

See the Box Control Properties help topic in the core help for a detailed examination of the Box Control Properties dialog.

Ellipse

The ELLIPSE control lets you place a circle or ellipse in your windows. You may fill the ellipse with a color, and specify a border color. The ellipse control cannot receive focus, nor can it generate events.

See the Ellipse Control Properties help topic in the core help for a detailed examination of the Ellipse Control Properties dialog.

Panel

The PANEL control lets you place a raised or depressed rectangular panel in your windows. You may color the panel. The panel control cannot receive focus, nor can it generate events.

See the Panel Properties help topic in the core help for a detailed examination of the Panel Properties dialog.

Next: Lesson 5 - Exploring the Menu/Frame Procedure