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:String>Item 1</mx:String>
                  <mx:String>Item 2</mx:String>
                  <mx:String>Item 3</mx:String>
               </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>

The List control and TabNavigator container are laid out side by side because they are in an HBox container. The controls in the TabNavigator container are laid out from top to bottom because they are in a VBox container.

The following figure shows the application rendered in a web browser window:

For more information about laying out user-interface components, see Using Flex Components in Developing Flex Applications.

Version 1.5

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/15/flex_docs_en/00000017.htm

Add Comment