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

(1)

Seasar Conference

2006 Autumn

GUI

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

S2JFace

~

~なぜ、あなたは

なぜ、あなたは

_Web

アプリケーションを作り続けるのか

_~

2006.11.12

エスエムジー株式会社小森裕介

株式会社グルージェント亀谷大樹

はじめまして！

•

• 名前：

名前：

小森

裕介

•

• Blog

Blog

：

http://d.hatena.ne.jp/y-komori/

•

• 所属：

所属：

エスエムジー株式会社（http://www.smg.co.jp）

エスエムジー株式会社

•

• 主な仕事：

主な仕事：

– Javaによる集中監視制御システム設計・開発

– 教育・各種執筆活動

•

• Seasar2

Seasar2

とのかかわり

– S2JFaceコミッタ、S2Containerコミッタ、S2JMSコミッタ

•

• 名前：

名前：

亀谷

大樹

•

• Blog

Blog

：

http://d.hatena.ne.jp/dkameya/

•

• 所属：

所属：

株式会社グルージェント（http://www.gluegent.com）

株式会社グルージェント

•

• 主な仕事：

主な仕事：

–

OSS開発

OSS

開発

•

• Seasar2

Seasar2

とのかかわり

– S2JFaceコミッタ

(3)

はじめに

• Webアプリケーション開発でこんな思い、

したことありませんか？

『え～！なんでこんな

複雑なＧＵＩ

作らなきゃいけないの？』

『・・・そもそも、このシステム

Webでやる意味あるの？』

『

Ajax

を広めた

G○○gleなんか、大嫌いだ！』

そんな悩める

Javaエンジニアに

福音です！

そんな悩める

Javaエンジニアに

福音です！

(4)

Web

アプリケーション開発の問題点

• Thinクライアントであるがために複雑な画面がつくりにくい

– Ajaxの普及で技術的には可能性が増えた

• 案件の多くを占める業務システムは「Web」である必要性

がない

– 多くがイントラネット内で利用されるため、利用者が限られている

– 「Web」である縛りが

画面デザインの自由度を下げ

、

開発の難易度を上げて

いる！

– Webが必要なのは「

クライアント管理が不要

」だから

– 今ならば JavaWebStart など、代替技術がある

なぜ、あなたは

Webアプリケーションを作り続けるのか？

なぜ、あなたは

Webアプリケーションを作り続けるのか？

(5)

GUI

アプリケーション開発の問題点

• （Javaによる）

適当な

フレームワーク

が存在しない

• 画面

を作るのが

面倒

– GUIエディタも存在するが

（特にJavaでは）

使いやすいものがない

• 画面デザインとロジック開発の

分担がしにくい

– プログラムがわからないと画面がつくれない

（HTMLならプログラムがわからなくても画面がデザインできる）

開発手法がある程度確立している

Webアプリケーションとして作らざるをえない

開発手法がある程度確立している

Webアプリケーションとして作らざるをえない

(6)

システム開発における作業分担

•フロントＳＥ

−顧客と話し合って要件＆画面仕様を詰める

−コーディングはしない

−HTMLモックなら書ける？

−画面仕様はWordやExcelで書くことが多い

•開発者

−画面仕様に沿って実際の画面を作成

−複雑な画面仕様に頭を抱える

−バリバリコーディング！

大規模なシステムほど分担がはっきりする

(7)

プレゼンテーションとロジックの分離

• S2JSF

（Teeda）

におけるプレゼンテーションとロジックの分離

•フロントＳＥ

−仕様を決めてHTMLモックを作成する

•開発者

−HTMLモックを元に実際の動きをつける

HTMLモックが

中間成果物になる

HTMLモックが

中間成果物になる

HTMLモック

GUIの世界でもこのような分離ができるようにしたい

(8)

S2JFace

とは

• XMLによる画面作成

を可能としたGUIフレームワーク

• S2JSFライクな画面と

データのバインディング

をサポート

• もちろんロジックは

POJO

でＯＫ

画面定義XML

Ｓ２ＪＦａｃｅ

POJO

XMLを元に

画面を表示

XMLを元に

画面を表示

