您的位置:首页 > 移动开发

Flex3 快速入门:构建简单的用户界面 使用容器

2012-09-20 17:39 639 查看
使用容器

容器定义 Adobe? Flash? Player 的绘图表面的一个矩形区域。在容器内, 可以定义希望出现在容器内的组件, 包括控件和容器。在容器内定义的组件称为容器的子级。Adobe Flex 提供范围广泛的容器, 从简单的框到面板和表单, 到在子容器之间提供内置导航 的元素 (如折叠式导航器或选项卡式导航器)。

Container 类是所有 Flex 容器类的基本类。 扩展 Container 类的容器添加它们自己的功能以进行子组件布局。

在 Flex 应用程序的根部是称为 Application 容器的单一容器, 它代表整个 Flash Player 绘图表面。此 Application 容器容纳所有其他容器和组件。

提示: 不同的容器支持不同的布局规则, 包括 automatic 和 absolute 定位。关于这一点的详细信息, 请参阅 Flex 组件的定位和布局。

使用布局容器 
使用导航器 

使用布局容器

使用布局容器可进行用户界面布局。下面的表格描述下面的示例使用的布局容器:

 名称描述

PanelPanel 容器显示一个标题栏、一个标题、一个边框及其子级。默认情况下, Panel 容器会对子组件进行垂直布局, 并且可以通过将布局属性设置为 

"absolute"

或 

"horizontal"

来覆盖此设置。

HDividedBoxHDividedBox 容器对子组件进行水平布局, 除了在子级之间插入一个可调整的分割线之外, 它与 HBox 容器很相似。 VDividedBox 容器对子组件进行垂直布局, 而且也在子级之间插入一个可调整的分割线。

TileTile 容器以多行或多列的形式排列其子级。

FormForm 容器以标准的表单格式排列其子级。

ApplicationControlBarApplicationControlBar 容器容纳提供全局导航和应用程序命令的组件, 并可以停靠在 Application 容器的上边缘。

ControlBarControlBar 容器将控件置于 Panel 或 TitleWindow 容器的下边缘。
此外, 该示例使用 Spacer 控件 (它不是一个容器) 来帮助进行界面的布局。

提示: Spacer 控件是用于在自动定位的容器内准确定位元素的一个不可见控件。 在此示例中, Spacer 控件是 ApplicationControlBar 容器中唯一基于百分比的组件。 Flex 调整 Spacer 控件的大小以占据容器中其他组件不需要的所有可用空间。 通过扩展 Spacer 控件, Flex 将 Button 控件推到该容器的右边缘。

示例

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 

    xmlns:mx="http://www.adobe.com/2006/mxml

    width="525" height="400"

    viewSourceURL="src/LayoutContainers/index.html"

>

    <mx:ApplicationControlBar dock="true">

        <mx:Label 

            text="ApplicationControlBar" 

            fontFamily="Verdana" fontWeight="bold" fontSize="12"

        />

        <mx:Spacer width="100%"/>

        <mx:Button label="Log out"/>

    </mx:ApplicationControlBar>

    <mx:Panel 

        layout="horizontal" title="Panel"

        width="100%" height="100%"

    >

        <mx:HDividedBox width="100%" height="100%">

            <mx:Panel 

                width="100%" height="100%" 

                headerHeight="0" borderStyle="solid" shadowDistance="0"

            >

                <mx:Label text="Panel (without header)" fontWeight="bold" />                 

                <mx:Form>

                    <mx:FormHeading label="First form" />    

                    <mx:FormItem label="Name:">

                        <mx:TextInput width="100"/>

                    </mx:FormItem>

                    <mx:FormItem label="Email:">

                        <mx:TextInput width="100"/>

                    </mx:FormItem>

                </mx:Form>

            </mx:Panel>

            <mx:Panel 

                width="100%" height="100%" 

                headerHeight="0" borderStyle="solid" shadowDistance="0"

            >                

                <mx:Label text="Panel (without header)" fontWeight="bold" />

                <mx:Form>

                    <mx:FormHeading label="Second form" />    

                    <mx:FormItem label="Name:">

                        <mx:TextInput width="100"/>

                    </mx:FormItem>

                    <mx:FormItem label="Email:">

                        <mx:TextInput width="100"/>

                    </mx:FormItem>

                </mx:Form>

            </mx:Panel>

        </mx:HDividedBox>

        

        <mx:ControlBar horizontalAlign="center">

            <mx:Label text="ControlBar in Panel" fontWeight="bold"/>

            <mx:Spacer width="100%"/>

            <mx:Button label="Prev"/>

            <mx:Button label="Finish"/>    

        </mx:ControlBar>

        

    </mx:Panel>

        

