ここではサンプルソースの解説を行います。 サンプルソースはボタンを押したら、「HelloWorld」と文字列が返ってきて、 それが画面に表示されるという簡単なものです。 それらのCairngormのソース構成を １．controller ２．dataModel ３．service ４．view と分けて解説していきます。 まず最初のFlexアプリケーションのスタートファイルに当たる「SampleCairngorm.mxml」を見ていきましょう。 &bold(){※サンプルソースはAIRを用いて作られています。} &bold(){ですのでスタートタグが「mx:Application」ではなく「mx:WindowedApplication」となっていますが、} &bold(){振る舞いは変わりません。} &bold(){サーバサイドのFlexアプリケーションを作成するときはこの「mx:WindowedApplication」を} &bold(){「mx:Application」に変更してください。} <?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ctrl="sample.controller.samplecairngorm.*" xmlns:srv="sample.service.*" xmlns:viewhelper="sample.view.samplecairngorm.helper.*" layout="vertical" viewSourceURL="srcview/index.html"> ･･････････････････････････････・・・・・・・・・・・・・・・① <mx:Script> <![CDATA[ import sample.datamodel.ApplicationDataModel; // DataModelのインスタンスを取得し、データ表示用にバインドしています。 [Bindable] private var _model:ApplicationDataModel = ApplicationDataModel.getInstance(); ]]> </mx:Script> ･･･････････････････････････・・・・・・・・・・・・・・・・・② <!-- イベントマッピングをしているControllerクラスをインスタンス化しています。 これをしないとイベントを起こしてもCommandに飛びません。 --> <ctrl:SamplecairngormController id="appController"/> ･･･････････････････････････・・・・・・・・・・・・・・・・③ <!-- ApplicationServiceをインスタンス化しています。 HttpServiceやRemoteObjectを利用する場合にはこの処理が必要です。 CairngormではServiceLocatorというクラスがHttpServiceやRemoteObjectを 管理しているためです。 このApplicationServiceはその管理クラスといえるでしょう。 ApplicationServiceのソースを見ると開始タグが 「ServiceLocator」となっていることがわかると思います。 --> <srv:ApplicationService id="appService"/> ･･･････････････・・・・・・・・・・・・・・・・・・・・④ <!-- CairngormでもロジックはできるだけMXMLの中に書かないように、というスタンスが とられています。 ではロジックをどこに書くのか？ それがこのViewHelperクラスです。 このクラスの中にはUIコンポーネントのイベントをハンドルするためのメソッドをつくり、 そのメソッドを呼び出してイベントを起こすようにします。 --> <viewhelper:SamplecairngormViewHelper id="sampleViewHelper"/>････････････・・・・・・・・・・・・・・・・・⑤ <mx:Label id="lbl" text="{_model.sampleModel.txtField}" />･･･････････････････････････････････････････⑥ <!-- viewhelperクラスのイベントハンドル用メソッドを呼び出しています。 --> <mx:Button id="btnHelloWorld" label="sayHello" click="{sampleViewHelper.clickBtnHelloWorld(event);}"/> ・・・・・⑦ </mx:WindowedApplication> ①Applicationタグ このタグは説明するまでもなく、Flexアプリケーションのスタートには必ず必要なタグですね。 このタグの中のプロパティとして注目すべきは以下の点です。 １）xmlns:ctrl="sample.controller.samplecairngorm.*" Controller層のインスタンス化をするためにこの一文が必要になります。 Controller層については後で解説していきますが、 &bold(){CairngormのController層はイベントマッピングをするためのもので、} &bold(){必ずインスタンス化が必要になる} と考えてください。 ２）xmlns:srv="sample.service.*" Service層のインスタンス化をするためにこの一文が必要になります。 Service層ではサーバーとの連携部分を担っており、ここでインスタンス化されたServiceが Cairngormのソースの中で使いまわされています。 Service層については後で解説していきますので とりあえず、これもController層と同様に &bold(){必ずインスタンス化が必要になる} と考えてください。 ３）xmlns:viewhelper="sample.view.samplecairngorm.helper.*" View層のロジックを肩代わりするための役目をもつ「ViewHelper」というクラスを インスタンス化するためにこの一文が必要になります。 CairngormではMXMLファイルの中にはできるだけ、「mx:Script」というタグは書かないようにと、 考えられています。 ではScriptタグを書かずにどこにスクリプトを記述していくのか？ その答えがこのViewHelperクラスになります。 View層についても後に解説していきますので、 Controller層、Service層と同様に &bold(){必ずインスタンス化が必要になる} と考えてください。 ②Scriptタグ Cairngormでは「ScriptタグはMXMLの中にはできるだけ書かないようにしよう」 という考えのもと、作られたフレームワークですが、 唯一の例外がこの [Bindable] private var _model:ApplicationDataModel = ApplicationDataModel.getInstance(); でしょう。 ここではデータモデルのインスタンスを取得しています。 DataModel層については後に解説しますが、 Cairngormの中でいうDataModelというのは 「データバインディングのためにデータを入れるための器」 と考えてください。 ですので、[Bindable]で宣言し、インスタンスを取得しているのです。 またなぜnew演算子ではなくgetInstance()メソッドを利用してインスタンスを取得してるかも、 DataModel層の解説で説明します。 今のところはデータの器をインスタンス化したと考えてください。 ③Controllerのインスタンス化 Controller層のControllerをここでインスタンス化します。 このFlexのスタートを示すApplicationタグの中に、 このController層のインスタンス化がされていないと、 イベントが発生しても、ハンドルされません。 つまり、イベントが起きても、プログラムは何もしないことになります。 ですので、Controller層のインスタンス化は必ず必要になります。 ④Serviceのインスタンス化
下から選んでください:
