AjaxTagsを使ってみる

最近、注目しているAjaxTagsというカスタムタグ。
Ajaxを実装する方法には、いろいろな選択肢が考えられます。(参考リンク:JavaでAjaxを使う時の考察
その中でも、比較的、低レベルな実装でありながら、実用面も考慮したカスタムタグだと考えています。
実際に使ってみて解説したいと思います。

全カスタムタグで共通の属性

AjaxTagsは様々なカスタムタグを提供しています。 その1つ1つの使い方を説明していきますが、その前に全てのカスタムタグで、使用する属性について説明します。 どのタグも基本的にAjax通信を行うので、それに関する設定 … 続きを読む 全カスタムタグで共通の属性

ajax:autocomplete

補完候補を取得して、ドロップダウン形式で選択させることができます。 選択すると、 説明 autocompleteは、入力途中の文字列を補完するドロップダウンを表示します。 入力を進めると候補を絞り込むことができ、選択する … 続きを読む ajax:autocomplete

ajax:select

上位と下位のドロップダウンリスト(selectタグ)を関連付けることができます。 上位の選択肢を決定すると、 下位の選択肢がセットアップされます。 説明 ajax:selectタグは、上位のドロップダウンリスト(sele … 続きを読む ajax:select

ajax:select(サンプル)

JSP 部署:<select id="dept"> ... </select><br/> 社員:<select id="emp"> ... </select> … 続きを読む ajax:select(サンプル)

ajax:htmlContent

インナーフレーム(iframe)のように、DIVタグ内にHTMLコンテンツを動的に読み込みます。 (インナーフレームでいいじゃんという気もするが。) 一覧表示のリンクをクリックすると、右側の詳細表示エリアに動的に読み込み … 続きを読む ajax:htmlContent

ajax:htmlContent(サンプル)

JSP <div id="description"></div> ... <a href="#" class="contentLink"/>${emp.ename}</a> … 続きを読む ajax:htmlContent(サンプル)

セットアップ

AjaxTagsは、同名のプロジェクト(以前の記事参照)があるので、http://ajaxtags.sourceforge.net/からダウンロードします。
2006/11/10時点で、最新のリリースバージョンは、1.1.5でした。1.2も魅力的な機能があったのですが、ベータ版だったので1.1.5を使用します。

AjaxTagsは、JavaScriptライブラリ「prototype.js」に依存しています。
こちらを別途ダウンロードする必要があります。AjaxTags1.1.5で使用しているprototype.jsは、現在では最新ではないのですが、 prototype-1.3.1.jsを使用しています。(1.4.0では動かなかった)

それらのファイルを、Webアプリケーションにコピーしておきましょう。私はこんな感じで配置しました。

${ajaxtags}/css ${WebApp-Context}/css
${ajaxtags}/images ${WebApp-Context}/img
${ajaxtags}/js/ajaxtags-1.1.5.jar ${WebApp-Context}/js
prototype-1.3.1.js ${WebApp-Context}/js
${ajaxtags}/lib/の一部 ${WebApp-Context}/WEB-INF/lib
${ajaxtags}/ajaxtags-1.1.5.jar ${WebApp-Context}/WEB-INF/lib

※${ajaxtags}/lib/内のjarファイルは、必要に応じて追加するものもあるので注意してください。
(struts.jarなどは、実際にStrutsを使うのであれば、それの最新版を入れたほうがよいです)
最低限コピーすべきは、commons-beanutils, commons-langのJARだと思います。(JSTLを使うページであれば、jstl.jarとstandard.jarも入れときましょう)

JSP2.0以前の場合は、TLDファイルをWEB-INFフォルダにコピーして、参照をweb.xmlに記述します。

<taglib>
  <uri>http://ajaxtags.org/tags/ajax</uri>
  <location>/WEB-INF/ajaxtags.tld</location>
</taglib>

(JSP2.0の場合は、JARを置くだけで参照してくれるので不要です。)

JSPの記述

タグライブラリの宣言が必要です。
<%@ taglib uri="http://ajaxtags.org/tags/ajax" prefix="ajax" %>
JavaScriptライブラリも参照します。

<script type="text/javascript" src="js/prototype-1.3.1.js"></script>
<script type="text/javascript" src="js/ajaxtags-1.1.5.js"></script>

スタイルシートは、サンプルが用意されているので、適当にリネームしてHTMLから参照します。
<link type="text/css" rel="stylesheet" href="css/ajaxtags.css" />

以上でセットアップは完了です。
これで、Ajax機能を有した様々なカスタムタグが使用できます。次回は全部のカスタムタグで共通な設定(属性)について説明します。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)