OpenLaszloアドバンスド・テクニック
連載：Flexのクライアントサイドをオープンソースで制覇する（4）

Flexのフレームワーク、Cairngormでサンプルアプリ

ダイヤモンドコンピューターサービス
SI技術部 技術推進グループ
吉田 靖宏
2006/9/21
Flexクライアントサイドのオープンソース、Cairngormを使って製品コードから検索できるWebアプリを作成していく

■プロジェクトの作成

　前回（Flexのフレームワーク、Cairngormのアーキテクチャ）では、Cairngorm （ケアンゴーム）Frameworkに付属しているログインサンプルを構成するクラスを見ながら、フレームワークのアーキテクチャについて解説しました。今回から2回にわたって、実際にCairngorm Frameworkを使って、Webアプリケーションサーバの検索・登録・更新・削除を行う簡単なサンプルアプリを作成していきます。今回は、前編ということで、サーバサイドに連携するまでの部分（View〜Command）を作成していきます。

　まず、初めにサンプルアプリケーション用のプロジェクトを作成します。開発環境の構築ができていない方は、第2回（Flexのフレームワーク、Cairngormを使ってみよう）を参照して開発環境を構築してください。以下では、第2回で構築した開発環境をベースにサンプルアプリケーションを作成していきます。

　プロジェクトは、ログインサンプルを動かしたときに作ったプロジェクトと同じ手順で作成します。まず、Eclipseを起動させたら、Eclipseのパッケージエクスプローラ上で右クリック → [新規] → [その他]を選択します。すると、以下のようなダイアログが表示されるので、[Web] → [Dynamic Web Project]を選択して次へボタンを押します。

画面 1プロジェクト選択のウィザード

　すると以下のようなダイアログが表示されるので、ここではProject Nameにcairngorm-sampleと入力します。Target runtimeに開発環境構築時に設定したTomcatが選択されていることを確認したら、終了ボタンを押します。

画面 2 Dynamic Web Projectの作成

　続いて、Flexアプリケーションに必要なライブラリとCairngorm Frameworkのライブラリをプロジェクトにコピーします。ここも、ログインサンプルを動かしたときの手順と同じですが、4. の作業が新しく加わっているので忘れずに行ってください。

  1. Flexをインストールしたディレクトリ（Windows環境の場合、C:\Program Files\Macromedia\Flexなど）にあるflex.warを解凍し、WEB-INF以下すべてをcairngorm-sample/WebContent/WEB-INFに上書きコピーする
  2. Cairngorm Frameworkのzipファイル（cairngorm-0.99.zip）を解凍してできたディレクトリのbinディレクトリにあるcairngorm.swcをcairngorm-sample/WebContent/WEB-INF/flex/user_classesに置く
  3. 同じく、binディレクトリにあるcairngorm-manifest.xmlをcairngorm-sample/WebContent/WEB-INF/flexに置く
  4. cairngorm-sample/WebContent/WEB-INF/flexディレクトリにあるflex-config.xmlに、Cairngorm Frameworkを使うための名前空間を下のリストのとおり、追加する（97行目付近）

リスト 1 flex-config.xml（抜粋）

<namespaces>
    <namespace uri="http://www.macromedia.com/2003/mxml">
        <manifest>/WEB-INF/flex/mxml-manifest.xml</manifest>
    </namespace>
    <!-- Cairngormの名前空間を追加  -->
    <namespace uri="http://www.iterationtwo.com/
cairngorm">（本来は1行）
        <manifest>/WEB-INF/flex/cairngorm-manifest.xml
</manifest>（本来は1行）
    </namespace>
</namespaces>

XML名前空間

XML名前空間は、1つのXML文書の中で複数のスキーマを使用できるようにするための仕組みです。例えば、AスキーマとBスキーマの両方にhogeという同じ名前のタグが存在する場合、<hoge>と記述してもそれがどちらのスキーマに属するタグなのか識別することができません。

名前空間を使用すると、<A:hoge>、<B:hoge>などのように、それぞれのスキーマを区別して記述することができ、同じ名前のタグがあっても一意に識別できます。このタグを識別するための情報が、URIです。Flexでは、flex-config.xmlのnamespacesタグ内でURIをさらにマニフェストファイル（XMLファイル）に結び付けています。

