Editing Forms

Forms are edited using a combination of commands from with the Forms window itself, the Alignment toolbar, the Selection toolbar and by adding controls from the Tools and Tools (Advanced) toolbars. The appearance of the form and the controls it contains are specified by setting the Form Properties of the form and the properties of the controls it contains.

 

images\win_form_resize.gif

 

Set the size of the form at any time by resizing it within the form window.

 

We can change the properties of the form by right clicking on the form and choosing Properties from the context menu.

 

images\dlg_form_properties_caption.gif

 

Change the Caption property to change the caption in the title bar.

 

images\dlg_form_properties_minmax.gif

 

Check the Control Box to create the X "close" box in the upper right corner of the form and to enable creation of Minimize and Maximize buttons. Checking the Control Box option also equips the form's title bar with a right-click context menu consisting of the standard Windows choices of Restore, Move, Size, Minimize, Maximize and Close. Click the Minimize Box and Maximize Box boxes to add these controls to the title bar.

 

images\win_form_edited.gif

 

The result will be shown in the form window. Note the changes in the title bar.

 

Very Important: If you uncheck the Control Box and then use Form - Test there will be no way to close the form except by doing an ALT-F4. Even if controls (such as a "Close" command button) are added to the form to close it without having to use the X control box in the upper right corner, those controls will not be functional in "test" mode. They will only work if the form is run using the Run button from the project pane.

 

Adding Controls

 

Click on any of the Tools toolbars for Form windows to choose a control. Add the control to the form by clicking and dragging where the form should appear. Standard controls when added to a form will be preconfigured with default captions and styles.

 

images\btn_ctrl_text.gif We can choose the Text Box control from the Tools toolbar.

 

images\sc_form_add_ctrl_01.gif

 

To add this control we click and drag where we would like it to appear.

 

images\sc_form_add_ctrl_02.gif

 

The result is a text box control with default properties. We can change those properties by right clicking on the control and choosing Properties from the resultant context menu. For example, we might wish to change the Text property of the text box from "Text" to "Sample Text".

 

images\btn_ctrl_checkbox.gif We can also choose the Check Box control and add it to the form by clicking and dragging.

 

images\sc_form_add_ctrl_03.gif

 

The above illustration shows the form after we have added a check box and then changed the Caption property of the check box to "A Check Box".

 

Selecting Controls

 

Like many things in Manifold, we will often want to select controls so that we edit them. This section is a general introduction to selecting controls using regular Manifold selection commands. Many programmers will also use "smart mouse" selection commands as discussed later on in this topic.

 

To save space, the subsequent illustrations will not show the Form window border or the outer border of the form. When any controls are selected the form itself is deselected and the edit handles on the form's edges will disappear. To edit (resize) the form itself, deselect the controls and the form will automatically be selected for editing.

 

images\sc_form_edit01.gif

Controls appear in the form in their unselected forms.

 

images\btn_sel_box.gif We can select them using any of the usual Manifold Selection mouse moves with selection modes applied as in all other uses of selection. For example, drawing a box around them with Select Box will select the two controls above. The controls will be marked with selection borders having selection handles.

 

Whenever a selection is made in a form one of the controls is the primary selection and all of the other selected controls are in the secondary selection. The primary selection control is the one that is used to guide actions such as alignment. This is a concept widely used in professional development tools such as Visual Studio and has proven to be very fast and intuitive. When coupled with smart mouse selection modes it allows rapid manipulation of controls in forms.

 

Solid black edit handles indicate the primary selected control. The primary selection is the only control that can be resized with the cursor (choose another control as the primary to resize it). The primary control guides alignment and resizing of all other selected controls within alignment and resizing commands. The most recently selected control becomes the primary selected control.

 

images\sc_form_edit02.gif

When the mouse is committed to a selection command it works in selection mode only. When we unclick the selection control toolbar button the mouse becomes available for other activities, such as resizing or moving controls. If we unclick the Select Box tool used earlier we will be able to use the mouse again in the Form.

 

images\sc_form_edit03.gif

For example, we can click and drag (the mouse will change to the move cursor shown above) to move a control.

 

images\sc_form_edit04.gif

We have just clicked and dragged on one control and moved both controls to the left. We can also click and drag on an edit handle in the primary control to resize it. If we click and drag on the rightmost edit handle we can resize the text box's width.

 

images\sc_form_edit05.gif

The result is a wider text box.

 

