Concept : Understanding Forms
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 container 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] Understanding Form Container Styles
The default parent Container Type for a form is a Grid. Grid is one of six available Container layout options.
- BulletinBoard—The BulletinBoard container allows you place controls anywhere within the container. Unlike with other containers, controls are not auto-aligned when placed within the BulletinBoard container.
- Grid—The Grid container is a two-by-two array (four cells) that allows you to place one control per cell. You can add or delete cells as required. When you add a control to a Grid's cell, the cell automatically resizes to accommodate the control. For example, if you add a TextEdit control to a cell, the row and column reduce in size to the default size of the TextEdit control. You can prevent the cell from auto-sizing by setting the Locked property for the row and column. Then, when a control is added to a cell, it is centered vertically and horizontally in the cell.
- HorizontalBox—The HorizontalBox container allows you to place multiple controls in a horizontal row. Though the HorizontalBox auto-sizes to accommodate the first control that's added, you can increase the width of the cell and add additional controls within the HorizontalBox. If you add more controls than can fit within the width of the HorizontalBox, the HorizontalBox automatically expands to accommodate the controls.
- HorizontalWrap—The HorizontalWrap container is designed to display data from a collection with the DynamicForm and FormList controls. The HorizontalWrap causes the content to wrap from the right edge to the next row. An example of this is a folder window where the icons wrap to the next row.
- VerticalBox—The VerticalBox container allows you to place multiple controls in a vertical column. Though the VerticalBox auto-sizes to accommodate the first control that's added, you can increase the height of the cell and add additional controls within the VerticalBox. If you add more controls than can fit within the height of the VerticalBox, the VerticalBox automatically expands to accommodate the controls.
- VerticalWrap—The VerticalWrap container is designed to display data from a collection with the DynamicForm and FormList controls. The VerticalWrap causes the content to wrap from the bottom to the next column.
[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 Grid container is the default parent (or top level) Container Type of a form. Grid is the most flexible of the containers.
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