XMLのスキーマを記述する方式としては、従来DTD（Document Type Definition）が使われてきましたが、DTDは名前空間をサポートしていないため、最近では名前空間をサポートしたXML Schemaという記述方式が多く使われるようになってきています。XML Schemaは、W3Cで策定されており、名前空間については、Namespaces in XMLという仕様があります。

　最後に、これから作っていくMXMLやAction Scriptのファイルを格納するためのディレクトリを作成します。まず、cairngorm-sample/WebContent直下にsampleというディレクトリを作成してください。次に、そのsampleディレクトリの中に、business、commands、control、model、view、voの6つのディレクトリを作成してください。このディレクトリ構成は、ログインサンプルのものと同じです。

　これでサンプルアプリケーション用プロジェクトの作成は完了です。この時点で、プロジェクトの構成が以下のようになっていることを確認してください。

画面 3プロジェクトの構成

■サンプルアプリケーションの仕様

　プロジェクトの作成ができたところで、ここからいよいよサンプルアプリケーションの作成に入っていきます。今回作成するサンプルアプリケーションは、アプリケーションサーバの検索・追加・更新・削除を行う簡単なものです。画面の完成イメージは、以下のようになります。

画面 4画面の完成イメージ

　具体的には、製品コードでアプリケーションサーバを検索し、該当のアプリケーションサーバをデータグリッドに表示します。データグリッドの表示項目は、製品コード、製品名、ベンダー、価格、備考の5つです。データグリッドの下には、これら5つの項目のテキストインプットがあり、データグリッドの行を選択すると、テキストインプットに選択されたアプリケーションサーバの情報を表示します。

　このテキストインプットの情報を修正し、更新ボタンを押すとアプリケーションサーバの情報を更新します。また、データグリッドの行が選択された状態で削除ボタンを押すと、該当のアプリケーションサーバを削除します。新しいアプリケーションサーバを追加したいときは、テキストインプットにアプリケーションサーバの情報を入力して追加ボタンを押します。

　実際の検索・追加・更新・削除の各処理は、サーバサイドのサービス（Remote Object）として実装します。

■View（MXML）の作成

　それでは、まず画面であるView（MXML）から作成します。下のリストは、サンプルアプリケーションのViewであるAPServerList.mxmlです。これをcairngorm-sample/WebContent/sample/viewに作成してください。

リスト 2 APServerList.mxml

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

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"
  xmlns:view="sample.view.*"
  xmlns:business="sample.business.*" 
  xmlns:control="sample.control.*"
  pageTitle="Flexサンプルアプリケーション" marginTop="20" horizontalAlign="
center">（本来は1行）

  <!-- ViewHelper -->
  <view:APServerListViewHelper id="apServerList
ViewHelper" />（本来は1行）

  <!-- ServiceLocator -->
  <business:SampleappServices id="sampleappServices" />

  <!-- Controller -->
  <control:SampleappControl id="sampleappController" />

  <mx:Panel title="Flexサンプルアプリケーション"
    height="600" width="800" marginTop="10" marginLeft="20">

    <mx:Script>
      <![CDATA[

      import sample.model.SampleappModelLocator;

      ]]>
    </mx:Script>

    <mx:Label text="JavaEE Webアプリケーションサーバ一覧" fontSize="12" />

    <mx:HBox horizontalAlign="center" marginTop="10" >
      <mx:Label text="製品コード" />
      <mx:TextInput id="searchCond" width="50" maxChars="3" />
      <mx:Button label="検索" click="apServerList
ViewHelper.searchAPServer();" />（本来は1行）
    </mx:HBox>

    <mx:DataGrid id="dg" rowCount="10" dataProvider="
{SampleappModelLocator.apServerListModel}">（本来は1行）
      <mx:columns>
        <mx:Array>
          <mx:DataGridColumn columnName="productCode" headerText=
"製品コード" width="60" textAlign="center"/>（本来は1行）
          <mx:DataGridColumn columnName="productName" headerText=
"製品名" width="200" />（本来は1行）
          <mx:DataGridColumn columnName="vendor" headerText=
