Super Dev Mode

ここではEclipse上でSuper Dev Modeを使う方法をまとめる。

前提条件

• Eclipse JUNO上にGoogle Web Toolkit SDK 2.5.0がインストールされていること。

Super Dev Mode が起動するまで

プロジェクトの作成

• Elicpseのツールバー上にある「g」マークをクリックし「New Application Project」を選択。
• Project nameを「Sample」、Packageを「sample」とでもしておく。
• 「Use Google App Engine」のチェックははずす。
• 「Finish」をクリック

次にSample.gwt.xmlを開き、最後の</module>の直前に以下を挿入する。

<add-linker name="xsiframe"/>
<set-configuration-property name="devModeRedirectEnabled" value="true"/>
<set-property name="compiler.useSourceMaps" value="true" />

CodeServerの起動

CodeServerはJavaアプリケーションなので、その起動設定を行う。

• RunメニューのRun Configurationsをクリックし、Java Applicationをクリック。左上のNew Button（紙に＋のアイコン）をクリックする。

• MainタブのMain classに「com.google.gwt.dev.codeserver.CodeServer」と入力

• ArgumentsタブのProgram argumentsに「sample.Sample」と入力
• classpathタブを開き、User Entriesをクリックし、Add EXTERNAL　JARsをクリック。Eclipseのプラグインの中のgwt-codeserver.jarを追加。
• 同じくclasspathのUser Entriesにて、Advancedをクリックし、Add Foldersを選択。Sample/srcを選択してOK。

Runをクリックすると、設定が保存され、CodeServerアプリケーションが起動する。

The code server is ready.
Next, visit: http://localhost:9876/

と表示されればOK。

「http://localhost:9876/」をブラウザで開き、「Dev Mode On」「Dev Mode Off」をブラウザのブックマークツールバー等にドラッグして登録する（※この時点では、これらのボタンをクリックしてもエラーになる）。

ウェブアプリケーションを実行する

古いDev Modeでの開発で行うように、Runメニュー（Eclipseツールバーの緑ボタン）から「ｇ」マークのある「Sample」をクリックする。 「http://127.0.0.1:8888/Sample.html?gwt.codesvr=127.0.0.1:9997」と表示される。

「http://127.0.0.1:8888/Sample.html?gwt.codesvr=127.0.0.1:9997」ではなく、「http://127.0.0.1:8888/Sample.html」をブラウザで表示する。 「リコンパイルする必要がある」などという文言が表示され、「Choose a module to recompile」と表示されるのでコンパイルする。

この画面にてブラウザのツールバー上の「Dev Mode On」「Dev Mode Off」ボタンをクリックすることにより、開発モードのON/OFFができる。

ただし、開発モードOFFにすると、この時点では必ず「再コンパイルする必要がある」などと表示されるが、この時点では気にする必要はない。

Chromeでのデバッグ

Chromeの機能を利用してソースコードデバッグ(?)をすることができるようだ。

• ctrl+shift+Iを押下し、開発ツールを表示する。
• 左下のギアのマークをクリック。「Enable source maps」をチェックする。

。。。。がChrome 24では動作しない模様。GWT 2.5.1で修正されるとのこと。

参考

• http://d.hatena.ne.jp/hayassh/20130126/1359220417

• http://d.hatena.ne.jp/hayassh/20130203/1359865792