利用viewstack组件实现各个子组件之间的跳转和数据传递

如题，为了实现在同一项目中实现各个mxml界面间的跳转和数据传递，查了不少资料，写了一个实例发上来一起学习下，也许这不是最好的方式，希望有更好实现方式的朋友分享下。
说明：这是一个简单的登陆实例，一共有4个mxml界面，分别为：main.mxml，login.mxml,welcome.mxml,failure.mxml，其中main为主应该程序入口。实现逻辑，登陆成功则把登陆名传递到welcome界面中并显示登陆成功信息，否则显示失败界面并3秒后自动跳转到登陆界面。
main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:Script>
<![CDATA[
//用于实例数据传递的方法
public function getSuccessInfo(str:String):void{
welcomeview.info=str;
}
public function getFailureInfo(str:String):void{
fuilureview.failureinfo=str;
}
]]>
</mx:Script>
<mx:ViewStack id="view" x="140" y="160">
<local:login id="loginview" layout="absolute"/>
<local:welcome id="welcomeview"/>
<local:failure id="fuilureview"/>
</mx:ViewStack>
</mx:Application>
---------------------------------------------------------------
login.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="228" creationComplete="init()" title="登陆界面" fontSize="12">
<mx:Script>
<![CDATA[
import mx.containers.Canvas;
import mx.containers.ViewStack;
private var vs:ViewStack;
[Bindable]
public var loginsuccess:String;
[Bindable]
private var i:int=3;
private function init():void{
vs=this.parent as ViewStack;
trace(vs.id);
}
private function getChild(str:String):Object{
for each(var obj:* in vs.getChildren()){
if(obj.name==str){
break;
}
}
return obj;
}
private function btnok(evt:Event):void{
if("joy"==uname.text && "joy"==upassword.text){
var o:Object=this.getChild("welcomeview");
vs.selectedChild=o as Canvas;
//把登陆成功的用户名传递到wlecome页面中去
this.parentApplication.getSuccessInfo(uname.text);
}else{
var e:Object=getChild("fuilureview");
vs.selectedChild=e as Canvas;
//backFun();
//登陆失败后在指定时间内跳转到登陆界面
loginFailure();
}
}
private function loginFailure():void{
var str:String="登陆失败,程序将在"+i+"秒后回到登陆界面";
this.parentApplication.getFailureInfo(str);
var myt:Timer=new Timer(1000,3);
myt.addEventListener(TimerEvent.TIMER,THandler);
myt.start();
}
private function THandler(e:TimerEvent):void{
i--;
var str:String="登陆失败,程序将在"+i+"秒后回到登陆界面";
this.parentApplication.getFailureInfo(str);
if(i==0){
var oo:Object=this.getChild("loginview")
vs.selectedChild=oo as Panel;
i=3;
}
}
]]>
</mx:Script>
<mx:Form x="10" y="10" width="360" height="158">
<mx:FormItem label="UserName:">
<mx:TextInput id="uname"/>
</mx:FormItem>
<mx:FormItem label="UserPassWord:">
<mx:TextInput id="upassword" displayAsPassword="true"/>
</mx:FormItem>
<mx:FormItem height="28">
<mx:HBox width="162" height="27">
<mx:Button label="Login" height="26" id="btnlogin" click="btnok(event);"/>
<mx:Button label="Cancel" height="26" id="btncancel"/>
</mx:HBox>
</mx:FormItem>
</mx:Form>
</mx:Panel>
-------------------------------------------------------------
welcome.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
<mx:Script>
<![CDATA[
[Bindable]
public var info:String;
]]>
</mx:Script>
<mx:Panel x="0" y="0" width="100%" height="100%" layout="absolute" title="成功" fontSize="12">
<mx:Label x="47" y="52" text="Welcome: {info}" width="155" color="#20E5B9" fontWeight="bold" fontSize="15"/>
</mx:Panel>

</mx:Canvas>
--------------------------------------------------
failure.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="460" height="362">
<mx:Script>
<![CDATA[
[Bindable]
public var failureinfo:String;
]]>
</mx:Script>
<mx:Panel x="28.5" y="25" width="100%" height="100%" layout="absolute" title="登录失败界面" fontSize="12">
<mx:Label x="10" y="46" text="{failureinfo}" width="263" fontWeight="bold" fontSize="12" color="#F16798" height="66"/>
</mx:Panel>

</mx:Canvas>

评论

2 楼 chensi24 2011-08-16  

仁兄谢谢了，我终于实现了

1 楼 chensi24 2011-08-15  

博主如果在FB4.5中实现在viewStack中实现页面之间的传递数据，就要在local外加一层套：NavigatorContent，此时如下：<mx:ViewStack id="MyStack" idth="100%" height="100%">
<s:NavigatorContent  id="View">
<views:XueshengList width="1060" height="100%"/>
</s:NavigatorContent>
<s:NavigatorContent id="More">
<views:xuesheng id="xs"  width="100%"            height="100%" />
</s:NavigatorContent>

          </mx:ViewStack>

我在一个事件侦听函数中侦听了事件
private function ToMoreView(event:ChangeStackEvent):void
{
    if(MyStack.selectedChild!=More){ MyStack.selectedChild=More;
         xs.xsmodel=event._obj as XsModel; }
}
可是调试发现xs.xsmodel是一个未初始化的变量，无法赋值。请问如何解决，想了好久都解决不了