FlexでMVC構造を作る方法。
お初にお目にかかります。
現在、インターンとして働いています、いぶくろです。
早速ですが、FlexはXMLみたいな構文でじゃんじゃんかけちゃって便利ですが。
AdobeのFlexサンプルをみても、mxmlファイルのなかに、<Script>タグでソースを書いていることもしばしば。
SampleView.mxml
<?xml version="1.0" encoding="utf-8"?> <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"> <s:layout> <s:BasicLayout/> </s:layout> <fx:Declarations> <!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 --> </fx:Declarations> <fx:Script> <![CDATA[ private function buttonClick():void { title.text = "Hello MVC!"; } ]]> </fx:Script> <s:Label id="title" text="" /> <s:Button y="50" label="click me" click="buttonClick();"/> </s:Group>
例えばこんなですが、実際の案件でこれをやってると、ソースが長くなってくると、タグとasが入り交じって、こんがらがってきます。
<Script>中のas部分とmxml文法が交じることで、視認性も悪くなってきます。
レイアウトだけ変更になった時も、面倒です。
折角なので、View部分とControler部分を分けた方がいいです。
PureMVCなどflex用のMVCライブラリもありますが。
今回はシンプルな、ViewとViewControllerの切り分け方。
方法その1 ソースだけ外部に書く。
SampleView.mxml
<?xml version="1.0" encoding="utf-8"?> <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"> <s:layout> <s:BasicLayout/> </s:layout> <fx:Declarations> <!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 --> </fx:Declarations> <fx:Script source="SampleViewSrc" /> <s:Label id="title" text="" /> <s:Button y="50" label="click me" click="buttonClick();"/> </s:Group>
SampleViewSrc.as
private function buttonClick():void { title.text = "Hello MVC!"; }
HTMLで、外部にJS,CSSを置くのとおなじ発想で、外部にソースを置く方法です。
package ~
public class ~
などは書かずに、直接メソッドを書いていきます。
Flashでタイムラインスクリプトみたいな感覚ですね。
方法その2 IMXMLObjectを継承したコントローラーを書く。
こちらが本題。
ちゃんとしたMVC構造を作る場合は、やはりクラス自体も分けたい。ということで。
asファイルは、IMXMLObjectインターフェースをimplementsすると、mxmlタグとして書けるようになります。
Viewファイル
SampleView.mxml
<?xml version="1.0" encoding="utf-8"?> <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"> <s:layout> <s:BasicLayout/> </s:layout> <fx:Declarations> <!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 --> <controllers:SampleViewController id="controller" /> </fx:Declarations> <s:Label id="title" text="" /> <s:Button y="50" label="click me" click="controller.buttonClick();"/> </s:Group>
コントローラー部分
SampleViewController.as
package { import mx.core.IMXMLObject; public class SampleViewController implements IMXMLObject { private var _view:SampleView; public function SampleViewController() { } /** * IMXMLObject インターフェース定義 */ public function initialized(document:Object, id:String):void { _view = document as SampleView; } public function buttonClick():void { _view.title.text = "Hello MVC!"; } } }
こんな感じで、UI操作に対する動作はコントローラー部分に任せることが出来ます。
View自体のInitializeハンドラーなども、Controller部分に書くとすっきりすると思います。
これくらいの長さなら、気にならないのですが、大きなプロジェクトになるほど、役に立ってくるのではないでしょうか。
これで複数人の開発も怖くない!