Flex 页面跳转方法几枚

Flex几种页面跳转方法:1)使用ViewStack;2)使用states;3)PopUpManager.createPopUp;4)navigateToURL。简单实现了下,话不多说,效果如下:


main.mxml主界面代码:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*" xmlns:s="library://ns.adobe.com/flex/spark">
	<mx:Script>
		import mx.managers.PopUpManager;
		//按钮单击事件
		private function btnOpenWnd_click():void{
			//弹出新窗口
			PopUpManager.createPopUp(this,MyTitleWindow);
		}
		private function buttonLink():void{
			navigateToURL(new URLRequest("http://blog.csdn.net/evangel_z/article/details/18036091"),"_blank");
		}
	</mx:Script>
	<mx:Panel title="Method 1:ViewStack" width="252" height="140">
		<mx:ViewStack width="100%" height="100%" id="test" >
			<local:test1 id="test_1"/><!--第一个页面(test1.mxml文件)-->
			<local:test2 id="test_2"/><!--第一个页面(test2.mxml文件)-->
		</mx:ViewStack>
	</mx:Panel>
	
	<mx:states>
		<mx:State name="Register">
			<!-- 增加文本输入条控件 -->           
			<mx:AddChild relativeTo="{loginForm}" 
						 position="lastChild">
				<mx:FormItem id="confirm" label="确认:">
					<mx:TextInput/>
				</mx:FormItem>
			</mx:AddChild>
			
			<!-- 设定面板控件和按钮控件的标题属性-->
			<mx:SetProperty target="{loginPanel}" 
							name="title" value="注册"/>
			<mx:SetProperty target="{loginButton}" 
							name="label" value="注册"/>
			
			<!-- 删除已经存在的链接按钮-->            
			<mx:RemoveChild target="{registerLink}"/>
			
			<!-- 增加新的链接按钮来改变视窗状态-->          
			<mx:AddChild relativeTo="{spacer1}" position="before">
				<mx:LinkButton label="回到登录页面" 
							   click="currentState=''"/>
			</mx:AddChild>
		</mx:State>
	</mx:states>
	
	<mx:Panel id="loginPanel" 
			  title="Method 2:states" 
			  horizontalScrollPolicy="off" 
			  verticalScrollPolicy="off" x="0" y="148">
		<mx:Form id="loginForm">
			<mx:FormItem label="用户名:">
				<mx:TextInput/>
			</mx:FormItem>
			<mx:FormItem label="密码:">
				<mx:TextInput/>
			</mx:FormItem>
		</mx:Form>
		<mx:ControlBar>
			<!-- 使用链接按钮来改变视窗状态-->                   
			<mx:LinkButton id="registerLink" 
						   label="需要注册?" 
						   click="currentState='Register'"/>
			<mx:Spacer width="100%" id="spacer1"/>
			<mx:Button label="登录" id="loginButton"/>
		</mx:ControlBar>
	</mx:Panel>
	
	<mx:Panel title="Method 3:createPopUp" x="260" y="0" width="240" height="140">
		<mx:Button id="btnOpenWnd" label="显示登录窗口" click="btnOpenWnd_click()" fontSize="12"/>
	</mx:Panel>
	
	<mx:Panel title="Method 4:navigateToURL" x="260" y="148" width="240" height="160">
		<mx:Button label="link" click="buttonLink();" x="410" y="10"/>
	</mx:Panel>
</mx:Application>
test1.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[
			public function test3():void
			{
				parentDocument.test.selectedChild=parentDocument.test_2;
			}
		]]>
	</mx:Script>
	<mx:Button label="跳转到test2.mxml" click="test3()"/>
</mx:Canvas>
test2.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[
			public function test1():void
			{
				parentDocument.test.selectedChild=parentDocument.test_1;
			}
		]]>
	</mx:Script>
	<mx:Button label="跳转到test1.mxml" click="test1()"/>
</mx:Canvas>

MyTitleWindow.mxml代码:

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow 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:Script>
		<![CDATA[
			import mx.managers.PopUpManager;
			//关闭窗口
			private function closeWindow():void{
				PopUpManager.removePopUp(this);//移除窗口对象
			}
		]]>
	</fx:Script>
	<mx:Form x="75" y="41">
		<mx:FormHeading label="用户登录" fontSize="16"/>
		<mx:FormItem label="用户名:" fontSize="12">
			<mx:TextInput/>
		</mx:FormItem>
		<mx:FormItem label="密码:" fontSize="12">
			<mx:TextInput displayAsPassword="true"/>
		</mx:FormItem>
		<mx:FormItem>
			<mx:Button label="登录" fontSize="12" click="closeWindow()"/>
		</mx:FormItem>
	</mx:Form>
</mx:TitleWindow>

附:忙碌之余,轻松一下~


  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值