6. "yFiles FLEX Client / AIR アプリ" の日本語化

【概要】

いくつかのサンプルを選び、日本語化しました。日本語化のために、修正したのは次の３点です。

1. グラフ・データ、ヘルプ・ファイル(または、説明ファイル)
2. ユーザ・インターフェイス(UI) の表示内容
3. プログラムの制御コード

ここでは、以下の３つだけについて説明します。

1. 「アプリの日本語化」に必要なファイル
2. アプリの簡単な操作手順
3. 注意事項(必要な場合のみ)

アプリの起動手順については、以下の WEB-ページを参照して下さい

• yFiles FLEX のセットアップとサンプルの動作
  ４.３. "Layout拡張・モジュール ／AIR アプリ" の動作確認

以下の手順で、日本語化ように編集したファイルをコピーする時は、コピーされる前のファイルは "～.bak" のように名前を変更しておいて下さい。

 

1) 組織ダイアグラム (OrgChart)

• アプリケーションファイル：src/OrgChart.mxml
• 以下の５つのファイルをコピーして下さい。
  • UIの表示：
    src-demo\air-layout-flex4\src\OrgChart.mxml
  • UIの表示：
    src-demo\air-layout-flex4\src\demo\orgchart\PersonNode.mxml
  • データ　：
    src-demo\air-layout-flex4\src\demo\orgchart\data\orgchartmodelsmall.xml
  • ヘルプ　：
    src-demo\air-layout-flex4\src\demo\orgchart\OrgChartHelp.mxml
  • 制御コード：
    src-demo\air-layout-flex4\src\demo\orgchart\OrgChartOverviewGraphPaintable.as

操作手順：

• (1) ～ (2) "データ選択・ツリー" ビューを選び、右側のスクロール・バーを少し下げる
• (3) "大下英治" をクリックする
• (4) 中央の「組織チャート」ビューで、"大橋未歩" のノードの右下にカーソルを移動、"+" アイコンが浮かび上がるので、そのアイコンをクリックする
• (5) "メンバー属性" ビューに、ノードの詳細情報が表示される
  

 

2) ビジネス・プロセス ダイアグラム (BusinessProcessDiagramDemo)

• アプリケーションファイル：src/BusinessProcessDiagramDemo.mxml
• 以下の５つのファイルをコピーして下さい。
  • UIの表示：
    src-demo\air-layout-flex4\src\BusinessProcessDiagramDemo.mxml
  • データ　：
    src-demo\air-layout-flex4\src\demo\businessProcessDiagram\resources\graphml\NormalFlow.graphml
  • データ　：
    src-demo\air-layout-flex4\src\demo\businessProcessDiagram\resources\graphml\CollectVotes.graphml
  • 制御コード：
    src-demo\air-layout-flex4\src\demo\businessProcessDiagram\bpd\BusinessProcessDiagramComponent.as
  • 制御コード：
    src-demo\air-layout-flex4\src\demo\businessProcessDiagram\bpd\BPMNAccordion.as

操作手順：

• (1) "ダイアグラムを開く" の一覧をクリックして、グラフ・データ名を "Normal Flow" に変更する。
• (2) 左側に、"活動", "分岐", "イベント", .. などの多種のノード (または、エッジ) 要素があるので、適当な要素を右側のグラフ・ダイアグラム・ビューにドラッグ＆ドロップしてみる
  
  

 

3) レイアウト・モジュール デモ (LayoutModuleDemo)

• アプリケーションファイル：src/LayoutModuleDemo.mxml
• 以下の９つのファイルをコピーして下さい。
  • UIの表示：
    src-demo\air-layout-flex4\src\LayoutModuleDemo.mxml
  • データ　：
    src-demo\air-layout-flex4\src\demo\layoutModule\resource\sample.graphml
  • ヘルプ　：
    src-demo\air-layout-flex4\src\LayoutModuleDemoDesc.xml
  • UIの表示：
    src-demo\air-layout-flex4\locale\en_US\TreeLayout.properties
  • UIの表示：
    src-demo\air-layout-flex4\locale\en_US\SmartOrganicLayout.properties
  • UIの表示：
    src-demo\air-layout-flex4\locale\en_US\OrthogonalLayouter.properties
  • UIの表示：
    src-demo\air-layout-flex4\locale\en_US\LayoutModuleDemo.properties
  • UIの表示：
    src-demo\air-layout-flex4\locale\en_US\IncrementalHierarchicLayouter.properties
  • UIの表示：
    src-demo\air-layout-flex4\locale\en_US\CircularLayout.properties

操作手順：

• (1) ツール・バーの "＋" アイコンをクリックして、適当な大きさにズームする
• (2),(3) スタイルを "円環状 (Circular)" に変更して、その右にある "▼" (実行) ボタンを押すと、"円環状 (Circular)"にて、再レイアウトが実施される
  

 

4) 階層制約 デモ (LayerConstraintsDemo)

• アプリケーションファイル：src/LayerConstraintsDemo.mxml
• 以下の２つのファイルをコピーして下さい。
  • UIの表示：
    src-demo\air-layout-flex4\src\LayerConstraintsDemo.mxml
  • ヘルプ　：
    src-demo\air-layout-flex4\src\LayerConstraintsDemoDesc.xml

操作手順：

• (1) ノード 8, 9, 10, 11 を追加し、さらに以下の７つのエッジを追加する
  　 ノード 8 -> 9, 8 -> 10, 4 -> 10, 5 -> 11, 7 -> 11
• (2) ノード 8, 10 を選択して、"中間上方・レイヤ" ボタンを押す
• (3) ノード 6 を選択して、"中間下方・レイヤ" ボタンを押す
• (4) ノード 11, 4 を選択して、"最下位・レイヤ" ボタンを押す
• (5) 左上にある「レイアウト」ボタンを押す