Ide/Resource Editor/Editing a Dialog

Editing a Dialog

To edit a dialog, in the project tree (in the Project window) double click (or press Enter) the name of a file with a dialog description (the .dlg filename extension). The IDE Designer appears and you can edit whatever form of a dialog you wish.

The IDE Designer After Creation of a New Dialog

When a new dialog is created, it will by default have three push button controls: OK, Cancel and Help. These can freely be rearranged or deleted.

Controls

Each control in a dialog must have an identifying name (constant in VPI style dialogs), which is unique within that dialog. While two controls within one dialog may not have the same name (or constant value), it is actually a good idea if controls in different dialogs, which perform the same action have the same names (or constants).

Types of Controls

	A Push Button control serves to initiate a specialized action in an application.
	A Check Box control lets you indicate a choice among two alternatives. For example some facility may be switched ON or switched OFF.
	A group of Radio Button controls serves to indicate one choice from among a list of alternatives.
	A Static Text control reserves an area for the text in the dialog. Although called static, in fact the application can change the text during execution. This is often used for prompts or field names relating to other controls.
	An Edit Control reserves an area for text editing (e.g. names, numbers, text constants etc.). Editing text strings with multiple lines is possible.
	A List Box allows you to view a list of elements and to select one - or several - elements from this list.
	A List Button control serves for choosing one from the pop-out set of the alternatives revealed by pressing the button. Pressing the button again pops the list back in again.
	A List Edit control allows single line text editing like an Edit control, or selection from a list of elements.
	The Vertical Scroll Bar and the Horizontal Scroll Bar controls serve to select a value within a scale of values.
	A Group Box control serves for assembling together a number of controls in a functional group with a Group Name. Its only function is a visual one.
	An Icon control reserves an area for an icon image.
	A Custom Control can be either IDE Controls created in the project, it can be VPI user-defined control with a window class defined by vpi::classCreate, or it can be controls imported as COM packages from DLLs, VBXs or OCXs.

Inserting Controls

To insert a new control in a dialog, click the icon of the desired control type in the Controls toolbar. (You can also select the desired control type in the Controls sub-menu of the main IDE menu or in the pop-up menu in the IDE Designer.)

Controls Toolbar

Originally the Controls toolbar is displayed below the IDE Designer window. You see it in the following picture:

The Controls Toolbar

Clicking icons in the Controls toolbar you select a type of a control to be placed into the edited dialog/window/form/IDE control (sometimes we will use the term container instead of dialog/window/form/IDE control). When you click a control type icon, then the current cursor is replaced with the cursor correspondent to the control type to be inserted. Move the cursor to some position in the container client area and click the mouse button. The control with the default size will be inserted at the specified position.

Instead of dropping a control into a container with a click, it is possible to drag out the rectangle (in the container client area) where a control should be placed; so you can specify not only the control position but also the control size.

After a VPI control is placed with the mouse into a VPI style container, the correspondent VPI control Attributes dialog appears. In this dialog you can change some control attributes, when you close the dialog, the control appears at the specified location in the container.

After a GUI control is placed with the mouse into a GUI style container, it immediately appears at the specified location in the container. To change properties of the GUI control, one should select it then the list of GUI control properties appears in the GUI control Properties table.

There are the following icons in the Controls toolbar:

Icon	Insert a new:	Description
	Push Button	After selection of this control the cursor becomes
	Check Box	After selection of this control the cursor becomes .
	Radio Button	After selection of this control the cursor becomes .
	Static Text Control	After selection of this control the cursor becomes .
	Edit Control	After selection of this control the cursor becomes .
	List Box	After selection of this control the cursor becomes .
	List Button	After selection of this control the cursor becomes .
	List Edit	After selection of this control the cursor becomes .
	Horizontal Scroll Bar	After selection of this control the cursor becomes .
	Vertical Scroll Bar	After selection of this control the cursor becomes .
	Group Box	After selection of this control the cursor becomes .
	Icon Control	After selection of this control the cursor becomes .
	Custom Control	After selection of this control the cursor becomes .

Selecting and Deselecting Controls

Click inside a control to select one control. A frame appears around the selected control.

To select a group of controls move the mouse pointer to the point in the dialog you want to be one corner of the selected area and press and hold the left mouse button. While holding the left mouse button move the mouse until all the desired controls in the dialog are inside the selected area. Then release the mouse button. All controls inside the specified rectangle will be selected.

Also after one or more controls are already selected, you can include one extra control in the selection by holding down the Ctrl key and click the control.

