万卷图书 - Powered by Discuz! Board

标题: Flex页面之间切换问题 [打印本页]

作者: lalo 时间: 2010-8-23 10:38 标题: Flex页面之间切换问题

本帖最后由 lalo 于 2010-8-23 10:45 编辑

有很多初学者往往对Flex”页面“之间切换问题感到困惑，下面以登录界面为例，介绍一下如何页面之间切换。
其实，”页面“的概念只是针对传统的网页技术而言，而Flex中并不存在”页面“概念。也就是说Flex并不像网站那样，是由一个个页面组成，Flex或者Flash只有一个页面。那么Flex组成单位是什么？是容器和组件。可以把页面简单的理解为容器，如面板（Panel）。其中最基本的容器类是Canvas，里面没有任何内容，只有一些常规的操作（如元素拖拽）。而其他常用的容器组件都是继承了Canvas类，如Panel就是在Canvas基础上增加了一些功能和效果。所以开发组件很多都是继承了Canvas类。
了解了容器之后，就剩下一个问题了：如何在容器之间切换？那就用到了导航组件。如TabNavigator就是一个标签切换的导航组件。在众多导航组件中，有一个基本的组件，就是ViewStack。类库提供的导航都是继承了ViewStack类。下面是一段ViewStack的演示代码。

<?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"
   minWidth="955" minHeight="600">
<fx : Declarations>

</fx : Declarations>

<fx : Script>
<![CDATA[

protected function btnLogin_clickHandler(event:MouseEvent):void
{
vs.selectedIndex = 1;
}

]]>
</fx:Script>

<mx:ViewStack id="vs">

<s : NavigatorContent id="loginView">
<s : Panel title="登录界面">
<mx:Form>
<mx:FormItem label="用户名">
<s:TextInput/>
</mx:FormItem>
<mx:FormItem label="密码">
<s:TextInput displayAsPassword="true"/>
</mx:FormItem>
<mx:Form>
<s:Button id="btnLogin" label="登录"
   click="btnLogin_clickHandler(event)" />
</mx:Form>
</mx:Form>
</s : Panel>
</s : NavigatorContent>

<s : NavigatorContent id="mainView">
<s : Panel title="欢迎界面">
<s : Label text="欢迎登录系统" />
</s : Panel>
</s : NavigatorContent>

</mx:ViewStack>

</s : Application>

由于我手头上是Flex4版本，所以这是Flex4的代码。不过没关系，Flex3代码也是大同小异的，基本差不多。通过设置 selectedIndex 属性，可以在ViewStack的子组件之间切换。
注：Flex3可能没有NavigatorContent，编写时去掉即可。

在实际开发中，一般会把子组件单独分离一个组件文件编写，这样这个文件就不会有很多代码。

注意：为了阅读方便，代码中出现”：“符号前后部分增加了空格，编写代码时需要注意。

欢迎光临万卷图书 (http://wanjuanchina.net/)