Eclipse GMFを利用した状態遷移図エディタの作成

グラフィカルなエディタをコーディングレスで作成する

添付ファイルの説明

　本稿では3つのzipファイルを添付しています。

• サンプルGMFプロジェクト
前述のサンプルプロジェクトです。
• 状態遷移図エディタ
サンプルプロジェクトを拡張し、SCXML形式による状態遷移モデルのエクスポート機能を追加したものです。
• 状態遷移図サンプル
エディタで作成した電子レンジ状態遷移ファイルとストップウォッチ状態遷移ファイルです。

　状態遷移図エディタを作るために作成したJavaクラスはたったの2つです。これは、作成した状態遷移モデルをSCXML形式に変換するSCXMLGeneratorクラスと、状態遷移図上から右クリックメニューでSCXMLGeneratorを実行するGenerateSCXMLActionです。この2つのクラスを作成するだけで、ある程度実用的な状態遷移エディタを実現することができます。

State Chart XML（SCXML）

　その名の通り、ステートチャートのXML記法です。W3Cにおいて仕様の策定が進められており現在ワーキングドラフトです。Apache Jakartaプロジェクトにおいて、このSCXMLを読み込んで実行することができるCommons SCXMLが開発されています。こちらもまだ未リリースの状態です。

　添付ファイルの状態遷移図サンプルは、状態遷移図エディタと状態遷移モデルツリーエディタで記述した電子レンジの状態遷移図です。

電子レンジの状態遷移図

microwave.scxml

<?xml version="1.0" encoding="UTF-8"?>
<scxml:scxml xmlns:scxml="http://www.w3.org/2005/07/scxml"
             initialstate="off" version="1.0">
  <scxml:state id="off">
    <scxml:onentry/>
    <scxml:onexit/>
    <scxml:transition event="turn_on" target="on"/>
  </scxml:state>
  <scxml:state id="on">
    <scxml:onentry>
      <scxml:if cond="empty(cook_time)">
        <scxml:var expr="5" name="cook_time"/>
      </scxml:if>
      <scxml:if cond="empty(door_closed)">
        <scxml:var expr="true" name="door_closed"/>
      </scxml:if>
      <scxml:var expr="0" name="timer"/>
    </scxml:onentry>
    <scxml:onexit/>
    <scxml:transition event="turn_off" target="off"/>
    <scxml:transition cond="timer ge cook_time" target="off"/>
    <scxml:initial>
      <scxml:transition target="idle"/>
    </scxml:initial>
    <scxml:state id="idle">
      <scxml:onentry/>
      <scxml:onexit/>
      <scxml:transition event="door_close" target="cooking">
        <scxml:assign expr="true" location="door_closed"/>
      </scxml:transition>
      <scxml:transition cond="door_closed" target="cooking"/>
    </scxml:state>
    <scxml:state id="cooking">
      <scxml:onentry/>
      <scxml:onexit/>
      <scxml:transition event="door_open" target="idle">
        <scxml:assign expr="false" location="door_closed"/>
      </scxml:transition>
      <scxml:transition event="time" target="cooking">
        <scxml:assign expr="timer + 1" location="timer"/>
      </scxml:transition>
    </scxml:state>
  </scxml:state>
</scxml:scxml>

簡単なGMFの使い方

　前章では既に出来上がったファイルからエディタのコードを自動生成しました。本章ではGMFを使って簡単なエディタを作成するまでを説明します。GMFでエディタを作成するためには、次のファイルが必要です。

GMFで必要なファイル

ファイル	説明
モデル定義ファイル（*.ecore）	ドメインモデルを定義するEcore定義ファイル
モデルコード生成定義ファイル（*.genmodel）	ドメインモデルをどのようにJavaコードに落とすかを定義するファイル
グラフ定義ファイル（*.gmfgraph）	作成するダイアグラムがどんな見た目（フィギュア）を持つかを定義するファイル
ツール定義ファイル（*.gmftool）	作成するダイアグラムがどんなパレットを持つかを定義するファイル
マッピング定義ファイル（*.gmfmap）	作成したグラフ定義、ツール定義とドメインモデルがどのようにマッピングされるかを定義するファイル
ダイアグラムコード生成定義ファイル（*.gmfgen）	ダイアグラム定義をどのようにJavaコードに落とすかを定義するファイル

　多くのファイルを作る必要がありますが、そのほとんどは自動生成することが可能です。GMFを使ったエディタ作成のフローは通常次のようになります。

1. モデルの定義
2. モデルコード生成定義ファイルを自動生成
3. グラフ定義ファイルを自動生成
4. グラフ定義ファイルのカスタマイズ
5. ツール定義ファイルの自動生成
6. ツール定義ファイルのカスタマイズ
7. マッピング定義ファイルの自動生成
8. マッピング定義ファイルのカスタマイズ
9. ダイアグラムコード生成定義ファイルの自動生成
10. Javaコードの自動生成

