GWT・GAE個人メモ

GWTのウィジェット配置

2009-09-17T10:04:05+09:00

GWTでウィジェットを配置するとなるとGUIビルダもないし(あるけど有料)いろいろと面倒なイメージがあるっぽい。

けど現実はGoogle Pluginでプロジェクトを作ると嫌でもついてくるサンプルにもあるように、

ホストページの要素にidを振りさえすればそのidの要素にウィジェットを挿入できるのでウィジェットの配置そのものはHTMLエディタさえあれば十分だったりする。

↓こんなふうに

RootPanel.get("id").add(control);

でもこれには問題があって、要素の後ろにウィジェットを継ぎ足すだけなのでその要素に文字列なんか入れてたりするとそのまま残ってしまう。

これでは実質空の<div>や<span>くらいしか使い物にならない、ここにこんなウィジェットが入るよって説明を入れたい場合に困るので(あるのか？ｗ)、ウィジェットを入れる前に要素の中身を削除するこんなコードを入れると要素の中身が消えるのでどれだけ説明をいれてもおｋ

RootPanel.get("id").getElement().setInnerHTML("");

でもここまでくるとどうせならボタンなら<input type="submit">なり<botton>なり、テキストボックスなら<input type="text">のように表現したいと思えてくることはないだろうか(俺だけ?)、もしあるとしたら上記のコードでは対応できない、なぜなら要素の中身は消えても要素は残ってるので、HTMLボタンの中にさらにボタンウィジェットを追加することになって結構悲惨なことになる(興味があったらいちどやってみてほしい)

今まではコントロールの外側にspan要素をはさんでそっちにidを振ることでお茶を濁していたのだが、やっぱりHTMLが汚いしウィジェットが増えてくるとコードも汚くなる。

要素とウィジェットをそのまま差し替えることができたら結構いろいろと便利なのになぁと思って試行錯誤してできたのがこれ

public static void replaceWidget(String id, Widget widget) {
 Element oldnode = DOM.getElementById(id);
 Element newnode = DOM.createSpan();
 newnode.setId(id);
 oldnode.getParentElement().replaceChild(newnode, oldnode);
 RootPanel.get(id).add(widget);
}

要するに親要素をとってきてreplaceChildであらかじめ作っておいたspan要素と元の要素を差し替えただけ。

こんな単純なコードを思いつくのにどれだけ時間かかってるんだよ俺・・・orz

これができるようになると今度はホストページのフォーム要素を片っ端からウィジェットに変換してまとめて処理できたら楽になるんじゃね？と考えて作ったのがこれ

・・・いや、自分で作っておいてなんだがもう何も言うまい・・・orz

メニュー

2009-09-17T09:58:16+09:00

**メニュー -[[トップページ]] -[[インストール]] -[[GWT-incubatorを使う]] -[[GWT-Voicesを使う]] -[[GWTでゲームを作る]] -[[Ext GWTの概要]] -[[Ext GWTを使うための設定]] -[[リンク集]] **落穂拾い -[[LinuxのHostedモード]] -[[GWTのウィジェット配置]] **更新履歴 #recent(20)

GWTでゲームを作る

2009-09-15T11:56:00+09:00

GWTでいくつか簡単なゲームを作ってみた。

正直言ってGWTでゲームを作るのは茨の道・・・orz

ソースはここに置いてあります。

以下のサイトの素材を利用しました。

MusMus　http://homepage2.nifty.com/musmus/

First Seed Material　http://www.tekepon.net/fsm/

LinuxのHostedモード

2009-09-13T08:13:28+09:00

Hostedモードは内部でSWTのブラウザウィジェットを利用していて、WindowsはTrident(IEの中の人)、LinuxはMozilla(Firefoxの中の人)、MacOSXはWebkit(Safariの中の人)といったようにOSごとに利用するブラウザを変えることでソースレベルの互換性を保っている。

GWTCavnasを使ったアプリのデバッグをWindowsでする場合、この仕様とIE(Trident)のVMLの遅さが災いして完全にHostedモードのメリットが失われてしまいまったくデバッグにならないので、Linuxに移行しようと考えたのだが・・・

