さて、続きです。早速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を使ってより実践的なアプリを作ってみたいと思います。

投稿されたコメント:

竹村 直樹様    「はじめまして、JSF+AJAXの最適なツールを探してネット上を旅している八木恒と申します。」  まず、本題から、AJAXな開発の一連の記事を拝見させていただき、竹村様の案内されている(各モジュールのバージョンも含めて)手順通りの方法でこの、AJAXな開発 AJAX Toolkit FrameworkでDojoアプリをデバッグまで無事に進んで来ましたが、"debug on mozilla"を選択後、mozillaでのページ表示がされたとき、サンプルのツリーを展開すると日本語が文字化けしておりました。"Run on Server"選択後の動作では問題なく日本語が表示されております。  この現象さえ回避できれば、竹村様の方法で環境を構築したものでJSF+AJAXの開発について勉強していこうと考えております。ぜひ、Mozillaの文字化け回避方法をご伝授ください!  また、Net Beansでの手順も並行して試していますが、Net Beans5.5は正式版が既にリリースされていて、正式版で竹村様の方法を試してみよう!っと思いましたが、早速、挫折しました。理由は、jMakiでAJAXな開発(その3)の4.NetBeansのjMakiプラグインのダウンロードとインストールの手順のところで「・インストールするモジュールの選択画面になりますので、画面右側の追加ボタンを押して」の追加ボタンをおすとnet Beans5.5がフリーズしてしまい、jMakiをインストールできない事です。むしろNet Beans5.5のβ版の方がうまくいくのでしょうか?(でも、入手先が不明です・・)

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

コメント
  • HTML文法 不許可

This blog copyright 2009 by naokitakemura