チュートリアル（1/2）

　では、一番簡単な「状態遷移図は状態を複数持つ」を実現して見ましょう。

モデル定義

　まずはモデルの定義です。モデルの定義方法に関しては参考文献のEMFの項を参照してください。ファイル名は「statechart.ecore」としておきましょう。

状態遷移モデル定義

　これで、「Statechartはstateという名前でStateを複数持つ」というモデルを定義することができました。モデルを定義すれば、モデルコード生成モデルは自動生成できます。作成した「statechart.ecore」を選択して、右クリックメニューから［New］-［Other］-［Eclipse Modeling Framework］-［EMF Model］を選んでください。後はウィザードに従って「statechart.genmodel」を作成します。

ドメインモデル

　当たり前のように「ドメインモデル」「モデル」という言葉を使ってきましたが、これは特に難しい話ではありません。例えば、今回は状態遷移図エディタを作ることを目的にしていますので、状態遷移図を構成する要素（状態や遷移）が「ドメインモデル」になります。もう少し書くと、状態遷移という「ドメイン」に対して、それを構成する状態遷移図、状態、遷移が「ドメインモデル」になり、それぞれ状態遷移図は状態を持つ、状態は遷移によって他の状態と繋がるといった「リレーション」を持ちます。

グラフ定義

　次に状態遷移図（StateChart）と状態（State）がどのように表示されるかを定義します。ここで、GMFGraph Simple Modelウィザードを利用すると簡単に見た目の定義を行うことができます。これは作成したドメインモデルから、GMFが必要な見た目（フィギュア）を推測して作成してくれるウィザードです。

　では、作成した「statechart.ecore」を選択した状態で、［New］-［Others］-［Graphical Modeling Framework］-［GMFGraph Simple Model］を選んでください。次のような画面が開きます。

グラフ定義ウィザード

　この画面の意味は次のようになります。

• 状態遷移図（StateChart）は図自体を表すので見た目は不要でしょう
• 状態（State）を表示するのにノードが必要でしょう
• 状態の名前（State#name）を表示するのにラベルが必要でしょう

　ここではGMFの推測した見た目に間違いがないので、生成された「statechart.gmfgraph」は特に編集する必要がありませんが、参考として生成されたグラフ定義の中身を提示します。

グラフ定義

<?xml version="1.0" encoding="UTF-8"?>
<gmfgraph:Canvas xmi:version="2.0"
    xmlns:xmi="http://www.omg.org/XMI"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:gmfgraph="http://www.eclipse.org/gmf/2005/GraphicalDefinition"
                    name="statechart">
  <figures
      name="default">
    <!-- StateFigureという見た目を定義。形は短形(Rectangle) -->
    <figures
        xsi:type="gmfgraph:Rectangle"
        referencingElements="StateNode"
        name="StateFigure">
      <!-- StateFigureの中にラベルがあり、名前はStateNameLabel -->
      <children
          xsi:type="gmfgraph:Label"
          referencingElements="StateNameLabel"
          name="StateNameFigure"
          text="<...>"/>
    </figures>
  </figures>
  <!-- StateNodeというノードがあり、形状はStateFigureの通り -->
  <nodes
      name="StateNode"
      figure="StateFigure"/>
  <!-- StateNameLabelというラベルがあり、形状はStateNameFigureの通り-->
  <labels
      name="StateNameLabel"
      figure="StateNameFigure"/>
</gmfgraph:Canvas>

ツール定義

　次にツール定義です。ここではダイアグラムのパレット部分に表示するツールの定義を行います。これもグラフ定義と同様にGMFが提供するウィザードがあります。「statechart.ecore」を選択した状態で［New］-［Others］-［Graphical Modeling Framework］-［GMFTool Simple Model］を選んでください。開いた画面の意味もグラフ定義の時と同じです。

ツール定義

• 状態遷移図（StateChart）は図自体を表すのでツールは不要でしょう
• 状態（State）を作成するツールが必要でしょう
• 状態の名前（State#name）を編集するツールが必要でしょう

　ここでもGMFの推測したツール定義に間違いがないので、生成された「statechart.gmftool」は特に編集する必要がありません。

ツール定義

<?xml version="1.0" encoding="UTF-8"?>
<gmftool:ToolRegistry xmi:version="2.0"
    xmlns:xmi="http://www.omg.org/XMI"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:gmftool="http://www.eclipse.org/gmf/2005/ToolDefinition">
  <palette>
    <tools
        xsi:type="gmftool:ToolGroup"
        title="statechart">
      <!-- Stateという名前のノード作成ツールを定義 -->
      <tools
          xsi:type="gmftool:CreationTool"
          title="State"
          description="Create new State">
        <smallIcon
            xsi:type="gmftool:DefaultImage"/>
        <largeIcon
            xsi:type="gmftool:DefaultImage"/>
      </tools>
    </tools>
  </palette>
</gmftool:ToolRegistry>