Flex4 Halo 导航容器示例

这里简单介绍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>

ViewStack/TabNavigator/Accordion这些容器一次只能显示其中一个子组件。

在实际设计界面的过程中，LinkBar同ViewStack结合是比较常见的做法，LinkBar不局限于水平布局，也可以使用垂直布局。