To deselect the control or group of controls click outside the selecting frame. Deselected controls lose their frame.

Resizing Controls

Once a control has been inserted in the dialog, it has a default size. To re-size a control, first click inside the control area to select it. Then move the cursor to the sizing handles on the selection frame. A new shape of cursor indicates the direction in which you can re-size the control. Press and hold the mouse button, drag until the selected control has the size you want, then release the mouse button.

You can also change the size of a control by double-clicking it to activate the dialog for control attributes setting. Select the position you want to change and after specifying a new position or size, press enter to return to the dialog.

Remark: You cannot change the size of icons. You can only change their location.

Moving Controls

To move a control or a group of controls first select them. Then move the cursor inside the selection frame, press and hold the mouse button, drag the mouse pointer to a new location and release the mouse. Also, when one or more controls are selected, it is possible to use the cursor keys to move the selection in small steps (corresponding to the Grid settings).

Arranging Controls

To arrange a group of controls first select the group. Then click an appropriate button in the Layout toolbar or a menu item in the Layout menu of the IDE menu (or in the pop-up menu).

The Layout Toolbar

The Layout commands for justifying and resizing controls:

	Align Left	Align the selected controls along their left sides.
	Align Center	Center the selected controls vertically.
	Align Right	Align the selected controls along their right sides.
	Align Top	Align the selected controls along their tops.
	Align Middle	Center the selected controls horizontally.
	Align Bottom	Align the selected controls along their bottoms.
	Even Horizontal Spacing	Spacing the selected controls evenly between the leftmost and the rightmost controls.
	Grid	Toggle the Grid (see below).
	Even Vertical Spacing	Spacing the selected controls evenly between the topmost and the bottom-most controls.
	Make Same Size	Make the selected controls the same size as a model control.
	Make Same Horizontal Size	Make the selected controls the same width as a model control.
	Make Same Vertical Size	Make the selected controls the same height as a model control.
	Size To Contents	Resize the selected controls to optimally display its titles (caption texts).

Editing Properties of GUI Controls

When you open a GUI dialog or a Form (GUI window) in the IDE Designer, then near from the opened dialog (form) the Control Properties table appears.

To change properties of a GUI package control first select this control (by clicking in it) in the dialog (form). The current set of the control properties appears in the Control Properties table. Now you can edit the displayed GUI control properties.

Click here to view GUI Control Properties table

The displayed set of properties depends on the control type. The Control Properties table contains two types of properties. General properties are common to all types of controls and some properties, which are individual to different kinds of controls.

Initially this Control Properties table is empty. However, as soon as one of controls in the edited dialog (form) is selected this table starts to display properties of the selected control.

If the Control Properties table is closed, then double-click a control - the Control Properties table appears. Also the Control Attributes command, from the IDE Designer speed menu, can be used to open the Control Properties table.

GUI Control Properties Table

When you open a GUI dialog or a form (GUI window) in the IDE Designer, then the Control Properties table also opens.

The set of properties displayed in the Control Properties table depends on the control type and contains two groups of properties:

• General properties are common to all types of controls.
  These are: Left Anchor, Top Anchor, Right Anchor, Bottom Anchor, Container Name, Enabled, Lock to Container, Name, Representation, TabStop, Title, X, Y, Width, Height and Visible.

• Specific properties are individual to different types of GUI controls.
  These are: 3State, AlignBaseline, Alignment, AllowPartialRows, Auto, AutoNotify, AutoHScroll, AutoVScroll, Border, Case, Class, ExtendedSel, HideSel, HScroll, Icon Name, IgnorePrefix, LeftText, MultiColumn, MultiLine, MultiSelect, Password, ReadOnly, Rows, Sort, StaticScrollbar, Style, UseTabStops, VScroll, WantReturn, Wrap.

In Control Properties table you can edit the displayed properties of the selected GUI control.

Initially this table is empty. However, as soon as any of GUI controls in the edited GUI dialog (form) is selected, the Control Properties table displays the current set of properties of the selected control.

If the Control Properties table is closed, double-click a control to show the table. The Control Attributes command, from the speed menu of the IDE Designer, can also be used to open the Control Properties table.

Common Properties of Almost All GUI Controls

There are some basic control properties, which are used by almost all GUI controls. These are:

• Name

The Name input box is where you can specify some correct Visual Prolog name, which will be used as the control name (identifier).

The default Name is generated from the control type (for example, pushButton, checkBox, listButton, etc.) and the _ctl suffix. If several controls of the same type are created, then the control type is suffixed with the number, for example, pushButton1_ctl.

