Adobe Flex 3 Help

Using Flex Builder views

This section provides information about the views provided by Flex Builder:

Components view

The Components view lets you rapidly insert Flex components in MXML files in the MXML editor's Design mode.

Nonvisible components, such as effects, formatters, and validators, are not listed in the Components view. You must insert these components in the code.

Custom category

The Components view has a category of components called Custom:

You must open a file in Flex Builder to view the components in this category. The category lists the custom components available to the project that contains the currently active document. If there is no active document, or the active document is not in a project, the Custom category is empty.

The Components view only lists visible custom components (components that inherit from the UIComponent class).

The Custom category lists all the custom components that you saved in the current project or in the source path of the current project. For example, if you create a component file called LoginBox.mxml and save it in your project, the LoginBox component appears in the Custom category of the Components view. Like any component, you can insert these components in your layout by dragging them from the Components view.

Controls category

The Components view has a category of components called Controls:

The following table briefly describes the components in this category:

Component

Description

Button

Control that displays a variable-size button that can include a label, an icon image, or both.

Checkbox

Control that shows whether a particular Boolean value is true (checked) or false (unchecked).

ColorPicker

Control that allows the user to select a color from a palette.

ComboBox

Data provider control that displays a drop-down list attached to a text field that contains a set of values.

DataGrid

Data provider control that displays data in a tabular format.

DateChooser

Control that displays a full month of days to let you select a date.

DateField

Control that displays the date with a calendar icon on its right side. When a user clicks anywhere inside the control, a DateChooser control pops up and displays a month of dates.

HorizontalList

Data provider control that displays a horizontal list of items.

HSlider

Control that lets users select a value by moving a slider horizontally.

Image

Control that imports a JPEG, PNG, GIF, or SVG image or SWF file.

Label

Control that displays a noneditable single-line field label.

LinkButton

Control that displays a simple hypertext link.

List

Data provider control that displays a scrollable array of choices.

NumericStepper

Control that displays a dual button control you can use to increase or decrease the value of the underlying variable.

PopUpButton

Control that consists of two horizontal buttons: a main button, and a smaller button called the pop-up button, which only has an icon. The main button is a Button control.

PopUpMenuButton

Control that consists of two horizontal buttons: a main button, and a smaller button that displays a menu when clicked.

ProgressBar

Control that provides visual feedback of how much time remains in the current operation.

RadioButton

Control that can be selected or deselected. In a RadioButtonGroup, only one can be selected at a time.

RadioButton Group

Control that forces the RadioButton controls associated with it to be mutually exclusive.

RichTextEditor

Control that lets the user edit text and apply simple styles such as bold and italic.

SWFLoader

Control that displays the contents of a specified SWF file.

Text

Control that displays a noneditable multiline text field.

TextArea

Control that displays an editable text field for user input that can accept more than a single line of input.

TextInput

Control that displays an editable text field for a single line of user input. Can contain alphanumeric data, but input will be interpreted as a String data type.

TileList

Data provider control that displays a tiled list of items. The items are tiled in vertical columns or horizontal rows.

Tree

Data provider control that lets a user view hierarchical data arranged as an expandable tree.

VideoDisplay

Control that lets you play an FLV file in a Flex application. It supports streaming video from the Flash Media Server, FLV files, and from a Camera object.

VSlider

Control that lets users select a value by moving a slider vertically.

Layout category

The Components view has a category of components called Layout:

The following table briefly describes the components in this category:

Component

Description

ApplicationControlBar

Control bar that can appear docked across the top of the application, or undocked within an application.

Canvas

Container that lets you explicitly position and size its children. Automatically inserted when creating an MXML Application file.

ControlBar

Container that holds components shared by the other children in a Panel container.

Form

Container that arranges its children in a standard form format. Should only be used in a Panel container.

FormHeading

Control that specifies an optional label for a group of FormItem containers. Only valid in a Form.

Grid

Container that arranges children as rows and columns of cells, similar to an HTML table.

HBox

Container that lays out its children horizontally in a single row.

HDividedBox

Container that lays out its children horizontally like a HBox container, except that it inserts an adjustable divider between each child.

HRule

Control that displays a single horizontal rule. Typically used to create dividing lines within a container.

Panel

Container that displays a title bar, caption, border, and its children. Used as a basic building block in structuring the overall application layout.

Spacer

Invisible control that lets you control the spacing between components in a container.

Tile

Container that arranges its children in multiple rows or columns.

TitleWindow

Container that displays a modal window that contains a title bar, caption, border, close button, and its children. The user can move and resize it.

