UiBinder ～ GWT-RPC
白山 文彦＆ や ひ ＇
京都 GTUG
大学生
好 ：静的型付 言語 Linux
Twitter: @fshiroyama
う く 願いい
正式 称 Kyoto Google Technology User
Group => Kyoto GTUG
純粋 Google 理解 習得
活動 非営利団体
々 世界 最 活 GTUG ！ 機会
ひ 参 く い！
◦ http://kyoto-gtug.org/
◦ http://group.kyoto-gtug.org/
京都 株式会社
◦ http://www.krp.co.jp/
会場 京都 株式会社様 後
援 無料 利用 い い
勉強会 少 理解 助
面白 感 く 場合 ひ京都
様 前 共 等 書い い
ば 嬉 い
GWT2.0 目玉機能 UiBinder 使 ビ
分 作 挑戦
GWT-RPC 使 自分 定義 型オ
非 期通信 渡
く使わ ン ン 実際 コ 確認
動的 コン ン 簡単 構築可能 あ 体験
本日 第一回 初 方 対象
ほ 内容 場 う
付 合い い m(_ _)m
統合開 環境 Eclipse 導入
◦ http://www.eclipse.org/
Google Plugin for Eclipse 導入
◦ http://code.google.com/intl/en/appengine/docs/ja
va/tools/eclipse.html#Installing_the_Google_Plugin
_for_Eclipse
Google AppEngine 録
◦ http://code.google.com/intl/ja/appengine/
本日解説 ン コ
◦ http://kyoto-gtug-for-
staff.googlecode.com/svn/trunk/shiroyama/gwt/Us
erControl (Subversion )
資料 全ソ コ 載 訳 い い
要点 解説 い 部分 多々あ
興味 あ 方 準備 記載 SVN
ソ コ く
い
不明 点 質疑応答 時間 質問い
ば幸い
以 ML 利用く い！
◦ http://groups.google.com/group/gwt-jp
優秀 ン 数
型紙 作 出 出来 元 必要
追 く 簡単 う
◦ ※ 準備 参照 Google Plugin for Eclipse 導
入 い く い
ン
ビ 時 JavaScript 変換
部分
JavaServlet
処理 担う部分
共通 利用 部分
入力
作 く 便利 DOM 生 コン
ン 動的 挿入
HTML
div id=“menu” div id=“main”
作 ン
検索 ン
Menu.java
UserCreate.java
or
UserSearch.java
メ ンコン ン 表示領域
ン 利用 簡単
UiBinder XML 対応 Java ソ
生
ン 右
順 選択 く
入力 Finish
GWT EntryPoint 実装 起点
初期化処理
onModuleLoad() メソ 記述
一般的 RootPanel.get( “div 指定
ID” ).add(Widget ); いう構
う
public class UserControl implements EntryPoint {
public void onModuleLoad() {
Widget menu = new Menu();
Widget main = new UserCreate();
// Use RootPanel.get() to get the entire body element
RootPanel.get("menu").add(menu);
RootPanel.get("main").add(main);
}
}
Widget
div id 指定
追 表示
次 メ 作 UiBinder 解説
参考 Menu.java, Menu.ui.xml 作
XML 編集 ビ 部分 作
GWT 対応 一意 前
担当 Java ソ 制御 準備
Java ソ 記述 く
<ui:style>
</ui:style>
<g:HTMLPanel>
<div>
<g:Button ui:field="btnCreate"> 作 </g:Button>
</div>
<div>
<g:Button ui:field="btnSearch"> 検索 </g:Button>
</div>
</g:HTMLPanel>
HTML 中 実際
HTML や Widget
オ 子要素
Button 対応
Struts う
利用
対応 Java ソ
オ 制御
一意 前 い
@UiField
Button btnCreate;
@UiField
Button btnSearch;
public Menu() {
initWidget(uiBinder.createAndBindUi(this));
}
宣言 以後
扱う
！
コ 分 可
能 い
正確 メソ 呼
初期化
い う 消 わ い
@UiHandler("btnCreate")
void onClickCreate(ClickEvent e) {
clear();
add(new UserCreate());
}
コ コ 等価
あ
btnCreate.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
// hoge
}
});
ン ！
ン い
ン 型 指定
オ ン 拾い ば
MouseOverEvent e
う 変更 捕 え ！
GWT Java 基本型や String 型
定義 型 オ RPC 通信 送
信 出来
定義 型 オ RPC 通信
送 信 IsSerializable ン
実装 い 必要 あ
UserCreate.java コ 解説 通
GWT-RPC 方法 確認 い う 思い
public class UserData implements IsSerializable {
private String name;
private String mailAddress;
private String password;
/* setter, getter 省略 */
}
特 問題あ
UserData 型 引数 返 値 戻 いメソ
追
GreetingServiceAsync.jav
a 対応 メソ 無い
出
Generate method
選択
GreetingServiceAsync.jav
a 対応 メソ 自動生
先程 2 作 メソ 実装 server
GreetingServiceImpl.java 実装
工程 先程 う 警告 表示
い 自動生
未実装 メソ 追
実際 記述
@Override
public void createUser(UserData data) {
String name = data.getName();
String mailAddress = data.getMailAddress();
String password = data.getPassword();
PersistentUserData storeData = new PersistentUserData();
storeData.setName(name);
storeData.setMailAddress(mailAddress);
storeData.setPassword(password);
PersistenceManager pm = PMF.get().getPersistenceManager();
try {
pm.makePersistent(storeData);
} finally {
pm.close();
}
}
引数 UserData オ
出
AppEngine
DataStoreAPI(JDO )
使 情報
永続化
GWT 少 話 逸 AppEngine JDO
う 作法 簡単 永続化 出来
興味 あ 方 京都 GTUG ャ 山
書 記事 参照く い！
◦ Google App Engine for Java 使 う！
＆ 5 ＇ Datastore Java API
◦ http://codezine.jp/article/detail/3904//api.class.p
hp
先程 実際 作 メ
ソ 追
今度 ン 利用 例
う
例 UiBinder 使
UserCreate いう 前 新規作 く い
<g:HTMLPanel>
<div class="{style.left}"> :</div>
<div>
<g:TextBox styleName="{style.textBox}" ui:field="tbName" />
</div>
<div class="{style.left}">メ :</div>
<div>
<g:TextBox styleName="{style.textBox}" ui:field="tbMail" />
</div>
<div class="{style.left}"> ワ :</div>
<div>
<g:PasswordTextBox styleName="{style.textBox}" ui:field="tbPassword" />
</div>
<div class="{style.left}"> </div>
<div>
<g:Button styleName="{style.button}" ui:field="btnCreate">作 :</g:Button>
</div>
</g:HTMLPanel>
ほ 普通
HTML 問
題 い う
ン 追 い部
分 う オ
表 表記
実装 内容 入力
メ ワ 作
ン 押 送信 結果
いう処理
private final GreetingServiceAsync greetingService = GWT .create(GreetingService.class);
/* 中略 */
@UiHandler("btnCreate") void onClick(ClickEvent e) {
greetingService.createUser(data, new AsyncCallback<Void>() {
@Override
public void onSuccess(Void result) {
dialog.center(" [" + name + "] 作 "); }
@Override
public void onFailure(Throwable caught) {
dialog.center(" [" + name + "] 作 失敗 "); GWT.log("Failed to create user: " + name, caught);
} });
}
GreetingServiceAs
ync 型 変数 宣言
メソ 呼べ
う
非 期通信 終わ ば引数
型 結果 返
＆ 例 結果
い い＇
実際 コ ン 押 後以 う 処
理 実装 い 興味 あ 方 ソ 覗い
く い！
◦ 入力
◦ 結果 返 来 ン
◦ 非 期通信中 表示
◦ 結果 表示
今回 や べ
UiBinder 使 ビ 分 う
ン べ 任
実装 集中
情報 出来 引
出 部分 作
基本的 流 作 全く
疑問 思 作 解説
戻 確認く い
<g:HTMLPanel>
<div>
<div class="{style.left}"> 検索 :</div>
<div>
<g:TextBox styleName="{style.right}"
ui:field="tbSearch" />
</div>
<div class="{style.blank}"> </div>
<div styleName="{style.right}">
<g:FlowPanel ui:field="panel" />
</div>
</div>
</g:HTMLPanel> 検索結果
や メ セ
挿入
検索 結果 メソ あ
GreetingService.java,
GreetingServiceAsync.java,
GreetingServiceImpl.java, 追 あ
◦ ※createUser 流 解説 省略
折角 如何 非 期通信！ 感 出
敢え ン 設 文字
入力 ン 捕 え 非
期通信
@UiHandler("tbSearch")
void onKeyUp(KeyUpEvent e) {
final String userName = tbSearch.getText().trim();
greetingService.searchUser(userName, new AsyncCallback<List<UserData>>() {
@Override
public void onSuccess(List<UserData> result) { panel.clear();
for (UserData data : result) {
UserAnchor a = new UserAnchor(data); panel.add(a);
} }
@Override
public void onFailure(Throwable caught) {
GWT.log(“erro: " + userName, caught); }
}); }
