AJAXな開発 AJAX Toolkit FrameworkでDojoアプリをデバッグ
さて、続きです。早速Dojoアプリケーションのデバッグをしてみましょう。と、そのまえにちょっと復習。
最終ゴール:Eclipse上でAJAX Toolkit Framework(以下ATF)を利用してDojoアプリケーションを簡単開発・デバッグし、Sun Java System Application Server PE9.0(無償)にデプロイ、テストまで行うこと
今回のゴール:ATFを使ってDojoアプリケーションをデバッグしてみる
まずは、環境設定からはじめましょう。
1.一部Eclipse-Pluginのアップデート
Debuggerの部分はEclipseの一部のコアモジュールを最新版に更新しないとうまく動かないようです(ベータ版だからでしょうか?)というわけで以下を実行して問題を回避します。
・通常は[Help]→[Software Updates]→[Find And Install]で[Search for updates of the currently installed features]を選択すればアップデートすべき差分が自動で表示されるのでそのままOKを押せばダウンロードとインストールを自動でやってくれます。
・今回は手間を省くために以下からplugin1.zipとplugin2.zipとplugin3.zipの計3ファイルをダウンロードしてください。
plugin1.zip
plugin2.zip
plugin3.zip
ダウンロードしたら3つともC:\Eclipseフォルダに保存してください。
・3つのファイルをC:\Eclipseフォルダにzipを展開してください。(Extract here)
2.Eclipseを再起動します。
3.Dojoアプリケーションのデバッグ
a.ブレイクポイントの追加
・前回追加したTreeというDojo Widetをデバッグしてみましょう。
・プロジェクトエクスプローラから[TestDojoApp]→[WebContent]→[dojoAjax]→[src]→[widget]と順番にフォルダを開いてゆき、Tree.jsをダブルクリックして編集画面に出します。

・編集画面から
expand: function(){
this.showChildren();
this.isExpanded = true;
this.updateIcons();
},
の部分を探しだし(下の方です)、this.updateIcons()の下にdebugger;という文字列を追加します。
(完成版ではGUIでブレイクポイントが付けられるようになるとのこと)
expand: function(){
debugger;
this.showChildren();
this.isExpanded = true;
this.updateIcons();
},
・Serversタグをクリックして、Serverが起動しているならばStopします。

・アプリケーションをDebugモードでMozillaを使って開始します。・プロジェクトエクスプローラから[TestDojoApp]→[WebContent]→[DojoApp001]→DojoApp001.htmlを右クリックします。ポップアップメニューから[Debug As]→[Debug in mozilla]を選択します。

・するとIDE中央にMozillaブラウザがデバッグモードで起動します。ここでツリー中のRootの左側にある+マークをクリックします。

・Debugパースペクティブに切り替えるか聞かれますので、Yesボタンを押してください。(パースペクティブとは、あるテーマにあわせたウインドウ一式をIDEのあらかじめ記憶してある場所に表示する機能です。例:デバッグパースペクティブ、J2EEパースペクティブ、Javaパースペクティブ。)

・すると、下図のようないくつかのデバッグウインドウが並んでいる画面に切り替わります。

・IDE左上のDebugウインドウ中のコマンドメニューを使ってStep実行することができます。黄色い矢印の左からStep in,Step over,Step returnになります。Step Overボタンをクリックするごとに1つJava Scriptが進むのがわかります。

・左側の青い矢印は現在実行している行を表わします。

・実行中の変数の状態などは右上のVariablesウインドウで監視することができます。

これでDojo-JavaScriptの詳しい動きをトレースすることができます。内部の動きなどチェックしてみてはいかがでしょうか?
今回まではサンプル的なDojoアプリを作成して、実行デバッグまでしてみました。次回はDojoを使ってより実践的なアプリを作ってみたいと思います。

Posted by H. Yagi on 2月月 03日, 2007年 at 11:25 午後 JST #