VBox

Container that lays out its children vertically in a single column.

VDividedBox

Container that lays out its children vertically like a VBox container, except that it inserts an adjustable divider between each child.

VRule

Control that displays a single vertical rule. Typically used to create dividing lines within a container.

Navigators category

The Components view has a category of components called Navigators:

The following table briefly describes the components in this category:

Component

Description

Accordion

Navigator container that organizes information in a series of child panels, where one panel is active at any time.

ButtonBar

Navigator container that defines a row of Button controls designating a series of link destinations. Often used with a ViewStack container.

LinkBar

Navigator container that defines a row of Link controls designating a series of link destinations. Often used with a ViewStack container.

MenuBar

Container that displays a horizontal menu bar that contains one or more submenus of Menu controls.

TabBar

Navigator container that defines a horizontal row of tabs. Often used with a ViewStack container.

TabNavigator

Navigator container that displays a container with tabs to let users switch between different content areas.

ToggleButtonBar

Like ButtonBar, except the button stays pressed.

ViewStack

Navigator container that defines a stack of panels that displays a single panel at a time.

Charts category

The Flex charts are available in Adobe Flex Builder Professional. A trial version of the charts is included in the Flex Builder Standard.

The Components view has a category of components called Charts:

The following table briefly describes the components in this category:

Component

Description

AreaChart

Area charts represent data as an area bounded by a line connecting the data values.

BarChart

Bar charts represent data as a series of horizontal bars, the length of each determined by data values.

BubbleChart

Bubble charts represents data with three values for each data point: one for the x axis, one for the y axis, and another for the size of the bubble.

CandlestickChart

Candlestick charts represent financial data as a series of candlesticks representing the high, low, opening, and closing values of a data series.

ColumnChart

Column charts represent data as a series of vertical columns, the size of each determined by data values.

HighLowOpenCloseChart

HLOC charts represent financial data as a series of lines representing the high, low, opening, and closing values of a data series.

Legend

Legend controls match the fill patterns on your chart to labels that describe the data series shown with those fills.

LineChart

Line charts represent data as a series of points, in Cartesian coordinates (x and y axes forming a plane), connected by a continuous line.

PieChart

Pie charts represent data as slices of a pie, the data determining the size of each slice.

PlotChart

Plot charts represent data as Cartesian coordinates, with data points for both the x and y axes. You provide shape for the data points using a display renderer (the circle renderer, for example).

Flex Properties view

The Flex Properties view lets you rapidly set the properties of visual components in the MXML editor's Design mode. The view is not available in Source mode.

You cannot use the Flex Properties view to set the properties of nonvisible components such as effects, formatters, and validators. You must set the properties of these components in the code.

The toolbar of the Flex Properties contains the following buttons:

Standard view Displays the most commonly used properties in a form layout.

Category view Displays the properties in a categorized list.

Alphabetical view Displays the properties in an alphabetical list.

To use a default property value, or use the value set by a CSS rule, leave the field blank.

Flex Navigator view

The Flex Navigator view allows you to manage the projects and resources contained within the workspace.

Outline view

You use the Outline view to more easily inspect and navigate the structure of your MXML and ActionScript documents.

States view

The States view shows the states defined for the current application in Flex Builder. The list of states appears in a tree structure, showing which states are based on which other states.

Your view contains the following options:

The tree structure Lets you select a state to display and edit in the MXML editor's Design mode. When you select a state in the tree, Flex Builder displays the state's layout in Design mode. You can modify the layout by using the design tools in Flex Builder.

New State Lets you create a state. For more information, see Setting running and debugging preferences.

Edit State Properties Lets you edit some basic properties of the selected state. You can also double-click the state in the tree to edit the properties. For more information, see Edit State Properties dialog box.

Delete State Lets you remove the selected state. If you attempt to delete a state that other states are based on, a dialog box appears to warn you that the other states will be deleted too. You can cancel the operation or confirm that you want to delete the state.

Selecting Edit > Undo restores the state that you deleted.

New State dialog box

The New State dialog box lets you define a new state. It contains the following options:

Name Lets you specify the name of the new state.

Based On Lets you select the state on which to base the new state. The pop-up menu lists the states defined in the current document.

Set As Start State Shows this state when the application starts.

Edit State Properties dialog box

The Edit State Properties dialog box lets you modify the properties of an existing state, such as its name and whether it appears when the application starts. It contains the following options:

Name Lets you specify a new name for the state. You cannot rename the base state.

Set As Start State Shows or hides this state when the application starts.