GUIプレゼンテーションフレームワークS2JFace

Size: px

Start display at page:

Download "GUIプレゼンテーションフレームワークS2JFace"

らむももき
5 years ago
Views:

1 GUI プレゼンテーションフレームワーク S2JFace ~ なぜあなたは Web アプリケーションを作り続けるのか ~ エスエムジー株式会社小森裕介 (komori@smg.co.jp) 株式会社グルージェント亀谷大樹 (kameya@gluegent.com) 1

2 はじめまして! 名前 : 小森裕介 Blog: 所属 : エスエムジー株式会社 ( 主な仕事 : Javaによる集中監視制御システム設計開発教育各種執筆活動 Seasar2 とのかかわり S2JFace コミッタ S2Container コミッタ S2JMS コミッタ名前 : 亀谷大樹 Blog: 所属 : 株式会社グルージェント ( 主な仕事 : OSS 開発 Seasar2 とのかかわり S2JFace コミッタ 2

3 はじめに Web アプリケーション開発でこんな思いしたことありませんか? え~! なんでこんな複雑なGUI 作らなきゃいけないの? Ajaxを広めたG gleなんか大嫌いだ! そもそもこのシステムWebでやる意味あるの? そんな悩める Java エンジニアに福音です! 3

4 Web アプリケーション開発の問題点 Thin クライアントであるがために複雑な画面がつくりにくい Ajax の普及で技術的には可能性が増えた案件の多くを占める業務システムは Web である必要性がない多くがイントラネット内で利用されるため利用者が限られている Web である縛りが画面デザインの自由度を下げ開発の難易度を上げている! Web が必要なのはクライアント管理が不要だから今ならば JavaWebStart など代替技術があるなぜあなたは Web アプリケーションを作り続けるのか? 4

5 GUI アプリケーション開発の問題点 (Javaによる) 適当なフレームワークが存在しない画面を作るのが面倒 GUIエディタも存在するが( 特にJavaでは ) 使いやすいものがない画面デザインとロジック開発の分担がしにくいプログラムがわからないと画面がつくれない (HTML ならプログラムがわからなくても画面がデザインできる ) 開発手法がある程度確立している Web アプリケーションとして作らざるをえない 5

6 システム開発における作業分担フロント SE 顧客と話し合って要件 & 画面仕様を詰めるコーディングはしない HTML モックなら書ける? 画面仕様は Word や Excel で書くことが多い大規模なシステムほど分担がはっきりする開発者画面仕様に沿って実際の画面を作成複雑な画面仕様に頭を抱えるバリバリコーディング! 6

7 プレゼンテーションとロジックの分離 S2JSF(Teeda) におけるプレゼンテーションとロジックの分離フロント SE 仕様を決めて HTML モックを作成する HTML モック HTML HTMLモックが中間成果物になる開発者 HTML モックを元に実際の動きをつける GUI の世界でもこのような分離ができるようにしたい 7

8 S2JFace とは XML による画面作成を可能とした GUI フレームワーク S2JSF ライクな画面とデータのバインディングをサポートもちろんロジックは POJO で OK 画面定義 XML XML XMLを元に画面を表示 S2JFace POJO 双方向のデータバインディング 8

9 S2JFace のアーキテクチャソフトウエア構成論理構成 S2JFace S2Container Java JFace SWT Eclipse Eclipseの提供する GUI GUI ツールキット & フレームワークプレゼンテーション層ビジネスロジック層データアクセス層 POJO S2Dao 等 S2JFace を意識するのはここだけ! 従来の Web アプリケーションと同じで OK! 9

10 なぜ SWT & JFace? 見た目 Windowsネイティブのコンポーネントを利用しているため画面上の違和感がない速さ Swing に見られるもたつきが少ない実績 Eclipse で培われた実績 JFace による開発のしやすさプラットフォームポータビリティ Swing に比べればポータビリティは多少下がる業務アプリケーションクライアントの大半が Windows である現状を考えるとほとんど問題にならない 10

11 S2JFace での画面定義独自の XML 形式で画面を記述 HTML に似た構文のため覚えやすい XML には画面デザイン以外の情報を持たせないのがポリシー <?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?> <template xmlns=" <template xmlns=" <window title=" 従業員情報編集 " width="400" height="300"> <window title=" 従業員情報編集 " width="400" height="300"> <gridlayout numcolumns="1"> <gridlayout numcolumns="1"> <griddata horizontalalignment="fill" <griddata horizontalalignment="fill" </gridlayout> </gridlayout> <composite> <composite> <gridlayout numcolumns="2"> <gridlayout numcolumns="2"> <griddata horizontalalignment="fill" <griddata horizontalalignment="fill" </gridlayout> </gridlayout> <label text=" 従業員 No." <label text=" 従業員 No." id="empno" id="empno" <label text=" 役職 " <label text=" 役職 " id="job" id="job" <label text=" 管理者 " <label text=" 管理者 " id="manager" id="manager" <label text=" 給与 " <label text=" 給与 " id="salary" id="salary" <label text=" 部署 " <label text=" 部署 " <combo id="department" style="drop_down, READ_ONLY" <combo id="department" style="drop_down, READ_ONLY" </composite> </composite> <composite> <composite> <filllayout type="horizontal" <filllayout type="horizontal" <button id="ok" text="ok <button id="ok" text="ok <button id="cancel" text=" キャンセル <button id="cancel" text=" キャンセル </composite> </composite> </window> </window> </template> </template> Eclipse-WTP 付属の XML エディタで補完しながら記述が可能将来的には GUI エディタも提供予定 11

12 GUI エディタ vs テキストエディタ GUI エディタ直感的な操作で簡単に画面が作れる自動化しにくいので画面の大量生産には不向きテキスト (XML) エディタタグを覚えなければならず敷居が高い独自ツールを作成すれば画面作成を自動化しやすい S2JFace はテキストエディタによる画面作成と GUI エディタによる画面作成の両方をサポート ( 予定 ) ( 予定 ) 12

13 S2JFace での画面とクラスの関係 1 画面につき 1 個の Java クラス ( コンポーネント ) が対応画面名称 +Action が命名規則いわゆるページ指向のフレームワーク EmployeeEdit という名前の画面 EmployeeEditAction S2JFace 独自の XML で記述アクションクラスは S2Container へ登録しておく <component <component name= EmployeeEditAction name= EmployeeEditAction class= org.seasar.jface.example.employee.employeeeditaction class= org.seasar.jface.example.employee.employeeeditaction 13

14 Method バインディング画面上のイベントに対してアクションクラスのメソッドを呼び出せるイベントとメソッドの関係はアノテーションで記述 Listenerクラスを作成する面倒なコーディングは不要! 画面上でボタンが押されると id が一致するメソッドを呼びだす EmployeeEditAction +okaction() <button <button id= ok id= ok text= OK text= ok ok ) public public void void okaction(){ okaction(){ } } 14

15 画面の初期化画面初期化時に呼び出されるメソッドもアノテーションで指定 public public void void initialize() initialize() { { } } アノテーションが付与できるのは 1 クラス 1 アノテートされたメソッドは引数戻り値無しであること画面表示に必要な初期情報は本メソッドの中で用意してフィールドにセットしておくこと (S2JSF の initializeaction と同じ ) 15

16 Widget インジェクションアクションクラスに対して画面上の widget を自動的にインジェクションできる widget オブジェクトの取り回しを考える面倒から解放! XML 上の id とアクションクラスのフィールド名が一致すれば自動的に設定 (setter メソッドは不要 ) id= empno id= empno id= job id= job id= manager id= manager id= salary id= salary <combo <combo id= department id= department EmployeeEditAction -Text empno -Text job -Text manager -Text salary -Combo department ok ok ) public public void void okaction(){ okaction(){ String String job job = = job.gettext(); job.gettext(); } } フィールドは Widget のサブクラスであること呼び出されたメソッドの中ですぐに利用可能 16

