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

さて、続きです。早速簡単なAjaxアプリケーションをjMakiとNetBeansを使って作成してみましょう。と、そのまえにちょっと復習。
最終ゴール：NetBeans上でjMakiを利用してAjaxアプリケーションを作成し、Sun Java System Application Server PE9.0(無償）にデプロイ、テストまで行うこと

今回のゴール：NetBeans IDE上でjMakiアプリケーションを作成する

まずは本チャン用のアプリケーション作成からはじめます。
1.jMaki用プロジェクトを作成します。
・メニューの[ファイル]→[新規プロジェクト]を選択します。Web→Webアプリケーションを選択します。
・プロジェクト情報入力パネルが表示されるので以下の情報を入力します

プロジェクト名：jMakiApp
プロジェクトの場所：デフォルトのままでOK
サーバ：Sun Java System Application Server (Manageボタンを押して、画面左下の[サーバを追加]ボタン→Sun Java System Application Server→次へ→SJSAppServer9インストール場所指定→次へ→管理パスワード：adminadminと入力→完了ボタン)
J2EEバージョン：Java EE 5

と入力します。入力したら次へ＞ボタンを押します。

・すると今回の開発に使うフレームワークを聞かれますので、jMaki Project Libraryを選択します。

・完了ボタンを押します。

・初期画面では、Webページ中のindex.jspが選択された状態になっています。IDE中央のエディタにはindex.jspのソースが表示されています。

・IDE右側に表示されているjMakiパレットを開いて、Dojo TreeをIDE中央のindex.jspのPut your jMaki tags hereのあたりにドラッグ＆ドロップしてください。

こんな感じになります。

今ドロップしたDojo Treeはこのままですと単純な数字のツリーしか出ないので、前に作ったページのようにするために編集をします。
IDE左側のプロジェクトツリーからjMakiApp→Webページ→resources→dojo→treeと順に開いていきます。

・treeフォルダにはcomponent.htmとcomponent.jsの２つのファイルが入っています。このファイルはjMaki用のものになります。
Dojoをそのまま利用する場合はhtmlやjspに直接divタグを書いていきますが、jMakiではJavaのタグ経由でdojoを利用するのでテンプレート的なものがこのフォルダに置いてあります。

リクエストの流れ（呼び出し順）としては
ブラウザ→JSP→jMakiタグ(＜a:ajax type="dojo" name="dojo.tree"/＞)→component.htm、component.jsという形になります。

ページに書きたいタグの内容を編集するためにはcomponent.htmを編集すればOKです。
・component.htmの編集をしてみましょう。３行目のtitleをItem 1.1から「日本語ももちろんOKです」に変更します。

・編集し終わったらテストしてみましょう。プロジェクトツリーからjMakiApp→Webページ→index.jspを右クリックして、[ファイルを実行]を選択します。またはIDEメニューから実行アイコンをクリックします。

・するとコンパイル→WARの作成→Sun Java System AppServer9の起動（起動していない時）→デプロイ→実行と自動的に行われます。

・ブラウザが自動的に起動して、アプリケーションが表示されます。うまく出来ていれば下図のようにツリーが表示されるのでチェックしてみてください。＋アイコンをクリックするとツリーが開きましたか？

注：jMaki Version4対応のNetBeansプラグイン(1.4.2.1)を利用すると、デフォルトでJSPページにタグライブラリ宣言が書かれていません。その場合は、2006年9月12日にリリースされたNetBeansプラグイン(1.4.2.2)をインストールするか、手動でタグライブラリ宣言をJSPに書いてください。＃詳細はコメントをご覧ください。

・ブラウザが自動的に起動しない場合はブラウザを手動で起動してから、URLにhttp://localhost:8080/jMakiApp/index.jspと入力してください。いくつかのタグをドラッグ＆ドロップして遊んでみても面白いと思います。

ここでちょっとjMakiの構造について触れてみたいと思います。さきほどのDojo Treeの場合、JSPページにドラッグした結果書き込まれたタグは下図のようでした。

ここで属性のtypeは、<アプリケーションフォルダ>\web\resourcesに入っているtypes.propertiesというファイルに書かれているtypeを示しています。
types.propertiesの中身を見てみると下図のようになっています。

dojo=/resources/dojo/dojo.jsとなっていますね。
つまりこれはjMakiタグのtypeにdojoを指定するとjMakiApp→Webページ→resources→dojo→dojo.jsをメインライブラリに使うということになります。

注：jMaki Version4対応のNetBeansプラグイン(1.4.x)を利用すると、もはやtypes.propertiesファイルは利用されません。＃詳細はコメントをご覧ください。

ちなみにjMakiタグの第二属性であるnameは、テンプレートファイルの場所を示しています。
ここではname=dojo.treeとなっているのでテンプレートファイルの場所はjMakiApp→Webページ→resources→dojo→treeという形になります。
ちなみにNetBeansのjMakiプラグインではパレットにすべてのDojo関数が出てきていません。でもname属性を使えば自由にテンプレートを作成してそこから任意のDojoライブラリを使うことが出来るようになります。試しにやってみましょう。

前回のATFでDojoを利用した時はFloatingPane（マウスで自由に動くウインドウ）を使いました。
IDE右側のパレットにはありませんが今回もちょっとFloatingPaneを使ってみたいと思います。
＃Dojoの元ネタはjMakiApp→Webページ→resources→dojo→src以下に全て入っています。

・まずはテンプレートフォルダの作成です。jMakiApp→Webページ→resources→dojoフォルダの下にfloatingpaneというフォルダを作成して、component.htmとcomponent.jsというファイルを作成しておきます。（私は面倒なので、dojo\treeフォルダをコピーしてfloatingPaneという名前に変更しました）

component.htmの中身

<div id="${uuid}" dojoType="FloatingPane"
      title="T2000!"
      constrainToContainer="1"
      style="width: 250px; height: 150px; left: 100px; top: 100px;">
      <div id="childpane"><img src="images/t2000.jpg" /></div>
 </div>

dojo.require("dojo.widget.*");

dojo.require("dojo.widget.FloatingPane");

dojo.widget.createWidget(widget.uuid);

フローティングペインの子ノードにimgタグがあり、images/t2000.jpgと指定してあるのでjMakiAppのimagesフォルダに画像ファイルを追加しておきます。（適当な画像ファイルでOKです。追加しなくてもかまいません）
C:\Document and Settings\ユーザ名\jMakiApp\web\imagesに画像ファイルをコピーします。（imagesフォルダがない場合は作成してください）
次に、index.jspの先ほどを追加した下あたりに

   <a:ajax type="dojo" name="dojo.floatingpane"/>

例えばもう一つタイトルの違うフローティングペイン１を作成したいときはjMakiApp→Webページ→resources→dojo直下にfloatingpane1というcomponent.htmとcomponent.jsの入ったフォルダを作成してJSPページに<a:ajax type="dojo" name="dojo.floatingpane1"/>と書けばOKです。
もちろんcomponent.htmのstyle属性の内容を編集して、画面のどこに表示されるかを変更することも可能です。色々値を変更して試してみてください。


jMakiではDojo以外にもGoogleや、Yahoo、Scriptaculousなどのライブラリがデフォルトで利用可能です。
次回はjMaki-NetBeansでGoogleMapアプリケーションを作ってみようと思います。
例によってStep by Stepで解説したいと思います！こんな感じです。