EMF Forms ーー 今日使い方を身につけ、明日からご活用ください ーー

2015.06.03  田中  

EMF  Forms  開発元からのメッセージ

•  Live-­‐Test:  EMF  Forms  vs.  Manually  Coding  UIs  –  hCps://www.youtube.com/watch?v=KQliJCX7zNE    –  オリジナルは上の動画ですが、本日のハンズオンでは日本語

キャプション付き特別版をご覧頂きます

はじめに

•  EMF  Client  PlaSorm  と  EMF  Forms  は Eclipse  Modeling  Project に含まれるプロジェクトです  

•  本日は  EMF  Forms  を「コードを書かずに利用出来る範囲」に限定してお話します  –  説明する使い方はドキュメンテーションに全て書かれています（英語）  

–  今日はその範囲で概要を説明しハンズオンで使い方を練習します  

•  謝辞  –  今回のリソースをオープンソースとして公開して頂いている Eclipse  

FoundaUon、EMF  Forms  を推進している EclipseSource  社、そして  EMF    Forms  の Contributors に感謝します  

アジェンダ

•  イントロダクション  –  モデルから UI を生成するということ  –  Ecore モデルについて  –  EMF  -­‐>  ECP  ->  EMF  Forms  

•  ハンズオン  –  Eclipse  Modeling  Package  インストール・動作確認  –  EMF  Forms  例題の動作・プロジェクト内容確認  –  Ecore  モデルの作成  

•  モデリングプロジェクト作成  •  Ecore  モデル作成 （Ecore  Tools 等）  •  EMF  コード生成 （Eclipse  Modeling  Framework:  EMF）  

–  ビューモデル作成  –  SWT  Renderer  を使った  UI  生成  

モデル実行

モデルから UI を生成するということ

•  どんな状況で使えるのか？  –  CONTEXT: モデルベースソフトウェア開発

モデル開発 ソフトウェア開発  （モデル変換等） ソフトウェア

作成したモデルがシナリオやユーザストーリーをサポートしているか    ・ データモデルのほぼ即時確認、仕様の早期収束

UIのマニュアルコーディングはできれば避けたい    ・ モデル変換でUIを生成すれば、UI修正はモデル修正で済む

こちらが本日の主題 補足で少し触れます

モデルから UI を生成するということ

•  （作業）モデルの確認とは  

–  モデルには構造を表すモデルと振る舞いを表すモデルがあります  •  構造を表すモデル：クラス図、コンポーネント図、パッケージ図など  •  振る舞いを表すモデル：ステートマシン図、アクティビティ図、シーケンス図など  

–  モデルの確認とは、書かれたモデルが矛盾を含まないことの確認ではなく、モデルが素データ（シナリオ他やそこから作成したオブジェクト図・インスタンス図）を間違いなくサポートしていることを確認することです  •  例）見落としたクラスがあり、期待するオブジェクト図（値）に至らない  •  例）継承関係が逆の箇所があり、期待するオブジェクト図（値）に至らない  •  例）シナリオにある手順に従いデータ投入しても、期待するオブジェクト図（値）に

至らない  

モデルから UI を生成するということ

•  （作業）モデルの確認とは  

–  振る舞いを表すモデルの場合、通常シミュレーションが使われますが、構造を表すモデルの場合どうするのでしょう？  

–  少なくともクラス図（相当）で表現するデータモデルの場合、UI を生成出来れば、そこで素データが期待通り投入出来るか確認できます  

–  もちろん、モデルベース開発の一部として 終的な UI 生成もあります  

Customer Business  Analyst/Modeler/  System  Engineer

Scenario/User  stories

Ecore  モデルについて

•  EMF  (Eclipse  Modeling  Framework)  で扱うモデルが  Ecore  モデル  –  仕様：MOF  (Meta-­‐Object  Facility)  の一部  –  記法：UML  Class  図のサブセット  

•  継承、属性、操作等は書けます  •  関連相当はありません（属性に参照が書けることで代用）  •  関連クラス相当は書けません  •  N項関連相当は書けません  •  ステレオタイプは使えません　等  

Ecore  モデルについて

•  File    –  >  New    –  >  Project  

Ecore  モデルについて

Ecore  モデルについて

EMF  で出来ること  

•  .genmodel  -­‐>  generate  all

木構造型  エディター

属性エディター