You can edit this default name or simply type in your own version.

• Representation

This property can have one of the following two values: Fact Variable, Variable.

• Fact Variable

When Fact Variable is specified, then the IDE generates the fact variable, which will store the object of the control. This fact variable is used to reference to this control in the code. This fact variable name is determined by the Name property. For example, ok_ctl. Notice that in this case the fact variable name is automatically converted to be started with the lowercase character.

• Variable

When Variable is specified, then the IDE unifies the object of the control with an ordinary variable. This variable will be used to reference to this control in the code. This variable name is determined by the Name property. For example, Cancel_ctl. Notice that in this case the variable name is automatically converted to be started with the uppercase character.

The default value is Fact Variable.

• Title

The Title property is where you specify the title (label), which you want to be displayed as the control caption.

One character in the Title text may be underlined to indicate an access key. To underline a character precede it with the ampersand & character. At runtime this character in the control Title will be underlined.

Notice that this character is displayed underlined also in the value cell of the Title property:

The used ampersand & character is seen only when the value cell of the Title property has the focus:

If you need to display the ampersand & character in the Title text, then use two of them &&.

• Lock to Container

Possible values are True and False. True defines that the control is locked inside the container selected in the Container Name property.

• Container Name

In this list box you can select the Name of one of containers (currently only the group box groupBox type of containers is supported) defined in the dialog or in the form.

All controls belonging to the same container are in the same group of related controls. The user may use the arrow keys to move from one control in the group to the next one.

Only the Names of group boxes, inside which the control is placed, appear in the list of Container Name property values. For example, if you see:

this means that the control is placed inside two group boxes with names GroupBox_ctl and GroupBox1_ctl.

If you do not need to relate the control to any container, then you should select [none].

• X, Y, Width, Height

These properties determine the control coordinates and size:

• X

The X coordinate of the upper-left corner of the control (in Dialog Base Units).

• Y

The Y coordinate of the upper-left corner of the control (in Dialog Base Units).

• Width

The Width of the control (in Dialog Base Units).

• Height

The Height of the control (in Dialog Base Units).

• Left, Top, Right and Bottom Anchors

These properties determine how the control coordinates (and may be size) will be handled when the dialog or form (containing this control) is resized. The general rules are described in the "Using Anchors for Positioning GUI Controls while Dialog Resizing".

• Left Anchor

Possible values are True and False. True defines that the Left boundary of the control is always positioned at the specified distance (equal to the X property) from the Left boundary of the dialog (form) containing this control.

The distance is specified in the Dialog Base Units.

• Top Anchor

Possible values are True and False. True defines that the Top of the control is always positioned at the specified distance (equal to the Y property) from the Top boundary of the dialog (form) containing this control.

The distance is specified in the Dialog Base Units.

• Right Anchor

Possible values are True and False. True defines that the Right boundary of the control is always positioned at the specified distance from the Right boundary of the dialog (form) containing this control.

The distance is specified in the Dialog Base Units. The distance value can be seen near the arrow, which appears when the control is selected "Using Anchors for Positioning GUI Controls while Dialog Resizing".

• Bottom Anchor

Possible values are True and False. True defines that the Bottom of the control is always positioned at the specified distance from the Bottom boundary of the dialog (form) containing this control.

The distance is specified in the Dialog Base Units. The distance value can be seen near the arrow, which appears when the control is selected "Using Anchors for Positioning GUI Controls while Dialog Resizing".

• Enabled

Possible values are True and False. They define whether the control will be created initially enabled (True) or disabled (False). The default value is True (enabled).

You can use the window::getEnabled/0-> predicate to get whether the control is enabled

IsEnabled = checkButtonName:getEnabled(),
IsEnabled = true,

and the window::setEnabled/1 predicate

IsEnabled = true,
checkButtonName:setEnabled(IsEnabled),

to set this flag programmatically.

• Visible

Possible values are True and False. They define whether the control will be created initially visible (True) or invisible (False). The default value is True (visible).

You can use the window::getVisible/0-> predicate to get whether the control is visible

IsVisible = checkButtonName:getVisible(),
IsVisible = true,

and the window::setVisible/1 predicate

IsVisible = true,
checkButtonName:setVisible(IsVisible),

to set this flag programmatically.

• TabStop

Possible values are True and False. They define whether this control belongs to a subset of controls through which the user can move using the TAB key. The default value is True (the control belongs to a group of controls between which the user can navigate with TAB).

You can use the control::getTabStop/0-> predicate to get whether the control has this flag

