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.




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.




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




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.




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.




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




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.




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.



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.



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.



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



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.



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 on an unselected control to select it.


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.




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




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.




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.




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 .





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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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



Alignment Example




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


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




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




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




Using the Insert Frame control we draw a frame.




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




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.




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.