EMF  Client  PlaSorm/EMF  Forms  について

•  EclipseSource  社が推進する  Eclipse  Modeling  Project  –  EclipseSource 社  [hCp://eclipsesource.com/en/home/]  –  EMF  Client  PlaSorm  [hCp://eclipse.org/ecp/]  –  EMF  Forms  [hCp://eclipse.org/ecp/emfforms/]  

 •  EMF  Client  PlaSorm  

–  「EMF  Client  PlaSormは、EMFベースクライアントアプリケーション構築のフレームワーク。与えられたEMFモデルに基づくアプリケーション開発のため、再利用・適用・拡張可能なUIコンポーネント提供を目的とする・・・」  

•  EMF  Forms：EMF  Client  PlaSorm  のサブコンポーネント  –  「EMF  FormsはフォームベースUI開発に新たな方法を提供。手作業でフォーム

ベースのレイアウトをコーディングするのではなく、単純なモデルを記述すれば済むようになる・・・」  

EclipseSource  社について

hCp://eclipsesource.com/en/about/company/eclipsesource-­‐munich/  

EMF  Client  PlaSorm  で出来ること

•  フォーム化（No  coding）

EMF  Forms  で出来ること

•  SWT  アプリケーション化（No  coding）

EMF  Forms で出来ること

•  EMF  Forms の仕組み： View  Model  導入  

Building  Business  UIs  with  EMF  Forms  

ここからハンズオンに入ります

サンプルに触れた後、簡単なフォームエディターを作成します

Eclipse  Modeling  Package  インストール

•  事前準備として Eclipse  Modeling  Package のインストールをお願いしました： これを前提として進めます  

•  Eclipse  を起動してください  •  Help  -­‐>  InstallaUon  Detail をみてください

ECP  SDK

配下に  EMF  Forms  が  含まれています

注） 日本語データを扱う場合：  ・ 環境設定 -­‐>    ・ General  -­‐>    ・ Workspace    で  text  file  encoding  が UTF-­‐8  であることを確認して下さい

EMF  Forms  サンプル

•  File  -­‐>  New  -­‐>  Example  -­‐>  EMF  Forms  -­‐>  Make  it  happen:  example  model  を選択し  finish

Ecore  モデルの作成

•  model プロジェクトと model.edit  プロジェクトの二つが生成されます （Ecore  ファイルの中身を確認しましょう）

Ecore  モデルの作成

•  Ecore モデルをダイアグラム表示すると次のようになります

viewmodel の作成

•  .ecore  -­‐>  context  menu  -­‐>  New  -­‐>  Other  -­‐>  EMF  Forms  -­‐>  View  Model  Project  

•  プロジェクト名：モデルプロジェクト名+.viewmodel  •  モデル：workspace  から  .ecore  ファイルを選択  •  EClass  ：  UI  化する EClass  を選択

viewmodel の作成

viewmodel の作成

•  試しに lastName を見てみましょう  –  幾つか設定が可能です

viewmodel の作成

•  プレビューを表示出来ます –  ビューエディターの右端にあるアイコンをダブルクリックします  

viewmodel の作成

•  viewmodel を書き換えてみましょう  –  下の手順で Horizontal/VerUcalLayout を配置し項目を移動します

もしくは、次のページのようにします

viewmodel の作成

•  viewmodel を書き換えてみましょう –  一部または全部の項目を削除し、必要な項目対応の Control を生成できます  

viewmodel の作成

•  改めてプレビューを表示してみましょう（上半分が二列になっています）

SWT アプリケーションの作成

•  Run  -­‐>  Run  configuraUon: Main  tab

任意の名前

こちらを選択

org.eclipse.emf.ecp.applicaUon.e3.applicaUon  を選択

SWT アプリケーションの作成

•  Run  -­‐>  Run  configuraUon: Plug-­‐ins  tab

org.eclipse.emf.ecp.demo.e3.feature  を選択

これをクリック

SWT アプリケーションの作成

•  Run  -­‐>  Run  configuraUon: Plug-­‐ins  tab

workspace にある三つのプロジェクトを  Plug-­‐ins  に追加

SWT アプリケーションの作成

•  Run  -­‐>  Run  configuraUon: Plug-­‐ins  tab

後に  Run  をクリック  

SWT アプリケーションの作成

新たな  Eclipse  インスタンスが立ち上がり、このような  UI  を備えたアプリケーションが現れる

新規プロジェクト作成

SWT アプリケーションの作成

SWT アプリケーションの作成

それでは試してみましょう

•  テーマは  Order  Management  です   このEcoreモデルを作成し  UI  を生成して下さい

顧客 注文

注文明細 商品

名前：EString

注文番号：Eint  注文日付：EDate

個数：EInt

名前：Estring  価格：Eint

それでは試してみましょう

•  手順：  –  Ecore  Modeling  Project （モデリングプロジェクト）作成  –  Ecoreモデル作成（グラフィカルエディター利用）  

–  genmodelに基づくコード生成  –  viewmodelプロジェクト作成  –  viewmodelの編集（何もしなくても良い）  –  Run  configuraUon設定  –  実行  

•  注意事項  –  以前 EMFStore  を使ったことのある場合（ホームディレクトリにあ

る） .emfstore  を削除してUI生成して下さい  

モデルコードとEditプロジェクトの生成

補足説明

•  Eclipse  –  Ecore  用としての Modeling  Package  以外に、Eclipse  の Plug-­‐in  

開発から派生した  RCP  (Rich  Client  PlaSorm)  及び    RAP  (Remote  ApplicaUon  PlaSorm)  の仕組みを活用しています  

•  Renderer  –  今回説明した SWT  Renderer の他に、JavaFX/RAP/Vaadin/AngularJS/Mobile  などの  Renderer  に取り組んでおり、モデル部分のシングルソース化＋ Renderer 選択、という形を目指しているようです  •  これはモデル確認というより開発工程での利用を想定したもの  

•  Eclipse  内の類似プロジェクト  –  EMF  Parsley  

補足説明

•  Example  Project  について  

–  メール送信ボタン追加（コード）  –  グループ定義（コード）  –  説明で使用したモデル  –  Eclipse  3  アプリケーション（コード）  –  Eclipse  4  アプリケーション（コード）  –  J2EE  RAP  アプリケーション（コード）  –  JavaFX  アプリケーション（コード）  –  シンプル  RAP  アプリケーション（コード）  –  ビューモデル  

注意事項  ・　バージョンの組み合わせの関係か現時点で JavaFX  は動作しませんでした  ・　RAP  を試すには  RAP  Tools  のインストール、バグ対応、環境設定が必要になります  　（Bug  462794  -­‐  EMF  Client  PlaSorm  with  RAP  Tutorial  bug:  target  file  入れ替え要）

まとめ

•  顧客とのまたはチーム内での、仕様・モデルレビューの際に ECP/EMF  Forms を使えば：  –  ほぼリアルタイムで GUI 表示出来るため  –  モデルの妥当性チェックを助けてくれます  –  早い段階から  GUI  確認が出来ます  –  結果として「開発効率アップ」が期待出来ます  

•  EclipseSource のプレゼンテーション（Maximilian  Kögel さん）にある、どういう場面で UI  モデリングを使うと良いか  è  次ページ　（特にオススメの箇所に枠を追記しました）

:  modeling  関連

参考： Pleiades  による  Eclipse日本語化

hCp://mergedoc.osdn.jp/index.html#/pleiades.html    Pleiades  

お疲れ様でした

以上でハンズオンを終わります 万能ではありませんが適した場面で使えば、役に立つツールです    ソフトウェア開発におけるモデル・モデリングの価値を高める為に、是非明日からでも活用されることを期待しています

参考

•  Project  Home  Page  –  hCp://www.eclipse.org/ecp/emfforms/  

•  Gepng  started  with  EMF  Forms  –  hCp://eclipsesource.com/blogs/tutorials/gepng-­‐started-­‐with-­‐EMF-­‐Forms/  

•  EMF  Forms:  Renderer  –  hCp://eclipsesource.com/blogs/tutorials/emf-­‐forms-­‐renderer/  

•  EMF  Forms:  Beyond  SWT  –  hCp://eclipsesource.com/blogs/2015/05/18/emf-­‐forms-­‐beyond-­‐swt/  

•  Building  Business  UIs  with  EMF  Forms  –  hCps://www.eclipsecon.org/na2015/sites/default/files/slides/Building

%20Business%20UIs%20with%20EMF%20Forms.pdf  

今日の範囲についてはこのページに書かれています