4.1 "Client モジュール ／AIR アプリ" の動作確認

【概要】

yFiles FLEX ／Clientモジュール は FLEX (Flash) で動作するライブラリーを提供し、Windows デスクトップ上で動作するアプリケーションを開発できます。このアプリを動作させるには、予めサーバを起動させる必要があります。

1) 評価版 (３０日) のダウンロード

• 以下の WEB-サイトから評価版をダウンロードできます。
  ≪yFiles FLEX ／Clientモジュール≫
  
  ダウンロードされるモジュール
  yfilesflex-1.6.0.1-eval.zip ... 42.5 MB
  

2) "yFiles FLEX ／Clientモジュール" の内容を見る

• yfilesflex-1.6.0.1-eval.zip を展開して下さい。
  
  yfilesflex-1.6.0.1-eval と言うフォルダーが生成されます。
  以下の説明では、このフォルダーを <yFiles-FLEX> と記述します。
  
  
• 以下のフォルダーがあります。
  
  ４つのクライアント用モジュールが格納されています。
  
  <yFiles-FLEX>\src-demo\air-flex3 ... AIR アプリ用
  <yFiles-FLEX>\src-demo\air-flex4 ... AIR アプリ用 ※ 今回使用する
  <yFiles-FLEX>\src-demo\client-flex3 ... WEB アプリ用
  <yFiles-FLEX>\src-demo\client-flex4 ... WEB アプリ用

3) Flashライブラリーと 関連する DLL をコピーする

• <yFiles-FLEX> フォルダーに移動して、DOS コマンドを実行します。

  % copy-libs.bat

  
  --> 以下のように６つのファイルがコピーされます。

  copy lib\client\yfiles-flex-Flex3.swc src-demo\client-flex3\libs
  copy lib\client\yfiles-flex-Flex3.swc src-demo\air-flex3\libs
  copy lib\client\yfiles-flex-Flex4.swc src-demo\client-flex4\libs
  copy lib\client\yfiles-flex-Flex4.swc src-demo\air-flex4\libs
  
  copy lib\server-java-2.7\*.jar src-demo\server-java\web\WEB-INF\lib
  copy lib\server-dotnet\yFilesServer* "src-demo\Web Site\Bin
  

4) "サーバー／クライアント" モデルのサーバーを起動する

• "Clientモジュール ／AIR アプリ" はサーバが必要です。もし、サーバが不要なスタンドアロン・アプリを希望でしたら、以下の手順を参照下さい。
  
  
  • ４.３. "Layout拡張・モジュール ／AIR アプリ" のカスタマイズ(日本語化)
  • ４.４. "Layout拡張・モジュール ／WEB アプリ" の動作確認
    
    
• 予め以下の手順に従ってサーバーを起動しておいて下さい。
  
  
  • yFiles FLEX のセットアップとサンプルの動作 (2)
    .NET Server 上で動作するデモ：C# 開発環境を利用
    
    
• クライアント用の設定をします。
  
  "<yFiles-FLEX>\src-demo\air-flex4" がクライアント用の領域です。
  以下のように設定ファイルを修正し、サーバーの URL を指定します。
  
  【設定ファイル】
  <yFiles-FLEX>\src-demo\air-flex4\src\config.xml
  
  ≪修正前≫
  

  <config>
  <context-root>../../</context-root>
  <service-extension></service-extension>
  </config>
  

  
  ≪修正後≫

  <config>
  <context-root>http://localhost:49986/Web%20Site/</context-root>
  <service-extension>.ashx</service-extension>
  </config>
  

  ※ "49986" は、実際のサーバーに合わせて下さい。

5) Flash Builder 4.5 を起動する

• "プログラム(P)-> Adobe Flash Builder 4.5-> Adobe Flash Builder 4.5" を選択します。
  
  

  ※ 【注意】もし、"Adobe Flash Builder 4.6" を使用している場合は、以下の設定が必要です。Flash Builder 4.6 の SDK はサポートされていません。≪Flex SDK のセットアップ≫

  
  
• "ファイル(F) -> Flash Builderプロジェクトを読込み(I).." を選択します。
  
  
  --> ダイアログが開くので、
  
  　　 プロジェクトフォルダー(P):　<yFiles-FLEX>\src-demo\air-flex4
  
  をセットして、[終了] を押します。
  
  
  --> [Flex SDK のバージョンの選択] ダイアログが開くので、[OK] を押します。
  
  　　 ※ バージョンが一致している場合はこの警告はでません。
  　　
  　 --> Flash Builder の画面が開きます。

6) GroupingDemo (グループ・デモ) を実行する

• メニュの "実行-> 実効構成(N).." を選択します。
  
  
  -->「実効構成」の画面が表示されるので、"デスクトップアプリケーション" を右クリックし、"新規(W)" を選択する。
  
  
  -->「実効構成」の画面にて、以下の操作を行う
  
  　　　 ・名前(N): GroupingDemo
  　　　 ・プロジェクト(P): yFilesAirDemos
  　　　 ・アプリケーションファイル(A): src/GroupingDemo.mxml
  
  --> 以上を設定して、「適用(Y)」ボタンを押す
  
  
  --> 左側の "フィルタ入力"欄で、"デスクトップアプリケーション-> GroupingDemo" を選択し、[実行] ボタンを押す
  
  
  --> コンパイルが開始されて、しばらくすると、アプリが起動する
  
  
  --> 画面上には、"全体ナビゲート・ビュー", "ツリー・ビュー", "描画キャンバス・ビュー" の３つのビューがある。
  
  　 ツリー・ビューに示されるような階層構造を持ったグループが表示されている。
  　 上方には、"ツール・バー" があり、２つのコンボボックスがある。
  
  　　 ・グラフ・データを選択
  　　 ・レイアウトを選択
  
  
  
  --> グラフ・データの一覧から "grouped-large-graph" を選び、レイアウトの一覧から "heierachic" を選ぶと、下図のようなグラフが描画される