JavaScriptを書かずにAjaxを実現するjMaki：CoolなEclipseプラグイン（22）（2/3 ページ）

» 2007年11月07日 00時00分公開

　ここからは、jMakiアプリケーションの作成を通して、実際にjMakiをどのように使っていけばいいのかを見ていきましょう。ここでは、簡単なテーブル表示アプリケーション、JSONでデータを取得するアプリケーション、Googleマップを利用したアプリケーションの3つを作成してみましょう。

Hello jMakiアプリケーションの作成

　最初に簡単なテーブル表示アプリケーションを作ってみます。

JSPのひな型を作成

　jMakiプラグインには、jMakiで利用できるCSSを適用したJSPのひな型を生成する機能があります。この機能により、JSPにおけるレイアウト定義を簡単にできます。

　JSPのひな型を生成するのは、［ファイル］→［新規］→［その他］から［ｊMaki Wizards］で［Styled jMaki JSP(with CSS)］を選択（図4）し、［次へ］を押下します。

図4　JSPのひな型を選択

　ファイル名とCSSスタイルの選択画面に移るのでファイル名を入力し、CSSのスタイルを選択します。ここでは、ファイル名をindex.jspとし、スタイルに「jmaki-no-css」を選択します（図5）。

図5　CSSスタイルの選択

　［終了］を押すとエラーが発生しますが、［キャンセル］ボタンを押すと、ファイルは生成されています。また、左のjMakiプラグインの1.0では、jmaki-no-css.cssというファイルが［プロジェクト・エクスプローラ］上に生成されますが、実際には存在しないので削除しておきます。おそらく、これらの現象はバグだと思われます。将来のバージョンでは修正されるでしょう。

　生成されたJSPファイルindex.jspにjMakiで利用するタグライブラリの宣言（下記の太字の部分）を追加しておきます。

JSPに記述するべきタグライブラリの宣言

<%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %>

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

              <html>

              <head>

              

              …（略）…

　これで準備は完了です。

ウィジットの追加

　先ほど作成したJSPにウィジットを追加します。ウィジットを追加するには、［スニペット］ビューからウィジットを張り付けます。［スニペット］ビューを表示するには、［ウィンドウ］→［ビューの表示］→［一般］→［スニペット］を選択します（図6）。

図6　［スニペット］ビューの表示

　［スニペット］ビューからウィジットを張り付けるには、JSPへウィジットをドラッグ＆ドロップで配置します（図7）。

図7　ウィジットの張り付け

　ここでは、JavaScriptライブラリDojoのetableウィジットを張り付けてみます。すると、リスト1のようになります。

リスト1　etableのサンプル

<%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %>

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

                  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

              <html>

              <head>

                  <meta http-equiv="Content-Type" content="text/html; 

                    charset=UTF-8">

                  <title>Default Page</title>

              </head>

              <body>

                  <h1>Default Page</h1>

              

                  <a:widget name="dojo.etable"

                      value="{columns : [

                          { label : 'Title', id : 'title'},

                          { label :'Author', id : 'author'},

                          { label : 'ISBN', id : 'isbn'},

                          { label : 'Description', id : 'description'}

                      ],

                      rows : [

                          { title : 'Book Title 1', author : 'Author 1', 

                        isbn : '4412', description : 'A Some long description'},

                          { id : 'bar', title : 'Book Title 2', 

                        author : 'Author 2', isbn : '4412', 

                       description : 'A Some long description'}

                      ]

                  }" />

              </body>

              </html>

　さらにDojoの実行に必要なJavaScriptなどのリソースもプロジェクトにコピーされます。ウィジットを配置するだけで、リソースがコピーされるので、非常に便利です。

サンプルの実行

　作成したサンプルアプリケーションを実行するには、プロジェクトを右クリックし、［実行］→［サーバーで実行］を選択し、実行します。実行に失敗した場合は、jmaki-no-css.cssを削除しているかどうか確認してください。「http://localhost:8080/sample/」にアクセスすると、次のような画面が表示されます。