"ベンダー" width="200" />（本来は1行）
          <mx:DataGridColumn columnName="price" headerText="価格" 
width="80" textAlign="right" />（本来は1行）
          <mx:DataGridColumn columnName="note" headerText="備考" 
width="180" />（本来は1行）
        </mx:Array>
      </mx:columns>
    </mx:DataGrid>

    <mx:Form>
      <mx:FormItem label="製品コード">
        <mx:TextInput id="productCode" width="50" maxChars="3" 
text="{dg.selectedItem.productCode}" />（本来は1行）
      </mx:FormItem>
      <mx:FormItem label="製品名">
        <mx:TextInput id="productName" width="200" maxChars="20"
 text="{dg.selectedItem.productName}" />（本来は1行）
      </mx:FormItem>
      <mx:FormItem label="ベンダー">
        <mx:TextInput id="vendor" width="200" maxChars="20" 
text="{dg.selectedItem.vendor}" />（本来は1行）
      </mx:FormItem>
      <mx:FormItem label="価格">
        <mx:TextInput id="price" width="80" maxChars="8" 
text="{dg.selectedItem.price}" />（本来は1行）
      </mx:FormItem>
      <mx:FormItem label="備考">
        <mx:TextInput id="note" width="200" maxChars="20" 
text="{dg.selectedItem.note}" />（本来は1行）
      </mx:FormItem>
      <mx:FormItem>   
        <mx:HBox>
        <mx:Button label="追加" click="apServerList
ViewHelper.registAPServer();" />（本来は1行）
        <mx:Button label="更新" click="apServerListViewHelper.updateAPServer();" />（本来は1行）
        <mx:Button label="削除" click="apServerListViewHelper.removeAPServer();" />（本来は1行）
        </mx:HBox>
      </mx:FormItem>
    </mx:Form>

  </mx:Panel>
</mx:Application>

　このMXMLは、完成イメージで見てもらった画面に対応するものです。ラベル、テキストインプット、ボタン、データグリッドなど、画面を構成するコンポーネントを配置しています。

　そして、Cairngorm Frameworkを使うためにViewHelper、ServiceLocator、Controllerを<mx:Application>タグの下でインスタンス化しています。<mx:Application>タグの中では、view、business、controlの各パッケージに対して名前空間を設定しています。名前空間を設定するには、xmlns:プリフィックス=”URI”という記述をします。こうすることで、そのURIに属するタグをプリフィックス:タグ名という形式で表記することができます。MXMLタグの方は、URIを指定して名前空間の設定をしていますが、view、business、controlについては、URIではなくパッケージを指定しています。URIの部分にパッケージを指定することで、該当のパッケージに属するクラスをview:APServerListViewHelperのように指定することができます。

　<mx:Script>タグの中では、ログインサンプルと同じようにModelLocatorをインポートしています。ModelLocatorのapServerListModelプロパティは、検索結果のアプリケーションサーバの情報を保持しているプロパティであり、データグリッドにデータバインディングしています。

　検索、追加、更新、削除の各ボタンに対しては、ボタンがクリックされたときにそれぞれViewHelperのメソッドを呼び出すようにして、クリックされたときの具体的な処理は、ViewではなくViewHelperの方で実装するようにしています。

MXMLコンポーネントのインスタンス化

　MXMLコンポーネントは、<mx:XXX>というタグを書くことによってインスタンス化が行われます。Flexで用意されているMXMLタグは、すべてAction Scriptのクラスに対応しているため、内部的にはAction Scriptのクラスの生成が行われています。ViewHelperやControllerなどもこのようにタグで記述することによって、インスタンス化が行われます。

  1/2

　INDEX

連載：Flexのクライアントサイドをオープンソースで制覇する（4）
　Flexのフレームワーク、Cairngormでサンプルアプリ
Page1　プロジェクトの作成
サンプルアプリケーションの仕様／View（MXML）の作成
（MXMLコンポーネントのインスタンス化・XML名前空間）
  Page2　ViewHelperの作成
ValueObjectの作成／Controllerの作成／Commandの作成／ModelLocatorの作成




HTML5 + UX フォーラム 新着記事
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

HTML5＋UX 記事ランキング

本日 月間
＠IT