「PureMVCサンプル解説」の編集履歴（バックアップ）一覧はこちら
「PureMVCサンプル解説」(2008/08/20 (水) 11:49:59) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
簡単にPureMVCそれぞれの１.Controller、２.Model、３.Viewのクラスのサンプルを書いていきます。
ここでは計算機能をもつFlexアプリケーションを例として作ってみました。
機能としては１から９、０までの足し算、引き算とその結果を出力するものと、
現在、表示されている内容や足し算、引き算の初期化を行うという機能です。
まずは最初の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(); ・・・・・・②
/**
* CreationComplete時の振る舞いの設定
*/
private function init():void ・・・・・・・・・・・・・・・・・・③
{
// facadeクラスに実行するNotificationを設定
facade.notifyObservers( new Notification(ApplicationFacade.APP_START_UP,this) ); ・・・④
}]]>
</mx:Script>
<!-- VIEWコンポーネント -->
<view:CalclationPanel id="calcPanel" /> ・・・・・・・・・・・・・・・・・・・・⑤
</mx:Application>
① Applicationタグ
このタグは説明するまでもなく、Flexアプリケーションのスタートには必ず必要なタグですね。
このタグの中のプロパティとして注目すべきは以下の点です。
・ xmlns:view="example.view.components.*"
ここでViewコンポーネントのインポートを宣言しています。
このMXMLファイルの中でVIEW層のものをインスタンス化するためにこの一文は必要になってきます。
⑤で利用するためのものですね。
・ layout="vertical"
レイアウトについてです。
Verticalの設定なので「縦並び」ということですね。
取り立てて、大きく扱うプロパティではないのですが、Absorute（絶対位置）では都合が悪かったので、Verticalにしてみました。
・ creationComplete="{this.init();}"
このMXMLの最後に呼び出されるイベントで、後述の③のメソッドを呼び出しています。
このイベントが送出された際に呼び出すイベントによって、最初のイベントハンドラーを登録しています。
詳しくは④で解説をします。
② facadeクラスのインスタンス化
Controllerクラスのひとつであるfaçadeクラスのインスタンス化を行います。
実質、ここでfacadeクラスのインスタンスは静的領域に作られることになります。
③ creationComplete時に呼び出される初期化メソッド
ここでは「init」としていますが、functionの名称は何でもOKです（初期化を示す単語であれば尚良しです）。
ここで重要なのは次の④のことを実行することです。
④ facadeクラスへのイベント登録
②にて取得されたインスタンス、façadeに対して、イベントを登録しています。
facadeクラスへのイベント登録はNotificationクラスというイベント登録用のクラスを用意して、
そのNotificationにイベント名（ここではAPP_START_UP）とViewコンポーネント（ここでは自分を示すthis）を
与えて、インスタンスを生成し、そのインスタンスをfacadeクラスへと登録することで、実行できるようになります。
⑤ Viewコンポーネントの表示
これについては広く知れ渡っている一般の書き方ですね。
①のApplicationタグの中で書いたxmlns:viewでインポートされたコンポーネントを示して、idを与え、インスタンス化をしています。
ここではMXMLを取り上げていますが、ActionScriptを用いての表現も可能です。
その場合はスタートとなるActionScriptのクラスにSpriteクラスを継承したものをスタートのクラスとします。
この辺りの作り方についてはいろいろあると思いますので、調べてみてください。
いろいろ制約があるようで、少々、手続きが面倒なようです。
ので、記述しません。ごめんなさい。
次回はいよいよ肝となるControllerクラスの解説です。
簡単にPureMVCそれぞれの１.Controller、２.Model、３.Viewのクラスのサンプルを書いていきます。
ここでは計算機能をもつFlexアプリケーションを例として作ってみました。
機能としては１から９、０までの足し算、引き算とその結果を出力するものと、
現在、表示されている内容や足し算、引き算の初期化を行うという機能です。
まずは最初の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(); ・・・・・・②
/**
* CreationComplete時の振る舞いの設定
*/
private function init():void ・・・・・・・・・・・・・・・・・・③
{
// facadeクラスに実行するNotificationを設定
facade.notifyObservers( new Notification(ApplicationFacade.APP_START_UP,this) ); ・・・④
}]]>
</mx:Script>
<!-- VIEWコンポーネント -->
<view:CalclationPanel id="calcPanel" /> ・・・・・・・・・・・・・・・・・・・・⑤
</mx:Application>
① Applicationタグ
このタグは説明するまでもなく、Flexアプリケーションのスタートには必ず必要なタグですね。
このタグの中のプロパティとして注目すべきは以下の点です。
・ xmlns:view="example.view.components.*"
ここでViewコンポーネントのインポートを宣言しています。
このMXMLファイルの中でVIEW層のものをインスタンス化するためにこの一文は必要になってきます。
⑤で利用するためのものですね。
・ layout="vertical"
レイアウトについてです。
Verticalの設定なので「縦並び」ということですね。
取り立てて、大きく扱うプロパティではないのですが、Absorute（絶対位置）では都合が悪かったので、Verticalにしてみました。
・ creationComplete="{this.init();}"
このMXMLの最後に呼び出されるイベントで、後述の③のメソッドを呼び出しています。
このイベントが送出された際に呼び出すイベントによって、最初のイベントハンドラーを登録しています。
詳しくは④で解説をします。
② facadeクラスのインスタンス化
Controllerクラスのひとつであるfaçadeクラスのインスタンス化を行います。
実質、ここでfacadeクラスのインスタンスは静的領域に作られることになります。
③ creationComplete時に呼び出される初期化メソッド
ここでは「init」としていますが、functionの名称は何でもOKです（初期化を示す単語であれば尚良しです）。
ここで重要なのは次の④のことを実行することです。
④ facadeクラスへのイベント登録
②にて取得されたインスタンス、façadeに対して、イベントを登録しています。
facadeクラスへのイベント登録はNotificationクラスというイベント登録用のクラスを用意して、
そのNotificationにイベント名（ここではAPP_START_UP）とViewコンポーネント（ここでは自分を示すthis）を
与えて、インスタンスを生成し、そのインスタンスをfacadeクラスへと登録することで、実行できるようになります。
⑤ Viewコンポーネントの表示
これについては広く知れ渡っている一般の書き方ですね。
①のApplicationタグの中で書いたxmlns:viewでインポートされたコンポーネントを示して、idを与え、インスタンス化をしています。
ここではMXMLを取り上げていますが、ActionScriptを用いての表現も可能です。
その場合はスタートとなるActionScriptのクラスにSpriteクラスを継承したものをスタートのクラスとします。
この辺りの作り方についてはいろいろあると思いますので、調べてみてください。
いろいろ制約があるようで、少々、手続きが面倒なようです。
ので、記述しません。ごめんなさい。
[[次回はいよいよ肝となるControllerクラスの解説です。>http://www39.atwiki.jp/flex_framework/pages/19.html]]
