ADOBE® FLEX® BUILDER™ 3: USING ADOBE FLEX BUILDER 3

ADOBE FLEX BUILDER 3

Using Adobe Flex Builder 3

16

Problems view

As you enter code, the Flex Builder compiler detects syntax and other compilation errors, and these are displayed in

the Problems view. When you debug your applications, errors, warnings, and other information are displayed in the

Problems view.

For more information, see “Running and Debugging Applications” on page 136.

Note: You can also optionally add the Tasks and Bookmarks views. These views provide additional shortcuts for

managing and navigating your code. For more information about these views, see

“About markers” on page 114. For an

introduction to the optional views that are available in Flex Builder, see “Other useful workbench views” on page 22.

Flex Development perspective in Design mode

You visually lay out and design your Flex applications in the MXML editor in MXML Design mode. Design mode is

the visual representation of the code that you edit in Source mode. In Design mode, however, additional views are

added to support design tasks. These are the Components, Flex Properties, and States views. In addition, when you

are in Design mode, the Outline view displays the MXML structure of your Flex applications. You can also display

and edit CSS in CSS Design mode. For more information about designing Flex applications in Flex Builder, see

“Building a Flex User Interface” on page 64.

Note: Design mode is not available when working with ActionScript projects. To preview the user interface of your

ActionScript applications, you need to build and run them. For more information about working with ActionScript, see

“About ActionScript projects” on page 44 and “Running and Debugging Applications” on page 136.

In Design mode, the development perspective contains the MXML editor and the Components, States, and Flex

Properties, and Outline views.

ADOBE FLEX BUILDER 3

Using Adobe Flex Builder 3

17

The MXML editor

In MXML Design mode, you interact with your Flex applications visually; dragging and dropping components on

to the design area, selecting and resizing components, and so on. You can also expand the MXML editor in Design

mode to clearly see and select individual components, and use pan and zoom to get a closer look at items; this is

especially useful when you have embedded container components. For more information about working in Design

mode, see “Building a Flex User Interface” on page 64.

Components view

The Components view contains all of the standard Flex components, which you can select and add to the design area.

As you create your own custom components, they are also displayed in the Components view.

For more information, see “Adding and changing components” on page 66.

ADOBE FLEX BUILDER 3

Using Adobe Flex Builder 3

18

States view

Flex allows you to create applications that change their appearance based on events that are triggered directly by the

user or events that are generated programmatically. These user interface transformations are referred to as view

states. You create and manage view states in the States view.

For more information about view states, see “Adding View States and Transitions” on page 93.

Flex Properties view

When a Flex component is selected, its properties are displayed in the Flex Properties view. You can set and edit

properties as appropriate. You can view a component’s properties graphically (as shown in the following example)

and as a categorized or alphabetical list.

For more information, see “Setting component properties” on page 74.