2008/03/11

view(MXML)とlogic(ActionScript)の分離


今更ながらやってみた。
確かにMXMLにScriptがなくてスッキリしてイイな。(全体のコード量は若干増えるけど)

  • MXMLはFlexBuilderでペタペタ、CSSでデザインを小奇麗に。

  • ActionScriptでコードをガリガリ。


[分離前]
ComplexView.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:logic="hoge.logic.*"
width="360" height="300" layout="absolute" title="左から右へ受け流す">
<mx:Script>
<![CDATA[
private function clickCopyButtonHandler(event:MouseEvent):void {
rightField.text = leftField.text;
}

private function clickClearButtonHandler(event:MouseEvent):void {
leftField.text = "";
rightField.text = "";
}
]]>
</mx:Script>

<mx:TextInput left="10" top="10" id="leftField" width="100"/>
<mx:TextInput top="10" id="rightField" right="10" width="100"
editable="false"/>
<mx:Button y="10" label="Copy" id="copyButton" horizontalCenter="0"
click="clickCopyButtonHandler(event)"/>
<mx:Button y="60" label="Clear" horizontalCenter="0" id="clearButton"
click="clickClearButtonHandler(event)"/>
</mx:Panel>

[分離後]
SimpleView.mxml(view)

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:logic="hoge.logic.*"
width="360" height="300" layout="absolute" title="左から右へ受け流す">
<logic:SimpleViewLogic id="logic"/>

<mx:TextInput left="10" top="10" id="leftField" width="100"/>
<mx:TextInput top="10" id="rightField" right="10" width="100"
editable="false"/>
<mx:Button y="10" label="Copy" id="copyButton" horizontalCenter="0"
click="logic.clickCopyButtonHandler(event)"/>
<mx:Button y="60" label="Clear" horizontalCenter="0" id="clearButton"
click="logic.clickClearButtonHandler(event)"/>
</mx:Panel>

SimpleViewLogic.as(logic)

package hoge.logic {
import hoge.view.SimpleView;

import flash.events.MouseEvent;

import mx.core.IMXMLObject;
import mx.events.FlexEvent;

public class SimpleViewLogic implements IMXMLObject {
private var view:SimpleView;

public function initialized(document:Object, id:String):void {
view = document as SimpleView;
}

public function clickCopyButtonHandler(event:MouseEvent):void {
view.rightField.text = view.leftField.text;
}

public function clickClearButtonHandler(event:MouseEvent):void {
view.leftField.text = "";
view.rightField.text = "";
}
}
}

  1. ロジック部分を非ビジュアルオブジェクトとして、IMXMLObjectを実装したActionScriptのクラスで定義する。

  2. ビュー側(MXML)では、上記の非ビジュアルオブジェクトのタグを記述する。

ってだけ。
単体テストも書きやすくなりそうだし、フレームワークに依存することもなくてステキ。
ちなみに上記プログラムを実行するとこんな感じ。
f:id:infy2c:20080311131836j:image

0 件のコメント: