Dexter Reid

www.macromedia.com

Macromedia Flex Builder is the Macromedia IDE for developing Macromedia Flex applications. One of the top differentiating features of Flex Builder is the visual Design view, which helps designers and developers build Flex applications more productively.

Furthermore, with the Design view, traditional designers can easily adapt to Flex and quickly build application interfaces, laying out Flex user interfaces quickly and easily and connecting them to back-end data sources.

The Design view also helps people, whether technical or visual, learn and understand MXML. For example, many people use the Design view to lay out interfaces and then switch to the Code view to see the MXML code that Flex Builder generates. Or they use the Split view to show design and code simultaneously. For instance, as you tweak code, the Design view updates, so you can quickly see the effect of setting parameters on MXML.

Whether you are primarily a coder or a designer who prefers to work visually, this article highlights a range of features within the Design view, which can help you create and maintain your applications.

Requirements

To complete this tutorial you will need to install the following software:

Macromedia Flex Builder

• Try Flex and Flex Builder
• More information on getting Flex Builder

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.

Expanded and Standard Modes

The two modes of operation within the Design view are Expanded and Standard. The controls to switch between these two modes are located to the right of the Debug button.

Figure 3. Standard / Expanded Mode buttons

When you launch Flex Builder for the first time, it asks whether you prefer Designer or Coder mode. If you choose Designer mode, the Design view starts in Expanded mode. In this mode, Flex Builder adds a 10 pixel margin to containers and displays a dashed border around containers to show each container’s boundary.

Expanded mode is particularly helpful for starting new applications or MXML components where you plan to insert new containers and controls. In Expanded mode, it is easy for you to place the insertion point and it is clear how your containers fit together. You can also position and arrange your application or MXML component UI.

When developers work in Expanded mode, the UI may not render accurately because of the additional margins. Use this mode for prototyping and laying out your application. If you have already laid out your application, or if you want to see a more accurate representation of the UI, switch to Standard mode.

When you choose the Coder mode, Design view starts in Standard mode. Standard mode is a high-fidelity mode that gives the most accurate representation of what your application will look like once you deploy to the Flex Server. The dashed borders around containers do not appear and this mode does not add extra margins. You can still edit components in Standard mode just as you would in Expanded mode, but in some cases, you will be unable to place an insertion point between a component and the edge of the layout that contains it because there are no margins. Do not despair, you can still insert content in these hard-to-reach spots.

Example:

In the Expanded mode (Figure 3), to add a button to the left of button “2”, use the following steps:

1. Click to the left of button “2” to place an insertion point.
2. Drag a button from the Insert | controls bar.

Figure 4. Collection of buttons in boxes displayed in Expanded mode

In the Standard mode (Figure 4), to add a button to the left of button “2”, take the following steps:

1. Drag a button from the insert | controls bar on to the left part of button “2”. An insertion point appears to the left of the button.
2. Drop the button.

Figure 5. Collection of buttons in boxes displayed in Standard mode

Navigators

Accordions , TabNavigators, LinkBars, Tab Bar, and View Stack are all a part of a special group of Flex components called navigator containers. They are located at the far right side of the Insert | Container bar (see Figure 2). While navigator containers are similar to the HBox, Form, or Canvas containers, what sets them apart from other containers is their ability to present different views to the user within the same screen real estate.

Each navigator container can have multiple views in your application. Each view simplifies the user’s experience by displaying one set of relevant information at a time. Each view can be a Flex container (such as a Form or HBox container) or can be an MXML component. The Design view streamlines the process of creating navigator containers by introducing a variety of features at design time.

Navigator Control Panel

Inside of Flex Builder, whenever you select a navigator container, a control panel displays in the upper right corner of the navigator that contains four buttons. Use the Plus (+) and Minus (-) buttons to insert and delete views from your navigator container and use the back and forward arrow keys to change the active view.

Inserting a New View

Insert new views into a navigator container by using the Plus (+) button on the Control Panel or by dragging any container directly into the navigator. When using the Plus (+) button on the Control Panel, the panel will ask you to label your view.

