Cairngormサンプル解説(完


※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

Cairngormの解説もいよいよ今回で最後になります。
View層の解説です。

View層は以下のように構成されています。
1)viewパッケージ
2)helperパッケージ

今回のサンプルでは1)viewパッケージには何もないと思います。
SampleCairngorm.mxmlをそのままviewとして利用しているためです。
一般的に、ViewStackやStateで別コンポーネント化したものが
このviewパッケージに入れる、とお考えください。
SampleCairngorm.mxmlの解説は
Cairngormサンプル解説(1
にて解説しておりますので、そちらを参照ください。

ここでは2)helperパッケージについて解説します。

2)
helperパッケージは
「View層の画面表示用MXMLのScript部分をそのまま集めたクラスをViewHelperと呼ぶようにした」
といえるのではないでしょうか。
Cairngormの根本的な考え方として
「ScriptタグはMXMLの中にはできるだけ書かないようにしよう」
というのがありましたよね。
MXMLの中でScriptで書いていたものがこのhelperパッケージで設定されるViewHelperクラスになります。
このViewHelperクラスはViewHelperというクラスを継承したクラスはCairngormの中で一元管理されます。
一元管理されるということなので、
「ViewHelperにはユニークなIDを割り当てなければならない」
ことに気をつけてください。
サンプルのSampleCairngorm.mxmlの中では
<viewhelper:SamplecairngormViewHelper id="sampleViewHelper"/>
と宣言されています。
ここで指定したIDがCairngormの中で(つまりは1つのFlexプロジェクトの中で)ユニークになっていなければなりません。
実際に見てみましょう。
例えばサンプルプロジェクトに
「Test1.mxml」
というMXMLコンポーネントを作成し以下のように記述します。
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:viewhelper="sample.view.samplecairngorm.helper.*"
width="400" height="300">
<viewhelper:SamplecairngormViewHelper id="sampleViewHelper"/>
</mx:Canvas>

そしてこの「Test1.mxml」を
「SampleCairngorm.mxml」に追加してみましょう。
例)SampleCairngorm.mxmlの一部
<viewhelper:SamplecairngormViewHelper id="sampleViewHelper"/>
                       ・
                       ・
<!-- viewhelperクラスのイベントハンドル用メソッドを呼び出しています。 -->
<mx:Button id="btnHelloWorld" label="sayHello" click="{sampleViewHelper.clickBtnHelloWorld(event);}"/>	
                       ・
                       ・
&bold(){<local:Test1 id="aaa"/>}

これをコンパイルしてみましょう。
コンパイルは無事に通るかと思いますが、
実行してみるとエラーが発生するはずです。
それは
「sampleViewHelperという名前は既に使われているので、名前を変えてください」
といった意味のエラーが出るはずです。
このようにViewHelperのIDは必ずユニークでなければいけません。

さて、肝心のViewHelperクラスの中身ですが

package sample.view.samplecairngorm.helper
{
import com.adobe.cairngorm.view.ViewHelper;
import com.adobe.cairngorm.control.CairngormEventDispatcher;               ・・・・・・・・・・・・・①

import flash.events.*;

import sample.controller.samplecairngorm.event.ClickBtnHelloWorldEvent;       ・・・・・・・・・・・・・・②

/**
 * Samplecairngorm画面用のViewHelperです。
 */
public class SamplecairngormViewHelper extends ViewHelper               ・・・・・・・・・・・・・・・・・・③
{
	public function SamplecairngormViewHelper()
	{
		super();
	}
	/**
	 * Samplecairngorm画面のボタンID「btn」というUIコンポーネントの
	 * clickイベントをハンドルするためのメソッドです。
	 */
	public function clickBtnHelloWorld(event:MouseEvent):void
	{
		// ここでは単純にイベントをDispatchしていますが、
		// この中でVaridationを行うこともできます。
		// またViewHelperクラスは「view」というプロパティを持っていて、
		// このViewというプロパティはViewHelperクラスをインスタンス化した際の
		// MXMLのインスタンスを示しています。
		// このプログラムで「View」プロパティが示すMXMLのインスタンスは
		// 「SampleCairngorm.mxml」のインスタンスです。
		// MXMLのインスタンスですので、そのMXMLに書いてあるUIコンポーネントのインスタンスを取得することもできます。
		// 例)
		// SampleCairngorm.mxmlのLabelのインスタンスを取得し、textプロパティを取得したい
		// var str:String = SampleCairngorm(view).lbl.text;
		// こんな風に直接、Viewから値を取得することも可能です。
		CairngormEventDispatcher.getInstance().dispatchEvent(new ClickBtnHelloWorldEvent(new Object()));  ・・・④
	}


}

}

① CairngormEventDispatcherのインポート
  CairngormEventDispatcherというのは
   「Cairngormがイベントとして認識するものを送出するためのクラス」
  です。
  このクラスを利用してイベントを送出しなければ、
  FrontControllerクラスを継承したControllerクラスはイベントを受け取ってくれませんし、
  イベントにマッピングされたロジックも実行されませんので、注意が必要です。

② ClickBtnHelloWorldEventのインポート
  FrontControllerクラスを継承したControllerクラスでpublic static constに設定したイベント文字列を持つイベントをインポートしています。
  これがCairngormEventになるわけです。

③ ViewHelperを継承したSamplecairngormViewHelperクラスの宣言
  CairngormにViewHelperクラスとして認識させるために、ViewHelperクラスを継承したクラス宣言を行っています。

④CairngormEventDispatcher.getInstance().dispatchEventメソッドを使ってのイベント送出
  このメソッドを発行することにより、
   「FrontControllerクラスを継承したクラスでaddCommandしたCommandクラスを呼び出す」
  ことをしています。
  このことにより、該当するイベントにマッピングされたCommandクラスのexecuteメソッドが呼び出されるわけです。

以上がView層の解説でした。

以上でCairngormの解説は終了です。
ここまで長々と書いてきましたが、いかがでしたでしょうか?
サンプルのプロジェクトをダウンロードして動かしたほうが早いかもしれませんが、
PureMVCも解説していたのでこちらも解説をつけました。
ツールボックス

下から選んでください:

新しいページを作成する
ヘルプ / FAQ もご覧ください。