</mx:Application>

使用导航容器

导航器容器控制子级是其他容器的多个子级之间的用户移动或导航。

导航器容器的直接子级必须是容器, 要么是布局容器, 要么是导航器容器。 无法在导航器内直接嵌套控件;控件必须是导航器容器的子容器的子级。

下面的表格描述下面的示例使用的导航器容器:

 名称描述

AccordionAccordion 容器定义一个子面板序列, 但一次仅显示一个面板。 若要导航容器, 用户会单击与他们需要访问的子面板相对应的导航按钮。 使用 Accordion 容器, 用户可以按任何顺序访问子面板以在表单中前后移动。

TabNavigatorTabNavigator 容器创建和管理一组选项卡, 使用它们可在其子级中间导航。 TabNavigator 容器的子级是其他容器。 TabNavigator 容器为每个子级创建一个选项卡。 当用户选中某个选项卡时, TabNavigator 容器会显示相关联的子级。

ViewStackViewStack 导航器容器由彼此堆叠在一起的子容器的一个集合组成, 一次只有一个容器是可见的或活动的。 ViewStack 容器不为用户定义切换当前活动容器的内置机制;您必须使用 LinkBar、TabBar、ButtonBar 或 ToggleButtonBar 控件或自己在 ActionScript 中构建逻辑让用户来更改当前活动的子级。
 

示例

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 

    xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

    width="550" height="550"

    viewSourceURL="src/NavigationContainers/index.html"

>

    <mx:Panel 

        layout="absolute" 

        left="10" top="10" right="10" bottom="10" title="Navigators"

    >

        <mx:Accordion width="47.5%" height="200" top="36" left="10">

            <mx:Canvas label="Navigation button 1" width="100%" height="100%">

                <mx:Label x="10" y="10" text="Contents 1"/>

            </mx:Canvas>

            <mx:Canvas label="Navigation button 2" width="100%" height="100%">

                <mx:Label x="10" y="10" text="Contents 2"/>

            </mx:Canvas>

            <mx:Canvas label="Navigation button 3" width="100%" height="100%">

                <mx:Label x="10" y="10" text="Contents 3"/>

            </mx:Canvas>

        </mx:Accordion>

        

        <mx:TabNavigator right="10" width="47.5%" height="200" y="36">

            <mx:Canvas label="Tab 1" width="100%" height="100%">

                <mx:Label x="10" y="10" text="Contents 1"/>

            </mx:Canvas>

            <mx:Canvas label="Tab 2" width="100%" height="100%">

                <mx:Label x="10" y="10" text="Contents 2"/>

            </mx:Canvas>

            <mx:Canvas label="Tab 3" width="100%" height="100%">

                <mx:Label x="10" y="10" text="Contents 3"/>

            </mx:Canvas>

        </mx:TabNavigator>

        <mx:ViewStack 

            id="myViewStack" 

            width="47.5%" height="200" right="10" bottom="10"

            borderColor="#000000" borderStyle="solid" 

        >

            <mx:Canvas label="View 1" width="100%" height="100%">

                <mx:Label x="10" y="10" text="Contents 1"/>

            </mx:Canvas>

            <mx:Canvas label="View 2" width="100%" height="100%">

                <mx:Label x="10" y="10" text="Contents 2"/>

            </mx:Canvas>

            <mx:Canvas label="View 3" width="100%" height="100%">

                <mx:Label x="10" y="10" text="Contents 3"/>

            </mx:Canvas>

        </mx:ViewStack>

        

        <!-- Labels for the various controls -->

        <mx:Label x="10" y="252" text="ButtonBar"/>

        <mx:Label x="10" y="10" text="Accordion"/>

        <mx:Label x="262.5" y="10" text="TabNavigator"/>

        <mx:Label x="262.5" y="252" text="ViewStack"/>

        <mx:Label x="10" y="308" text="ToggleButtonBar"/>

        <mx:Label x="10" y="364" text="LinkBar"/>

        <mx:Label x="10" y="424" text="TabBar"/>

        <!-- 

            All these navigators use the same dataProvider,

            namely, the myViewStack ViewStack instance.

            Changing the selected view in one will affect

            all the others also.  

        -->        

        <mx:ButtonBar x="10" y="278" dataProvider="{myViewStack}" />

        <mx:ToggleButtonBar x="10" y="334" dataProvider="{myViewStack}" />

        <mx:LinkBar x="10" y="390" dataProvider="{myViewStack}" />

        <mx:TabBar x="10" y="444" dataProvider="{myViewStack}" />

    </mx:Panel>

    

</mx:Application>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息