For Accordion containers, put the view label on the panel associated with that view. For TabNavigator containers, place the label on the associated tab. For ViewStack containers, only use the label if there is a LinkBar or TabBar container associated with the ViewStack container.

The other way that you can insert views into a navigator container is by dragging a container into the navigator container. This is an Expert mode for inserting views; as such, Flex Builder will not prompt you to add a label to the view.

To create an accordion similar to that in Figure 6, use the following steps:

1. Open a new MXML application file.
2. Click Design view to place the insertion point.
3. Click the Accordion container icon on the Insert | Containers bar.
4. Using the Navigator Control Panel, press the Plus (+) button.
5. In the “Insert Panel” dialog box that appears, enter Billing Address in the Label field and press Enter.
6. Repeat steps 4 and 5 and enter the labels Shipping Address and Credit Card Information.
7. Click Billing Address to open the first panel.
8. Click in the Form in “Add components here”.
9. Click the TextInput icon on the Insert | Controls bar.
10. A dialog box appears, asking “Would you like FormItems to be automatically added in Forms?” Click Yes.
11. Double-click the FormItem Label.
12. Type Street Address 1.

13. Repeat steps 10-12 for the other fields

Figure 6. Example of an Accordion container

Renaming a View

You can rename any view inside of a navigator container by double-clicking the panel or tab associated with it. The Quick Tag editor appears with the label field highlighted. Simply type the new name and press Enter.

To rename the Credit Card Information view to Payment Information, use the following steps.

1. Open the “Credit Card Information” view.
2. Double-click it to open the Quick Tag Editor.
3. Type Payment Information and press Enter.

Changing Navigator Types

To change an Accordion container to a TabNavigator container:

1. Place your pointer over the Accordion container to a position where the tooltip in the view reads “Accordion”.
2. Double-click the Accordion navigator container.
3. Replace Accordion with TabNavigator inside the Quick Tag Editor.

4. Press Enter to commit the change.

Figure 7. Example of Tab Navigator

Switching Views

Using the left and right arrows on the Navigator Control Bar is one way to switch between the views of a navigator container. For Accordion containers, you can click the associated panel of the Accordion container to open that view. For TabNavigator containers, click the associated tab for that view. Finally, the right-click context menu contains Previous and Next options to navigate between the views.

Re-arranging Views

Within the Accordion and the TabNavigator containers, you can reorder the views by dragging the panel or tab to the top or bottom of the navigator container. For the ViewStack container, cut and paste is a better solution.

ViewStack

To create a ViewStack container with a LinkBar and a TabBar container like Figure 8, use the following steps:

1. Open a new MXML application file.
2. Click Design view to place the insertion point.
3. Click the ViewStack icon on the Insert | Containers bar.
4. In the ViewStack dialog box that appears, enter the ID customerInfo and press Enter.
5. Using the Navigator Control Panel, press the Plus (+) button.
6. In the “Insert Panel” dialog box that appears, enter Billing Address in the Label field and press Enter.
7. Repeat steps 4 and 5 and enter the labels Shipping Address and Credit Card Information.
8. Click inside the Application above the ViewStack to place an insertion point.
9. Click LinkBar on the Insert | Containers bar.
10. Type customerInfo in the dialog box field, Target ViewStack, and press Enter.
11. Click in the Application below the ViewStack to place an insertion point.
12. Click TabBar on the Insert | Containers bar.
13. Type customerInfo in the dialog box field, Target ViewStack, and press Enter.
14. On the LinkBar, click Billing Address to open the first view of the ViewStack container.
15. Click in the Form where it says “Add components here.”
16. Click the TextInput icon on the Insert | Controls bar.
17. A dialog box appears, asking, “Would you like FormItems to be automatically added in Forms?” Click “Yes.”
18. Double-click the FormItem Label.
19. Type Street Address 1.
20. Repeat steps 10-12 for the other fields

Figure 8. Example of ViewStack with LinkBar(top) and TabBar(bottom)

Visual Aids

