Back to Concepts and HOW TOs

Contents 1 Description 2 Prerequisites 3 Procedures 3.1 Opening a Form in the Design Editor 3.2 Setting Container Type 3.3 Embedding Container Controls 3.4 Editing a Grid 3.4.1 Editing Row or Column Settings 3.4.2 Inserting Rows or Columns 3.4.3 Removing Rows or Columns 3.4.4 Setting the Stretchable Property 3.4.5 Setting the Locked Property 3.4.6 Adding a Separator 3.4.7 Setting Vertical and Horizontal Alignment 3.4.8 Resizing Rows or Columns 3.4.9 Removing and Restoring Grid Walls 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] Procedures

[edit] Opening a Form in the Design Editor

To open a form so that it appears in the design editor

1. In the Solution Details, select the form you want to open for editing.
2. Double-click the form. If the form is new and has not yet been edited, a blank two-row by two-column grid is displayed in the Design Editor, and the Toolbox to the left shows the categories of controls available in Bungee Connect. If the form is a new one, by default the parent (or top level) Container Type of a form is set to Grid.

[edit] Setting Container Type

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. 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] Embedding Container Controls

The Toolbox on the left side of the Builder has a Containers section listing the available container controls. You can embed one container inside of another as you design your form. The types can be different for each container you embed.

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] Editing a Grid

The Grid container is the default parent (or top level) Container Type of a form. Grid is the most flexible of the containers.

To edit a grid

• 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

To edit 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

To insert a row or a column

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

To remove a row or a column

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.

To set the strechable property

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.

To set the locked property

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.

To add a separator bar

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.

To set vertical and horizontal alignments

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

To resize a row or a column

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