Flex中的导航器
来源:互联网 发布:discuz数据库备份目录 编辑:程序博客网 时间:2024/04/29 21:07
一个导航容器可 以通过一组子容器来监控用户的操作。比如,TabNavigator 这个容器就可以通过一组tabs 来让用户选择可见的子容器。Flex3 提供了三种主要的导航容器:
Ø ViewStack
Ø TabNavigator
Ø Accordion
接下来的时间逐 个介绍每个容器的使用方法。
1. ViewStack 导航容器
ViewStack 导航容器,以下简称VS 容器。是由很多子容器组合起来的,这些子容器相互叠在彼此之上,并且在某一特定的时间内只有一个容器是可见的或者说是Active 状态的。VS 容器没有定义 built-in 的机制来切换当前处于active 状态的容器,所以用户需要使用像LinkBar,TabBar 或者ToggleButtonBar 这些控件,或者使用ActionScript 来更改当前可见容器的状态。比你可以定义一系列的按钮来控制所有子容器的切换动作。
图中 左边的图片显示VS 容器中第一个子容器是激活的,可以用索引的方法来表示VS 容器里面的子容器。比如0- (n-1 ).
创建一个VS 容器
使用<mx:ViewStack> 标记就可以定义一个VS 容器,当然还可以设定很多属性了:
Ø selectedIndex 表示如果VS 容器里里面有多余一个的子容器,那么selectedIndex 的值所对应的那个子容器就是active 的可见的。其取值范围0 到n-1.n 代表子容器的个数。
Ø selectedChild 当前激活的容器当定义了一个或者多个子容器,如果没有定义子容器,其值为null 。并且这个属性必须是现在AS 当中指定你要激活的那个容器的id.
Ø numChildren 值VS 容器当中到底有多少个子容器。
举 例:我们试图增加一些特效。
- <!-- containers/navigators/VSLinkEffects.mxml -->
- < mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" >
- < mx:WipeUp id = "myWU" duration = "300" />
- < mx:WipeDown id = "myWD" duration = "300" />
- < mx:WipeRight id = "myWR" duration = "300" />
- < mx:VBox >
- < mx:LinkBar dataProvider = "{myViewStack}"
- borderStyle = "solid"
- backgroundColor = "#EEEEFF" />
- < mx:ViewStack id = "myViewStack"
- borderStyle = "solid"
- width = "100%"
- creationCompleteEffect = "{myWR}" >
- < mx:Canvas id = "search"
- label = "Search"
- hideEffect = "{myWD}"
- showEffect = "{myWU}" >
- < mx:Label text = "Search Screen" />
- </ mx:Canvas >
- < mx:Canvas id = "custInfo"
- label = "Customer Info"
- hideEffect = "{myWD}"
- showEffect = "{myWU}" >
- < mx:Label text = "Customer Info" />
- </ mx:Canvas >
- < mx:Canvas id = "accountInfo"
- label = "Account Info"
- hideEffect = "{myWD}"
- showEffect = "{myWU}" >
- < mx:Label text = "Account Info" />
- </ mx:Canvas >
- </ mx:ViewStack >
- </ mx:VBox >
- </ mx:Application >
- <!-- containers/navigators/VSLinkEffects.mxml -->
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
- <mx:WipeUp id="myWU" duration="300"/>
- <mx:WipeDown id="myWD" duration="300"/>
- <mx:WipeRight id="myWR" duration="300"/>
- <mx:VBox>
- <mx:LinkBar dataProvider="{myViewStack}"
- borderStyle="solid"
- backgroundColor="#EEEEFF"/>
- <mx:ViewStack id="myViewStack"
- borderStyle="solid"
- width="100%"
- creationCompleteEffect="{myWR}">
- <mx:Canvas id="search"
- label="Search"
- hideEffect="{myWD}"
- showEffect="{myWU}">
- <mx:Label text="Search Screen"/>
- </mx:Canvas>
- <mx:Canvas id="custInfo"
- label="Customer Info"
- hideEffect="{myWD}"
- showEffect="{myWU}">
- <mx:Label text="Customer Info"/>
- </mx:Canvas>
- <mx:Canvas id="accountInfo"
- label="Account Info"
- hideEffect="{myWD}"
- showEffect="{myWU}">
- <mx:Label text="Account Info"/>
- </mx:Canvas>
- </mx:ViewStack>
- </mx:VBox>
- </mx:Application>
效果图:
2. TabNavigator 导航容器
TabNavigator 容器用来创建和管理一组tabs ,这些tabs 可以帮用户导航选择需要的子容器板块。
创建TabNavigator 容器
你可以通过<mx:TabNavigator> 标记来定义个TabNavigator 容器。用户可以通过tab 选择对应的板块容器。当用户改变当前容器时, TabNavigator 容器都会触发一个change 事件。
TabNavigator 容器会自动为每一个子容器创建一个tab, 并且通过label 属性设定tab 里面的值。当然你可以指定图片等。用户还可以设定enable disable 属性来决定那个容器可用与否。
举例:
- <? xml version = "1.0" ?>
- <!-- containers/navigators/TNEffect.mxml -->
- < mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" >
- < mx:WipeLeft id = "myWL" />
- < mx:TabNavigator >
- < mx:VBox label = "Accounts"
- width = "300"
- height = "150"
- showEffect = "{myWL}" >
- <!-- Accounts view goes here. -->
- < mx:Text text = "This is a text control." />
- </ mx:VBox >
- < mx:VBox label = "Stocks"
- width = "300"
- height = "150"
- showEffect = "{myWL}" >
- <!-- Stocks view goes here. -->
- < mx:Text text = "This is a text control." />
- </ mx:VBox >
- < mx:VBox label = "Futures"
- width = "300"
- height = "150"
- showEffect = "{myWL}" >
- <!-- Futures view goes here. -->
- < mx:Text text = "This is a text control." />
- </ mx:VBox >
- </ mx:TabNavigator >
- </ mx:Application >
- <?xml version="1.0"?>
- <!-- containers/navigators/TNEffect.mxml -->
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
- <mx:WipeLeft id="myWL"/>
- <mx:TabNavigator>
- <mx:VBox label="Accounts"
- width="300"
- height="150"
- showEffect="{myWL}">
- <!-- Accounts view goes here. -->
- <mx:Text text="This is a text control."/>
- </mx:VBox>
- <mx:VBox label="Stocks"
- width="300"
- height="150"
- showEffect="{myWL}">
- <!-- Stocks view goes here. -->
- <mx:Text text="This is a text control."/>
- </mx:VBox>
- <mx:VBox label="Futures"
- width="300"
- height="150"
- showEffect="{myWL}">
- <!-- Futures view goes here. -->
- <mx:Text text="This is a text control."/>
- </mx:VBox>
- </mx:TabNavigator>
- </mx:Application>
效果如图:
TabNavigator 支持键盘导航功能,即可以通过键盘来选择tabs. 具体可以参考development guide.
3. Accordion 导航容器
窗体 是很常见的容器了,可是有时候组件很多一个窗体放不下,accordion 就提供了一个可以来回移动的窗体。这个容器可以包含一系列的子panels 。但是任意时刻都只有一个panel 是可见的。
创建Accordion 容器
你可 以使用<mx:Accordion> 标记来创建这个容器。举例说明:
- <? xml version = "1.0" ?>
- <!-- containers/navigators/AccordionButtonNav.mxml -->
- < mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" width = "600"
- height = "600"
- creationComplete = "setButtonStyles();" >
- < mx:Script >
- <![CDATA[
- public function setButtonStyles():void {
- comp.getHeaderAt(0).setStyle('color', 0xAA0000);
- comp.getHeaderAt(1).setStyle('color', 0x00AA00);
- }
- ]]>
- </ mx:Script >
- < mx:Accordion id = "comp" height = "250" >
- < mx:Form id = "shippingAddress" label = "1. Shipping Address" >
- < mx:FormItem id = "sfirstNameItem" label = "First Name" >
- < mx:TextInput id = "sfirstName" />
- </ mx:FormItem >
- </ mx:Form >
- < mx:Form id = "billingAddress" label = "2. Billing Address" >
- < mx:Button id = "backButton" label = "Back" click = "comp.selectedIndex=0;"/>
- < mx:Button id = "nextButton" label = "Next" click = "comp.selectedIndex=2;"/>
- </ mx:Form >
- < mx:Form id = "creditCardInfo" label = "3. Credit Card Information" >
- </ mx:Form >
- </ mx:Accordion >
- </ mx:Application >
- <?xml version="1.0"?>
- <!-- containers/navigators/AccordionButtonNav.mxml -->
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="600"
- height="600"
- creationComplete="setButtonStyles();">
- <mx:Script>
- <![CDATA[
- public function setButtonStyles():void {
- comp.getHeaderAt(0).setStyle('color', 0xAA0000);
- comp.getHeaderAt(1).setStyle('color', 0x00AA00);
- }
- ]]>
- </mx:Script>
- <mx:Accordion id="comp" height="250">
- <mx:Form id="shippingAddress" label="1. Shipping Address">
- <mx:FormItem id="sfirstNameItem" label="First Name">
- <mx:TextInput id="sfirstName"/>
- </mx:FormItem>
- </mx:Form>
- <mx:Form id="billingAddress" label="2. Billing Address">
- <mx:Button id="backButton" label="Back" click="comp.selectedIndex=0;"/>
- <mx:Button id="nextButton" label="Next" click="comp.selectedIndex=2;"/>
- </mx:Form>
- <mx:Form id="creditCardInfo" label="3. Credit Card Information">
- </mx:Form>
- </mx:Accordion>
- </mx:Application>
我们增加了一些效果。比如用户通过按钮可以选择那个panel 是可见的。
- < mx:Button id = "lastButton" label = "Last" click ="accordion1.selectedIndex = accordion1.numChildren - 1;" />
- <mx:Button id="lastButton" label="Last" click="accordion1.selectedIndex = accordion1.numChildren - 1;"/>
这段程序就可以 打开最后一个 panel.
同时还可以设定 每个 panels 的外观,包括字体、颜色等。
效果图:
当然 Accordion 也有键盘导航功能。具体参考 development guide.
4、 导航容器ApplicationControlBar
主要用来作页面顶部的导航条:
- Flex中的导航器
- Flex中的导航器
- flex 控制accordion 导航器中的按钮
- flex---->导航
- flex Accordion 导航器容器 flex 教程 flex培训 flex源码 flex实例
- flex Accordion 导航器容器2 flex 教程 flex培训 flex源码 flex实例
- flex Accordion 导航器容器3 flex 教程 flex培训 flex源码 flex实例
- Flex 导航学习笔记
- flex学习----导航
- flex导航条MenuBar
- Flex资源导航帖
- flex 创建导航菜单
- FLex布局实现导航
- flex中的flex-direction
- flex 中的flex-basis
- [Flex 2] 05 导航容器
- flex 制作导航栏菜单
- 项目实践中的react-navigation导航器
- 经典代码一
- ASP.NET MVC3 高级编程学习笔记——入门
- java ssh中得到上下文路径
- C++ 编程 注意要点
- 机器学习的公开课-斯坦福大学-每个视频都很短
- Flex中的导航器
- 调度子系统阅读
- C++中的空类,编译器默认可以产生哪些成员函数
- android 返回键、菜单键模拟
- ecshop数据库操作函数
- 生成verify文件
- Java中的finally
- jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
- Nagios安装错误解决办法(不断补充中)