你是否开始厌倦在 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