IMXMLObjectを使用したMXMLとActionScriptの分割

1.IMXMLObjectとは

IMXMLObjectを一言で説明すると、「非ビジュアルコンポーネントが実装する最も基本的なインタフェース」です。ASDocに詳細が記載されています。

■IMXMLObject（ASDoc）

IMXMLObjectを使用した分割方法とは、ロジックファイルにIMXMLObjectを使用してコンポーネント化（外部クラス化）させ、MXML上に配置することで、ButtonやTextInputといった一般的なコンポーネントと同じ形式で連動させる方法です。
では実際にIMXMLObjectを使用して、デザイン（MXML）ファイルとロジック（ActionScript）ファイルに分割したアプリケーションを作ってみましょう。アプリケーションは最もポピュラーな”Hello World”を作ってみたいと思います。具体的には画面上のButtonを押下すると、”Hello World”というメッセージが書かれたAlertを表示します。
作成物は、デザインファイル、ロジックファイルの2つのみで構成します。

2.デザインファイルの作成

デザインファイルを作成します。デザインファイルはMXMLファイルで画面にButtonコンポーネントを貼り付けただけの単純なものです。画面概観とソースコードは以下の通りです。

■概観

■ソースコード（imxmlsample.mxml）

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Button id="button1" x="218.5" y="10" label="Click"/>
</mx:Application>

このアプリケーションでは、画面上の”Click”というボタンを押下した際にAlertを表示します。ですがAlertに関する記述はデザインファイルでは行いません。

3.ロジックファイルの作成

続いてロジックファイルを作成します。先ほど “IMXMLObjectを使用する”と説明しましたが、具体的には” IMXMLObjectインターフェースを実装したクラス”を作成します。ソースコードは以下の通りです。

■ソースコード（imxmlsampleViewHelper.as）

package
{
	import flash.events.MouseEvent;
	import mx.controls.Alert;
	import mx.core.IMXMLObject;
    
	public class imxmlsampleViewHelper implements IMXMLObject
	{
		public function imxmlsampleViewHelper()
		{
		}
        
		public function initialized(document:Object, id:String):void
		{
		}
        
		public function button1Click(event:MouseEvent):void
		{
			Alert.show("Hello World");
		}
	}
}

上記ソースのクラス宣言で、IMXMLObjectを実装している事がお分かりになるかと思います。 （また上記ソースコードはFlex Builder作成している為、IMXMLObject を実装してActionScriptクラスを作成すると、コンストラクタ（imxmlsampleViewHelper()）、インターフェースが定義しているinitializedメソッドのコードが自動生成されます。）
ここでAlertを表示するメソッドを追加します。”button1Click”とします。

4.デザインファイルとコードファイルの連携

作成したMXMLとActionScriptを連携させます。その為には、MXMLに以下のように修正を加えます。

■ソースコード（imxmlsample.mxml）

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
	<local:imxmlsampleViewHelper id="viewHelper"/>
	
	<mx:Button id="button1" x="218.5" y="10" label="Click" click="viewHelper.button1Click(event);"/>
</mx:Application>

変更点は”<local:imxmlsampleViewHelper id="viewHelper"/>”の追加、Buttonコンポーネントにclickイベント実装の２箇所です。
”local:imxmlsampleViewHelper”は、ロジックファイルを示しています。IMXMLObjectを実装することにより、ロジックファイルのクラスはコンポーネントとして認識されます。非ビジュアルコンポーネントの為、デザインビューでドラッグ＆ドロップをすることはできませんが、上記のように直接記述することができます。（コードアシストは有効です） Buttonのclickイベントでは、コードファイルに定義したbutton1Clickメソッドを指定します。ロジックファイルはコンポーネント化されている為、”viewHelper”というidを設定し、ButtonではviewHelper.button1Clickというように記述します。

以上で全ての実装が完了しました。アプリケーションを起動し、ボタンを押下すると次のようなAlertが表示されます。

構成をまとめると、以下図のようになります。

いかがでしょうか？今回の例ではButton.clickイベントのみでしたので、ソース可読性についても特に問題にはならないかもしれません。ですが実際の開発で作成するアプリケーションでは多くのコンポーネント、イベントが実装されることになります。そのような局面では上記のような分割を行っているかどうかによって、ソースの可読性は大きな差となって現れてくると思います。

ページ 2 / 5

前のページ

次のページ