我的Flex之旅(3)导航容器

   通常,我们浏览普通web页面的时候,点击一个链接,就进入一个新的页面,因此Web页面通常带有导航条,但是我们Flex的内容大都是包含在一个swf文件里的,一般情况下,我们会有一个主页面,其中会有多个组件,来回切换,达到导航效果。Flex为我们提供了导航容器供我们切换组件或内容用。

   那么现在我们就来学习下ViewStack导航容器,我们先建立一个mxml Application页,并设置它的布局方式为Layout=”vertial”.

同时,拖动3个Panel容器在主容器里面,并为Title,lable,ID赋值。要注意的是设置它们的宽、高都相同(默认即可)

当你拖动3个Panel容器到主容器时候会发现屏幕不够用了,别担心,我们可以调整下显示界面,在舞台的上面可以找到如图:

 

您设置Desingn area为你需要现在的分辨率就行了,目的很简单,让它能给我们看到,呵呵。

同时我们为这3个Panel容器拖进Text标签,为Text赋值。

   那么现在我们要用到ViewStack导航容器了,我们切换到源代码视图吧。敲写<mx:ViewStack id=”vsPage”></mx:ViewStack>(注意要给它命名,等下你就知道用处)(当你敲上<mx:的时候会有代码提示滴)把3个Panel容器包含在其里面。如下代码所示:

 

代码
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:ViewStack id=”vsPage”>

<mx:Panel width="250" height="200" layout="absolute" title="First Panel" label="First Panel">

<mx:Text x="10" y="10" text="天下英雄出我辈,一入江湖岁月催。鸿图霸业谈笑中,不胜人生一场醉。" width="210" height="100"/>

</mx:Panel>

<mx:Panel width="250" height="200" layout="absolute" title="Second Panel" label="Second Panel">

<mx:Text x="10" y="10" text="天下英雄出我辈,一入江湖岁月催。鸿图霸业谈笑中,不胜人生一场醉。" width="210" height="100"/>

</mx:Panel>

<mx:Panel width="250" height="200" layout="absolute" title="Third Panel" label="Third Panel">

<mx:Text x="10" y="10" text="天下英雄出我辈,一入江湖岁月催。鸿图霸业谈笑中,不胜人生一场醉。" width="210" height="100"/>

</mx:Panel>

</mx:ViewStack>

</mx:Application>

 

切换回Design视图,我们会发现,3个Panel怎么变成显示1个了,那是当然的了,ViewStack一次只能显示一个容器,我们可以通过调用方法等来回切换ViewStack里面的容器,达到导航效果。

   那么现在,我们就来实现这种切换吧。

我们从Nagitors 中拖动一个ButtonBar控件在主容器上,使得ViewStack在他的下面,并在右侧栏中设置dataProvider为{vsPage},这是绑定语法,目的是让ButtonBar的数据来源为ViewStack。

当然我们还是切换源代码编写比较好,毕竟我们以后都得跟代码打交道,多多熟悉下代码。

我们敲上这一段:<mx:ButtonBar dataProvider="{vsPage}"/> 在Application跟ViewStack标签之间。切换为Design 视图,你会看到:

  

您可以来回切换Panel。是不是很神奇。

其实还有一些控件,比如:ToggleButtonBar、LinkBar都类似于ButtonBar ,您不妨试试,操作一样,可以实现相同功能。

   当然不止ViewStack可以实现导航,我们的TabNavigator跟Accordion导航容器都可以实现。

  那么就让我们来用这2个导航容器吧。

  现在我们只需要替换<mx:ViewStack id=”vsPage”></mx:ViewStack>

为我们新的导航容器就行了,例如:<mx:Accordion></mx:Accordion>或者是<mx:TabNavigator></mx:TabNavigator>

效果分别如图:1:折叠菜单。2:Tab选项卡

   

当然的,我们可以通过代码事件实现导航功能,也即是用ActionScript3.0实现。具体做法如下:

添加一段:

 

代码
<mx:HBox>

<mx:Button label="first" click="vsPage.selectedIndex=0"/>

<mx:Button label="second" click="vsPage.selectedIndex=1"/>

<mx:Button label="tihrd" click="vsPage.selectedIndex=2"/>

</mx:HBox>

 

 

在ViewStack上面(当然这个控件有个ID为vsPage)。你知道的Button有个Click事件,我们点击Button的时候就调用事件,

vsPage.selectedIndex=0这一句表示,选中ViewStack的第一个索引,其他的你就知道了。

当然,您可以不用索引也可以实现导航,例如:

 

代码
<mx:HBox>

<mx:Button label="first" click="vsPage.selectedChild=pn1"/>

<mx:Button label="second" click="vsPage.selectedChild=pn2"/>

<mx:Button label="tihrd" click="vsPage.selectedChild=pn3"/>

</mx:HBox>

 

 

其中vsPage.selectedChild=pn1这一句表示选中ViewStack子项名为pn1的Panel容器。

实现代码为:

 

代码
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<!--<mx:ButtonBar dataProvider="{vsPage}"/>-->
<!--<mx:HBox>
<mx:Button label="first" click="vsPage.selectedIndex=0"/>
<mx:Button label="second" click="vsPage.selectedIndex=1"/>
<mx:Button label="tihrd" click="vsPage.selectedIndex=2"/>
</mx:HBox>
-->
<mx:HBox>
<mx:Button label="first" click="vsPage.selectedChild=pn1"/>
<mx:Button label="second" click="vsPage.selectedChild=pn2"/>
<mx:Button label="tihrd" click="vsPage.selectedChild=pn3"/>
</mx:HBox>
<mx:ViewStack id="vsPage">
<mx:Panel width="250" height="200" layout="absolute" title="First Panel" id="pn1" label="First Panel">
<mx:Text x="10" y="10" text="天下英雄出我辈,一入江湖岁月催。鸿图霸业谈笑中,不胜人生一场醉。" width="210" height="100"/>
</mx:Panel>
<mx:Panel width="250" height="200" layout="absolute" title="Second Panel" id="pn2" label="Second Panel">
<mx:Text x="10" y="10" text="天下英雄出我辈,一入江湖岁月催。鸿图霸业谈笑中,不胜人生一场醉。" width="210" height="100"/>
</mx:Panel>
<mx:Panel width="250" height="200" layout="absolute" title="Third Panel" id="pn3" label="Third Panel">
<mx:Text x="10" y="10" text="天下英雄出我辈,一入江湖岁月催。鸿图霸业谈笑中,不胜人生一场醉。" width="210" height="100"/>
</mx:Panel>
</mx:ViewStack>
</mx:Application>

 

 

      

下一节我们来介绍下状态,跟过渡

 

posted @ 2010-04-09 23:10  东子哥  阅读(1943)  评论(0编辑  收藏  举报