EMF Forms Introduction
3 likes1,837 views
EMF Forms の使い方を日本語で説明したスライド EMF Forms ハンズオン（http://mbsdcjapan.connpass.com/event/14932/）で使用
![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開発に新たな方法を提供。手作業でフォーム
ベースのレイアウトをコーディングするのではなく、単純なモデルを記述すれば済
むようになる・・・」](https://image.slidesharecdn.com/emfforms-150604000606-lva1-app6891/85/EMF-Forms-Introduction-13-320.jpg)
EMF Forms Introduction
- 1. EMF Forms ーー 今日使い方を身につけ、明日からご活用ください ーー 2015.06.03 田中
- 2. EMF Forms 開発元からのメッセージ • Live-‐Test: EMF Forms vs. Manually Coding UIs – hCps://www.youtube.com/watch?v=KQliJCX7zNE – オリジナルは上の動画ですが、本日のハンズオンでは日本語 キャプション付き特別版をご覧頂きます
- 3. はじめに • EMF Client PlaSorm と EMF Forms は Eclipse Modeling Project に 含まれるプロジェクトです • 本日は EMF Forms を「コードを書かずに利用出来る範囲」に限定 してお話します – 説明する使い方はドキュメンテーションに全て書かれています（英語） – 今日はその範囲で概要を説明しハンズオンで使い方を練習します • 謝辞 – 今回のリソースをオープンソースとして公開して頂いている Eclipse FoundaUon、EMF Forms を推進している EclipseSource 社、そして EMF Forms の Contributors に感謝します
- 4. アジェンダ • イントロダクション – モデルから UI を生成するということ – Ecore モデルについて – EMF -‐> ECP -> EMF Forms • ハンズオン – Eclipse Modeling Package インストール・動作確認 – EMF Forms 例題の動作・プロジェクト内容確認 – Ecore モデルの作成 • モデリングプロジェクト作成 • Ecore モデル作成 （Ecore Tools 等） • EMF コード生成 （Eclipse Modeling Framework: EMF） – ビューモデル作成 – SWT Renderer を使った UI 生成
- 5. モデル実行 モデルから UI を生成するということ • どんな状況で使えるのか？ – CONTEXT: モデルベースソフトウェア開発 モデル開発 ソフトウェア開発 （モデル変換等） ソフトウェア 作成したモデルがシナリオ やユーザストーリーをサポー トしているか ・ データモデルのほぼ即時 確認、仕様の早期収束 UIのマニュアルコーディング はできれば避けたい ・ モデル変換でUIを生成す れば、UI修正はモデル修正 で済む こちらが本日の主題 補足で少し触れます
- 6. モデルから UI を生成するということ • （作業）モデルの確認とは – モデルには構造を表すモデルと振る舞いを表すモデルがあります • 構造を表すモデル：クラス図、コンポーネント図、パッケージ図など • 振る舞いを表すモデル：ステートマシン図、アクティビティ図、シーケンス図など – モデルの確認とは、書かれたモデルが矛盾を含まないことの確認で はなく、モデルが素データ（シナリオ他やそこから作成したオブジェク ト図・インスタンス図）を間違いなくサポートしていることを確認するこ とです • 例）見落としたクラスがあり、期待するオブジェクト図（値）に至らない • 例）継承関係が逆の箇所があり、期待するオブジェクト図（値）に至らない • 例）シナリオにある手順に従いデータ投入しても、期待するオブジェクト図（値）に 至らない
- 7. モデルから UI を生成するということ • （作業）モデルの確認とは – 振る舞いを表すモデルの場合、通常シミュレーションが使われますが、 構造を表すモデルの場合どうするのでしょう？ – 少なくともクラス図（相当）で表現するデータモデルの場合、UI を生成 出来れば、そこで素データが期待通り投入出来るか確認できます – もちろん、モデルベース開発の一部として最終的な UI 生成もありま す Customer Business Analyst/Modeler/ System Engineer Scenario/ User stories
- 8. Ecore モデルについて • EMF (Eclipse Modeling Framework) で扱うモデルが Ecore モデル – 仕様：MOF (Meta-‐Object Facility) の一部 – 記法：UML Class 図のサブセット • 継承、属性、操作等は書けます • 関連相当はありません（属性に参照が書けることで代用） • 関連クラス相当は書けません • N項関連相当は書けません • ステレオタイプは使えません 等
- 9. Ecore モデルについて • File – > New – > Project
- 10. Ecore モデルについて
- 11. Ecore モデルについて
- 12. EMF で出来ること • .genmodel -‐> generate all 木構造型 エディター 属性エディター
- 13. 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開発に新たな方法を提供。手作業でフォーム ベースのレイアウトをコーディングするのではなく、単純なモデルを記述すれば済 むようになる・・・」
- 15. EMF Client PlaSorm で出来ること • フォーム化（No coding）
- 16. EMF Forms で出来ること • SWT アプリケーション化（No coding）
- 17. EMF Forms で出来ること • EMF Forms の仕組み： View Model 導入 Building Business UIs with EMF Forms
- 19. Eclipse Modeling Package インストール • 事前準備として Eclipse Modeling Package のインストールをお願いしまし た： これを前提として進めます • Eclipse を起動してください • Help -‐> InstallaUon Detail をみてください ECP SDK 配下に EMF Forms が 含まれています 注） 日本語データを扱う場合： ・ 環境設定 -‐> ・ General -‐> ・ Workspace で text file encoding が UTF-‐8 であることを確認して下さい
- 20. EMF Forms サンプル • File -‐> New -‐> Example -‐> EMF Forms -‐> Make it happen: example model を選択し finish
- 21. Ecore モデルの作成 • model プロジェクトと model.edit プロジェクトの二つが生成さ れます （Ecore ファイルの中身を確認しましょう）
- 22. Ecore モデルの作成 • Ecore モデルをダイアグラム表示すると次のようになります
- 23. viewmodel の作成 • .ecore -‐> context menu -‐> New -‐> Other -‐> EMF Forms -‐> View Model Project • プロジェクト名：モデルプロジェクト名+.viewmodel • モデル：workspace から .ecore ファイルを選択 • EClass ： UI 化する EClass を選択
- 24. viewmodel の作成
- 25. viewmodel の作成 • 試しに lastName を見てみましょう – 幾つか設定が可能です
- 26. viewmodel の作成 • プレビューを表示出来ます – ビューエディターの右端にあるアイコンをダブルクリックします
- 27. viewmodel の作成 • viewmodel を書き換えてみましょう – 下の手順で Horizontal/VerUcalLayout を配置し項目を移動します もしくは、次のページのようにします
- 28. viewmodel の作成 • viewmodel を書き換えてみましょう – 一部または全部の項目を削除し、必要な項目対応の Control を生成できます
- 30. SWT アプリケーションの作成 • Run -‐> Run configuraUon: Main tab 任意の名前 こちらを選択 org.eclipse.emf.ecp.applicaUon.e3.applicaUon を選択
- 31. SWT アプリケーションの作成 • Run -‐> Run configuraUon: Plug-‐ins tab org.eclipse.emf.ecp.demo.e3.feature を選択 これをクリック
- 32. SWT アプリケーションの作成 • Run -‐> Run configuraUon: Plug-‐ins tab workspace にある三つのプロジェクトを Plug-‐ins に追加
- 33. SWT アプリケーションの作成 • Run -‐> Run configuraUon: Plug-‐ins tab 最後に Run をクリック
- 34. SWT アプリケーションの作成 新たな Eclipse インスタンスが立ち上がり、このような UI を備えたアプリケーションが現れる 新規プロジェクト作成
- 35. SWT アプリケーションの作成
- 36. SWT アプリケーションの作成
- 37. それでは試してみましょう • テーマは Order Management です このEcoreモデルを作成し UI を生成して下さい 顧客 注文 注文明細 商品 名前：EString 注文番号：Eint 注文日付：EDate 個数：EInt 名前：Estring 価格：Eint
- 38. それでは試してみましょう • 手順： – Ecore Modeling Project （モデリングプロジェクト）作成 – Ecoreモデル作成（グラフィカルエディター利用） – genmodelに基づくコード生成 – viewmodelプロジェクト作成 – viewmodelの編集（何もしなくても良い） – Run configuraUon設定 – 実行 • 注意事項 – 以前 EMFStore を使ったことのある場合（ホームディレクトリにあ る） .emfstore を削除してUI生成して下さい モデルコードとEditプロジェクトの生成
- 39. 補足説明 • 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
- 40. 補足説明 • 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 入れ替え要）
- 42. まとめ • 顧客とのまたはチーム内での、仕様・モデルレビューの際に ECP/EMF Forms を使えば： – ほぼリアルタイムで GUI 表示出来るため – モデルの妥当性チェックを助けてくれます – 早い段階から GUI 確認が出来ます – 結果として「開発効率アップ」が期待出来ます • EclipseSource のプレゼンテーション（Maximilian Kögel さん） にある、どういう場面で UI モデリングを使うと良いか è 次ページ （特にオススメの箇所に枠を追記しました）
- 43. : modeling 関連
- 44. 参考： Pleiades による Eclipse日本語化 hCp://mergedoc.osdn.jp/index.html#/pleiades.html Pleiades
- 45. お疲れ様でした 以上でハンズオンを終わります 万能ではありませんが適した場面で 使えば、役に立つツールです ソフトウェア開発におけるモデル・モ デリングの価値を高める為に、是非 明日からでも活用されることを期待 しています
- 46. 参考 • 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 今日の範囲についてはこのページに書かれています