IsTabStop = checkButtonName:getTabStop(),
IsTabStop = true,

and the control::setTabStop/1 predicate

IsTabStop = true,
checkButtonName:setTabStop(IsTabStop),

to set this flag programmatically.

If IsTabStop is true, then the focus will be able to jump to this control while the Tab pressing navigation. Pressing the TAB key moves the focus to the next control, which has the TabStop = True.

Specific Properties of Different GUI Control Types

The following properties are specific to different types of controls:

• Auto

Possible values are True and False. They define whether this control is an automatic (an automatic check box or an automatic radio button). When you click an automatic control, then it change its state in the proper way.

You can use the checkButton::getStyle/2 and radioButton::getAuto/0-> predicates to get whether this flag is set to a control:

checkButtonName:getStyle(IsAuto, _Is3State),
IsAuto = true,

and the checkButton::setStyle/2 or radioButton::setAuto/1 predicates

IsAuto = true,
checkButtonName:setStyle(IsAuto, _Is3State),

to set this flag programmatically.

The default value is True (auto).

• 3State

Possible values are True and False. They define whether this check box can have 3 states (unchecked, checked, undetermined). You can use the checkButton::getStyle/2 predicate to get whether this state is set to a control

checkButtonName:getStyle(_IsAuto, Is3State),
Is3State = true,

and the checkButton::setStyle/2 predicate

Is3State = true,
checkButtonName:setStyle(_IsAuto, Is3State),

to set this state programmatically.

A 3-states check box is the same as an ordinary check box, except that the box can be grayed (dimmed) as well as checked. The grayed state is used to show that the state of the check box is not determined.

The default value is False (3State).

• LeftText

Possible values are True and False. They define whether the control title text should be positioned on the left or on the right of the control (check box or radio button).

You can use the checkButton::getLeftText/0-> or radioButton::getLeftText/0-> predicates to get whether the control has this flag

IsLeftText = checkButtonName:getLeftText(),
IsLeftText = true,

and the checkButton:setLeftText/1 or radioButton:setLeftText/1 predicates

IsLeftText = true,
checkButtonName:setLeftText(IsLeftText),

to set this flag programmatically.

The default value is False (caption is on the right side).

• AlignBaseline

Possible values are True and False. They define whether the control caption text should be positioned on the same horizontal line with caption texts of all other controls, which have the same vertical position with this control.

This property is defined to all controls, which can have captions (static texts, check boxes, edit and list edit controls, etc.)

You can use the getAlignBaseline predicates (like editControl::getAlignBaseline/0->) to get whether the control has this flag

IsAllignBaseLine = checkButtonName:getAllignBaseLine(),
IsAllignBaseLine = true,

and the setAlignBaseline (like textControl::setAlignBaseline/1) predicates

IsAllignBaseLine = true,
checkButtonName:setAllignBaseLine(IsAllignBaseLine),

to set this flag programmatically.

The default value is True (align captions horizontally).

Style

Push buttons

For push buttons possible values are Cancel, OK and Regular.

Cancel

Push buttons with the Cancel style are created by the button::newCancel/1 onstructor.

When a dialog/form contains a push button with the Cancel style, then this dialog/form will provide standard handling of the Esc key - the dialog/form is simply closed without any additional actions.

OK

Push buttons with the OK style are created by the button::newOk/1 constructor.

When a dialog/form contains a push button with the Ok style, then this dialog/form will execute dialog/form validation check when this button is clicked. See "Dialog/Form Validation" tutorial (on WEB) for more information.

Regular

Push buttons with the Regular style are created by the ordinary button::new/1 constructor.

Such buttons do not initiate any special default handling.

Group boxes

For group boxes possible values are Group Box, Simple Border, Horizontal Separator, No Border. These values define the border type of the group box control.

The default is Simple Border.

You can use the groupBox::getBorderStyle/0-> predicate to get the border style

GroupBoxBorderStyle = controlName : getBorderStyle(),

and the groupBox::setBorderStyle/1 predicate

GroupBoxBorderStyle = groupBox(),
controlName : setBorderStyle(GroupBoxBorderStyle),

to set the border style programmatically.

• Alignment

Possible values are Left, Center and Right. Radio buttons in this group box determine how the text in the control is aligned.

The default value is Left (align left).

• Left

Defines that the text in the control will be aligned left.

You can use the textControl::getAlignment/0-> predicate to get which of these flags the control has

AlignmentType = textControlName : getAlignment(),
AlignmentType = alignLeft(),

and the textControl::setAlignment/1 predicate

