Visual Form Designer (VFD)

Overview

The Visual Form Designer is a tool to create and maintain FORMDef statements that define your Forms. Using this tool you don't have to go in the details of constructing a FORMDef statement, you just drop controls in your Form, resize them, move them, change their properties or delete them and finally the new or modified FORMDef statement is automatically generated for you. Then you can paste it in your code and continue your work as usual.

To generate the FORMDef statement of a new Form you activate VFD and you start with a blank Form. You resize it in the desired dimensions and you start dropping controls on its surface. When your Form is ready you press a button and the FORMDef statement is created and copied to clipboard. Then you can go in your code and paste it normally there.

To modify an already existed Form you select and copy in the clipboard the FORMDef statement in your code, activate VFD and pressing a button in the toolbar you import the statement. Then you get a visual representation of your Form in the design area of the tool and you are able to edit it. When you have finish all the modifications you can generate the new FORMDef statement and replace with it the previous in your code.

NOTE: If you do modifications in the FORMDef statement by hand, avoid to make it depended to other symbols in your code (local constants) because you will not be able to import it in VFD later. VFD cannot see symbols private in your code.

Activation

You can activate VFD pressing in the main toolbar or F6.

Using VFD

In the picture below we can see the four section that comprise VFD window.

1. Toolbar
2. Properties Editor
3. Controls palette
4. Design area

1. Toolbar

Toolbar (at the top) contains four buttons

1. . This button imports a FORMDef statement from clipboard. The statement is analyzed and the Form it represents appears in the design section of VFD. The user can start, now, his/her modifications.
2. .  This button generates the FORMDef statement that represents the Form in the design section of the VFD. It also places it in the clipboard so you will be able to paste it in your code.
3. . The last form you edit remains in VFD and it is automatically loaded every time you activate it. To start a new Form you have to press this button. The previous Form is cleared and is replaced with a blanc Form.
4. . Exits from the VFD.

2. Properties Editor

Properties editor is in the left. Lists the properties of the selected Control or Form. Properties editor is comprised by two columns. The first contains the property name of every listed property and the second its current value. The user can directly change the values. Many properties they have drop down list boxes for easy and accurate value selection.

3. Controls palette

The Control's palette is below Properties editor. In the form of buttons contains all the controls the user can "drop" in his/her Form. You can press the button of the Control you want to add in your Form and click in the position in your Form where you wish to place it. After the Control is dropped its selection button goes up again and the button "Select" appears pressed. This button doesn't represent a control. When it is pressed you can click on any already placed Control in your Form and select it. This selection makes you able to edit Control properties, move it, resize it or even delete it.

4. Design Area

It is in the right and it is comprised by three TABs that show a different view of your Form.

• The first TAB ("Form Design") is really the place where you design your Form. It "simulates" the Windows Desktop in light green color where your Form is placed for editing. You can select, resize and move your Form in this Desktop. The position of the Form in the "Desktop" do not affect the Left, Top properties of the Form. The ability to move the Form is only for user convenience. To define the Form's position on the screen you have to directly change Left/Top values in the properties editor. Note that if you have create a Form variable (set frm=FORM statement) with CenterScreen parameter TRUE, whatever you put there will be ignored.
• In the second TAB ("View in Text") you can see the FORMDef statement generated for the current status of your Form.
• The third ("Controls") is a hierarchical view of the controls contained in the Form. You can click on any control in this list and select it. This is very useful at times when some controls are completely covered by others (ctrPANEL etc) and you have no other way selecting them.

In the design view there is a WYSIWYG editor for your Forms. They look in this editor the same as they will look in a running code. As we have said already you press a Control's button in Controls palette and then you click in the specific point in Form's area where you wish to drop it. Also when the "Select" button is pressed you are able to click on a control and select it. Every selected control is surrounded by eight small black grabber rectangles. These grabbers denote the selected control and can be used to resize it in any direction using the mouse. When you click on a Control and select it, the property editor is updated with its properties list and you are able to change their values.

Pay attention to the prNAME property found in all control types. This property contains the unique Control ID, that is the only mean to identify it in EventProc routine which accepts events from all controls in the Form (and probably for more than one Forms). VFD, when a new control is dropped in the Form, generates automatically a unique ID for you in the form of ID## where ## represents a numeric value  (e.g. ID100). If you wish you can change this ID to something that is more close to the control's role in your Form.

Working with group of Controls

When CTRL key is pressed then clicking a Control (in the design area) adds it in a group. The already selected Control is always added first in this group. You can see this group from the grabber rectangles surrounding each Control belonging in the group. The first Control (the selected) is again in black grabbers as usual but the rest of Controls will appear with gray grabbers. A Control already selected in the group can be deselected if click on it again with CTR key pressed. Clicking in any other place other than the selected Controls, the group is destroyed. Note that only Controls that belong to the same container Control can be added to the group.

When a group of control is set then a number of operation can be applied to all of them. You can move the group of Controls with the mouse or delete all these Controls at once. You can copy/cut the group to the clipboard and paste it to another container control or Form.

Also some operations can be executed that affect the size and position of the Controls of the group according to the size and position of the first in the group. You can get these operations with a right click of the mouse. Will appear the following popup menu:

Choosing "Position & Size" from the menu is displayed a dialog with two pages, one for handling position operations over the group Controls, and one for handling sizing operations.

The operations for the position page are:

The operations for the Size page are: