Cover | Table of Contents
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Image source="@Embed('mypicture.jpg')" height="100"
top="30"
left="30" rotation="−10">
<mx:filters>
<mx:DropShadowFilter />
</mx:filters>
</mx:Image>
</mx:Application><?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:HBox top="10” left="10"> <mx:HSlider minimum="−30” maximum="30” value="−10” toolTip="Rotation” change="myimg.rotation=event.currentTarget.value” liveDragging="true” /> <mx:HSlider minimum="100” maximum="300” value="100” toolTip="Size” change="myimg.height=event.currentTarget.value” liveDragging="true” /> <mx:CheckBox label="Visible” change="myimg.visible= event.currentTarget.selected” selected="true"/> </mx:HBox> <mx:Image id="myimg" source="@Embed('mypicture.jpg')" height="100" top="60" left="30" rotation="−10"> <mx:filters> <mx:DropShadowFilter /> </mx:filters> </mx:Image> </mx:Application>
Application
tag, delete the code layout="absolute".Application tag, add
a backgroundGradientColors
attribute with a value of [0xFFFFFF,
0xAAAAAA], a horizontalAlign attribute with a value of
left, a verticalGap attribute with a value of
15, and a horizontalGap attribute with a value of
15.Application tag.<mx:Application xmlns:mx="http://www.adobe.com
/2006/mxml"
backgroundGradientColors="[0xFFFFFF,0xAAAAAA]"
horizontalAlign="left"
verticalGap="15" horizontalGap="15" >HBox component from the Layout
folder to the design area. Keep the default values of the component.
The HBox component contains the
label, input field, and button for the form and displays them
horizontally.Application container, which
holds all other containers and components. The Application container lays out all its children
vertically by default (when the layout
property is not specifically defined). There are three possible values for
the Application component’s layout property:verticalhorizontalabsoluteApplication component’s
layout property is absolute, each child
component must have an x and y
coordinate defined; otherwise, the component will be displayed in the
(0,0) position.Application container can
also be formatted using any of the several style parameters that are available, including backgroundGradientColors and verticalGap. In , the Application tag is used to lay out the child
controls.<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundGradientColors="[#FFFFFF, #FFDE00]" verticalGap="15" layout="horizontal"> <mx:Image source="assets/animals03.jpg" /> <mx:Label text="Photographed by Elsie Weil" fontSize="15" fontWeight="bold" /> </mx:Application>
Application container, which
holds all other containers and components. The Application container lays out all its children
vertically by default (when the layout
property is not specifically defined). There are three possible values for
the Application component’s layout property:verticalhorizontalabsoluteApplication component’s
layout property is absolute, each child
component must have an x and y
coordinate defined; otherwise, the component will be displayed in the
(0,0) position.Application container can
also be formatted using any of the several style parameters that are available, including backgroundGradientColors and verticalGap. In , the Application tag is used to lay out the child
controls.<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundGradientColors="[#FFFFFF, #FFDE00]" verticalGap="15" layout="horizontal"> <mx:Image source="assets/animals03.jpg" /> <mx:Label text="Photographed by Elsie Weil" fontSize="15" fontWeight="bold" /> </mx:Application>
Box class is the base class for the VBox and HBox classes:VBox container renders
all child display objects vertically.HBox container renders
all child display objects horizontally.Application object behaves
like a VBox by default (vertical
layout), but you can also set it to use absolute or horizontal
layout.VBox and HBox flow like HTML, only in one
direction.VBox container
(vertical).<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#FFFFFF" backgroundAlpha="0">
<mx:VBox>
<mx:Button label="< prev" left="10" top="120" />
<mx:Image source="assets/animals03.jpg" horizontalCenter="0"
top="30"/>
<mx:Label text="Photographed by Elsie Weil"
horizontalCenter="0" top="250"/>
<mx:Button label="next >" right="10" top="120"/>
</mx:VBox>
</mx:Application>
HBox container
(horizontal).<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#FFFFFF" backgroundAlpha="0">
<mx:HBox>
<mx:Button label="< prev" left="10" top="120" />
<mx:Image source="assets/animals03.jpg" horizontalCenter="0"
top="30"/>
<mx:Label text="Photographed by Elsie Weil"
horizontalCenter="0" top="250"/>
<mx:Button label="next >" right="10" top="120"/>
</mx:HBox>
</mx:Application>
VBox and
HBox to achieve a desired layout. For
instance, nests
an HBox inside a VBox, demonstrating that container controls can
have other containers as children.<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#FFFFFF" backgroundAlpha="0">
<mx:VBox horizontalAlign="center" verticalGap="15">
<mx:HBox verticalAlign="middle" horizontalGap="15">
<mx:Button label="< prev" left="10" top="120" />
<mx:Image source="assets/animals03.jpg"
horizontalCenter="0" top="30"/>
<mx:Button label="next >" right="10" top="120"/>
</mx:HBox>
<mx:Label text="Photographed by Elsie Weil"
horizontalCenter="0" top="250"/>
</mx:VBox>
</mx:Application>Canvas is the only container that lets you explicitly specify the
location of its children within the container. The Canvas object has only one layout value:
absolute. You can use the x and y
properties of child components for pixel-perfect layouts. If the display
window is resized, the child components stay fixed in place and may appear
cut off. Using absolute positioning you can make child controls overlap if
desired.<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" backgroundColor="#FFFFFF"
backgroundAlpha="0">
<mx:Canvas x="23" y="34">
<mx:Button label="< prev" x="4" y="97" />
<mx:Image source="assets/animals03.jpg" x="85" y="4" />
<mx:Label text="Photographed by Elsie Weil" x="85"
y="230" />
<mx:Button label="next >" x="381" y="97" />
</mx:Canvas>
</mx:Application>
layout property must be set to absolute. All constraints are set relative to
the edges of the container, not to other controls in the
container. The left, right, top,
bottom, horizontalCenter, and verticalCenter properties are anchors in
constraint-based layouts.top, bottom,
left, right, horizontalCenter, and verticalCenter styles.<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute backgroundColor="#FFFFFF"
backgroundAlpha="0">
<mx:HDividedBox width="100%" height="300">
<mx:Canvas backgroundColor="#FFFFCC" width="150"
height="100%">
<mx:Label text="Adjust this section" left="15" />
</mx:Canvas>
<mx:Canvas>
<mx:Button label="< prev" left="10" top="120"/>
<mx:Image source="animals03.jpg" horizontalCenter="0"
top="30"/>
<mx:Label text="Photographed by Elsie Weil"
horizontalCenter="0" top="250"/>
<mx:Button label="next >" right="10" top="120"/>
</mx:Canvas>
</mx:HDividedBox>
</mx:Application>
Form container lets you control the layout of a form, mark form fields as
required or, optionally, handle error messages, and bind your form data to
the Flex data model to perform data checking and validation.Form container, like all
containers, encapsulates and lays out its children. The Form container controls the size and layout of
the contents of the form. The FormHeader defines a heading for your Form. Multiple FormHeading controls are allowed. A FormItem container specifies a Form element
consisting of the following parts:Form container.Form container control.<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#FFFFFF" backgroundAlpha="0"> <mx:Form x="50" y="50" verticalGap="15"> <mx:FormHeading label="Send us comments" /> <mx:FormItem label="Full Name:"> <mx:TextInput id="fullName" /> </mx:FormItem> <mx:FormItem label="Email:"> <mx:TextInput id="email" /> </mx:FormItem> <mx:FormItem label="Comments:"> <mx:TextArea id="comments" /> </mx:FormItem> <mx:FormItem> <mx:Button id="submit" label="submit" /> </mx:FormItem> </mx:Form> </mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#000000" layout="horizontal"
horizontalGap="25">
<mx:Style> Panel { backgroundAlpha: 1; borderAlpha: 1;
headerColors: #c7c7c7, #ffffff;
footerColors: #ffffff, #c7c7c7;
paddingTop: 15; paddingRight: 15;
paddingLeft: 15; paddingBottom: 15;
shadowDirection: "right"; }
.header { color: #ffffff; fontSize: 15;
fontWeight: "bold"; }</mx:Style>
<mx:VBox verticalGap="10">
<mx:Panel title="Featured Photograph">
<mx:Image source="assets/animals03.jpg" horizontalCenter="0"
top="30" />
<mx:Label text="Photographed by Elsie Weil"
horizontalCenter="0" top="250" />
</mx:Panel>
<mx:Panel title="Provide feedback">
<mx:Form x="50" y="50" verticalGap="15">
<mx:FormHeading label="Send us comments" />
<mx:FormItem label="Full Name:"><mx:TextInput
id="fullName" />
</mx:FormItem>
<mx:FormItem label="Email:"><mx:TextInput id="email" />
</mx:FormItem>
<mx:FormItem label="Comments:"><mx:TextArea
id="comments" />
</mx:FormItem>
<mx:FormItem><mx:Button id="submit" label="submit" />
</mx:FormItem>
</mx:Form>
</mx:Panel>
</mx:VBox>
<mx:VBox verticalGap="25">
<mx:Canvas>
<mx:Label text="Category: Animals" styleName="header" />
<mx:Image source="assets/animals03_sm.jpg" y="30" />
<mx:Image source="assets/animals08_sm.jpg" y="120" />
<mx:Image source="assets/animals09_sm.jpg" y="120"
x="120" />
<mx:Image source="assets/animals10_sm.jpg" y="120"
x="240" />
<mx:Image source="assets/animals11_sm.jpg" y="211" />
<mx:Image source="assets/animals12_sm.jpg" y="211"
x="120" />
<mx:Image source="assets/animals06_sm.jpg" y="30"
x="120" />
<mx:Image source="assets/animals07_sm.jpg" y="30"
x="240" />
</mx:Canvas>
<mx:Canvas>
<mx:Label text="Category: Cities" styleName="header" />
<mx:Image source="assets/city01_sm.jpg" y="30" />
<mx:Image source="assets/city02_sm.jpg" y="30" x="120"/>
<mx:Image source="assets/city03_sm.jpg" y="30" x="240" />
<mx:Image source="assets/city04_sm.jpg" y="120" x="0" />
</mx:Canvas>
</mx:VBox>
</mx:Application>Panel container consists
of a title bar, a caption, a status message, a border, and a content area
for its children. You can use Panel
containers to wrap self-contained application modules. You can control the
display layout by using the layout property set
to vertical (the default), horizontal, or absolute. Each child must have its
x and y positions set when using
an absolute layout, or they must use anchors for a constraint-based
layout.Panel layout.<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundGradientColors="[#FFFFFF, #000000]">
<mx:Panel title="Featured Photograph"
backgroundAlpha=".25" borderAlpha="1"
headerColors="[#c7c7c7, #ffffff]"
footerColors="[#ffffff, #c7c7c7]"
paddingTop="15" paddingRight="15" paddingLeft="15"
paddingBottom="15"
shadowDirection="right">
<mx:Image source="assets/animals03.jpg"
horizontalCenter="0" top="30" />
<mx:Label text="Photographed by Elsie Weil"
horizontalCenter="0" top="250" />
</mx:Panel>
</mx:Application>Panel-based layout.
TitleWindow class to provide windowing-style
functionality. This can come in handy when you want to bring up an alert,
or a modal dialog.<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal">
<mx:VBox horizontalAlign="left">
<mx:Label text="Text label" />
<mx:Label htmlText="<b>HTML</b> text" />
<mx:Button label="Button" />
<mx:CheckBox label="Check box" />
<mx:RadioButtonGroup id="cardType"/>
<mx:RadioButton label="Visa" groupName="cardType" />
<mx:RadioButton label="MasterCard" groupName="cardType"/>
<mx:ComboBox dataProvider="{['a','b','c']}" />
<mx:HSlider />
<mx:TextInput />
</mx:VBox>
<mx:VBox horizontalAlign="left">
<mx:List dataProvider="{['a','b','c']}" width="200"
height="100" />
<mx:ButtonBar dataProvider="{['a','b','c']}" />
<mx:NumericStepper />
<mx:Image source="@Embed('megan.jpg')" />
</mx:VBox>
</mx:Application>
DataGrid and the AdvancedDataGrid. I’ll start by showing the
DataGrid control (see ).<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:XMLList id="employees">
<employee>
<name>Christina Coenraets</name>
<phone>555-219-2270</phone>
<email>ccoenraets@fictitious.com</email>
<active>true</active>
</employee>
...
</mx:XMLList>
<mx:DataGrid width="100%" height="100%" dataProvider=
"{employees}">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name"/>
<mx:DataGridColumn dataField="phone" headerText="Phone"/>
<mx:DataGridColumn dataField="email" headerText="Email"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
DataGrid unless you want to. The DataGrid control is smart enough to detect the
columns from the data and set itself up if you haven’t defined the
columns.AdvancedDataGrid is just like
the DataGrid but with a more powerful
set of features. For example, it has the ability to roll up sections of
the data and provide users with spinners so that they can drill down into
the data.AdvancedDataGrid in action.<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dpHierarchy:ArrayCollection = new ArrayCollection([
{Region:"Southwest", children: [ ... ]}
]);
]]>
</mx:Script>
<mx:AdvancedDataGrid width="100%" height="100%">
<mx:dataProvider>
<mx:HierarchicalData source="{dpHierarchy}"/>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Region"/>
<mx:AdvancedDataGridColumn dataField="Territory_Rep"
headerText="Territory Rep"/>
<mx:AdvancedDataGridColumn dataField="Actual"/>
<mx:AdvancedDataGridColumn dataField="Estimate"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Application>