v4_06 懂得导航容器 _Web前端

v4_06 了解导航容器

v4_06 Understanding navigator containers 了解导航容器

ex4_06

这部分主要是讲

如何使用导航器(navigator)容器,包括ViewStack容器,它与其它UI控件共同工作来导航内容

有两种类型的容器

布局容器:用来控制容器子内容的大小和位置,这些子内容可能是控件或其它容器

导航容器:控制在子容器中进行导航,这些内容只可能是容器,而不是控件

注意例子中使用的component,都是使用NavigatorContent 写的

Accordion容器在垂直方向定义了堆叠的褶(pleats),当他们打开或关闭时会有动画效果

每个褶(pleat)显示一个子布局容器的内容,并且同一时间只有一个褶(pleat)可以被打开

<!-- UI components ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<mx:Accordion resizeToContent="true">
<components:HumanResources label="Human Resources"/>
<components:Marketing label="Marketing" />
<components:InformationTechnology label="Information Technology" />
</mx:Accordion>

TabNavigator的效果

<!-- UI components ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<mx:TabNavigator resizeToContent="true">
 
<components:HumanResources label="Human Resources"/>
 
<components:Marketing label="Marketing" />
 
<components:InformationTechnology label="Information Technology" />
</mx:TabNavigator>

ViewStack导航器容器实际上没有一个允许用户切换子容器的用户界面元素

通常它实现一个UI控件,像MX LinkBar 或TabBar控件,Spark TabBar 或ButtonBar控件,来导航子容器

既然ViewStack控件为导航显示使用UI控件,必须将ViewStack容器的id属性绑定到UI控件的dataProvider属性上

如果不使用TabBar,它只能显示第一页?(TabBar也可以使用其它Bar)

<!-- Declarations ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<s:TabBar dataProvider="{testid}"/>
 
 
<!-- UI components ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<mx:ViewStack id="testid" resizeToContent="true">
 
<components:HumanResources label="Human Resources"/>
 
<components:Marketing label="Marketing" />
 
<components:InformationTechnology label="Information Technology" />
</mx:ViewStack>