CodeBehind and DI 分离MXML中的ActionScript

Flex代码分离实践

最新推荐文章于 2018-03-28 18:03:07 发布

原创最新推荐文章于 2018-03-28 18:03:07 发布 · 121 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ActionScript #Flex #Adobe #CSS #PHP

Flex Flash 专栏收录该内容

63 篇文章

订阅专栏

本文介绍了一种在Flex项目中实现代码分离的方法，通过创建独立的AS文件处理业务逻辑，MXML文件专注于页面展示，有效提升了代码维护性和复用性。

你是否开始厌倦在 mxml 中写 <mx:Script></mx:Script> 代码块？
你是否有通用的业务方法，要在多个mxml中使用？
你是否想过，让mxml专门负责页面效果，而让as文件去负责业务？

下面的方法将提供一种方案

1. 创建一个工程叫asCodeBehind

2. 创建package

3. 创建一个as文件叫LoginPage.as

package cee.view {
	
	import mx.containers.Canvas;
	import mx.controls.Alert;
	import mx.controls.Button;
	import mx.controls.TextInput;

	public class LoginPage extends Canvas {

		private var _userNameInput : TextInput;
		
		private var _passwordInput : TextInput;
		
		private var _loginBtn : Button;
				
		public function LoginPage() {
			super();
		}
		
		public function doLogin() : void {
			var message : String = " UserName : " + _userNameInput.text;
			message += "\n Password : " + _passwordInput.text;
			Alert.show(message);
		}

		public function set userNameInput(textInput : TextInput) : void {
			this._userNameInput = textInput;
		}
		
		public function set passwordInput(textInput : TextInput) : void {
			this._passwordInput = textInput;
		}
		
		public function set loginBtn(btn : Button) : void {
			this._loginBtn = btn;
		}
	}
}

4. 创建一个mxml文件叫LoginPageView.mxml

<?xml version="1.0" encoding="utf-8"?>
<LoginPage xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns="cee.view.*" 
	styleName="greenBorderCanvas"
	width="382" height="252">
	
	<mx:Label x="57" y="78" text="Username"/>
	<mx:TextInput id="userNameInput" x="151" y="76"/>
	
	<mx:Label x="57" y="120" text="Password"/>
	<mx:TextInput id="passwordInput" x="151" y="118" displayAsPassword="true"/>
	
	<mx:Button id="loginBtn" x="151" y="178" label="Login" styleName="commandButtonBlue" 
		click="doLogin()" />
	
	<mx:Button x="246" y="178" label="Cancel" styleName="commandButtonBlue"/>
	
</LoginPage>

5. 要注意的几点是:

mxml的父类是LoginPage.as
mxml中几个组件的id名字，要对应LoginPage.as中的 set xxx 方法
LoginPage.as中的组件(TextInput, Button)在被Flex加载之前都是null

6. 主程序如下

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" 
	xmlns:view="cee.view.*">
	
	<mx:Style source="assets/style/style.css"/>
	
	<view:LoginPageView verticalCenter="0" horizontalCenter="0"/>
	
</mx:Application>

运行看看效果吧。这样就分离了表现层的mxml和逻辑的ActionScript代码

参考

http://www.onflex.org/ted/2007/02/code-behind-in-flex-2.php

http://www.adobe.com/devnet/flex/articles/dependency_injection.html