———使用容器来进行UI布局

In the Flex model-view design pattern, user interface components represent the view. The MXML language supports two types of user interface components: controls and containers. Controls are form elements, such as buttons, text fields, and list boxes. Containers are rectangular regions of the screen that contain controls and other containers.
You use container components for laying out a user interface, and for controlling user navigation through the application. 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 Container class is the base class of all Flex container classes. Containers that extend the Container class add their own functionality for laying out child components. Typical properties of a container tag include id, width, and height. For more information about the standard Flex containers, see “Introducing Containers” on page 419.
The following image shows an example Flex application that contains a List control on the left side of the user interface and a TabNavigator container on the right side. Both controls are enclosed in a Panel container.
[img]http://chinaemerson.iteye.com/upload/picture/pic/53435/1679ac04-b2e9-3238-8f42-fb6c695563ed.jpg[/img]
[i][b]A[/b]. Panel container [b]B[/b]. List control [b]C[/b]. TabNavigator container[/i]
Use the following code to implement this application:

<?xml version="1.0"?>
<!-- mxml/LayoutExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="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.
For more information about laying out user interface components, see “Using Flex Visual Components” on page 113.

在Flex模型视图的设计模式中，用户界面组件代表着软件的外观。MXML语言支持两种类型的用户界面组件：控件和容器。控件是一些表单元素，如按钮，文本字段和列表框。容器是屏幕上的矩形区域，其中可包含控件和其他容器。
在整个程序中，通过使用容器组件来进行UI布局，并通过控制应用程序的用户导航。容器布局的例子包括使用HBox容器对其子组件进行水平布局，使用VBox容器对其子组件进行垂直布局，使用Grid容器对子组件进行行列布局。以下是一个使用TabNavigator容器创建一个标签面板，其中使用Accordion导航容器创建可折叠面板，和ViewStack导航容器将各面板按配置顺序置于彼此顶部。
Container类是所有Flex容器类的基类。容器通过扩展容器类，再添加自己的功能来对自己的子组件进行布局。容器标签的典型属性包括id、width、和 height。如需有关标准Flex容器的信息，请参阅419页“介绍容器”。
下图展示了一个Flex示例UI程序，包含左边的列表控件和右侧TabNavigator容器。这两个控件是封装在一个面板容器中。

[img]http://chinaemerson.iteye.com/upload/picture/pic/53435/1679ac04-b2e9-3238-8f42-fb6c695563ed.jpg[/img]
[i][b]A[/b]. 面板容器 [b]B[/b]. 列表控件 [b]C[/b]. TabNavigator容器[/i]
使用下面的代码来实现这一程序:

<?xml version="1.0"?>
<!-- mxml/LayoutExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="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>

List控件和TabNavigator容器的布局并排排列，是因为他们同在一个HBox容器中。在TabNavigator容器中的控件的排列是从顶部到底部，因为他们在VBox容器中。
如需UI组件布局的详细信息，请参阅113页的“使用Flex可视组件”。