The Design view provides visual representations for a couple of other non-visual MXML syntax structures. You can enable or disable all of the visual representations, which are optional, through the View | Visual Aids menu options.

Repeater Object Tag

The Repeater object tag in Flex does exactly what you would expect: provides a looping mechanism to repeat its contents. Although the Repeater object does not have a visual representation in Flex, Flex Builder gives the Repeater object the dashed border appearance of a container. The Repeater object does not have its own layout rules. Instead, the Repeater object contents use the same layout rules of the container above the Repeater object.

Data Binding

When any component attribute uses data binding, Flex Builder puts a data binding symbol in the lower right corner of the component.

Hovering over a data binding symbol displays details about what data you have bound to the component.

Note: When you are in Expanded mode, the component is also tinted.

Figure 9. The data binding symbol

Effects

Whenever any effect related attribute contains a value, Flex Builder places an effect symbol in the lower right corner of the component.

Hovering over an effect symbol reveals which effects the component contains.

Figure 10. The effect symbol

Alignment Guides

While moving or resizing components inside of a Canvas layout container, alignment guides appear to help you place and size the component. Alignment guides also force a component to “snap” to one position or another.

Tip: To override snapping, use Shift while moving or resizing.

Advanced Features

The context menu contains many of the advanced Design view features; you can access them by right-clicking anywhere in Design view. Clicking different containers and controls enable different options on the resulting pop-up menu.

CSS Styles

Any attached style sheet styles appear in the CSS Styles submenu on the context menu. You can apply these to the selected component. You can use the “New…” option to create new CSS Styles directly from Design view.

To make all Form Labels Arial 16 and purple, use the following steps:

1. Use the Content created from the ViewStack example (page 4).
2. Right-click in Design view and choose CSS Styles | New…
3. Choose Selector Type: Tag.
4. Choose Tag: Form Item from the Combo Box.
5. Define in: This document only.
6. Press OK.
7. Choose Font: Arial, Size: 16, and pick a purple from the color picker.
8. Press OK.

Size to Content

This action provides a way to remove width and height attributes from containers and controls. For example, if a file that you are editing contains a VBox container with a width of 400 and you place a button with a width of 500 inside of the VBox container, 100 pixels of the button do not appear; the button appears cropped. You can either stretch the VBox to a larger size or you can use the Size to content > Width only option to remove the width constraint from the VBox container altogether. By removing the constraint, the VBox container will always be wide enough to display its widest component.

Edit Tag

From within the Design view, you can actually edit code using the Quick Tag editor. The Quick Tag editor is a small window that contains an editable copy of the tag you selected. You can modify existing property values, add properties, and even change the type of the tag itself. If you have an HBox container full of buttons and you decide that you really want to use a tile instead to contain these buttons, the quickest way to edit it is to do the following:

1. Open the Quick Tag editor by double-clicking the HBox container (it is also located on the context menu).
2. Change mx:HBox to mx:Tile.
3. Press Enter to dismiss the Quick Tag editor.

You can open the Quick Tag editor with a double-click or from the Context Menu for all containers and controls.

Tip: An easy way to change the label for certain controls that contain labels or text (such as Label, Text, Button, CheckBox) is to select the control and start typing. The Quick Tag editor automatically opens and modifies the label property. When you have renamed the property, press Enter.

Wrap Tag

There may be times when you have a group of controls in your application that you want to put inside of a new container. The fastest way to do this is to do the following:

1. Hold the mouse button down and draw a rectangle around the controls that you would like to put inside the new container.
2. Right-click one of the selected controls and choose Wrap Tag.
3. From the list of tags that appears, choose the appropriate container to contain your selection.

Create Local Component

As your application begins to grow, you may want to break your application into smaller components. To do this, use the following steps:

1. Select a container or control that you would like to turn into a component.
2. Right-click and choose Create Local Component from the context menu.
3. Save the component with a new name.

At this point, you have created the new component, but your current application does not yet use this new component. To use the newly created component:

1. Go to the Insert menu.
2. Choose Local Component…
3. Browse for the component you created.
4. Attach a new prefix for your component.

About the author