結論から先に言うと現行のバージョンではLinuxでもまったくデバッグにならないorz

Linux版GWTのHostedモードに搭載されているMozillaはVersion 1.7.12(2005年9月)であり、Canvas自体搭載されておらずGWTCanvas関係のクラスは一切動作しない。GWTCanvasが遅いからLinuxのMozillaでやれば速いだろうと考えるとえらい目にあうので気をつけましょうｗ(俺だけかｗｗｗ)

SWT関係で調べるとMOZILLA_FIVE_HOME環境変数でMozillaが入ったディレクトリを指定できるような記述がちらほら見受けられるのでHostedモードが余計な改造をしていなければこれを利用してCanvasに対応したMozillaに差し替える荒業も使えそうな気がしたのだが、どうやら無理な模様・・・。

で、どうもHosteモードは遅いというのはGoogleも認識しているようで、その対策としてOOPHMなるものを作ることを計画しており、2.0で導入予定のようだ。専用のプラグインを組み込めばそのプラグインとGWTモジュールを管理するJava仮想マシンがTCPで情報をやりとりすることによってHostedモードと同じ事がネイティブのブラウザでできるようになるというもののようだ。

現在はsvnにソースが登録されており、チェックアウトしてantでビルドすれば利用できるのだが、ビルドしても1.7から導入されたHostedModeクラス(いままではGWTShellクラス)に対応しておらず、1.6を利用しないと動かないようだ・・・orz

リンク集

2009-08-28T09:36:00+09:00

