flex 使用viewstack实现页面的跳转

版本flex4,其实里面也有一部分代码为flex3的

flex中的页面跳转还真是一个麻烦事，和咱们以前接触的html可是不一样了呀。

网上的例子说有四种方法：1）viewstack 2)state 3)modular 4) navigator url

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

新建立一个main.mxml应用程序，把viewstack显示的两个login 和welcome两个页面建立为component

main.xml

<?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>
在网上的那个例子里，标记不太全，而我做的这个例子里，已经可以正常运行了。

记得，这两个component 要把标记改为mx:Canvas,不然会提示出错误：Halo 导航器的子代必须实现INavigatorContent？万恶的adobe...

 

转自：http://www.cnblogs.com/maxblog/archive/2011/07/25/2116150.html