AlignmentType = alignLeft(),
textControlName : setAlignment(AlignmentType),

to set this flag programmatically.

• Center

Defines that the text in the control will be centered.

The AlignmentType = alignCenter().

• Right

Defines that the text in the control will be aligned right.

The AlignmentType = alignRight().

• Wrap

Possible values are True and False. They define whether the text in the control will be wrapped to several lines.

The default value is True (wrap).

You can use the textControl::getWrap/0-> predicate to get whether the control has this flag

IsNoWrap = textControlName : getWrap(),
IsNoWrap = true,

and the textControl::setWrap/1 predicate

IsNoWrap = false,
textControlName: setWrap(IsNoWrap),

to set this flag programmatically.

• IgnorePrefix

Possible values are True and False. Setting True value prevents interpretation of any & characters in the caption of the static text control as access keys (accelerator prefix characters). Accelerator characters are displayed underlined and the prefix & character is deleted.

The default value is False.

Notice that static text controls cannot be activated. Therefore, when an access key of a static text control is pressed, then the control next to this static text control, in the tab-stop order of controls in the dialog, is activated.

Most often this flag is used when filenames, which can contain the & character, need to be displayed in static text controls.

You can use the textControl::getIgnorePrefix/0-> predicate to get whether the control has this flag

IsIgnorePrefix = controlName : getIgnorePrefix(),
IsIgnorePrefix = true,

and the textControl::setIgnorePrefix/1 predicate

IsIgnorePrefix = true,
controlName : setIgnorePrefix(IsIgnorePrefix),

to set this flag programmatically.

• MultiLine

Possible values are True and False. When this property is True, then the edit control allows multiple lines.

The default value is True (allows multiple lines).

Notice that the VScroll, HScroll, AutoVScroll, and WantReturn properties do not work for single-line (False) edit controls.

You can use the editControl::getMultiLine/0-> predicate to get whether the control has this flag

IsMultiLine = controlName : getMultiLine(),
IsMultiLine = true,

and the editControl::setMultiLine/1 predicate

IsMultiLine = true,
controlName : setMultiLine(IsMultiLine),

to set this flag programmatically.

• WantReturn

Possible values are True and False.

If it is True, then a carriage return will be inserted as the part of an edited string, when the user presses the Enter key while entering text into a multi-line edit control.

If it is False, then pressing the Enter key has the same effect as pressing the default (OK) push button, which has the latest specified Default = True property value.

This property has no effect on single-line edit controls.

The default value is False.

You can use the editControl::getWantReturn/0-> predicate to get whether the control has this flag

IsWantReturn = controlName : getWantReturn(),
IsWantReturn = true,

and the editControl::setWantReturn/1 predicate

IsWantReturn = true,
controlName : setWantReturn(IsWantReturn),

to set this flag programmatically.

• VScroll

Possible values are True and False. They define whether the multi-line control gets a vertical scroll bar when it needs one.

The default value for edit controls is True for other types of controls is False.

This property has no effect on single-line edit controls.

You can use the editControl::getVScroll/0-> and listControl::getVScroll/0-> predicates to get whether the control has this flag

IsVScrollSet = controlName : getVScroll(),
IsVScrollSet = true,

and the editControl::setVScroll/1 and listControl::setVScroll/0 predicates

IsVScrollSet = true,
controlName : setVScroll(IsVScrollSet),

to set this flag programmatically.

• AutoVScroll

Possible values are True and False. They define whether the multi-line edit control automatically scrolls text up when the user presses the Enter on the last line.

The default value is False (does not scroll).

This property has no effect on single-line edit controls.

You can use the editControl::getAutoVScroll/0-> predicate to get whether the control has this flag

IsAutoVScrollSet = controlName : getAutoVScroll(),
IsAutoVScrollSet = true,

and the editControl::setAutoVScroll/1 predicate

IsAutoVScrollSet = true,
controlName : setAutoVScroll(IsAutoVScrollSet),

to set this flag programmatically.

• HScroll

Possible values are True and False. They define whether the multi-line edit or list box control gets a horizontal scroll bar when it needs one.

The default value is False (does not scroll).

This property has no effect on single-line edit controls.

You can use the editControl::getHScroll/0-> or listBox::getHScroll/0-> predicates to get whether the control has this flag

IsHScrollSet = controlName : getHScroll(),
IsHScrollSet = true,

and the editControl::setHScroll/1 or listBox::setHScroll/1 predicates

IsHScrollSet = true,
controlName : setHScroll(IsHScrollSet),

