Eclipse 工作台基本概念>任务视图

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