はじめに
本稿ではStruts 2にjQueryとjQuery UIを使ったリッチクライアントを提供するStruts 2 jQueryプラグインを紹介します。
jQueryとjQuery UIについて
jQueryとはJavaScriptとHTML、CSSの相互作用を強化する軽量なJavaScriptライブラリです。軽量ながらも簡単な操作で扱え、HTMLの操作、AJAXによる非同期リクエストも扱えるのが特徴です。
jQuery UIとは、jQueryの公式ユーザインターフェイス群です。ボタンやタブ表示など基本的なものから、カレンダーやカラーピッカーのような良く使われるユーザインターフェイスを提供します。なお、CSSのテンプレートも提供します。
対象読者
Struts 2のWebアプリケーション開発に興味ある方。
必要な環境
最低動作環境は以下のとおりです。
- Java SE 5
- Struts 2.1.8.1が動作する環境
- Tomcat 5.5.x / 6.0.x
Struts 2 jQuery プラグインとは
Struts 2 jQuery プラグインとは、Struts 2アプリケーションで扱う画面、例えばJSP上でjQuery、jQuery UIを扱えるようにしたものです。バージョンアップの頻度もかなり高く、さらにはjQuery UI以外にも外部のjQuery用のプラグインを取り込んで、さらなるユーザインターフェイスの強化が図られています。
今回は執筆時点での最新版である2.3.1で解説します。
Struts 2 jQuery プラグインでできること
Struts 2 jQuery プラグインを導入することで、JSPでのjQueryの導入はもちろんのこと、利用できる機能はたくさんあります。
Struts 2 jQuery プラグインで提供されていないものでも、カスタマイズしたスクリプトはもちろんのこと、追加したjQueryのプラグインも利用することができます。現在の最新版ではグリッド機能とリッチなユーザインターフェイスが手軽に使えるようになり、さらにAJAX通信を利用した画面もjQueryのコードを記述することなく利用することができるというメリットもあります。もちろんStruts 2がもっていた従来の機能も損なうことがありません(※1)。
本稿ではこのプラグインの基本的な使い方を、1つの入力画面を通して紹介していきます。
以下の表に、ウィジェット一覧と、インタラクション(段落の操作)一覧をまとめます。公式の機能一覧はStruts 2 jQuery Pluginならびに実際に動作するサンプルアプリケーションとしてStruts 2 jQuery Plugin Showcaseで公開されていますので参考にしてください。
AJAXを利用したValidation機能もそのまま利用することができ、2.0系、2.1系で不具合として報告されていた、AJAXValidationのメッセージが国際化対応されていない問題も解消されています。
機能名 | 概要 |
TabbedPanel | 複数タブ形式の表示。選んだタブの内容を表示する。 |
Datepicker | カレンダーを利用した日付入力機能。 |
Dialog | ダイアログボックスを表示。 |
Accordion | 複数の段落の中から選択した段落をスライドさせて表示。 |
Autocompleter | テキストボックスで入力された値を検出して、候補を出力するサジェスト機能。 |
Button | フォーム送信用ボタン/リンク作成。 |
Buttonset | チェックボックスやラジオボタンのように扱えるボタンを表示。 |
Progressbar | 処理の進行度合を表示するUIを表示。 |
Slider | 入力する数値をツマミで選択させるUIを表示。 |
Grid | 表形式の出力を行う。ページングやソート、データの抽出、登録、更新、削除機能のUIを搭載。 |
Richtext Editor | テキストエリアで動的にHTMLのスタイルや段落作成ができるテキストエディタ。 |
機能名 | 概要 |
Resizable | プレビュー機能付きの段落サイズ変更。 |
Drag and Drop | 段落をドラッグ&ドロップして、別の場所や別の段落の中へ移動可能にする。 |
Selectable | 複数の段落をグルーピングして選択/非選択状態を検出する。 |
Sortable | 配置された複数の段落の中から1つをドラッグして並び替えが可能になる。 |