17 Value バインディング ( 値の取り出し ) テキストフィールドなどの入力系コントロールへ入力された値をアノテーションをフィールドに付与するとフィールドの型に入力値を変換してバインド id= empno id= empno id= job id= job id= manager id= manager id= salary id= salary <combo <combo id= department id= department EmployeeEditAction -int empno -String job -String manager -String salary -int department +okaction() Id とフィールド名が一致していれば id empno, type=bindtype.import) type=bindtype.import) private private int int private private String String job; job; 17

18 Value バインディング ( 値の設定 ) アクションクラスのフィールドからテキストフィールドなどの入力系コントロールへ値を直接バインドアノテートされたフィールドの値をテキストフィールドへ設定 EmployeeEditAction -int empno = 123 -String job = 担当 -String manager = 山田太郎 -String salary = 4,000,000 -int department = 2 +initialize() +okaction() 123 担当山田太郎 4,000,000 庶務 private private int int private private String String job; job; 18

19 Widget インジェクションと Value バインディングの使い分け Widget インジェクション SWT の Widget を直接意識する必要がある自由な画面操作が可能 Value バインディング SWT の Widget を意識せずデータのみを考えれば良いバリデーションが可能細かな画面操作は不可能 GUI GUIの見た目を変更する処理が必要な場合は Widget インジェクションデータのみを扱う場合は Value バインディングを利用する 19

