MACROMEDIA FLEX-GETTING STARTED WITH FLEX Getting Started page 26

Laying out a user interface
MXML provides a comprehensive set of components for laying out the user interface of an
application. The standard set of components includes simple form controls, such as buttons and
text fields, as well as components for displaying structured data, such as tree controls, list boxes,
and combo boxes. MXML also provides container components for layout and navigation.
Examples of layout containers include the HBox container for laying out child components
horizontally, the VBox container for laying out child components vertically, and the Grid
container for laying out child components in rows and columns. Examples of navigator
containers include the TabNavigator container for creating tabbed panels, the Accordion
navigator container for creating collapsible panels, and the ViewStack navigator container for
laying out panels on top of each other.
The following example shows an application that contains a List control on the left side of the
user interface and a TabNavigator container on the right side:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:Panel title="My Application" marginTop="10" marginBottom="10"
marginLeft="10" marginRight="10" >
<mx:HBox>
<!-- List with three items -->
<mx:List>
<mx:dataProvider>
<mx:Array>
</mx:Array>
</mx:dataProvider>
</mx:List>
<!-- First pane of TabNavigator -->
<mx:TabNavigator borderStyle="solid">
<mx:VBox label="Pane1" width="300" height="150" >
<mx:TextArea text="Hello World" />
<mx:Button label="Submit" />
</mx:VBox>
<!-- Second pane of TabNavigator -->
<mx:VBox label="Pane2" width="300" height="150" >
<!-- Stock view goes here -->
</mx:VBox>
</mx:TabNavigator>
</mx:HBox>
</mx:Panel>
</mx:Application>
26 Chapter 2: Using MXML
<mx:String>Item 1</mx:String>
<mx:String>Item 2</mx:String>
<mx:String>Item 3</mx:String>