viewstack切换视图和自定义事件的例子

最近刚开始学习flex，记录下学习过程，也备以后查阅。

以一个登录过程来做示例，启动程序后，显示登录界面，点击登录按钮后切换到程序的主界面，效果图如下：

 

程序层次如下：

主文件：Main.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
					   xmlns:s="library://ns.adobe.com/flex/spark"
					   xmlns:mx="library://ns.adobe.com/flex/mx"
					   xmlns:component="component.*"
					   backgroundAlpha="0" creationComplete="init()" mouseDown="moveWindow()"
					   showStatusBar="false">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import events.LoginResult;
			
			private function moveWindow():void {
				
				this.nativeWindow.startMove();
			}
			
			private function init():void {
				// 增加事件监听等
				login.addEventListener("loginOK",loginOKHandler);
				this.nativeWindow.width=300;
				this.nativeWindow.height=280;
			}
			
			private function loginOKHandler(event:LoginResult):void {
				vwMain.selectedIndex = 1;
				this.nativeWindow.width=280;
				this.nativeWindow.height=500;
			}
		]]>
	</fx:Script>
	<mx:ViewStack id="vwMain">
		<s:NavigatorContent width="100%" height="100%" label="登录">
			<!--<component:cptLogin id="login" loginOK="loginOKHandler()" />-->
			<component:cptLogin id="login"/>
		</s:NavigatorContent>
		
		<s:NavigatorContent width="100%" height="100%" label="主页">
			<component:cptMain id="main" />
		</s:NavigatorContent>
	</mx:ViewStack>
	
</s:WindowedApplication>

Login组件：component/cptLogin.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Panel 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="300" height="280">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	
	<fx:Metadata>
		[Event(name="loginOK", type="events.LoginResult")]
	</fx:Metadata>
	
	<fx:Script>
		<![CDATA[
			import events.LoginResult;
			
			private function toLogin(event:MouseEvent):void {
				var loginOKObject:LoginResult = new LoginResult("loginOK");
				this.dispatchEvent(loginOKObject);
			}
		]]>
	</fx:Script>
	
	<s:Form id="frmLogin" x="0" y="0" width="100%">
		<s:layout>
			<s:FormLayout/>
		</s:layout>
		<s:FormHeading label="用户登录" width="100%"/>
		<s:FormItem label="帐号：" width="100%">
			<s:TextInput id="username" width="200"/>
		</s:FormItem>
		<s:FormItem label="密码：" width="100%">
			<s:TextInput id="password" width="200" displayAsPassword="true"/>		 
		</s:FormItem>
		<s:FormItem label="" width="100%">
			<s:CheckBox id="autoLogin" label="记住密码" selected="true" />	 
		</s:FormItem>
		<s:FormItem label="" width="100%">
			<s:Button id="doLogin" label="登录" click="toLogin(event)"/>		 
		</s:FormItem>
	</s:Form>
</s:Panel>

Main组件：component/cptMain.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Panel 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="280" height="500">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:Label text="程序主面板" />
</s:Panel>

自定义事件：events/LoginResult.as:

package events
{
	import flash.events.Event;
	
	public class LoginResult extends Event
	{
		public function LoginResult(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			//TODO: implement function
			super(type, bubbles, cancelable);
		}
	}
}

源码下载