CodeZine(コードジン)

特集ページ一覧

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

続・Struts 2入門(8)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/10/19 14:00
目次

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アプリケーション構成とカスタムテーマの配置
図1 Webアプリケーション構成とカスタムテーマの配置

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

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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:続 Struts 2入門

もっと読む

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト 東 浩二(アズマ コウジ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5