双方向の

データバインディング

双方向の

データバインディング

(9)

プレゼンテーション層

S2JFace

のアーキテクチャ

Java 5.0

S2Container 2.4

S2JFace

• ソフトウエア構成

ビジネスロジック層

データアクセス層

POJO

S2Dao等

• 論理構成

S2JFace

を意識するのはここだけ

!

従来の

Webアプリケーションと

同じでＯＫ！

SWT

JFace

_{るGUIツールキット}

Eclipseの提供す

＆フレームワーク

Eclipseの提供す

るGUIツールキット

(10)

なぜ

_{SWT & JFace}

？

•

• 見た目

見た目

– Windowsネイティブのコンポーネントを利用しているため、画

面上の違和感がない

•

• 速さ

速さ

– Swingに見られるもたつきが少ない

•

• 実績

実績

– Eclipseで培われた実績

– JFaceによる開発のしやすさ

•

• プラットフォーム・ポータビリティ

プラットフォーム・ポータビリティ

– Swingに比べればポータビリティは多少下がる

– 業務アプリケーションクライアントの大半がWindowsである

現状を考えるとほとんど問題にならない

(11)

S2JFace

での画面定義

• 独自のXML形式で画面を記述

• HTMLに似た構文のため、覚えやすい

• XMLには

画面デザイン以外の情報を持たせない

のがポリシー

•Eclipse-WTP付属のXMLエディタで補完しな

がら記述が可能

•将来的にはGUIエディタも提供予定

<?xml version="1.0" encoding="UTF-8"?> <template xmlns="http://s2jface.sandbox.seasar.org"> <window title="従業員情報編集" width="400" height="300">

<gridLayoutnumColumns="1"> <gridDatahorizontalAlignment="FILL"/> </gridLayout> <composite> <gridLayoutnumColumns="2"> <gridDatahorizontalAlignment="FILL"/> </gridLayout> <labeltext="従業員No."/> <textid="empNo"/> <labeltext="役職"/> <textid="job"/> <label text="管理者" /> <text id="manager" /> <label text="給与" /> <text id="salary" /> <label text="部署" />

<comboid="department"style="DROP_DOWN, READ_ONLY"/> </composite>

<fillLayouttype="HORIZONTAL"/> <buttonid="ok"text="OK“/>

<buttonid="cancel"text="キャンセル“/> </composite>

</window> </template>

(12)

GUI

エディタ

vs

テキストエディタ

• GUIエディタ

– 直感的な操作で簡単に画面が作れる

– 自動化しにくいので画面の大量生産には不向き

• テキスト（XML）エディタ

– タグを覚えなければならず、敷居が高い

– 独自ツールを作成すれば画面作成を自動化しやすい

S2JFaceはテキストエディタによる画面作成と

GUIエディタによる画面作成の両方をサポート

（予定）

S2JFaceは

テキストエディタ

による画面作成と

GUIエディタ

による画面作成の両方をサポート

（予定）

(13)

S2JFace

での画面とクラスの関係

• 1画面につき1個のJavaクラス（コンポーネント）が対応

• 「

画面名称

+

Action

」が命名規則

• いわゆる「

ページ指向

」のフレームワーク

EmployeeEdit

Action

「

EmployeeEdit

」

という名前の画面

S2JFace独自の

XMLで記述

アクションクラスは

S2Containerへ登録しておく

(14)

画面上でボタンが押されると

id が一致するメソッド

を呼びだす

Method

バインディング

（

@

_@

EventListener

）

• 画面上のイベントに対して、アクションクラスのメソッドを呼び出せる

• イベントとメソッドの関係は

アノテーション

で記述

Listenerクラスを作成する面倒なコーディングは不要！

EmployeeEdit

Action

+okAction()

<button id=“ok” text=“OK” />

<button id=“ok”

text=“OK” />

@EventListener(id=“ok”)

public void okAction(){

・・・

}

@EventListener(

id=“ok”

)

