第２回勉強会
Ext GWTでつくるiPhoneウェブアプリ

本日の題目

• ExtGWT概要
• EclipseでExtGWT
• iPhoneウェブアプリへ
• まとめ

Ext

リッチなUI

Ext

• ExtJS
  http://extjs.com/
• Ext Japan
  http://extjs.co.jp/

GWT

GWT
http://code.google.com/webtoolkit/

• Java-to-JavaScript Compiler
• GWT Hosted Web Browser
• JRE emulation library
• GWT Web UI class library

ひょっとして

自己紹介

• 内山 光晴
• javaプログラマー(2000.4〜)

という訳で

EclipseでExtGWT

ExtGWTメモ

• ベースは、GWT
• 略してGXTと呼ばれる
• GWT1.5とJDK1.5以上が必須

インストールしたもの(1)

• Eclipse 3.4+WTP
• Cypal Studio for GWT RC8
  (eclipseプラグイン)

インストールしたもの(2)

• GWT 1.5
• GXT 1.0.1
• Apache tomcat 5.5.26

その他

• JDK 1.5
  macに入っていたデフォルト

Cypal Studio for GWT
http://www.cypal.in/

• 動的Webプロジェクト用
  ファイル構成
• GWTモジュール作成
• GWTリモートサービス作成
• java-to-jsコンパイル

まずは、GWTアプリから

新規プロジェクト作成(1/4)

• プロジェクト名
  GWT01

新規モジュール作成(2/4)

• パッケージ名
  com.gethapp.gwt01
• モジュール名
  MyApp

javaコード作成(3/4)

• ソース名
  com.gethapp.gwt01.
  client.MyApp.java

動作確認(4/4)

• hostedモードで起動
  MyApp.gwt.xml選択
  右クリックで実行

GWTのメリット

• eclipse上での開発
• javaで記述
  new Button("OK");
  →コンパイル(java-to-js)
  →htmlのボタンが表示
• サーバ側もjavaで記述できる
  (GWTリモートサービス)

イメージ？掴めました？

次は、GXTアプリ

GWTリモートサービスも
使ってみる

• それはtomcat上で動く
  →tomcatの設定

新規プロジェクト作成(1/13)

• プロジェクト名
  GXT01

新規モジュール作成(2/13)

• パッケージ名
  com.gethapp.gxt01
• モジュール名
  MyGxtApp

GXT関係の設定(3/13)

• gxt-1.0.1.zip
  setup.txtを読む

MyGxtApp.gwt.xmlに追加(4/13)

• GXTを使いますよ宣言
• ext-all.cssを宣言

MyGxtApp.html修正(5/13)

• DOCTYPE追加
• 日本語な設定追加
• iPhoneな設定追加

gxt.jarを追加(6/13)

• ビルドパスに追加

javaコード作成(7/13)

• ソース名
  com.gethapp.gxt01.
  client.MyGxtApp.java

新規リモートサービス作成(8/13)

• クラス名
  CalcService
• URI名
  calc

リモートサービスクラス(9/13)

• CalcService.java
• CalcServiceAsync.java
• CalcServiceImpl.java

リモートクラスの修正(10/13)

• CalcService.java
  →インタフェース追加
• CalcServiceAsync.java
  →自動追加
• CalcServiceImpl.java
  →サーバ側の実装

hostedモード(開発モード)
(11/13)

• 省略

Webモード(サーバー上で動かす)
(12/13)

• コンパイル
  →プロジェクトのクリーン
• eclipseのサーバー追加
• サーバ起動

動作確認(13/13)

• http://localhost:8080/GXT01/MyGxtApp.html

別なサーバー上で動かす

• File
  ->Export
  ->Web
  ->WARファイル

iPhoneウェブアプリへ

まとめ

• javaプログラマーだったら
  触ってみよう！

ご清聴
ありがとうございました。
おわり！