5. "yFiles FLEX .NET Server バンドル / WEB アプリ" の日本語化

【概要】

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

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

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

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

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

• yFiles FLEX のセットアップとサンプルの動作 (3)
  Flash Builder 上で動作するデモ：Flash 開発環境を利用

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

 

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

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

操作手順：

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

 

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

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

操作手順：

• (1) "ダイアグラムを開く" の一覧をクリックして、グラフ・データ名を "CollectVotes_jp" に変更する。
• (2) 他の日本語表記のグラフ・データとしては、"NormalFlow_jp" があります
  

 

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

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

操作手順：

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

 

4) 階層制約 デモ (LayerConstraintsDemo)

• アプリケーションファイル：src/LayerConstraintsDemo.mxml
• 以下の２つのファイルをコピーして下さい。
  • UI の表示：
    client\src-demo\client-flex4\src\LayerConstraintsDemo.mxml
  • ヘルプ　：
    client\src-demo\client-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) 左上にある「レイアウト」ボタンを押す
  

 

5) ドリルダウン デモ (DrillDownDemo)

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

操作手順：

• (1) "アネロビック" のノードをクリックする
• (2) ツール・バーの「ルート」ボタンをクリックすると、元の表示に戻ります
  
  

 

6) 補助コンポーネント デモ (AuxComponentDemo)

• アプリケーションファイル：src/AuxComponentDemo.mxml
• 以下の５つのファイルをコピーして下さい。
  • UIの表示：
    client\src-demo\client-flex4\src\AuxComponentDemo.mxml
  • UIの表示：
    client\src-demo\client-flex4\src\demo\auxcomponentstyle\NodeComponent.mxml
  • UIの表示：
    client\src-demo\client-flex4\src\demo\auxcomponentstyle\Dialog.mxml
  • ヘルプ　：
    client\src-demo\client-flex4\src\AuxComponentDemoDesc.xml
  • 制御コード：
    server\src-demo\WebSite\App_Code\Demo\Hierarchic\HierarchicRoundtripHandler.cs

操作手順：

• (1) "最初のノード" にて、「編集」をクリックすると、プルダウン・メニューが現れるので、"親ノードを追加" を選択する
• (2) 入力ダイアログが現れるので、"親のノード" を入力して「確定」を押す
• (3) "最初のノード" にて、プルダウン・メニューから、"兄弟ノードを追加" を選択する
  　　 入力ダイアログが現れるので、"兄弟ノードです" を入力して「確定」を押す
• (4) "兄弟ノードです" にて、プルダウン・メニューから、"子ノードを追加" を選択する
  　　 入力ダイアログが現れるので、"これは子供ノードです！" を入力して「確定」を押す