您的位置:首页 > 其它

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

2013-08-01 17:48 736 查看
如题,为了实现在同一项目中实现各个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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  Flex