勉強会資料 Google Developer Group 京都

(1)

GWT ^入門

2.0 ^話

越智洋司京都 _GTUG ッ

第 ₁ 回 Google Web Toolkit ^勉強会 in ^京都 (#gwt_kyoto)

(2)

く自己紹

□ 某私立大学教員理工系

□ 昨冬 Google Wave Hackathon ^初参

→ ^ッ ^新入

□ _e-Learning 研究開専門

→ ^最新 ^技術動向 ^関心あ

基曓的ン好

実践的あいうわけあ

□ い効率良く開進いく？学生指導含

→ GWT ^目 ^け ^実 ^半年ほ ^前

(3)

曓日話内容

多少私思い違い偏見？あ

→ ^適時突 ^込 ^く ^い

前半： _GWT 入門編担当：越智

GWT ^概要

GWT RPC

UIBinder

後半：実装編担当：白山

記使実装体験う

白山急遽席越智＆ッ対応

(4)

GWT ^何

□昨ン開ン

志向時代

JavaScript ^ン ^処理

□ 側動作 _AJAX ンン _Java

記述最適 JavaScript ^ン

ワ

Java JavaScript

(5)

GWT ^標準 ^ン ^ン

標準的 _GUI 部品対応

WidgetList

http://code.google.com/intl/ja/webtoolkit/doc/latest/RefWidgetGallery.html

(6)

GWT ^使う ^ッ

□ 側ン側

Java ^け ^開

○言語教え手間省け

○ _JavaScript 嫌い苦手 _Java 救世主！

JavaScript ^開 ^大変

○言語様貧弱

○開環境曑整備

GWT ^利用

Java ^言語 ^様や開 ^環境 ^利用

(7)

GWT ^使う ^ッ

□ 間互換性問題い _GWT 解決

Chrome, Internet Explorer, Firefox, and Safari…etc

主要対応 _JavaScript 自動変換

毎 _JavaScript 用意必要い

(8)

GWT ^使

私研究場合

○研究主 _Java 中心

○講義＆ _Java 関係一習わ

△ 状態い教え？

→ ワ絶え模索日々

JSF ^派 ^資料少 ^い ^ワ ^わ ^い

△ _JavaScript 作ッ！

半年前 _GWT 出会い

年生わ数月作

(9)

Web ^時代 ^い

HTML ^場 JavaScript ^事実 ^言語

→ _JavaApplet や _Flash 実装終焉

JavaScript ^開 ^困難 GWT

最高ン！！

JavaScript Web

Java GWT

(10)

代表的 _JavaIDE _GWT 対応

Google Plugin for Eclipse

Eclipse

GWT SDK ^ン

Eclipse ^ン

違う点注意

Netbeans

GWT4NB ^いう ^ン ^あ

(11)

ン _GWT 特徴探

～ _GWT 構造～

ン側

側

両呼び出

(12)

設定簡単明

XXXX.gwt.xml

<entry-point class='org.ochilab.client.TestGWT'/>

•Entry-point ^{指定：最初} ^起動

• ^利用 ^際 < inherits > ^指定

(13)

ン _GWT 特徴探

～ _GWT 構造～

呼び出元 _HTML 必要

GWT ^導く javaScript ^込 ^記述 ^あ

(14)

ン _GWT 特徴探

～ _HTML 関係～

GWT ^＝ HTML ^要素 Java ^書く

いうわけあ

HTML Java^記述

い _HTML要素対ッ組込

(15)

ン _GWT 特徴探

～ン実行例～

Eclipse ^ン ^実行 ^画面

(16)

ン _GWT 特徴探

～ _HTML 関係～

<h1>Web Application Starter Project</h1>

<tr>

<td colspan="2" style="font-weight:bold;">Please enter your name:</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

(17)

public class TestGWT implements EntryPoint { public void onModuleLoad() {

final Button sendButton = new Button("^押 "); final TextBox nameField = new TextBox();

nameField.setText("^日曓語 OK"); final Label errorLabel = new Label(); // We can add style names to widgets

sendButton.addStyleName("sendButton");

// Add the nameField and sendButton to the RootPanel // Use RootPanel.get() to get the entire body element RootPanel.get("nameFieldContainer").add(nameField); RootPanel.get("sendButtonContainer").add(sendButton); RootPanel.get("errorLabelContainer").add(errorLabel); }

利用可能

(18)

ン _GWT 特徴探

～ _css 関係～

.sendButton { display: block; font-size: 16pt; }

.gwt-DialogBox { width: 400px; }

TestGWT.css

sendButton.addStyleName("sendButton");

ほ _GWT _Widget

指定あ

// Create the popup dialog box

final DialogBox dialogBox = new DialogBox();

(19)

補足：ン記述ッ

HTML

<body> ^直接追

<body>

</body>

RootPanel.get().add(nameField);

含全 _Java 書く可能

(20)

気けいいけい

Java ^ン

Servlet ^や Strut ^や JSF ^開

→ 移意識設計

Ajax ^ン

→ 原則移状態管理必要

GWT ^ン ^{履歴管理機能} ^用意 ^い

(21)

履歴機能

古いン使わい

HistoryLister ^実装 ^非奨励 ^い ^注意！

•ValueChangeHandler ^実装

•History ^ン ^割 ^当

http://127.0.0.1:8888/UserControl.html?gwt.codesvr=127.0.0.1:9997#start

URL ^曒尾 ^ン ^追記 ^状態 ^移 ^区別可能

戻ン対応

書いけ戻わけい点注意

(22)

JSNI JavaScript ^連携

JSNI JavaScript Native Interface

protected native void xxxxxx() /*-{

ここにJavaScriptを書く }-*/;

○ _GWT 曑対応 _JavaScript 扱え

○ _Java 記述部 _JavaScript 部授受可能

(23)

JSNI ^威力

昨年月 GoogleWaveHackathon

優勝村

ンッン

GWT ^＋ HTML5 Canvas ^利用

JSNI ^使 GWT ^曑対応部 ^補完 ^い ^！

(24)

GWT RPC

Ajax ^ン

→ 非期通信

GWT GWT-RPC ^いう ^組 ^実現

ン側側

xxxx() ^｛

～

}

xxxx()

(25)

GWT-RPC ^必要

□ ッ実装側

ッ実装

□ 定義ン用

□ 定義ンン用

ッ定義

注意事項：ン関連性前対応

(26)

ン関係

<<interface>> GreetingService

<<interface>> GreetingServiceAsync

GreetingServiceImpl Client

ッ実装定義ン

用定義ン

ン用

呼び出

(27)

GWT-RPC ^： ^ン ^側 client ^ッ

定義ン用

定義ンン用

GreetingService.java

@RemoteServiceRelativePath("greet")

public interface GreetingService extends RemoteService {

String greetServer(String name) throws IllegalArgumentException; }

GreetingServiceAsync.java public interface GreetingServiceAsync {

void greetServer(String input, AsyncCallback<String> callback) throws IllegalArgumentException;

}

(28)

GWT-RPC ^： ^側 sever ^ッ

@SuppressWarnings("serial")

public class GreetingServiceImpl

extends RemoteServiceServlet implements GreetingService { public String greetServer(String input)

throws IllegalArgumentException { }

}

(29)

ン呼び出

private final GreetingServiceAsync greetingService

= GWT.create(GreetingService.class);

greetingService.greetServer(textToServer,new AsyncCallback<String>() { public void onFailure(Throwable caught) {

処理失敗場合記述

}

public void onSuccess(String result) {

処理成場合記述

} });

(30)

GWT-RPC ^：転送

GWT RPC ^転送

型

char,byte,short,int,long,boolean,float,double

ッ類

Char,Byte,Short,Int,Long,Boolean,Float,Double,String,Date

配列一部ン

a ,Ha a ac , ec , … e c

定義

(31)

GWT-RPC ^： ^定義

public class testObj implements Serializable{

ン変数

getter setter ^言 }

Serializable ^実装

ン変数様制約

client shared ^ッ ^内 ^言

(32)

GWT2.0 ^新機能

～ DevelopmentMode ^～

GWT ^開 ^点

→ ッ時間 _Java → _JavaScript 変換

Google Web Toolkit Developer Plugin

一般実行可能

曑対応あ？

以前 _HostedMode 用意い

Java ^変換

Hosted ^確認

→

ッ容易

(33)

GWT2.0 ^新機能

～ LayoutPanel ^拡張～

http://code.google.com/intl/ja/webtoolkit/doc/latest/DevGuideUiPanels.html

•TabLayoutPanel

•StackLayoutPanel

•DockLayoutPanel

…..etc

表現豊富

(34)

GWT2.0 ^新機能

～ _UIBinder ～

○ _Widget 記述定義

Java

○ _Widget 生成記述不要

○ ン定義簡素

ン削減

定義 _ui.xml

(35)

Widget ^択

(36)

UI Binder

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">

<ui:style> .important {

font-weight: bold; }

</ui:style>

<g:HTMLPanel> Hello,

<g:Button styleName="{style.important}" ui:field= "button" />

</g:HTMLPanel>

</ui:UiBinder>

(37)

public class uitest extends Composite {

private static uitestUiBinder uiBinder = GWT.create(uitestUiBinder.class); interface uitestUiBinder extends UiBinder<Widget, uitest> {

}

@UiField

Button button;

public uitest(String firstName) {

initWidget(uiBinder.createAndBindUi(this)); button.setText(firstName);

}

@UiHandler("button")

void onClick(ClickEvent e) { Window.alert("Hello!"); }

}

ン記述

自体 _Widget い

(38)

ン割当

uitest ut = new uitest_(“ ^ン"); RootPanel.get().add(ut);

普通 _Widget 利用感覚

(39)

ui.xml Java ^関連付け

2 ^方法 ^あ

e a e . . 指定

Interface ^定義 ^直前 ^記述

○○ _.ui.xml ○○ _.java

(40)

XML ^記述 ^定義 ^詳細 ^？

Eclipse ^ン ^教え ^く ^^

GWT-Widget JavaDoc ^見 ^詳細 ^わ ^！

(41)

XML ^属性 ^設定

UiBinder Attribute Setter

UiBinder Xml ^属性 Widget Setter ^指定

例え _Widget _setTitle いう属性あ場合

<g:Label title=" "> </g:Label>

<g:HorizontalPanel>

<g:cell horizontalAlignment="ALIGN_RIGHT“

verticalAlignment="ALIGN_BOTTOM">

</g:cell> </g:HorizontalPanel>

(42)

ン処理い

public class MyFoo extends Composite {

@UiField Button button; public MyFoo() {

initWidget(button); }

@UiHandler("button")

void handleClick(ClickEvent e) { Window.alert("Hello, AJAX"); }

}

ン記述けッ

(43)

UIBinder ^個人的 ^感想

HTML+JavaScript ^キ GWT ^使い

UIBinder ^→ HTML ^＋ XML ^書く

矛盾い？

否！

◎ _Java 記述簡素

○ _xml 意外書やい _HTML 両立いい

(44)

前半

○ _GWT 基曓的

○ _GWT2.0 新機能い一部

後半

実際作う！

(45)

勉強会 資料 Google Developer Group 京都

GWT 入門

2.0 話

越智洋司 京都 GTUG ッ

第 1 回 Google Web Toolkit 勉強会 in 京都 (#gwt_kyoto)

く自己紹

□ 某私立大学教員 理工系

□ 昨冬 Google Wave Hackathon 初参

→ ッ 新入

□ e-Learning 研究開 専門

→ 最新 技術動向 関心あ

基曓的 ン 好

実践的 あ いうわけ あ

□ い 効率良く 開 進 いく ？ 学生指導含

→ GWT 目 け 実 半年ほ 前

曓日 話 内容

多少 私 思い違い 偏見？ あ

→ 適時突 込 く い

前半： GWT 入門編 担当：越智

GWT 概要

GWT RPC

UIBinder

後半：実装編 担当：白山

記 使 実装 体験 う

白山 急遽 席 越智＆ ッ 対応

GWT 何

□昨 ン開 ン

志向 時代

JavaScript ン 処理

□ 側 動作 AJAX ン ン Java

記述 最適 JavaScript ン

ワ

Java JavaScript

GWT 標準 ン ン

標準的 GUI 部品 対応

GWT 使う ッ

□ 側 ン 側

Java け 開

○言語 教え 手間 省け

○ JavaScript 嫌い 苦手 Java 救世主！

JavaScript 開 大変

○言語 様 貧弱

○開 環境 曑整備

GWT 利用

Java 言語 様や開 環境 利用

GWT 使う ッ

□ 間 互換性問題 い GWT 解決

Chrome, Internet Explorer, Firefox, and Safari…etc

主要 対応 JavaScript 自動変換

毎 JavaScript 用意 必要 い

GWT 使

私 研究 場合

○研究 主 Java 中心

○講義 ＆ Java 関係一 習わ

△ 状態 い 教え ？

→ ワ 絶え 模索 日々

JSF 派 資料少 い ワ わ い

△ JavaScript 作 ッ ！

半年前 GWT 出会い

年生 わ 数 月 作

Web 時代 い

HTML 場 JavaScript 事実 言語

→ JavaApplet や Flash 実装 終焉

JavaScript 開 困難 GWT

最高 ン！！

代表的 JavaIDE GWT 対応

Google Plugin for Eclipse

Eclipse

GWT SDK ン

Eclipse ン

違う点 注意

Netbeans

GWT4NB いう ン あ

ン GWT 特徴 探

～ GWT 構造 ～

ン 側

側

両 呼び出

設定 簡単 明

XXXX.gwt.xml

勉強会資料 Google Developer Group 京都

GWT ^入門

2.0 ^話

越智洋司京都 _GTUG ッ

第 ₁ 回 Google Web Toolkit ^勉強会 in ^京都 (#gwt_kyoto)

□ 某私立大学教員理工系

□ 昨冬 Google Wave Hackathon ^初参

→ ^ッ ^新入

□ _e-Learning 研究開専門

→ ^最新 ^技術動向 ^関心あ

基曓的ン好

実践的あいうわけあ

□ い効率良く開進いく？学生指導含

→ GWT ^目 ^け ^実 ^半年ほ ^前

曓日話内容

多少私思い違い偏見？あ

→ ^適時突 ^込 ^く ^い

前半： _GWT 入門編担当：越智

GWT ^概要

後半：実装編担当：白山

記使実装体験う

白山急遽席越智＆ッ対応

GWT ^何

□昨ン開ン

志向時代

JavaScript ^ン ^処理

□ 側動作 _AJAX ンン _Java

記述最適 JavaScript ^ン

GWT ^標準 ^ン ^ン

標準的 _GUI 部品対応

GWT ^使う ^ッ

□ 側ン側

Java ^け ^開

○言語教え手間省け

○ _JavaScript 嫌い苦手 _Java 救世主！

JavaScript ^開 ^大変

○言語様貧弱

○開環境曑整備

GWT ^利用

Java ^言語 ^様や開 ^環境 ^利用

GWT ^使う ^ッ

□ 間互換性問題い _GWT 解決

主要対応 _JavaScript 自動変換

毎 _JavaScript 用意必要い

GWT ^使

私研究場合

○研究主 _Java 中心

○講義＆ _Java 関係一習わ

△ 状態い教え？

→ ワ絶え模索日々

JSF ^派 ^資料少 ^い ^ワ ^わ ^い

△ _JavaScript 作ッ！

半年前 _GWT 出会い

年生わ数月作

Web ^時代 ^い

HTML ^場 JavaScript ^事実 ^言語

→ _JavaApplet や _Flash 実装終焉

JavaScript ^開 ^困難 GWT

最高ン！！

代表的 _JavaIDE _GWT 対応

GWT SDK ^ン

Eclipse ^ン

違う点注意

GWT4NB ^いう ^ン ^あ

ン _GWT 特徴探

～ _GWT 構造～

ン側

両呼び出

設定簡単明

•Entry-point ^{指定：最初} ^起動

• ^利用 ^際 < inherits > ^指定

ン _GWT 特徴探

～ _GWT 構造～

呼び出元 _HTML 必要

GWT ^導く javaScript ^込 ^記述 ^あ

ン _GWT 特徴探

～ _HTML 関係～

GWT ^＝ HTML ^要素 Java ^書く

いうわけあ

ン _GWT 特徴探