- 浏览: 406331 次
- 性别:
- 来自: 济南
最新评论
-
nianshi:
slideDown就是show的滑动效果版本, slideUp ...
Jquery零碎代码收藏 -
nianshi:
以后编写JS代码,少写<div onclick=&quo ...
Jquery零碎代码收藏 -
nianshi:
获取匹配元素相对父元素的偏移var p = $("p ...
Jquery零碎代码收藏 -
nianshi:
获取匹配元素在当前窗口的相对偏移var p = $(" ...
Jquery零碎代码收藏 -
wuchu:
谢谢
Flex 读取XML配置文件总结
使用容器
容器定义 Adobe® Flash® Player 的绘图表面的一个矩形区域。在容器内, 可以定义希望出现在容器内的组件, 包括控件和容器。在容器内定义的组件称为容器的子级。Adobe Flex 提供范围广泛的容器, 从简单的框到面板和表单, 到在子容器之间提供内置导航 的元素 (如折叠式导航器或选项卡式导航器)。
Container 类是所有 Flex 容器类的基本类。 扩展 Container 类的容器添加它们自己的功能以进行子组件布局。
在 Flex 应用程序的根部是称为 Application 容器的单一容器, 它代表整个 Flash Player 绘图表面。此 Application 容器容纳所有其他容器和组件。
提示: 不同的容器支持不同的布局规则, 包括 automatic 和 absolute 定位。关于这一点的详细信息, 请参阅 Flex 组件的定位和布局。
- 使用布局容器
- 使用导航器
使用布局容器
使用布局容器可进行用户界面布局。下面的表格描述下面的示例使用的布局容器:
名称 描述 | ||
Panel | Panel 容器显示一个标题栏、一个标题、一个边框及其子级。默认情况下, Panel 容器会对子组件进行垂直布局, 并且可以通过将布局属性设置为 "absolute"
或 "horizontal"
来覆盖此设置。 |
|
HDividedBox | HDividedBox 容器对子组件进行水平布局, 除了在子级之间插入一个可调整的分割线之外, 它与 HBox 容器很相似。 VDividedBox 容器对子组件进行垂直布局, 而且也在子级之间插入一个可调整的分割线。 | |
Tile |
Tile 容器以多行或多列的形式排列其子级。 |
|
Form | Form 容器以标准的表单格式排列其子级。 | |
ApplicationControlBar | ApplicationControlBar 容器容纳提供全局导航和应用程序命令的组件, 并可以停靠在 Application 容器的上边缘。 | |
ControlBar | ControlBar 容器将控件置于 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 应用程序并从上下文菜单中选择“查看源代码”。
使用导航容器
导航器容器控制子级是其他容器的多个子级之间的用户移动或导航。
导航器容器的直接子级必须是容器, 要么是布局容器, 要么是导航器容器。 无法在导航器内直接嵌套控件;控件必须是导航器容器的子容器的子级。
下面的表格描述下面的示例使用的导航器容器:
名称 描述 | ||
Accordion | Accordion 容器定义一个子面板序列, 但一次仅显示一个面板。 若要导航容器, 用户会单击与他们需要访问的子面板相对应的导航按钮。 使用 Accordion 容器, 用户可以按任何顺序访问子面板以在表单中前后移动。 | |
TabNavigator | TabNavigator 容器创建和管理一组选项卡, 使用它们可在其子级中间导航。 TabNavigator 容器的子级是其他容器。 TabNavigator 容器为每个子级创建一个选项卡。 当用户选中某个选项卡时, TabNavigator 容器会显示相关联的子级。 | |
ViewStack |
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>
发表评论
-
Flex小记录
2011-02-24 10:18 1254Flex读取XML: <mx:HTTPServic ... -
flex实现滑动显示隐藏效果
2010-12-30 15:30 1537鼠标划过的时候显示菜单栏 ,鼠标移开后隐藏菜单栏。比较常用 ... -
flex DataTimePicker时间控件
2010-12-27 11:54 1286两种DatatimePicker: 1.Datatim ... -
ActionScript 生成伪Guid
2010-12-24 09:52 1162在一个Flash制作的图片上传程序中(使用了FileRefer ... -
Flex中Image组件怎么才能非等比例拉伸图片
2010-12-23 15:49 1473Image组件怎么才能非等比例拉伸图片 设 ... -
Flex中Accordion用法
2010-12-23 11:45 3044<? xml version = & ... -
Flex(替代session过期)实现用户长时间不操作要求重新登录的处理
2010-12-23 11:08 1473flex(替代session过期)用户长时间不操作要求重新登录 ... -
ActionScript 3.0 Socket编程
2010-12-23 09:56 1133在使用ActionScript3.0进行编程 ... -
12个简单易用的flex函数
2010-12-21 10:10 10931.拷贝内容到剪贴板: ... -
Flex自定义控件——Pagebar分页控件
2010-12-20 09:41 5182开发时经常遇到用一个DataGrid分页显示 ... -
Flex资源,很全,很牛!
2010-12-20 09:30 14211、as3ebaylib http://code ... -
Flex 窗体 最大化、最小化实例
2010-12-20 09:28 2672---导入flexMdi.swc (http ... -
在Flex中复制文字到操作系统的剪贴板
2010-12-15 11:18 1196这个实例演示了怎么样使用System. ... -
Flex让Slider控件拖动时显示Tooltip
2010-12-14 16:10 1865格式化与自定义Slider中显示的Tooltip ... -
Flex给Alert加个Icon
2010-12-14 16:05 1251给Alert加个Icon 很简单只要先 Embed 一 ... -
在Flex中用Validator验证数字、字符串、Email、电话号码等
2010-12-14 09:54 4262mx.validators ... -
Flex中使用FileReference类下载文件
2010-12-14 09:47 1759下面的实例演示了Flex中的 File ... -
Flex使用ArrayCollection的filterFunction属性过滤DataGrid
2010-12-14 09:42 1759下面的实例演示了在Flex中怎样使用 ... -
Flex 树形控件(Tree )的使用
2010-12-13 16:24 3433一、树形控件的常用属性 1、dragMoveE ... -
FLEX3中应用CSS完全详解手册(下)
2010-12-13 11:40 838myTabs中的设置 cornerRadiusTab ...
相关推荐
Flex4中文快速入门;
FLEX快速入门.zip 用户在界面输入的数据可能不适合应用系统。在Flex应用程序中,可以使用validator来确保表单里的字段值满足某些标准。例如,你可以使用validator来确定用户输入有效的电话号码,确定字符串大于最小...
FLEX 数据绑定 Flex HTTPservice使用 Flex 创建自定义事件。 其它入门基础等。
这样估计以后会有中文版的Flex2 了...),使用Flex2的本地化特性我们可以很容易创建多语言本地化的Flex应用,为我们的Flex应用打入国际市场添威助力,不过不像Java的 本地化资源动态获取的方式,目前Flex2的本地化...
Flex3快速入门的电子书,新手入门的好东西,
Flex教程 flex快速入门 使用 使用 MXML 和 和 ActionScript进行编码 进行编码进行编码 Adobe® 将 Flex 实施为 ActionScript
FLEX+快速入门…………………………………………
目标是:做简单的demo.熟悉环境,工具等。 宗旨是:重敲书本的例子,熟悉语法,规范,流程 参考网文:http://jackweijie.javaeye.com/blog/191452 参考书:Flex 入门教程...
Flex3.0学习版快速入门提高版,简单轻松,操作容易。学习简单,很清楚地描述了怎么从零凯斯学习Flex的开发。
FLEX中文快速入门资料.针对简单学习用户而写的PDF书籍
flex精通 flex入门flex精通 flex入门flex精通 flex入门flex精通 flex入门flex精通 flex入门flex精通 flex入门flex精通 flex入门flex精通 flex入门flex精通 flex入门
Flex3快速入门,从www.airia.cn上面另存转为PDF.
新出的flex4.0教程。。是网上几位大牛整理出来的。。希望对大家有用
1. Flex3 入门培训ppt:介绍什么是flex,ActionScript 3.0,容器等 2. Flex3 入门培训pdf:来源于Adobe官方翻译资料
flex快速入门“flex3_quickstart”
flex快速入门flex快速入门flex快速入门
Flex快速入门教教程,Flex快速入门教教程,Flex快速入门教教程,Flex快速入门教教程
flex的学习分为3个阶段,第一个阶段入门,第2个阶段提高,第3个阶段大师。 flex入门时学习flex初期的一本很好的资料,通过学习能快速体会flex。好不容易 找来与大家分享
Flex快速入门资料,该部分文档的内容是提供关于Flex 工作机制的一个快速综述。通过学习,你可以创建你的第一个Flex 应用程序,并将它与你以前所熟悉的Web 开发技术进行比较,以领会Flex 的内涵和精髓。
Flex3界面布局中文教程 Canvas layout 容器 1 Absolute模式 1 constraint-based模式: 2 ControlBar layout 容器 4 ApplicationControlBar 容器 6 DividedBox, HDividedBox 和VDividedBox 布局 7...