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