这里简单介绍Halo的导航容器,使用容器是创建Flex4应用程序布局和导航的最简单方式。
如下例子将写一个Flex Halo导航的简单示例,相关解释在注释中。
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%"
initialize="init()">
<s:layout>
<s:VerticalLayout paddingLeft="10" paddingTop="10"
paddingRight="10" paddingBottom="10"/>
</s:layout>
<mx:Panel width="100%" height="100%" title="Halo 导航示例">
<mx:LinkBar dataProvider="{vs}" width="100%"/>
<!-- LinkBar 的 数据源是 ViewStack,这里就同事使用TabNavigator和Accordion来做为LinkBar的LinkButton。-->
<mx:ViewStack id="vs" width="100%" height="100%">
<mx:TabNavigator width="100%" height="100%" paddingLeft="5"
label="Tab Navigator">
<mx:VBox label="Tab01" width="100%" height="100%">
<mx:Label text="第一页,放置按钮。"/>
<mx:Button label="Button 01"/>
</mx:VBox>
<mx:VBox label="Tab02" width="100%" height="100%">
<mx:Label text="第二页,放置图片。"/>
<mx:Image source="0.gif"/> <!--Image 标签可以使用 Http开头的URL-->
</mx:VBox>
<mx:VBox label="Tab03" width="100%" height="100%">
<mx:Label text="第三页,只有一个Label"/>
</mx:VBox>
</mx:TabNavigator>
<mx:Accordion width="100%" height="100%" label="Accordion">
<mx:VBox label="Accordion01" width="100%" height="100%">
<mx:Label text="折叠一"/>
</mx:VBox>
<mx:VBox label="Accordion02" width="100%" height="100%">
<mx:Label text="折叠二"/>
</mx:VBox>
<mx:VBox label="Accordion03" width="100%" height="100%">
<mx:Label text="折叠三"/>
</mx:VBox>
</mx:Accordion>
</mx:ViewStack>
</mx:Panel>
</s:Application>
上述代码中,TabNavigator 和 Accordion都包含VBox。这里是因为Halo导航容器只能使用Halo容器子组件,就像是HBox/VBox/Canvas等。
ViewStack/TabNavigator/Accordion这些容器一次只能显示其中一个子组件。
在实际设计界面的过程中,LinkBar同ViewStack结合是比较常见的做法,LinkBar不局限于水平布局,也可以使用垂直布局。