FlexでMVC構造を作る方法。

Aug 30, 2010

Flex

お初にお目にかかります。

現在、インターンとして働いています、いぶくろです。

早速ですが、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の切り分け方。

方法その１ソースだけ外部に書く。

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でタイムラインスクリプトみたいな感覚ですね。

方法その２ 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部分に書くとすっきりすると思います。

これくらいの長さなら、気にならないのですが、大きなプロジェクトになるほど、役に立ってくるのではないでしょうか。
これで複数人の開発も怖くない！

方法その１ ソースだけ外部に書く。

方法その２ IMXMLObjectを継承したコントローラーを書く。

方法その１ソースだけ外部に書く。