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)では、上記の非ビジュアルオブジェクトのタグを記述する。

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