簡単にPureMVCそれぞれの1.Controller、2.Model、3.Viewのクラスのサンプルを書いていきます。

ここでは計算機能をもつFlexアプリケーションを例として作ってみました。

機能としては1から9、0までの足し算、引き算とその結果を出力するものと、

現在、表示されている内容や足し算、引き算の初期化を行うという機能です。

 

まずは最初のFlexアプリケーションのスタートファイルに当るMXMLファイルの内容から見ていきましょう。

 

PureMVC_Calclation.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application

xmlns:mx="http://www.adobe.com/2006/mxml"

xmlns:view="example.view.components.*"

layout="vertical"

creationComplete="{this.init();}"

>                        ・・・・・・・・・・・・・・・・・・・・@

 

<mx:Script>

<![CDATA[

import org.puremvc.patterns.observer.Notification;

import example.ApplicationFacade;

private var facade:ApplicationFacade = ApplicationFacade.getInstance();  ・・・・・・A

/**

 * CreationComplete時の振る舞いの設定

 */

private function init():void           ・・・・・・・・・・・・・・・・・・B

{

// facadeクラスに実行するNotificationを設定

facade.notifyObservers( new Notification(ApplicationFacade.APP_START_UP,this) ); ・・・C

}

]]>

</mx:Script>

<!-- VIEWコンポーネント -->

<view:CalclationPanel id="calcPanel" />     ・・・・・・・・・・・・・・・・・・・・D

</mx:Application>

 

@     Applicationタグ

このタグは説明するまでもなく、Flexアプリケーションのスタートには必ず必要なタグですね。

このタグの中のプロパティとして注目すべきは以下の点です。

     xmlns:view="example.view.components.*"

ここでViewコンポーネントのインポートを宣言しています。

このMXMLファイルの中でVIEW層のものをインスタンス化するためにこの一文は必要になってきます。

Dで利用するためのものですね。

     layout="vertical"

  レイアウトについてです。

  Verticalの設定なので「縦並び」ということですね。

  取り立てて、大きく扱うプロパティではないのですが、Absorute(絶対位置)では都合が悪かったので、Verticalにしてみました。

     creationComplete="{this.init();}"

このMXMLの最後に呼び出されるイベントで、後述のBのメソッドを呼び出しています。

このイベントが送出された際に呼び出すイベントによって、最初のイベントハンドラーを登録しています。

詳しくはCで解説をします。

 

A     facadeクラスのインスタンス化

Controllerクラスのひとつであるfaçadeクラスのインスタンス化を行います。

実質、ここでfacadeクラスのインスタンスは静的領域に作られることになります。

 

B     creationComplete時に呼び出される初期化メソッド

ここでは「init」としていますが、functionの名称は何でもOKです(初期化を示す単語であれば尚良しです)。

ここで重要なのは次のCのことを実行することです

 

C     facadeクラスへのイベント登録

Aにて取得されたインスタンス、façadeに対して、イベントを登録しています。

facadeクラスへのイベント登録はNotificationクラスというイベント登録用のクラスを用意して、

そのNotificationにイベント名(ここではAPP_START_UP)とViewコンポーネント(ここでは自分を示すthis)を

与えて、インスタンスを生成し、そのインスタンスをfacadeクラスへと登録することで、実行できるようになります

 

D     Viewコンポーネントの表示

これについては広く知れ渡っている一般の書き方ですね。

@のApplicationタグの中で書いたxmlns:viewでインポートされたコンポーネントを示して、idを与え、インスタンス化をしています。

 

ここではMXMLを取り上げていますが、ActionScriptを用いての表現も可能です。

その場合はスタートとなるActionScriptのクラスにSpriteクラスを継承したものをスタートのクラスとします。

この辺りの作り方についてはいろいろあると思いますので、調べてみてください。

いろいろ制約があるようで、少々、手続きが面倒なようです。

・・・ので、記述しません。ごめんなさい。

 

次回はいよいよ肝となるControllerクラスの解説です。