public void okAction(){

・・・

(15)

画面の初期化

（

_@

_{InitializeMethod}

）

• 画面初期化時に呼び出されるメソッドもアノテーションで指定

EmployeeEdit

Action

+initialize()

@InitializeMethod

public void initialize() {

・・・

}

@InitializeMethod

public void initialize() {

・・・

}

画面に対応するアクションクラスの中で

@InitializeMethod

アノテーションを付与され

たメソッドが画面表示前に呼び出される。

※ @InitializeMethod アノテーションが付与できるのは1クラス1個まで

※ @InitializeMethod アノテートされたメソッドは引数・戻り値無しであること

画面表示に必要な初期情報は、本メソッドの

中で用意してフィールドにセットしておくこと。

（S2JSFのinitializeActionと同じ）

(16)

Widget

インジェクション

• アクションクラスに対して、画面上のwidgetを自動的にインジェクションできる

widgetオブジェクトの取り回しを考える面倒から解放！

EmployeeEditAction

-Text

empNo

-Text

job

-Text

manager

-Text

salary

-Combo

department

+okAction()

<text id=“empNo” />

<text id=“job” />

<text id=“manager” />

<text id=“salary” />

<combo id=“department” />

<text id=“empNo” />

<text id=“job” />

<text id=“manager” />

<text id=“salary” />

<combo id=“department” />

@EventListener(id=“ok”)

public void okAction(){

String job = job.getText();

}

@EventListener(id=“ok”)

public void okAction(){

String job = job.getText();

}

XML上の

id

とアクションクラスの

フィールド名

が一致すれば

自動的に設定（setterメソッドは不要）

呼び出された

メソッドの中で

すぐに利用可能

フィールドはWidgetの

サブクラスであること

(17)

Value

バインディング（値の取り出し）

• テキストフィールドなどの入力系コントロールへ

入力された値を、アクションクラスへ直接バインド

EmployeeEditAction

-int

empNo

-String

job

-String

manager

-String

salary

-int

department

+okAction()

<text id=“empNo” />

<text id=“job” />

<text id=“manager” />

<text id=“empNo” />

<text id=“job” />

<text id=“manager” />

<text id=“salary” />

@BindingValue(id=“empNo”,

type=BindType.Import)

private int empNo;

@BindingValue(type=BindType.Import)

private String job;

・・・

@BindingValue(id=“empNo”,

type=BindType.Import)

private int empNo;

@BindingValue(type=BindType.Import)

private String job;

・・・

@BindingValue(type=BindType.Import)

アノテーションをフィールドに付与すると

フィールドの型に入力値を変換してバインド

Idとフィールド名が一致していれば

id引数は省略可能

(18)

123 担当

山田太郎

¥4,000,000

庶務2課

Value

バインディング（値の設定）

• アクションクラスのフィールドからテキストフィールドなどの

入力系コントロールへ値を直接バインド

EmployeeEditAction

-int

empNo

= 123

-String

job

= “担当”

-String

manager

= “山田太郎”

-String

salary

= “¥4,000,000”

-int

department

= 2

+initialize()

+okAction()

_{@BindingValue(type=Bindtype.Export)}

private int empNo;

@BindingValue(type=Bindtype.Export)

private String job;

@BindingValue(type=Bindtype.Export)

private int empNo;

@BindingValue(type=Bindtype.Export)

private String job;

画面表示時に

@BindingValue(type=BindType.Export)

(19)

Widget

インジェクションと

Value

バインディングの使い分け

• Widgetインジェクション

– SWTのWidgetを直接意識する必要がある

– 自由な画面操作が可能

• Valueバインディング

– SWTのWidgetを意識せずデータのみを考えれば良い

– バリデーションが可能

– 細かな画面操作は不可能

GUIの見た目を変更する処理が必要な場合はWidgetインジェクション

Valueバインディングを利用する

(20)

S2JFace

を利用した開発モデル

•フロントＳＥ

−顧客と打ち合わせをしながらGUIエディタで画面モック作成

−慣れている人はXMLエディタで直接作成も可能

−基本的にロジックを意識する必要なし

−その場でデモンストレーションも可能

画面定義XML

•開発者

−画面定義XMLにIDを追加

−プレゼンテーション層以下を実際に作成

中間成果物

として共有

中間成果物

として共有

インクリメンタル

な開発も可能

インクリメンタル

な開発も可能

(21)

S2JFace

の利用シーン（１）

• 単体アプリケーションのフレームワークとして

–最もシンプルな使い方

–個人レベルで作成するアプリケーションやツールの開発も可能

–JavaWebStartを利用して

サーバからの一括配布

も可能

S2JFace

S2Container 2.4

Java 5.0

PC

サーバ

JavaWebStartで配布

(22)

S2JFace

の利用シーン（２）

• クライアントアプリケーションとして

– 業務アプリケーションで最も多い利用が予想される

– クライアント側はプレゼンテーション層までを実装

– サーバ側にロジック層以下を実装

– サーバ側にはEJBを利用することも可能？

アプリケーション

S2JFace

S2Container 2.4

Java 5.0

クライアント

ビジネスロジック

S2Container 2.4

Java 5.0

サーバ

S2JMS,

S2RMIで通信

S2JMS

,

S2RMI

で通信

(23)

S2JFace

のまとめ

• XMLとGUIエディタの

2Way開発

– 敷居の低いGUIエディタ

– 大量生産に適したXML編集

• GUIにおける画面とロジックの

完全分離

• 強力な

データバインディング

• Webアプリケーションシステムで作成した

バックエンドがそのまま利用可能

• JavaでGUI開発

を望む人にとっては福音

(^^;

(24)

今後の予定

•

• 機能面

機能面

– バリューバインディング機能の向上

– バリデーション機能の提供

– 画面定義XMLの簡素化

(継承、コンポーネント機能、etc…)

– GUI画面エディタの提供

•

• 非機能面

非機能面

– 品質向上（テスト網羅性の向上）

– サンプルアプリケーションの充実

– ドキュメント＆サイト整備

(25)

S2JFace

のリソース

•

• Web

Web

サイト

–

http://s2jface.sandbox.seasar.org/ja/

•

• コミッタのブログ

コミッタのブログ

– こもりん日記

• http://d.hatena.ne.jp/y-komori/

– 大樹の色々日記

• http://d.hatena.ne.jp/dkameya/

– 衛星黒猫迷想記

• http://d.hatena.ne.jp/bskuroneko/

(26)

最後に

S2JFaceは現在

Sandboxプロジェクトにて

鋭意開発中です

みなさまからのご意見、

ご要望をお待ちしております

(27)

Seasar Conference

2006 Autumn

GUI

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

S2JFace

~

~なぜ、あなたは

なぜ、あなたは

_Web

アプリケーションを作り続けるのか

_~

2006.11.12

エスエムジー株式会社小森裕介

（[email protected]）

株式会社グルージェント亀谷大樹

（[email protected]）

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

Seasar Conference

Seasar Conference

2006 Autumn

2006 Autumn

GUI

GUI

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

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

S2JFace

S2JFace

~

~なぜ、あなたは

なぜ、あなたは

Web

Web

アプリケーションを作り続けるのか

アプリケーションを作り続けるのか

~

~

2006.11.12

エスエムジー株式会社 小森 裕介

（[email protected]）

株式会社グルージェント 亀谷 大樹

（[email protected]）

はじめまして！

はじめまして！

•

•

名前：

名前：

小森

小森

裕介

裕介

•

•

Blog

Blog

：

：

http://d.hatena.ne.jp/y-komori/

•

•

所属：

所属：

エスエムジー株式会社（http://www.smg.co.jp）

エスエムジー株式会社

•

•

主な仕事：

主な仕事：

– Javaによる集中監視制御システム設計・開発

– 教育・各種執筆活動

•

•

Seasar2

Seasar2

とのかかわり

とのかかわり

– S2JFaceコミッタ、S2Containerコミッタ、S2JMSコミッタ

•

•

名前：

名前：

亀谷

亀谷

大樹

大樹

•

•

Blog

Blog

：

：

http://d.hatena.ne.jp/dkameya/

•

•

所属：

所属：

_Web

_Web

_~

_~

エスエムジー株式会社小森裕介

株式会社グルージェント亀谷大樹

『え～！なんでこんな