flex 使用viewstack实现页面的跳转

flex其中没有页面跳转这个说法，其实，就是应用程序的切换。

网上的方法：1)viewstack,2)state 3)modular 4)navigator url

转贴：http://www.cnblogs.com/xingluzhe/archive/2009/08/16/1547157.html

建立一个main.mxml的应用程序，作为一个主程序，再建立两个component ，一个是login.mxml,另一个是welcome.mxml.

main.mxml:

<?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" xmlns:component="component.*">
?<fx:Declarations>
??<!-- 将非可视元素（例如服务、值对象）放在此处 -->
?</fx:Declarations>
?<mx:ViewStack id = "pageStores">
??<component:login id="login">
???
??</component:login>
??<!--<local:login_page id="login"></local:login_page>-->? <!--注意，要使login先显示出来，则要把它放第一个-->
??<component:welcome id="welcome">
???
??</component:welcome>
??<!--<local:home_page id="home"></local:home_page>? -->
?</mx:ViewStack>
</s:Application>

login.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
?xmlns:fx="http://ns.adobe.com/mxml/2009"
?? xmlns:s="library://ns.adobe.com/flex/spark"
?? xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="304"
?? creationComplete="init()"
?? >
?<fx:Declarations>
??<!-- 将非可视元素（例如服务、值对象）放在此处 -->
?</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.containers.ViewStack;?? //导入viwstack包，下面要用到viewstack类型
import mx.controls.Alert;
private var vs:ViewStack; 　　　　//vs是main.mxml中定义的viewstack
??private function init():void
??{
??vs = this.parent as ViewStack;?? //初始login的时候获得main.mxml中的viewstack，即pagestores（它的id），记住，要在login.mxml中加
??　　　　　　　　　　　　　　　　　　　　? //入：creationComplete="init()
??}
??private function getChild(str:String):Object? //这段代码是为了获得指定页面对应的对象
??{
??for each(var obj in vs.getChildren())? //遍历vs中的所有子组件(即所有页面)，页面不会太多，顶多一二十个，所以这个方法不会太耗时
??{
??if(obj.name === str) //如果是想找的页面，就返回这个对象。比如想找到welcome.mxml，则令str="welcome"
??{
??break;
??}
??}
??return obj;
??}
??private function btnClick(event:Event):void　　　　//确定按钮的响应
??{
??var obj:Object = getChild("welcome");????????? //找到想要显示的对象
if(username.text == "admin" && password.text == "admin") //如果用户名与密码正确
{???????????????
vs.selectedChild = obj as mx.containers.Canvas;　　　　//将welcome作为显示的页面，即实现了页面的跳转
}
else
{
?mx.controls.Alert.show("用户名或者密码错误！","ERROR!");
}???????????
}
?
?protected function button1_clickHandler(event:MouseEvent):void
?{
??// TODO Auto-generated method stub
??btnClick(event);
?}
?
]]>
</fx:Script>
?<s:TextInput x="111" y="74" id="username"/>
?<s:TextInput x="112" y="124" id="password"/>
?<s:Label x="53" y="75" width="43" height="20" text="用户名"/>
?<s:Label x="57" y="124" width="43" height="20" text="密码"/>
?<s:Button x="204" y="164" label="登录" click="button1_clickHandler(event)"/>
</mx:Canvas>

welcome.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
?xmlns:fx="http://ns.adobe.com/mxml/2009"
?? xmlns:s="library://ns.adobe.com/flex/spark"
?? xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
?<fx:Declarations>
??<!-- 将非可视元素（例如服务、值对象）放在此处 -->
?</fx:Declarations>
?<s:Label x="107" y="92" width="129" height="22" text="Welcome!登录成功！"/>
?
</mx:Canvas>

上面的代码可以正常运行，也算做是flex页面跳转的一个小例子吧。另外，记得，在login.mxml 和 welcome.mxml中的标记为mx:Canvas