Myはうす: MySQLのTipsを中心に書いてます。Deepに行きますよ！

さて、続きです。早速簡単なDojoアプリケーションを作成してみましょう。と、そのまえにちょっと復習。
最終ゴール：Eclipse上でAJAX Toolkit Framework(以下ATF)を利用してDojoアプリケーションを簡単開発・デバッグし、Sun Java System Application Server PE9.0(無償）にデプロイ、テストまで行うこと

今回のゴール：ATFを使ってDojoアプリケーションを作成、実行してみる

まずは、EclipseでのDojoプロジェクトの作成からはじめましょう。
注：build20060912からはプロジェクトとアプリケーションの構造が若干変更になっております。build20060912を利用している方はこちらの手順をご参照ください
1.Eclipseの起動
・C:\Eclipse\eclipseに移動します
・eclipse.exeをダブルクリックして、Eclipseを起動します。

2.Dojoプロジェクトの作成
・メニューの[File]→[New]→[Project]を選択します。

・一覧から、Dojo→Dojo J2EE Project v0.2.2を選択してNext >ボタンを押します。

・プロジェクト情報入力パネルで以下を入力します
プロジェクト名:任意の名前を入力します（ここではTestDojoAppにしました）
Target Runtime:GlassFish Java EE 5を選択（デフォルトで選択されていると思います）
その他：デフォルトのまま
以下のようになります。

・Finishボタンを押します。
するとしばらくしてから（１分くらい？）、EclipseのViewをJ2EEのビューに変更するか聞いてきますのでYesのボタンを押します。

・するとプロジェクトがEclipse上に作成されます。（※WTPのエディット機能が十分にJavaScriptの文法を認識していないため、エラーが出ますがDojoの開発・実行には全く支障ありませんので放置してください）

・このようなエラーが出ますが問題ありません。（リリース版では直るとのことです）

これでDojoプロジェクトが作成されました。DojoプロジェクトはDojoアプリケーションの開発・実行に必要なライブラリ一式を含んでいます。

3.Dojoアプリケーションの作成
・メニューの[File]→[New]→[Other]を選択します。
・ツリーからDojo→Dojo Application V0.2.2を選択します。

情報入力パネルで以下を入力します
Name:DojoApp001
その他：Nameを入力すると自動入力されます。→自動入力されたままにします。
以下のようになります。

・Finishボタンを押します。
するとプロジェクトエクスプローラにDojoApp001というフォルダが追加されます。
Eclipse IDEの中央部のhtmlエディタにはDojoApp001.htmlというファイルが表示されます。

4.Dojoコンポーネントの追加・編集
それでは早速Dojoコンポーネントを追加してみましょう。まずはTreeを追加してみます。
・Serversタグの近くにあるSnippetsタグをクリックしてSnippetsウインドウを表示します（下図）

・もしこの場所にSnippetsタグがない場合はメニューの[Window]→[Show View]→[Other]を選択し、General→Snippetsを選びます。

・SnippetsウインドウからDojo→dojo.requireを選択します。

dojo.require( "dojo.widget.*" );
このあたり
dojo.require( "dojo.widget.FloatingPane" );
このあたりの場所へドラッグアンドドロップします。するとDojoパッケージ名を聞いてきますのでdojo.widget.Treeと入力します。

・するとHtmlは以下のようになります。（もちろんhtmlに直接書いてもかまいません）
//require statements
dojo.require( "dojo.widget.*" );
dojo.require( "dojo.widget.Tree" );
dojo.require( "dojo.widget.FloatingPane" );

・SnippetsウインドウからDojo→Treeを選択します。そのままDrag&Dropでhtmlエディタのの下あたりにドロップします。（もしhtmlエディタが開いていない場合はプロジェクトエクスプローラのTestDojoApp→WebContent→DojoApp001→DojoApp001.htmlをダブルクリックします

・ドロップすると下図のようにサンプルの中身を入れるかどうか聞いてくるのでInsertボタンを押します。するとDojoタグが挿入されます。

・せっかくなので、中身をちょっと変更してみましょう。
＜div dojoType="TreeNode" title="Root"＞
＜div dojoType="TreeNode" title="1"＞＜/div＞
＜div dojoType="TreeNode" title="日本語ももちろんOK!"＞＜/div＞
＜div dojoType="TreeNode" title="3"＞＜/div＞

というように変更します。さてどのようになったかを早速実行してみたいと思います。

5.Dojoアプリケーションの実行
・Serversタグをクリックして、サーバが起動しているかどうかを確認します。Stoppedになっていたら、サーバ右クリック→Startでサーバを開始します。

・サーバがStartedになっていればOKです。

・プロジェクトエクスプローラでDojoApp001.htmlを右クリック→Run As→Run on Serverを選択します。

・Run On Serverパネルが表示されるので、[Ser server as project default (do not ask again]のチェックボックスにチェックをつけて、Finishボタンを押します。

・自動でSun Java System Application Serverへデプロイされ、実行結果が中央ペイン（Mozilla-Eclipse)に表示されます。
ツリーの+マークをクリックしたりしてみてください。

・ブラウザのURLにhttp://localhost:8080/TestDojoApp/DojoApp001/DojoApp001.htmlと入力しても同様の画面が見れます。

さて、うまく動きましたか？
次回はデバッグをしてみたいと思います。