to set this flag programmatically.

• AutoHScroll

Possible values are True and False. They define whether the control automatically scrolls text in the control in order to display a typed character, when the user types the character at the end of the line.

If it is False, then only text that fits within the rectangular boundary is allowed. When the user presses the Enter key, the control scrolls all text back to the zero position.

The default value is True (scrolls text automatically).

You can use the editControl::getAutoHScroll/0-> predicate to get whether the control has this flag

IsAutoHScrollSet = controlName : getAutoHScroll(),
IsAutoHScrollSet = true,

and the editControl::setAutoHScroll/1 predicate

IsAutoHScrollSet = true,
controlName : setAutoHScroll(IsAutoHScrollSet),

to set this flag programmatically.

• Border

Possible values are True and False. They define whether the control is created initially with a border around the control.

The default value is False.

You can use the editControl::getBorder/0-> or listBox::getBorder/0-> predicates to get whether the control has this flag

BorderIsSet = controlName : getBorder(),
BorderIsSet = true,

and the editControl::setBorder/1 or listBox::setBorder/1 predicates

BorderIsSet = true,
controlName : setBorder(BorderIsSet),

to set this flag programmatically.

• Password

Possible values are True and False. If it is True, then the edit control displays all typed-in characters as asterisks (*).

The default value is False (displays typed characters "as-is").

You can use the editControl::getPassword/0-> predicate to get whether the control has this flag

IsPassword = controlName : getPassword(),
IsPassword = true,

and the editControl::setPassword/1 predicate

IsPassword = true,
controlName : setPassword(IsPassword),

to set this flag programmatically.

• HideSel

Possible values are True and False. If it is True, then the edit control hides selection, when it loses the input focus, and shows selection, when it receives the input focus.

The default value is True (hides selection).

You can use the editControl::getHideSel/0-> predicate to get whether the control has this flag

IsHideSel = controlName : getHideSel(),
IsHideSel = true,

and the editControl::setHideSel/1 predicate

IsHideSel = true,
controlName : setHideSel(IsHideSel),

to set this flag programmatically.

• ReadOnly

Possible values are True and False. If it is True, then the edit control is in the read-only mode.

The default value is False (editable).

You can use the editControl::getReadOnly/0-> predicate to get whether the control has this flag

IsReadOnly = controlName : getReadOnly(),
IsReadOnly = true,

and the editControl::setReadOnly/1 predicate

IsReadOnly = true,
controlName : setReadOnly(IsReadOnly),

to set this flag programmatically.

• Case

Possible values are Insensitive, Upper, Lower.

The default value is Insensitive.

• Insensitive

Defines that the edit control leaves the typed-in text "as-is".

This is the default value.

• Upper

Defines that the edit control converts all typed-in characters into the upper case.

You can use the editControl::getUpperCase/0-> predicate to get whether the control has this flag

IsUpperCase = controlName : getUpperCase(),
IsUpperCase = true,

and the editControl::setUpperCase/1 predicate

IsUpperCase = true,
controlName : setUpperCase(IsUpperCase),

to set this flag programmatically.

• Lower

Defines that the edit control converts all typed-in characters into the lower case.

You can use the editControl::getLowerCase/0-> predicate to get whether the control has this flag

IsLowerCase = controlName : getLowerCase(),
IsLowerCase = true,

and the editControl::setLowerCase/1 predicate

IsLowerCase = true,
controlName : setLowerCase(IsLowerCase),

to set this flag programmatically.

• Sort

Possible values are True and False. If it is True, then the list control sorts strings alphabetically.

The default value is True (sort).

You can use the listControl::getSort/0-> predicate to get whether the control has this flag

IsSort = controlName : getSort(),
IsSort = true,

and the listControl::setSort/1 predicate

IsSort = true,
controlName : setSort(IsSort),

to set this flag programmatically.

• ExtendedSel

Possible values are True and False. If it is True, then the list box control allows selection of multiple items by using the Shift key and the mouse or using the Shift key and the Up or Down Arrow keys.

The default value is False (cannot select multiple items).

You can use the listBox::getExtendedSel/0-> predicate to get whether the control has this flag

IsExtendedSel = controlName : getExtendedSel(),
IsExtendedSel = true,

and the listBox::setExtendedSel/1 predicate

IsExtendedSel = true,
controlName : setExtendedSel(IsExtendedSel),

to set this flag programmatically.

• MultiSelect

Possible values are True and False. If it is True, then the list box control allows selection of multiple items using the mouse.

The default value is False (cannot select multiple items).

