Getting the Most Out of the Flex Builder Design View

Basics of Design View

In Design view, you can perform the following actions: insert, select, resize, move, cut/copy/paste, undo, and delete. You can also use the Tag inspector and Design view to set properties, events, CSS styles, and data binding for the various parts of your application.

Any action that you take in Design view or Tag inspector automatically reflects in Code view. As you are working in the Code view, the Design view does not reflect your changes until you switch to the Design view, press the Refresh button, or press the F5 key.

The two primary component types you use for layout in Flex are controls and containers. The top level container is Application when you design an application, or any container type when you design MXML components that you will use within a Flex application. You can create applications and MXML components in Design view.

Insert

Flex contains a wide variety of controls, which are organized in distinct groups: Text controls, Standard Form controls, Numeric and Date input controls, List controls, Separator controls, and Image controls (see Figure 1).

Figure 1. The insert bar for controls

You can use containers to position controls and other containers. Each container has built-in rules that govern how it will organize its contents. Experimenting with the different containers inside of Design view is an excellent way to understand how you can best use these different container types.

When you first insert a container in Design view, the message: “Add components here,” appears inside the container; the container also appears with an expanded size. On Flex server, an empty container is zero pixels wide and zero pixels tall. Because it would be impossible to put any content inside a container with these dimensions, Flex Builder expands the borders so that you can put content in the container. As soon as you place the first component into the container, its size shrinks to fit the size of the content placed within its specifications.

When you click inside the container, Design view displays an insertion point, marking the position and the orientation of the content you will insert. Containers that have vertical layout rules enable a horizontal insertion point.

Even a modest Flex application has several containers. The Design view makes it easy to distinguish one container from another with a mouse-over tooltip that displays the type of container. If the container has an attribute id, the container displays the attribute id in the tooltip.

Figure 2. Insert Bar for Containers

The simplest and most useful containers are HBox and VBox layout containers. The HBox container lays out its contents from left to right; a VBox container lays out its content from top to bottom.

The Form container is the most useful for layout controls such as TextInput fields where you want each field to have a label associated with it. The Form container also provides a few options on how to align the labels associated with these fields in a way that is common in forms. Flex Builder automatically wraps each layout control that you insert into the Form with a FormItem. The FormItem provides the field’s label and manages the alignment with the other elements inside of the Form.

A powerful yet often overlooked container is Tile. The Tile container lays out its content in a grid. By default, it lays out its content from left to right. Once a row is full, it starts a new row and fills that row with content. Using the direction property of Tile, you can specify that the Tile lay out from top to bottom. In this state, when it reaches the bottom of a column, the container starts a new column and continues to fill that column with content.

The Canvas container gives you the full power (and responsibility) for placing content with a Cartesian X,Y coordinate system. In some cases, it can be advantageous to use the Canvas container when you want an asymmetric layout or for a layout that would be overly complicated by using other layout containers.

Tip: Be sure to see the “Using Layouts, Hierarchy, and Containment Properly,” section of the Flex article “Flex Application Performance: Tips and Techniques for Improving Client Application Performance” by Deepa Subramaniam.

Select

You can select controls by clicking the control in the Design view.

Select containers by either clicking the edge of the container or by clicking any blank space inside the container. Clicking blank space inside a container also creates an insertion point. The insertion point represents where you can put the next container or control if you were to insert a control or container from the insert bar or paste from the clipboard.

Resize

Resize containers and controls by selecting them and then moving any of the black square resize handles that appear. Holding Shift while dragging a corner resize handle maintains the aspect-ratio.

Tip: When you click a resize handle, a tooltip displays the current width and height of any container or control.

Move

Move controls by dragging any part of the control on the screen. As you move a control on the screen, an outline of the control appears under your pointer. In addition to displaying the outline, a dark insertion point indicates where you will drop the control within the container over which you hover.

Move a container by dragging its edge. An outline for the container and an insertion point appears, similar to the behavior of controls.

Delete

Delete controls and containers by pressing the Delete key.

Cut/Copy/Paste/Undo

The standard Ctrl-X cuts your selection and places it on the clipboard; Control-C copies your selection to the clipboard; and Control-V pastes content from the clipboard into the Design view at the current insertion point. The standard Control-Z undoes your last action in the Design view.

Page 2 of 6

Previous Page

Next Page