20 S2JFace を利用した開発モデルフロント SE 顧客と打ち合わせをしながら GUI エディタで画面モック作成慣れている人は XML エディタで直接作成も可能基本的にロジックを意識する必要なしその場でデモンストレーションも可能インクリメンタルな開発も可能画面定義 XML 中間成果物として共有開発者画面定義 XML に ID を追加プレゼンテーション層以下を実際に作成 20

21 S2JFace の利用シーン (1) 単体アプリケーションのフレームワークとして最もシンプルな使い方個人レベルで作成するアプリケーションやツールの開発も可能 JavaWebStartを利用してサーバからの一括配布も可能 PC S2JFace S2Container Java JavaWebStart で配布サーバ 21

22 S2JFace の利用シーン (2) クライアントアプリケーションとして業務アプリケーションで最も多い利用が予想されるクライアント側はプレゼンテーション層までを実装サーバ側にロジック層以下を実装サーバ側には EJB を利用することも可能? クライアント S2JMS, S2RMI S2RMI で通信で通信サーバアプリケーション S2JFace S2Container Java ビジネスロジック S2Container Java

23 S2JFace のまとめ XML と GUI エディタの 2Way 開発敷居の低いGUIエディタ大量生産に適したXML 編集 GUIにおける画面とロジックの完全分離強力なデータバインディング Webアプリケーションシステムで作成したバックエンドがそのまま利用可能 JavaでGUI 開発を望む人にとっては福音 (^^; 23

24 今後の予定機能面バリューバインディング機能の向上バリデーション機能の提供画面定義 XML の簡素化 ( 継承コンポーネント機能 etc ) GUI 画面エディタの提供非機能面品質向上 ( テスト網羅性の向上 ) サンプルアプリケーションの充実ドキュメント & サイト整備 24

25 S2JFace のリソース Web サイトコミッタのブログこもりん日記大樹の色々日記衛星黒猫迷想記 25

26 最後に S2JFace は現在 Sandbox プロジェクトにて鋭意開発中ですみなさまからのご意見ご要望をお待ちしております 26

27 GUI プレゼンテーションフレームワーク S2JFace ~ なぜあなたは Web アプリケーションを作り続けるのか ~ エスエムジー株式会社小森裕介 (komori@smg.co.jp) 株式会社グルージェント亀谷大樹 (kameya@gluegent.com) 27

Uruma による、簡単リッチアプリケーション開発

Uruma による、簡単リッチアプリケーション開発 2007 Autumn うるま Uruma S2JFace による簡単! リッチアプリケーション開発 2007.11.11 エスエムジー株式会社小森裕介 (komori@smg.co.jp) 1 はじめまして! 名前 : 小森裕介 Blog:http://d.hatena.ne.jp/y-komori/ ( こもりん日記 ) 所属 : エスエムジー株式会社 (http://www.smg.co.jp)