Struts 2にリッチUIを提供する「Struts2 jQueryプラグイン」

続・Struts 2入門（8）

Struts 2 jQuery プラグインを利用するための準備

　Struts 2 jQuery プラグインのjarファイルを/WEB-INF/lib/に配置しておけば準備完了です。ダウンロードはgoogle code:Struts 2 JQuery Pluginから行います。

　あとは、jQueryプラグインを使いたい画面のヘッダ領域で宣言文を追加します。なお、Struts 2 jQueryプラグインの宣言文はStruts 2の標準タグライブラリ宣言の直後に置くこと、さらに拡張グリッドと拡張テキストエディタは別のライブラリ、別の名前空間をもっていることに注意してください。

リスト1　success.jsp（tablib宣言部）

<%@ taglib prefix="s" uri="/struts-tags"%>            …（1）
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>    …（2）
<%@ taglib prefix="sjg" uri="/struts-jquery-grid-tags" %>        …（3）
<%@ taglib prefix="sjr" uri="/struts-jquery-richtext-tags"%>     …（4）

　それぞれのタグライブラリは、以下のとおりです。

• （1） Struts 2標準タグライブラリ
• （2） Struts 2 jQueryプラグイン
• （3） Struts 2 jQuery Gridプラグイン（jqgrid）
• （4） Struts 2 jQuery 拡張テキストエディタプラグイン（tinymce/ckeditor）

　タグライブラリの宣言は、利用するライブラリのみで構いません。例えばGridプラグインと拡張テキストエディタプラグインが不要であれば、タグライブラリ宣言は（1）（2）のみとなります。

jQuery UIのテーマを使う

　ボタンの色や背景色など、入力フォームの基本デザインをテーマと呼びます。このテーマの設定方法は、以下の2通りになります。

リスト2　定義済みテーマの利用（抜粋）

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
  <head>
    <sj:head jqueryui="true" jquerytheme="cupertino"/>
  </head>
  …（以下省略）…

　<sj:head>要素で、jQuery UIの利用設定を行います。jquerytheme属性で、テーマ名を指定します。適用可能なテーマ名一覧についてはStruts 2 jQuery PluginのSupport for themesを参照してください。

　カスタマイズしたテーマを使う場合は次のような宣言になります。

リスト3　カスタムテーマの利用（抜粋）

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
  <head>
    <sj:head jqueryui="true" jquerytheme="custom" customBasepath="template/themes"/>
  </head>
  …（以下省略）…

　変更する点は2か所です。jquerytheme属性でカスタマイズしたテーマ名、customBasepathで、カスタムしたテーマの相対パスを指定します。このcustomBasepathは、実際のテーマファイルが置かれているWebアプリケーションルートからの相対パスになります。

　リスト3の例では、template/themes 以下に置かれ、そのディレクトリの下にテーマ「custom」の名前で作られたディレクトリが使われます。このテーマ名がディレクトリ名にもなっています。

図1　Webアプリケーション構成とカスタムテーマの配置

　なお、このテーマはjQuery UI公式のテーマローラで作成したものを配置しています。テーマを作成後、ダウンロードを行い、解凍します。

　解凍後、jquery-ui-X.X.X.custom/cssにある custom-themeを丸ごと配置したのち、このcustom-themeの名前を変更すれば完了です。