Note that all Manifold selection commands will work correctly with forms. For example, the Edit menu's Select All, Select None and Select Inverse commands work as expected.

 

images\sc_edit_select_inv06.gif images\sc_edit_select_inv07.gif

 

As seen in the illustration above, if one control in a form is selected, using Select Inverse will deselect it and will select the other controls.

 

Keyboard TAB Key Selection

 

Pressing the TAB key will cycle the selection through all of the controls in the form, selecting each in turn as the primary selected object. Press the TAB key to jump the selection from one control to another. At times this is a handy way of selecting controls within a crowded form or selecting controls that lie behind other controls.

 

Smart Mouse Selection

 

Manifold form windows support "smart mouse" selection like that used in Visual Basic forms editing. If the mouse is not occupied with a command mode (such as a regular selection command like Select Box) it may be used for smart mouse selection and editing as follows:

 

Click

Click on an unselected control to select it.

SHIFT Click

SHIFT Click on an unselected control to add it to the selection.

SHIFT Click on a selected control to make it the primary.

CTRL Click

CTRL Click on a control to toggle its selection status.

Click and Drag

Click and drag a primary selected control to move it. Clicking and dragging a secondary selected control when more than one control is selected will move all the controls.

 

The best way to learn the above is to create a form with some controls and to experiment. Smart mouse selection is a fast and intuitive way of editing forms.

 

Moving Controls

 

Controls in forms may be moved using either the mouse or keyboard keys. If several controls are selected, move logic is as follows:

 

·      Clicking and dragging on the primary selected control will move only that control.

·      Clicking and dragging on any of the other (secondary selected) controls will move all of the controls.

·      Arrow keys on the keyboards will reposition all selected controls one pixel at a time. Use these to "nudge" controls into position.

 

Arrow Key Short Cuts to Reposition and Resize

 

When controls are selected, arrow keys on the keyboard use the following logic:

 

·      Repositioning: Arrow keys on the keyboards will reposition all selected controls one pixel at a time. Use these to "nudge" controls into position.

·      Resizing: When only one control is selected, a SHIFT-arrow key press will resize the control. The left and right arrows will move the right margin of the control to the right or to the left. The up and down arrows will move the lower margin of the control down or up.

 

Using Grids and Snap to Grid

 

Use View - Grid to turn on a grid in the form and then use Snap to Grid to constrain the mouse cursor to moving between grid points. This greatly assists in creating controls that are reasonably aligned.

 

images\sc_form_grid_01.gif

 

By default, forms are shown in a form window without a grid.

 

images\sc_form_grid_02.gif

 

Choose View - Grid to launch the Grid dialog. Check the Show grid box to turn on the grid. Grids are created on a 5-pixel spacing for forms by default.

 

images\sc_form_grid_03.gif

 

The result is that a grid of dots appears every 5 pixels within the form.

 

images\btn_snap_to_grid_off.gif images\btn_snap_to_grid_on.gif

 

Turn on Snap to Grid by pushing the Snap to Grid button or by choosing Edit - Snap to - Grid from the main menu. When Snap to Grid is on, the mouse cursor will move only between grid points on the form. Controls may therefore be created that are shaped exactly to locations marked by grid points.

 

images\sc_form_grid_04.gif

 

This greatly facilitates drawing grid controls that are evenly aligned. Note that the grid is displayed only on the form itself and does not appear on the controls.

 

Alignment Commands

 

It's often the case that one's managers, clients and other demanding users will insist on well-organized dialogs where all the controls line up neatly. These are usually the same sorts of users who complain about spelling mistakes and who expect programs to come with documentation. Fortunately for professional programmers, Manifold's forms editor provides alignment commands so we can make pretty forms without stealing too much time from downloading mp3's.

 

The alignment controls are found on the Alignment toolbar .

 

images\tbar_alignment.gif

 

images\btn_align_left.gif

Align Left - Move objects so their left edges are aligned to the left edge of the primary selected object.

images\btn_align_top.gif

Align Top - Move objects so their top edges are aligned to the top edge of the primary selected object.

images\btn_align_right.gif

Align Right - Move objects so their right edges are aligned to the right edge of the primary selected object.

images\btn_align_bottom.gif

Align Bottom - Move objects so their bottom edges are aligned to the bottom edge of the primary selected object.

images\btn_align_centhor.gif

Center Horizontally - Move objects so that their centroid is centered horizontally in the form.