自分用リンクです。GWTを扱うページが実に少ないのでblogページがほとんどだったり。なお順番に他意はない。 [[http://code.google.com/intl/ja/webtoolkit/]] GWTのページ、情報はやや少なめ [[http://examples.roughian.com/index.htm#Home]] [[http://www.java2s.com/Code/Java/GWT/CatalogGWT.htm]] サンプル集。あまり多くないけど貴重 [[http://gethapp.com/blog/category/gwt/]] [[http://d.hatena.ne.jp/xucker/]] [[http://ttimez.blogspot.com/]] [[http://blog.memo.vg/]] [[http://tofuu.blog43.fc2.com/]] GWT/GAEを扱うblog。参考にさせていただいております [[http://www.sweetie.atnifty.com/D-RexGxt2/]] Ext GWT用のGUIビルダ。このページにアクセスすればそのままGUIのデザインができる

GWT-Voicesを使う

2009-08-27T07:25:10+09:00

GWT-Voicesは、Flash及びインストールされたプラグインなどを利用してサウンドを再生するライブラリ。

同様のライブラリはGWT-Soundなどいくつか存在するが、いずれも内部にFlashを使うだけなのでMP3にしか対応していない。

GWT-VoiceはFlash以外にもIEであれば<bgsound>要素、そのほかのブラウザでもプラグインがインストールされていればそのプラグインを利用することで再生できる形式を増やしているのが特徴。ただし、FlashしかインストールされていなければMP3しか再生できない。HTML5の<audio>要素には今のところ対応していない模様。

インストール

ここからGWTのバージョンに対応したjarファイルをダウンロードする
(プロジェクト名).gwt.xmlに次のコードをコピペする
<inherits name='com.allen_sauer.gwt.voices.gwt-voices'/>
次の手順でgwt-incubatorをライブラリパスに追加する
1. パッケージエクスプローラーのプロジェクト名のフォルダを右クリック
2. 「プロバティ」を選択
3. 「Javaのビルドパス」を選ぶ
4. 「ライブラリー」タブから「外部Jarの追加」をクリック
5. gwt-voices-(バージョン).jarを探してOKをクリック
6. OKをクリック

GWT-incubatorを使う

2009-08-27T07:23:21+09:00

GWT-incubatorはCanvasなどGWTには入っていない先進的な機能やウィジェットなどを実装したライブラリ。
主にHTML5のCanvasを実装したGWTCanvasを中心に使うことになると思われ。

インストール

ここからGWTと同じバージョンのjarファイルをダウンロードする
(プロジェクト名).gwt.xmlに次のコードをコピペする(GWTCanvasを使う場合)
<inherits name='com.google.gwt.widgetideas.GWTCanvas'/>
次の手順でgwt-incubatorをライブラリパスに追加する
1. パッケージエクスプローラーのプロジェクト名のフォルダを右クリック
2. 「プロバティ」を選択
3. 「Javaのビルドパス」を選ぶ
4. 「ライブラリー」タブから「外部Jarの追加」をクリック
5. gwt-incubator.jarを探してOKをクリック
6. OKをクリック

GWT-CanvasはIEの場合はVMLというIE独自の描画APIを使うことでHTML5のCanvasと互換を保っているが、VMLの描画速度はかなり遅いので頻繁に再描画を繰り返すゲーム用途では全く使い物にならない。だからといってこのライブラリのせいなのかCanvasの実装の問題なのか不明だが他のブラウザも特筆して描画が速いというわけでもないので現状ではゲームは厳しいかも・・・。

Ext GWTの概要

2009-08-25T21:31:26+09:00

Ext GWTは有名なJavaScriptライブラリであるEXT JSをベースにGWT向けに一からほとんどをJavaで実装したGWTの拡張ライブラリ。

同様のものにgwt-extがあるが、こちらはJSNIを利用してEXT JSをラップしたもの。ライセンスの関係のゴタゴタなどでExt 2.0.2までしか対応していない。
なおメインの開発者はこのゴタゴタでプロジェクトから離脱。現在はSmartClientのGWTラッパであるSmartGWTを開発している。

Ext GWTとgwt-extは名前は似ていても上記のとおり全然違うライブラリなので検索をするときは注意が必要。

GWT用のライブラリでは最も使われているのではないかと思う。ただしライセンスがGPLで商用などの理由でGPLに従えないときは別途ライセンスを購入する必要あり。

Ext GWTがどんなものか、どんなことができるのかはExt GWT Explorerを見ればわかる。

Ext GWTを使うための設定

2009-08-25T20:30:15+09:00

EXT Gwtを使うためには最初にいくつかやっておかないといけないことがあるのでメモ

ダウンロードしたEXT Gwtにあるresourcesフォルダをwarフォルダの中にコピーする
ホストページのhead要素内に次のコードをコピペする
<link rel='stylesheet' type='text/css' href='resources/css/gxt-all.css' />
チャート関係など内部でFlashを使うウィジェットを使う場合は次のコードもコピペする
<script language='javascript' src='{foldername}/flash/swfobject.js'></script>
(プロジェクト名).gwt.xmlに次のコードを追加する
<inherits name='com.extjs.gxt.ui.GXT'/>
次の手順でGWT Extをライブラリパスに追加する
1. パッケージエクスプローラーのプロジェクト名のフォルダを右クリック
2. 「プロバティ」を選択
3. 「Javaのビルドパス」を選ぶ
4. 「ライブラリー」タブから「外部Jarの追加」をクリック
5. gxt.jarを探してOKをクリック
6. OKをクリック

インストール

2009-08-25T20:06:21+09:00

インストールは(JDEが入った)EclipseにGoogle Plugin for Eclipseを入れれば設定・コンパイル・デバッグ・デプロイまで全部できるので悩むことはとくにない。

ただプラグインをいれまくると重いので。日本語化しつつ必要最低限のプラグインだけ入れるための手順。

PleiadesのPleiades All in One 3.5 Platform(日本語化プラグイン以外何も入っていないバージョン)をダウンロードして解凍。
「ヘルプ」→「新規ソフトウェアのインストール...」でJDEをインストール。ホストページなどのHTMLページをWYSIWYGで編集したかったら一緒にWebページエディタもインストールする。
再び「ヘルプ」→「新規ソフトウェアのインストール...」で作業対象に"http://dl.google.com/eclipse/plugin/3.5"を入力し、Google Plugin for Eclipseをインストールする。

以上。