|
  
|
本帖最后由 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，编写时去掉即可。
在实际开发中，一般会把子组件单独分离一个组件文件编写，这样这个文件就不会有很多代码。
注意：为了阅读方便，代码中出现”：“符号前后部分增加了空格，编写代码时需要注意。 |
|
QQ空间
腾讯微博
腾讯朋友