EMF Forms Introduction
•
3 likes•1,830 views
EMF Forms の使い方を日本語で説明したスライド EMF Forms ハンズオン（http://mbsdcjapan.connpass.com/event/14932/）で使用
Recommended
More Related Content
What's hot
Viewers also liked
Viewers also liked (20)
Similar to EMF Forms Introduction
Similar to EMF Forms Introduction (20)
More from Akira Tanaka
More from Akira Tanaka (20)
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 今日の範囲についてはこのページに書かれています