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>

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

相关文章

一:display:flex布局display:flex是一种布局方式。它即可以...
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何...
移动端开发知识点pc端软件和移动端apppc端软件是什么,有哪些...
最近挺忙的,准备考试,还有其他的事,没时间研究东西,快周...
display:flex;把容器设置为弹性盒模型(设置为弹性盒模型之后...
我在网页上运行了一个Flex应用程序,我想使用Command←组合键...