This section provides information about the views provided by Flex Builder:
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.
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.
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. |
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. |
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. |
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). |
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.
The Flex Navigator view allows you to manage the projects and resources contained within the workspace.
You use the Outline view to more easily inspect and navigate the structure of your MXML and ActionScript documents.
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.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.
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.