Flex移动开发

nywrb 2012-10-18

展开全文

SplitViewNavigator是Flex 4.6的另一个组件对象，主要用于当你想在应用程序中创建一个主视图（master view）或细节视图（detail view）时的版面开发，而主视图一般用作导航的源，细节视图作为主视图上动作的结果展示。根据布局，主视图一般位于屏幕的左边或上边，而细节视图一般位于右边或底部。如果你对于这个屏幕形式不熟悉，可以点这个链接查看。一个很好的例子就是你的一般邮件应用，比方说我的一个iPad邮件账号。

现在我可以简单的使用Flex 4.6的新特性用这类布局来创建应用程序了！SplitViewNavigator扩展了ViewNavigatorBase，所以它没有定位在应用程序的根级而是像ViewNavigator一样定位在子级。注意这个组件只能用在一个空的Application或TabbedViewNavigatorApplication里，以下是例子：

<?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" applicationDPI="160">
<s:SplitViewNavigator id="svn" width="100%" height="100%">
<s:ViewNavigator id="leftNav" width="30%" height="100%" firstView="views.LeftView"/>
<s:ViewNavigator id="rightNav" width="100%" height="100%" firstView="views.RightView"/>
</s:SplitViewNavigator>
</s:Application>

复制代码

在这里我的左视图和右视图只是简单的View类，它展示了一列可点击的城市，以及一些在细节视图中关于特别城市的繁琐的数据。我会在下面加入代码作参考：

LeftView.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="Left View">
<fx:Script>
<![CDATA[
protected function list_clickHandler(event:MouseEvent):void
{
(this.parentDocument as Sample).rightNav.activeView.data=list.selectedItem;
}
]]>
</fx:Script>
<s:List id="list" width="100%" height="100%" click="list_clickHandler(event)">
<s:dataProvider>
<s:ArrayCollection>
<fx:String>Atlanta, GA</fx:String>
<fx:String>Baltimore, MD</fx:String>
<fx:String>Boston, MA</fx:String>
<fx:String>Chicago, IL</fx:String>
<fx:String>Dallas, TX</fx:String>
<fx:String>Detroit, MI</fx:String>
<fx:String>Honolulu, HI</fx:String>
<fx:String>Los Angeles, CA</fx:String>
<fx:String>Minneapolis, MA</fx:String>
<fx:String>New Orleans, LA</fx:String>
<fx:String>New York, NY</fx:String>
<fx:String>Richmond, VA</fx:String>
<fx:String>San Francisco, CA</fx:String>
<fx:String>San Jose, CA</fx:String>
<fx:String>St. Louis, MO</fx:String>
<fx:String>Washington, DC</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:List>
</s:View>

复制代码

RightView.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Detail View">
<s:layout>
<s:VerticalLayout paddingTop="15" paddingBottom="15" paddingLeft="15" paddingRight="15" gap="5"
horizontalAlign="center" verticalAlign="top"/>
</s:layout>
<s:Label text="Click on a location on the left to explore!" visible="{data==null?true:false}"/>
<s:Label text="Information about {this.data}" visible="{data!=null?true:false}"/>
<s:TextArea text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur accumsan felis ac tortor aliquam iaculis. Phasellus hendrerit viverra enim, sit amet scelerisque lectus dictum at. Aenean sodales nisi sed leo congue et porttitor ligula vehicula.
Pellentesque turpis massa, suscipit vel fermentum quis, dignissim sed ipsum. Nulla aliquet libero adipiscing risus lobortis eleifend quis at velit. Duis at leo urna.
Praesent facilisis faucibus neque, ut ullamcorper lacus gravida a. Donec vel iaculis sapien." width="90%" editable="false" visible="{data!=null?true:false}"/>
</s:View>

复制代码

应用程序结果：

你也可以在SplitViewNavigator容器中设置布局，比方说你想将其垂直分离，你可以设置一个VerticalLayout并调整高度比例同时宽度设为100%，如：

<s:SplitViewNavigator id="svn" width="100%" height="100%">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:ViewNavigator id="leftNav" width="100%" height="30%" firstView="views.LeftView"/>
<s:ViewNavigator id="rightNav" width="100%" height="70%" firstView="views.RightView"/>
</s:SplitViewNavigator>

复制代码

这是更新后的布局：

分离视图的方法对于横向模式比较适用，而在纵向模式中你可能想要不同的显示方式因为屏幕宽度更小了。还有一些内置特性可以帮你做到。在SplitViewNavigator中有一个 autoHideFirstViewNavigator 属性，在应用程序接收到纵向改变事件时可以自动隐藏在左边视图中。

<s:SplitViewNavigator id="svn" width="100%" height="100%" autoHideFirstViewNavigator="true">
<s:ViewNavigator id="leftNav" width="30%" height="100%" firstView="views.LeftView"/>
<s:ViewNavigator id="rightNav" width="100%" height="100%" firstView="views.RightView"/>
</s:SplitViewNavigator>

复制代码

这时运行我们会看到：

其实这样也不是很有用，因为在我们的列表中并没有导航到不同项目的路径！所以我们需要再深入一些，在纵向模式的时候，我们可以使用SplitViewNavigator的showViewNavigatorInPopUp函数来弹出一个在Callout中的列表。我们从ViewNavigator右边的actionBar即navigationContent的一个按钮中调用这个函数，比如以下代码：

<s:SplitViewNavigator id="svn" width="100%" height="100%" autoHideFirstViewNavigator="true">
<s:ViewNavigator id="leftNav" width="30%" height="100%" firstView="views.LeftView"/>
<s:ViewNavigator id="rightNav" width="100%" height="100%" firstView="views.RightView" >
<s:navigationContent>
<s:Button id="listButton" label="List" click="svn.showFirstViewNavigatorInPopUp(listButton)"/>
</s:navigationContent>
</s:ViewNavigator>
</s:SplitViewNavigator>

复制代码

注意：更清楚的说，在上面我们用的actionBar已经隐定义为Spark ViewNavigator容器的一部分而且将父级设置为listButton的弹出窗口，这样Callout或是弹出的箭头都源于那个按钮。这就是在纵向模式时以上代码运行的结果了：

现在，我们可能希望在回到横向模式时这个按钮不要显示出来，所以我们需要在横向模式中添加状态操作使其不可。决定什么时候更新状态的其中一种方式就是添加resize事件句柄，根据检验出来的宽高值就能更新状态了。我们的代码现在看起来如下：

<?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" applicationDPI="160" resize="application1_resizeHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.ResizeEvent;
protected function application1_resizeHandler(event:ResizeEvent):void
{
if (width>height)
this.currentState="landscape";
else this.currentState="portrait";
}
]]>
</fx:Script>
<s:states>
<s:State name="portrait"/>
<s:State name="landscape"/>
</s:states>
<s:SplitViewNavigator id="svn" width="100%" height="100%" autoHideFirstViewNavigator="true">
<s:ViewNavigator id="leftNav" width="30%" height="100%" firstView="views.LeftView"/>
<s:ViewNavigator id="rightNav" width="100%" height="100%" firstView="views.RightView" >
<s:navigationContent>
<s:Button id="listButton" label="List" click="svn.showFirstViewNavigatorInPopUp(listButton)" visible.landscape="false"/>
</s:navigationContent>
</s:ViewNavigator>
</s:SplitViewNavigator>
</s:Application>