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 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).

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 .)

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



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, 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, 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.

There are the following icons in the Controls toolbar:

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 commands for justifying and resizing controls:

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 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 

The displayed set of properties depends on the control type. The 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, can be used to open the Control Properties table.

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. Then the  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 E x it 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 ).

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:



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



Test Mode
The 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).



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 +</vp> or -</vp> 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.



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.



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:



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

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