Back to Concepts and HOW TOs

Contents 1 Description 2 Prerequisites 3 Procedure 3.1 Setting Container Type 3.2 Editing a Grid 3.2.1 Editing Row or Column Settings 3.2.2 Inserting Rows or Columns 3.2.3 Removing Rows or Columns 3.2.4 Setting the Stretchable Property 3.2.5 Setting the Locked Property 3.2.6 Adding a Separator 3.2.7 Setting Vertical and Horizontal Alignment 3.2.8 Resizing Rows or Columns 3.2.9 Removing and Restoring Grid Walls 3.3 Embedding Container Controls 4 Error Handling 5 Examples 6 Next Steps 7 Tags

[edit] Description

This document describes how to edit a from in Bungee Builder.

[edit] Prerequisites

Understanding Forms
Introduction to Bungee Builder
Overview : Building a Bungee-powered Application

[edit] Procedure

When you double-click on a new form in the Solution Detail, a blank, two-row by two-column grid is displayed in the Design Editor (and the Toolbox shows categories of controls). By default the parent (or top level) Container Type of a form is set to Grid. There are six container types available for designing the layout of your form. The container controls are found in the Builder's Toolbox, under the section Containers. You can also embed one container inside of another as you design your form.

[edit] Setting Container Type

The Container Type property allows you to select the layout of your form.

To set the Container Type property:

1. Click in the form (or in the dark area outside the form) to select the parent (or top level container) for the form.
2. In the Property Editor, click the Layout tab.
3. For the Container Type property, select the desired container type from the drop-down box.

[edit] Editing a Grid

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.

You use the Edit Row and Column buttons to do the following:

• Edit row or column settings
• Insert rows or columns
• Remove rows or columns
• Set whether the row or column is Stretchable
• Set whether the row or column is Locked
• Add a Separator between columns
• Set the vertical and horizontal alignment for the row or column

[edit] Editing Row or Column Settings

1. Mouse over the green Edit Row (or Edit Column) button to highlight the row or column associated with the button. 
2. Click the Edit Row (or Edit Column) button and select Edit Row (or Edit Column). A dialog box is displayed.
3. To change the height of a row (or width of a column), type the number of pixels for the height (or width) in Size (alternatively, rows and columns can be sized by sliding the gray resize handles that are next to the green Edit Row or Edit Column button along the ruler).
4. You can change 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).
   1. To change the left margin, use the Edit Column button, and type the number of pixels for the margin in Left Margin.
   2. To change the right margin, use the Edit Column button, and type the number of pixes for the margin in Right Margin.
   3. To change the top margin, use the Edit Row button, and type the number of pixels for the margin in Top Margin.
   4. To change the bottom margin, use the Edit Row button, and type the number of pixes for the margin in Bottom Margin.

[edit] Inserting Rows or Columns

1. Mouse over the green Edit Row (or Edit Column) button to highlight the row or column associated with the button.
2. Click the Edit Row (or Edit Column) button and the Edit Row (or Edit Column) Menu is displayed.
3. To insert a row select Insert Above or Insert Below, for a column, select Insert Before or Insert After.
   1. For a row, Insert Above inserts a row above the highlighted row and Insert Below inserts a row below the highlighted row.
   2. For a column, Insert Before inserts a column to the left of the highlighted column and Insert After inserts a column to the right of the highlighted column.

[edit] Removing Rows or Columns

1. Mouse over the green Edit Row (or Edit Column) button to highlight the row or column associated with the button.
2. Click the Edit Row (or Edit Column) button and the Edit Row (or Edit Column) Menu is displayed.
3. To remove a row (or column), select Remove Row (or Remove Column).

Note A row or column cannot be removed if it contains a control.

[edit] Setting the 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.

1. Mouse over the green Edit Row (or Edit Column) button to highlight the row or column associated with the button.
2. Click the Edit Row (or Edit Column) button and the Edit Row (or Edit Column) Menu is displayed.
3. To set stretchable, select Stretchable in the menu.

[edit] Setting the 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 when 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.

1. Mouse over the green Edit Row (or Edit Column) button to highlight the row or column associated with the button.
2. Click the Edit Row (or Edit Column) button and the Edit Row (or Edit Column) Menu is displayed.
3. To set locked, select Locked in the menu. The gray resize handle has a red bar across it when Locked is set.

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

1. Mouse over the green Edit Row (or Edit Column) button to highlight the row or column associated with the button.
2. Click the Edit Row (or Edit Column) button and the Edit Row (or Edit Column) Menu is displayed.
3. To add a separator, select Separator in the menu.

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

1. Mouse over the green Edit Row (or Edit Column) button to highlight the row or column associated with the button.
2. Click the Edit Row (or Edit Column) button and the Edit Row (or Edit Column) Menu is displayed.
   1. To set the vertical alignment, select one of the three buttons to the right of V-Align (from left to right: align top, align middle, align bottom).
   2. To set the horizontal alignment, select one of the three buttons to the right of H-Align (from left to right: align left, align center, align right).

[edit] Resizing Rows or Columns

1. You can resize rows and columns either by using the Edit Row or Edit Column dialog boxes, or by using the resize handles:
   1. Using the Edit Row or Edit Column dialog box.
      1. Mouse over the green Edit Row (or Edit Column) button to highlight the row or column associated with the button.
      2. Click the Edit Row (or Edit Column) button and select Edit Row (or Edit Column). A dialog box is displayed.
      3. To change the height of a row (or width of a column), type the number of pixels for the height (or width) in Size.
   2. Using the resize handles
      1. Sliding the gray resize handle that's next to the green Edit Row or Edit Column button along the ruler.

[edit] Removing and Restoring Grid Walls

To remove a grid wall:

1. Mouse over the grid wall you want to remove. A minus symbol (-) appears in the middle of the line.
   
2. Click the minus symbol to remove the grid wall.
   

To restore a grid wall:

1. Mouse over the grid wall you want to restore. A plus symbol (+) appears in the middle of the line.
   
2. Click the plus symbol (+) to restore the grid wall.

[edit] Embedding Container Controls

The Toolbox on the left side of the Builder has a Containers section listing the available container controls.

To embed one container in another:

1. Open the form in the Design Editor.
2. Expand the Containers section of the Toolbox.
3. Drag the desired container and drop it onto the section of the form where you want to embed the new container. 

[edit] Error Handling

 

[edit] Examples

 

[edit] Next Steps

Connecting a Control to an Object
Embedding a Form within a Form Using Drag and Drop
Understanding Copy and Paste
Using Copy and Paste

[edit] Tags

Log in if you would like to rate this page.