Concept : Understanding Forms 
Changes Locked Out for Planned Maintenance Contents |
[edit] Description
In Bungee Connect, a form is a part of the View and acts as the primary element in your application interface. You lay out your UI on a form, and it is in the context of a form that you bind UI elements (controls) to data structures and functionality (the Model).
A form is first and foremost a container. A form can contain both common controls (such as a Button or a List) and [ontainer controls (such as BulletinBoard and Grid). Because a form is a container, you can create very sophisticated user interfaces by embedding container controls within other container controls like Russian dolls. You can also reuse a form in the context of another form—for example, you can embed one form directly within another (by dragging and dropping). In addition, you can display the visual interface of one class within the context of the visual interface of another class on an as-needed basis dynamically, at runtime. For more information on this topic see the documentation for the DynamicForm and FormList controls.
Whereas in some systems a form is a standalone class, in Bungee Connect, you can add a form to your project only as a member of a class. A single class can have n forms. The purpose of a form is to enable you to construct a visual representation (the View or UI) of all or a portion of that class (the Model). A form is distinctly a View element and enforces (in conjunction with adapters and connections) a proper separation between the View and the Model. The fact that a form is a member of a class keeps the visual presentation of that class from being bound in a messy or "spaghetti code" way to any other portion of the Model, or indeed to some other portion of the View. The close association of a form with its parent class helps to maintain a clean separation between the View and the Model throughout your application.
[edit] Changing Form Container Styles
The default parent Container Type for a form is a Grid. Grid is one of six available layout options. Use the Container Type property to change from one layout option to another.
[edit] Embedding Containers
The container controls can be embedded one inside of another. For example, if you leave the parent Container Type of the form set to Grid, you can drag (from the Toolbar under Containers) a BulletinBoard container into the top left cell of the parent Grid. You can now drag other controls onto the embedded BulletinBoard. The screen shot below shows a Button control being dragged onto an embedded BulletinBoard. Because the embedded container is a BulletinBoard, there is a Tooltip showing the x and y coordinates of the mouse position as the button is placed.
As another example, if you set the parent Container Type of the form to BulletinBoard, you can drag (from the Toolbar under Containers) a Grid onto the BulletinBoard.
You can nest several embedded containers. The following screen shot shows four nested Grid containers each inside of their respective parent Grids.
[edit] Grid Container
The most popular and flexible container control is the Grid. To select the top level Grid on a new form, click in the form (or in the dark area outside the form). With the Grid selected, two types of Grid-editing controls appear on the rulers. The green buttons are the Edit Row and Edit Column buttons and let you add and delete rows and columns, and change other settings. The gray row and column resize handles are for resizing the rows and columns.
A Grid can be customized by:
- Editing row or column settings
- Inserting or Removing rows or columns
- Setting whether the row or column is Stretchable
- Setting whether the row or column is Locked
- Adding a Separator between columns
- Setting the vertical and horizontal alignment for the row or column
- Resize Rows or Columns
-
Removing and Restoring Grid Walls
[edit] Editing Row or Column Settings
You can set the height of a row (or width of a column) and the left, right, top, and bottom margins. Margin is the space between the border of the row or column and a control contained in the row or column.
The Edit Column dialog box allows you to set:
- Size (column width) in pixels.
- Left Margin in pixels.
- Right Margin in pixels.
The Edit Row dialog box allows you to set:
- Size (row height) in pixels.
- Top Margin in pixels.
- Bottom Margin in pixels.
[edit] Inserting or Removing Rows or Columns
You can insert or remove columns and rows using the Edit Row and Edit Column menus. You have the option to insert a column before or after a selected column and to insert a row above or below a selected row. A selected column (row) can also be removed.
Note A row or column cannot be removed if it contains a control.
[edit] Setting Stretchable Property
The Stretchable property on a row or column determines the behavior of the row or column when the entire form is stretched, either at design time or run time. If stretchable is not set, the row or column maintains its size as set in its Size property. If stretchable is set, the row or column grows or shrinks as the form is re-sized.
[edit] Setting Locked Property
You can resize rows and columns by setting the Size property in the Edit Row (or Edit Column) dialog box or by sliding the gray resize handles that are next to the Edit Row or Edit Column button. When the Locked property is set, you cannot change the size by sliding the gray resize handle. The Locked property allows you to lock row and/or column sizes so you don't accidentally change their size as other rows and columns are adjusted as you design the form. This setting has no affect at runtime. The Locked property is very useful for setting the size on a row or column that contains an image or style element.
[edit] Adding a Separator
When you add a Separator between two rows or two columns, you can move the border between the two rows or columns at runtime.
[edit] Setting Vertical and Horizontal Alignment
You can set the vertical alignment (top, middle, or bottom) and the horizontal alignment (left, center, or right) of each row and column in the form.
The Edit Column and Edit Row menus and Edit Column and Edit Row dialog boxes allow you to set:
- V-Align: top, middle, bottom.
- H-Align: left, center, right.
[edit] Resize Rows or Columns
You can resize rows and columns by setting the Size property in the Edit Row (or Edit Column) dialog box or by sliding the gray resize handles that are next to the Edit Row or Edit Column button on the rulers.
[edit] Removing and Restoring Grid Walls
You can remove (or restore) grid walls using the minus symbol (-) (plus symbol (+)) that appears in the middle of the grid wall as you move the mouse over the line.
Removing:
Removed:
Restoring:
[edit] See Also
Editing a Form
Adding a Form to a Class
Embedding a Form within a Form Using Drag and Drop
Understanding Copy and Paste
Using Copy and Paste
Binding a Control to an Object
DynamicForm
FormList