images\btn_align_centver.gif

Center Vertically - Move objects so that their centroid is centered vertically in the form.

images\btn_align_spaceacross.gif

Space Across - Space objects evenly across the form in a horizontal direction.

images\btn_align_spacedown.gif

Space Down - Space objects evenly up and down the form in a vertical direction.

images\btn_align_samewidth.gif

Same Width - Resize objects so that the width of all is the same as the width of the primary selected object.

images\btn_align_samewidthmax.gif

Same Width (Max) - Resize objects so that the width of all is the same as the width of the widest object.

images\btn_align_samewidthmin.gif

Same Width (Min) - Resize objects so that the width of all is the same as the width of the narrowest object.

images\btn_align_sameheight.gif

Same Height - Resize objects so that the height of all is the same as the height of the primary selected object.

images\btn_align_sameheightmax.gif

Same Height (Max) - Resize objects so that the height of all is the same as the height of the tallest object.

images\btn_align_sameheightmin.gif

Same Height (Min) - Resize objects so that the height of all is the same as the height of the shortest object.

images\btn_align_full_width.gif

Full Width - Increase width of objects to that of the form.

images\btn_align_full_height.gif

Full Height - Increase height of objects to that of the form.

images\btn_align_full_size.gif

Full Size - Increase width and height of objects to those of the form.

 

 

Alignment Example

 

images\sc_form_edit05.gif

 

To align the controls above, we begin by selecting them.

 

images\btn_align_left.gif Press the Align Left command in the Alignment toolbar.

 

images\sc_form_edit06.gif

 

The controls will instantly align so that the left margin of each is lined up with the leftmost margin of the primary selected control. In this case, the primary control was the text box.

 

images\sc_form_edit07.gif

 

images\btn_deselect.gif Clicking the Select None button in the selection toolbar to deselect all the controls shows us the new, improved, neat and clean controls arrangement. Excellent! … Now we can get back to downloading mp3's…

 

Seeing Controls in their Run Time Form

 

Many controls in forms will change their appearance from design time to run time. Push the Test button (or right click on the form and choose Test from the context menu) to see the form in its run time appearance. The Test run will allow many controls to function visually as well, so tabs may be clicked or command buttons pressed to test the visual behavior of controls during run time. However, it is not the same as running the actual form / script combination. In particular, if a control is scripted to close the form it will not work from the Test environment. Therefore, if one does not equip the form with a Control Box "X" close button in the upper right corner there will be no obvious way to close the form when Test is run. In such cases, use ALT-F4 to close the form.

 

Tech Tips

 

Remember to unclick a control creation tool (such as Insert Check Box) before reaching into the form window to move things about. Otherwise, you'll end up creating lots of little check boxes on top of each other when you think you are clicking and dragging controls about.

 

Remember to unclick a selection mode box (such as Select Box) before doing trying to move or resize. Otherwise, the move and resize cursors won't appear because the system thinks you still want to select things.

 

If you edit a form's properties to eliminate the System Menu or to make it borderless, you may end up with a form that provides no way to Close the form when it is tested. In such cases use ALT F4 to close the form since this keyboard shortcut to closing is always enabled.

 

Since the grid does not appear within controls, this effect can interfere with placing controls within a frame, since the interior of the frame will also be grid-free. Mouse action will still be aligned to the grid if Snap to Grid is on, but we won't see the grid within the frame control. To see the grid when inserting controls within a frame, draw clusters of controls and then draw frames that contain them.

 

images\sc_form_grid_05.gif

 

Suppose we've drawn two checkbox controls using the grid.

 

images\sc_form_grid_06.gif

 

Using the Insert Frame control we draw a frame.

 

images\sc_form_grid_07.gif

 

The frame appears on top of the checkbox controls. The checkbox controls cannot be seen because the frame's interior is solid.

 

images\sc_form_grid_08.gif

 

We push out the Insert Frame button to turn off that command and then click on the new frame to select it. We can then right click on the frame and choose Order - Move to Bottom to move the control below the checkboxes.

 

images\sc_form_grid_09.gif

 

We can now see the checkbox controls. If desired, we can select them and move them about together for precise placement within the frame.

 

Most professional programmwers work with a grid on and Snap to Grid enabled. Using grids together with smart mouse selection (with keyboard modifiers), use of keyboard arrow keys to move and resize controls and the Alignment toolbar controls results in fast and accurate form creation.