You can use the listBox::getMultiSelect/0-> predicate to get whether the control has this flag

IsMultiSelect = controlName : getMultiSelect(),
IsMultiSelect = true,

and the listBox::setMultiSelect/1 predicate

IsMultiSelect = true,
controlName : setMultiSelect(IsMultiSelect),

to set this flag programmatically.

• AutoNotify

Possible values are True and False. If it is True, then the list box control notifies the parent window with an input message whenever the user clicks or double-clicks in the list box.

The default value is True (notify).

You can use the listBox::getAutoNotify/0-> predicate to get whether the control has this flag

IsAutoNotify = controlName : getAutoNotify(),
IsAutoNotify = true,

and the listBox::setAutoNotify/1 predicate

IsAutoNotify = true,
controlName : setAutoNotify(IsAutoNotify),

to set this flag programmatically.

• UseTabStops

Possible values are True and False. If it is True, then the list box control recognizes and expands TAB characters when drawing strings.

The default value is False (does not expand).

You can use the control::getUseTabStops/0-> predicate to get whether the control has this flag

IsUseTabStops = controlName : getUseTabStops(),
IsUseTabStops = true,

and the control::setUseTabStops/1 predicate

IsUseTabStops = true,
controlName : setUseTabStops(IsUseTabStops),

to set this flag programmatically.

• StaticScrollbar

Possible values are True and False. If it is True, then the list control shows a disabled vertical scroll bar for the list box when the box does not contain enough items to scroll. If it is False, then the scroll bar is hidden when the list box does not contain enough items.

The default value is True (shows vertical scroll bar).

You can use the listControl::getStaticScrollbar/0-> predicate to get whether the control has this flag

IsStaticScrollbar = controlName : getStaticScrollbar(),
IsStaticScrollbar = true,

and the listControl::setStaticScrollbar/1 predicate

IsStaticScrollbar = true,
controlName : setStaticScrollbar(IsStaticScrollbar),

to set this flag programmatically.

• AllowPartialRows

Possible values are True and False. If it is True, then the size of the list box is exactly the size specified by the application when it creates the list box. Normally, Windows re-sizes list boxes so that a list box does not display partial items.

The default value is True for list box controls and False for list button and list edit controls.

You can use the listControl::getAllowPartialRows/0-> predicate to get whether the control has this flag

IsAllowPartialRows = controlName : getAllowPartialRows(),
IsAllowPartialRows = true,

and the listControl::setAllowPartialRows/1 predicate

IsAllowPartialRows = true,
controlName : setAllowPartialRows(IsAllowPartialRows),

to set this flag programmatically.

• MultiColumn

Possible values are True and False. If it is True, then the list box control can have multiple columns.

The default value is False.

You can use the listBox::getMultiColumn/0-> predicate to get whether the control has this flag

IsMultiColumn = controlName : getMultiColumn(),
IsMultiColumn = true,

and the listBox::setMultiColumn/1 predicate

IsMultiColumn = true,
controlName : setMultiColumn(IsMultiColumn),

to set this flag programmatically.

• Rows

Possible values are positive numbers. For list button and list edit controls it specifies the maximal number of rows, which can be displayed in the opened list box sub-control.

The default value is 3.

You can use the listControl::getMaxDropDownRows/0-> predicate to get this number

MaxDropDownRowNumber = controlName : getMaxDropDownRows(),

and the listControl::setMaxDropDownRows/1 predicate

MaxDropDownRowNumber = 5,
controlName : setMaxDropDownRows(MaxDropDownRowNumber),

to set this number programmatically.

• Icon Name

The icon name must be selected from the list of icon names registered in the Project (by clicking the button). In order to an icon name appears in the list of registered icon names, you should add the icon file (IconName.ico) into the project files. To do this you should use the File | Add command (the Resource Files should be selected in the Files of Type).

• Class

Specify a name of a Windows class for the custom control (your application code must register the custom control by this name).

Editing Attributes of VPI Controls

To change attributes of a VPI package control double-click it or select the control and activates the Control Attributes command from the IDE Designer speed menu. Then the <ControlType> Attributes dialog appears.

These dialogs contains two levels of attributes. The general group contains attributes, which are common to all types of controls: the Text determines the control title, the Constant (name) is used as the control identifier, and the Control Size group determines position and size of the control.

Notice that the Text property/attribute is not used for some controls, for instance, it is not used for scroll bars.

