emf forms introduction
TRANSCRIPT
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項関連相当は書けません • ステレオタイプは使えません 等
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開発に新たな方法を提供。手作業でフォーム
ベースのレイアウトをコーディングするのではなく、単純なモデルを記述すれば済むようになる・・・」
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
viewmodel の作成
• .ecore -‐> context menu -‐> New -‐> Other -‐> EMF Forms -‐> View Model Project
• プロジェクト名:モデルプロジェクト名+.viewmodel • モデル:workspace から .ecore ファイルを選択 • EClass : UI 化する EClass を選択
viewmodel の作成
• viewmodel を書き換えてみましょう – 下の手順で Horizontal/VerUcalLayout を配置し項目を移動します
もしくは、次のページのようにします
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 を選択
これをクリック
それでは試してみましょう
• テーマは 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 モデリングを使うと良いか è 次ページ (特にオススメの箇所に枠を追記しました)
お疲れ様でした
以上でハンズオンを終わります 万能ではありませんが適した場面で使えば、役に立つツールです ソフトウェア開発におけるモデル・モデリングの価値を高める為に、是非明日からでも活用されることを期待しています
参考
• 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
今日の範囲についてはこのページに書かれています