dojoウィジェットを追加する
では、jMakiに埋め込んで利用できる「ウィジェット」を使ってみましょう。先にjMakiをダウンロードしましたが、この中にある「widgets」というフォルダを開いてみてください。いくつかのzipファイルが保管されているはずです。これらが、標準で添付されるウィジェットです。
この中から「dojo」というウィジェット群を利用してみることにします。dojoというのは、オープンソースのJavaScriptライブラリで、リッチなコンポーネントを提供するものです。このdojoのコンポーネントを、そのままjMakiに埋め込んで使ってみよう、というわけです。
「jmaki-dojo-1.0.zip」という圧縮ファイルを展開し、その中を開いてください。「resources」と「templates」というフォルダがあるはずです。「resources」が、実際に利用可能なリソースファイルで、「templates」はオリジナルウィジェットを作成するための雛形となるものです。
「resources」フォルダを開き、その中の「dojo」フォルダを開いてみましょう。多数のフォルダが配置されていますね。これらは、jMakiのコンポーネントです。この「dojo」フォルダをコピーし、「WebContent」内にペーストしてください。
jMakiは、ウィジェットを以下の順番に検索していきます。
- Webアプリケーションのルートを検索する。
- 見つからなかったら、「resoureves」内を検索する。
- それでも見つからなかったら、「WEB-INF/resourees」内を検索する。
従って、通常はWebアプリケーションのルートにフォルダをそのまま配置しておくのが良いでしょう。「ルートに置くのは見苦しい」という人は「resources」内に配置してください。
これで、dojoのウィジェット関係のファイルがプロジェクトに追加されました。では、「index.jsp」を開き、ウィジェットを利用できるようにするためのコードを追加しましょう。まず、冒頭でタグライブラリを追加しておきます。
<%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %>
続いて、一例として時計のウィジェットを配置してみることにします。これは、パレットからタグを追加して記述することも可能ですが、もっと便利なものがあります。「スニペット」ビューを開いてみましょう。多くのウィジェット用のテンプレートが登録されているはずです。この中から「dojo」項目内の［clock］を選択し、マウスでJSPエディターの<div id="content" style="height: 400px">タグ内にドラッグ＆ドロップしましょう。すると、次のようなタグが挿入されるはずです。
<a:widget name="dojo.clock" />
タグを配置したら、Webページ・エディターに切り替え、配置したコンポーネントをマウスでドラッグして大きさなどを調整しておきましょう。縦横100ドットにリサイズしたとすると、このタグは次のように自動修正されるはずです。
<a:widget name="dojo.clock" style="height: 100px; width: 100px"/>
修正したら、サーバを起動し「index.jsp」にアクセスしてみましょう。追加した時計のコンポーネントが表示されるはずです。たった1行のタグを書くだけで、こんな本格的なコンポーネントができてしまうのです。
スニペットには、他にもdojoウィジェットが多数揃っていますから、いろいろと配置してみると面白いでしょう。また、jMakiの中には、dojoの他にもgoogleやyahoo、spryといったウィジェットが圧縮ファイルとして収められています。使い方は、いずれもdojoの場合とまったく同じですし、スニペットにはこれらのタグを挿入するテンプレートも用意されていますので、ほとんどノンプログラミングでこれらを利用することができます。
例えば、下の図は、dojoの簡易エディターを挿入したところです。タグ1つで、WYSIWYGエディターが実現してしまいます。このように、リッチなGUIが簡単にできてしまうのです。
まとめ
ここまでざっと読んでみて、「あれ？ Javaの話がまったく出てこなかったな？」と思った人。そのとおりです。jMakiの中心的な機能は、AJAXベースのウィジェットを利用してリッチなGUIを簡単に実装する手段を提供することです。そのため、jMakiはJSPを利用し、タグライブラリによってウィジェットを記述するように設定してあります。要するに、「ウィジェットの組み込みを簡単に行えるようにするために、サーバサイドJavaの技術を使ってある」というだけなのです。実際、Javaを使わず、PHPを利用したjMakiも用意されています。
AJAXは、「クライアントサイドから非同期通信を使ってサーバにアクセスする技術」という枠を超え、最近では「JavaScriptを利用してよりリッチなWebアプリケーションを構築するための基礎技術」としての役割が重視されつつあるように思えます。実は非同期通信は使っていないけれど、JavaScriptで高度なコンテンツを作成してある――そんなものも今は「AJAX」の仲間として扱われている感があります。よりリッチなGUIを構築する上で、AJAXというキーワードは欠かせないものとなっているのです。
続々と登場する、JavaScriptを使ったコンポーネントをまとめて簡単に導入できるようにするためのフレームワークとして、jMakiは非常に重要なものとなるでしょう。jMakiには、標準でdojoやGoogle、Yahooといったウィジェットが組み込まれています。jMakiを利用することで、開発者はこうした高度なGUIを、まったくJavaScriptを書くことなく手軽にページの中に組み込み利用することができます。より高度なGUIの構築を考えるなら、jMakiは強力な助っ人となってくれることでしょう。