Notice that in the Text fields the ampersand symbol & is reserved for indicating that the next to it character is to be underlined. For example, if you use the text string E&xit as a control name, then this control will be displayed with the title Exit at runtime. I.e. the char x will be displayed underlined (thus visually indicating that the x is an accelerator key). If you need to display the ampersand & symbol in the Text of a control, then use two of them &&.

Other attributes are individual to different kinds of controls.

Using Anchors for Positioning GUI Controls while Dialog Resizing

VPI controls remember in their attributes only their absolute positions and sizes. Therefore, when a VPI dialog or a VPI window containing such VPI controls are resized, these VPI controls do not change their positions and sizes!

In difference to them GUI controls have additional Anchor properties, which help to reposition (and may be resize) GUI controls when containing them GUI dialog (or form) is resized.

Each GUI control has four anchor properties: Left Anchor, Top Anchor, Right Anchor, and Bottom Anchor (see Anchor Properties of GUI Controls).

Each anchor determines that the specified (Left, Top, Right or Bottom) control boundary should be always positioned on the stated distance from the nearest (correspondent) border of the dialog (frame).

Each of anchors can have the True or False values. When the anchor value is True, then this anchor is active (used to position the correspondent control).

For example, when the Left Anchor is active (has the True value), then the left control boundary should be positioned on the stated distance from the nearest (left) border of the dialog (frame).

The simplest way to see which anchors are active for a control, is to select this control. Then some red arrows between control boundaries and correspondent boundaries of the dialog can bee seen. Each arrow specifies, that the correspondent anchor is active. For example, the arrow from the control top to the dialog top identifies, that the Top Anchor is active. In the picture below, you see three arrows, which specify that the Left, Top, and Right anchors are active to the Push Button control.

Numbers near such arrows show distances (in Dialog Base Units) between the correspondent boundaries of the control and the dialog.

Normally each control has one active horizontal and one active vertical anchors. When the dialog is resized, then such control is always positioned on the specified distances from the specified boundaries of the dialog. The size of the control is not changed!

When a control has both horizontal (or/and both vertical) anchors active, then both horizontal (or/and both vertical) boundaries of the control should be placed on some specified distances from the correspondent horizontal (vertical) boundaries of the dialog. Therefore, when the dialog is resized, then such control is also resized accordingly to keep the specified distances.

When no one of horizontal (or vertical) anchors of a control are active, then no one of horizontal (or vertical) boundaries of the control are bounded to the correspondent horizontal (vertical) boundaries of the dialog. Coordinates of such controls are handles on the "proportional basis". For example, when the dialog width is increased onto Delta dialog base units, then the X coordinate of the control is also increased, but it is increased two times smaller. That is the X coordinate of the control is increased only onto Delta/2 dialog base units.

Cut, Copy and Paste, Undo and Redo

You can Cut or Copy a group of selected controls onto the Windows clipboard, and Paste controls from the clipboard back into a dialog. The Undo and Redo commands serve to delete or restore the last editing operations of your dialog.

Grid

When the menu (or the pop-up menu) entry Resource | Grid is activated, or when the button from the Layout toolbar is pressed, the following dialog appears:

The Dialog to Specify the Grid Properties

With a grid in place, arranging the controls inside a dialog is easier. Also it is possible to tell the IDE Designer by the Snap to Grid that it should place controls at the grid intersections to give a satisfactory result.

Using a grid in the Dialog/Window/Form Editor

Test Mode

The IDE Designer has the Test Mode, so it is possible to see how the dialog with the created controls behaves. To illustrate the Test Mode we will assign some default values to the controls. The test mode is activated and deactivated from the Resource menu (or from the pop-up menu).

Test Mode for a Dialog

Tab Stops

When activating the menu (or the pop-up menu) entry Resource | Tabstops, it is possible to specify to which controls you can Tab to in the dialog. When this command is activated a small button with the + or - appears on controls depending upon whether the control has a tab stop or not. By clicking the small buttons, it is possible to toggle the setting.

Specifying Tab Stops for a Dialog

To exit the tab stop mode, just click in the dialog but outside of any controls.

Visit Order

When the tab stops have been specified for a dialog, then it is possible to specify the order in which controls will receive focus when tabbing.

Displaying the Visit Order

To change the visit order, click a small rectangle displaying the visit order number for a control that has an incorrect sequence number and this will bring up another dialog to change this sequence:

Changing the Visit Order

To stop the visit order mode, just click in the dialog outside any controls.

Speed Menu

When you are in the IDE Designer you can click the right mouse button to activate the Speed Menu. From this menu you can easily call any IDE Designer command:

The IDE Designer Speed Menu