Flex Builder lets you work with components visually in the MXML and CSS editors so you can see what your application looks like as you build it. The MXML and CSS editors have two modes: Source mode for writing code, and Design mode for developing applications visually.

Using the MXML editor in Design mode

You can set the size of the design area in Design mode. This lets you preview how the layout of your application or component will look at different sizes. You can also select, pan, move, resize, scroll, and magnify items in the design area.

View an MXML file

1. If the MXML file is not already open in the MXML editor, double-click the file in the Flex Navigator view to open it.
2. If the MXML editor displays source code, click Design at the top of the editor area.

   You can quickly switch between modes by pressing Control+`(Left Quote).

   Switching between Source and Design modes automatically shows or hides design-related views like the Components, Properties, and States views. To turn this behavior on and off, select Window > Preferences, then Flex> Editors > Design Mode, then select the Automatically Show Design-related Views option.

Set the size of the design area

1. Select a size from the Design area pop-up menu on the editor's toolbar.

   

   • If the size of your layout is larger than the editor window, the editor displays scrollbars to preserve the layout at the set size.
   • If you select Fit to Window, the editor doesn't display scrollbars. Instead, it adjusts the layout (if possible) to fit the window size.
   • If you specify a size for the Application container, the size overrides the View As settings for that dimension.

Select and move components in the design area

 Click the Select Mode (arrow) button on the right side of the editor toolbar. Select Mode is activated by default when you open a document. Press V on the keyboard to enter Select Mode. Click and drag a component to the desired place. You can also drag to resize and click to select.

Pan and scroll in the design area

 Click the Pan Mode button on the right side of the editor toolbar. Press H to enter Pan Mode from the keyboard. To temporarily enter Pan Mode, press and hold the spacebar on the keyboard. You cannot select or move items in Pan Mode.

Zoom in the design area

There are several ways to use the zoom tool. You can select percentages from the main and pop-up menus, click the Zoom Mode button on the toolbar, or use keyboard shortcuts. The current magnification percentage is always displayed in the toolbar.

• From the main menu select Design > Zoom In or Design > Zoom Out. You can also select the Magnification submenu and choose a specific percentage.
• Click the Zoom Mode button on the toolbar or press Z from the keyboard. A plus symbol cursor will appear in the design area.
• Select a percentage from the pop-up menu next to the Select, Pan, and Zoom Mode buttons on the editor toolbar. The design area changes to the selected percentage or fits to the window.
• Right-click in the design area to select Zoom In, Zoom Out, or the Magnification submenu. The design area changes to your selection.

You can always use the following keyboard shortcuts from the design area:

• Zoom In: Ctrl+= (Command+= on Mac OS)
• Zoom Out: Ctrl+- (Command+- on Mac OS)

For more keyboard shortcuts, select Help > Key Assist.

Selecting multiple components in an MXML file

You can select more than one component in an MXML file. This can be useful if you want to set a common value for a shared property.

• Control-click (Command-click on Macintosh) each component in the layout.
• Click the page background and draw a box that overlaps the components.
• In Outline view (Window > Outline), Control-click (Command-click on Macintosh) the components in the tree control.

Deselecting multiple components

• Click the background container.
• Click an unselected component.
• Click in the gray margin around the root component.

Positioning components

You can change the position of components visually depending on the layout rules of the parent container. The properties of the parent container can also affect the position of child components. You can also dynamically position components by using a constraint-based layout. For more information, see Setting layout constraints for components.

1. In the MXML editor's Design mode, select the component in the layout and drag it to a new position.

   The component is positioned in the layout according the layout rules of the parent container. For example, if you move a VBox container in an HBox container, the VBox container is positioned into the horizontal arrangement with the other child containers (if any).

   If the container has absolute positioning, you can drag and position components anywhere in the container. A container has absolute positioning if it is a Canvas container or an Application, Panel, or TitleWindow container with a layout property set to absolute. The layout="absolute" property overrides the container's default layout rule. For more information, see Using Layout Containers in the Adobe Flex 3 Developer Guide.

2. In Design mode, select the component's parent container and edit the component's layout properties in the Flex Properties view.

   In some cases, you can change the position of child components by changing the properties of the parent container. For example, you can use the verticalGap and horizontalGap properties of a Tile container to set the spacing between child components and the direction property to specify either a row or column layout.

Sizing components

You can dynamically size components in an MXML file visually in the design area in a constraint-based layout. In the design, you can anchor one or more sides of a component to the edges of the component's container or the container's constraint regions. You can also change the size of a component in an MXML file by selecting menu options or by editing its properties in the Flex Properties view. For more information, see About constraint-based layouts.

Size a component visually

 In the MXML editor's Design mode, click on the component and drag a resize handle to resize the component.

• To constrain the proportions of the component, hold down the Shift key while dragging.
• If snapping is enabled, as you resize, snap lines appear to line up the edges of the component with nearby components. To enable or disable snapping from the main menu, select Design > Enable Snapping.

Make two or more components the same width or height

1. In Design mode, select two or more components.
2. In the Design menu, select one of the following sizing options:

   Make Same Width Sets the width property for all selected components to that of the component you selected first.

   Make Same Height Sets the height property for all selected components to that of the component you selected first.

   If all selected components are in the same container, and the first component you select has a percent width or height specified, all items are set to that percent width or height. Otherwise, all components are set to the same pixel width or height.

Size a component by editing its properties

1. In Design mode, select the component.

   You can Control-click (Shift-click on Mac OS) more than one component to set their sizes simultaneously.

2. In the Flex Properties view (Window > Flex Properties), set the height or width property of the selected component or components.

   The Flex Properties view provides three views for inspecting a component's properties: a standard form view, a categorized table view, and an alphabetical table view. You can switch between them by clicking the view buttons in the toolbar.

1. Press Tab or Enter, or click outside the view to apply your last change.

Using snapping to position components

When you drag a component visually in a container that has absolute positioning, the component may snap into place depending on where you drop it relative to existing components. The components can line up vertically or horizontally.

You can disable snapping for one component or for all components.

Enable or disable snapping

 With the MXML file open in the MXML editor's Design mode, select (or deselect) Design > Enable Snapping.

Enable or disable snapping as a preference

1. Select Window > Preferences from the main menu.
2. Select Flex> Editors > Design Mode in the sidebar of the Preferences dialog box.

   

3. Select or deselect the Enable Snapping option.

Aligning components

You can visually align components relative to each other in a container that has absolute positioning.

You can also center components in a container by using a constraint-based layout. For more information, see Setting layout constraints for components.

Align components in a container that has absolute positioning

1. In the MXML editor's Design mode, select two or more components in the container.

   For more information, see Selecting multiple components in an MXML file.

2. Select one of the following alignment options from the Design menu:

   Align Left Positions all selected components so that their left edges align with that of the first component you selected.

   Align Vertical Centers Positions all selected components so that their vertical centerlines are aligned with the vertical centerline of the first component you selected.

   Align Right Positions all selected components so that their right edges align with that of the first component you selected.

   Align Top Positions all selected objects so that their top edges align with that of the first component you selected.

   Align Horizontal Centers Positions all selected components so their horizontal centerlines are aligned with the horizontal centerline of the first component you selected.

   Align Bottom Positions all selected components such that their bottom edges align with that of the first component you selected.

   Align Baselines Positions all selected components so that their horizontal text baselines are aligned with that of the first component you selected. For components that have no text baseline (such as HBox), the bottom edge is considered the baseline.

   For objects with no layout constraints, Flex Builder adjusts the x property to change the vertical alignment, and adjusts the y property to change the horizontal alignment.

   For objects with layout constraints, Flex Builder adjusts the left and right constraints to change the vertical alignment and adjusts the top and bottom constraints to change the horizontal alignment. Only existing constraints are modified; no new constraints are added.

   For example, suppose component A has a left constraint and no right constraint, and component B has both a left and right constraint. If you select component A and B and then select Design > Align Vertical Centers, Flex Builder adjusts the left constraint of object A and both the left and right constraints of object B to align them. The unspecified right constraint of object A remains unspecified.

Nudging components

You can fine-tune the position of components in a container that has absolute positioning by adjusting the components one pixel or ten pixels at a time in any direction with the arrow keys.

Nudge components by one pixel

 Select one or more components in the MXML editor's Design mode and press an arrow key.

Nudge components by ten pixels

 Select one or more components in the MXML editor's Design mode and press an arrow key while holding down the Shift key.

Holding down the arrow key continues to move the component.

Setting component properties

You visually set the properties of components in the design area or in the Flex Properties view.

Edit the text displayed by a component

 To edit text displayed by a component such as a Label or TextInput control, double-click the component and enter your edits.

Change text in the ID field

When you change text in the ID field, you are prompted to update all references with the new ID. You can suppress this dialog box on the Design Mode preferences page:

1. Select Window > Preferences from the main menu.
2. Select Flex > Editors > Design Mode.
3. Select or deselect Always Update References When Changing IDs in the Flex Properties View.

Set other properties of a component

 Select the component and set its properties in the Flex Properties view (Window > Flex Properties).

To set the properties in Category view or Alphabetical view, click the view buttons in the toolbar:

Showing surrounding containers

You can show surrounding containers in the MXML editor's Design mode to better visualize the containers in your layout and to more easily insert or select containers in complex layouts.

1. Select a container in the layout.

   If it is too difficult to select a container, select a control inside it instead.

2. Press the F4 key.

   If you selected a control, select the parent container now. It should be easy to see.

   Semitransparent overlays appear showing all the containers around the selected container, expanded outward slightly so there is room to insert more components into them. Overlays also appear showing all the children containers.

   When you select the Panel container and press F4 in the following example, Flex Builder displays overlays for the panel's parent container (Canvas) and child component (HBox).

   

   The overlays change if you select another container.

Show a container's parents and immediate children

 With surrounding containers turned on, click the container.

Move a container into another container

 Drag the container overlay over another container, wait for the target container to become highlighted, and then drop the container.

Dismiss the surrounding containers

 Press the F4 key again.

Inspecting the structure of your MXML

You use Outline view (Window > Outline) in Design mode to inspect the structure of your design and to select one or more components. When you have multiple view states, Outline view shows you the structure of the current view state.

 With the MXML file open in Design mode, select Outline view.

 In Outline view, click to select a single component or Control-click (Command-click on Macintosh) to select multiple components.

Hiding container borders

By default, Flex Builder shows the borders of containers in the MXML editor's Design mode. If you want, you can hide these borders.

 Select Design > Show Container Borders.

This command is a toggle switch. Select it again to show the borders again.

Copying components to other MXML files

You can visually copy and paste components from one MXML file to another.

1. Make sure the two MXML files are open in the MXML editor's Design mode.
2. Select the component in one file and press Control+C (Command+C on Macintosh) to copy it.
3. Switch to the other file, click inside the desired container, and press Control+V (Command+V on Macintosh) to paste the component or components into the container.

Deleting components

You can visually delete components from your user interface.

 Select the component and press the Delete key on your keyboard, or right-click (Control-click on Macintosh) the component and select Delete from the context menu.