Flex3 快速入门:构建简单的用户界面 使用容器
来源:互联网 发布:全局优化 编译后端 编辑:程序博客网 时间:2024/06/05 17:53
本文来自:http://www.airia.cn/FLEX_Directory/using_containers/
使用容器
容器定义 Adobe® Flash® Player 的绘图表面的一个矩形区域。在容器内, 可以定义希望出现在容器内的组件, 包括控件和容器。在容器内定义的组件称为容器的子级。Adobe Flex 提供范围广泛的容器, 从简单的框到面板和表单, 到在子容器之间提供内置导航 的元素 (如折叠式导航器或选项卡式导航器)。
Container 类是所有 Flex 容器类的基本类。 扩展 Container 类的容器添加它们自己的功能以进行子组件布局。
在 Flex 应用程序的根部是称为 Application 容器的单一容器, 它代表整个 Flash Player 绘图表面。此 Application 容器容纳所有其他容器和组件。
提示: 不同的容器支持不同的布局规则, 包括 automatic 和 absolute 定位。关于这一点的详细信息, 请参阅 Flex 组件的定位和布局。
- 使用布局容器
- 使用导航器
使用布局容器
使用布局容器可进行用户界面布局。下面的表格描述下面的示例使用的布局容器:
"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>
结果
若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。
使用导航容器
导航器容器控制子级是其他容器的多个子级之间的用户移动或导航。
导航器容器的直接子级必须是容器, 要么是布局容器, 要么是导航器容器。 无法在导航器内直接嵌套控件;控件必须是导航器容器的子容器的子级。
下面的表格描述下面的示例使用的导航器容器:
名称 描述
ViewStack 导航器容器由彼此堆叠在一起的子容器的一个集合组成, 一次只有一个容器是可见的或活动的。 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>
结果
- Flex3 快速入门:构建简单的用户界面 使用容器
- Flex3 快速入门:构建简单的用户界面 使用容器
- Flex3 快速入门:构建简单的用户界面 使用控件
- Flex3 快速入门:构建简单的用户界面 使用控件
- Flex 3快速入门: 构建简单的用户界面 添加效果
- Flex 快速入门:构建简单的用户界面 创建状态
- Flex 3快速入门: 构建简单的用户界面 使用工具提示
- Flex 3快速入门: 构建简单的用户界面 控制和使用光标
- Android入门之构建简单的用户界面
- Flex 3快速入门: 构建简单的用户界面 设置组件的样式
- Flex 3快速入门: 构建简单的用户界面 定义状态过渡
- Flex 3快速入门: 构建高级用户界面 使用 Repeater 组件
- Flex 3快速入门: 构建高级用户界面 使用 Tree 控件
- Android官方入门文档[3]构建一个简单的用户界面
- 构建一个简单的用户界面
- 构建一个简单的用户界面
- Flex 3快速入门: 构建高级用户界面 使用数据提供程序
- Flex 3快速入门: 构建高级用户界面 设置组件的皮肤
- XMLHttpRequest与浏览器之别
- 一见钟情
- tomcat6.0配置
- 预览RAD Studio 2010的Touch UI功能。
- 修改Android模拟器的尺寸
- Flex3 快速入门:构建简单的用户界面 使用容器
- 穿越Python Challenge(0-5)
- 中国四大名著【电子书】在线阅读
- VC中CString,int,string,char*之间的转换
- 开博
- 基于libmad 的简单MP3流媒体播放器的实现
- Lua module机制分析
- C#中Request.ServerVariables详细说明及代理
- 2009ACM多校联合暑期集训(7)——福州大学专场