はじめに
JSF(Java Server Faces)、Flex、Curlなど昨今のWebアプリケーションはリッチで、生産性の高いUIに注目が集まっています。本稿では、実績のあるStrutsのtaglibを拡張したStruts-Layoutで簡単にリッチなUIを作成する方法をご紹介します。
必要な環境
このサンプルはJ2SE Development Kit 5.0 Update 4、Tomcat5.5.9、Struts-Layout1.1にて動作確認をしています。また、WebフレームワークのStruts1.2.7を使用していますが、サンプルソースに内包しているためJ2SDKとサーブレットコンテナ以外の環境は必要ありません。
環境についての詳細や設定方法については、「サーバサイド技術の学び舎 - WINGS」にある「サーバサイド環境構築設定」を参照してください。
Struts-Layoutの概要とセットアップ方法
Struts-LayoutはStrutsのTaglibを内包する形で作成されたカスタムタグです。そのため属性のほとんどはStruts Taglibと共通のものが利用できます。またUI構築に必要なタグがほとんどStruts-Layoutにて提供されているため、Struts-LayoutのみでUIの作成が行えます。
今回ご紹介するタグの内、主要なものを次表に挙げておきます。
| タグ | 説明 |
<layout:text> | テキストの入力フィールドを生成するタグ |
<layout:textarea> | テキストエリアを生成するタグ |
<layout:password> | パスワードフィールドを生成するタグ |
<layout:date> | カレンダーダイアログ付きの日付フィールドを生成するタグ |
<layout:select> | セレクトボックスを生成するタグ |
<layout:detail> | 詳細データ用フィールドを生成するタグ |
<layout:suggest> | サジェスト機能を備えたフィールドを生成するタグ |
<layout:submit> | サブミットボタンを生成するタグ |
<layout:column> | 含まれる要素を垂直に配置するタグ |
<layout:row> | 含まれる要素を水平に配置するタグ |
<layout:collection> | コレクションから一覧を生成するタグ |
<layout:pager> | 改ページを制御するタグ |
<layout:collectionDetail> | 一覧項目から詳細表示を行うデータを定義するタグ |
<layout:panel> | パネル表示を生成するタグ |
<layout:form> | パネル表示機能付きのHtmlフォームを生成するタグ |
<layout:tabs> | タブ表示を生成するタグ |
<layout:tab> | タブを生成するタグ |
それではStruts-Layoutを利用するための準備としてStrutsアプリケーションを用意して下さい。Strutsについては、@IT 『Strutsを使うWebアプリケーション構築』を参照して下さい。
Struts-Layoutは、http://struts.application-servers.com/の左側のメニューにある［Download］からダウンロードすることができます。なお本稿では「Struts-Layout-v1.1.zip」を利用しています。
ダウンロードした「Struts-Layout-v1.1.zip」を解凍し、「src/library」にある「struts-layout.jar」を「WEB-INF」の「lib」フォルダへ、同じディレクトリにある「Struts-Layout.properties」ファイルを「classes」フォルダのルートディレクトリへ、「struts-layout.tld」を「WEB-INF」へ配置します。そして追加したtldファイルの情報を「web.xml」ファイルへ追記して下さい。筆者は「web.xml」へ次のように記述しました。
<taglib> <taglib-uri>/tags/struts-Layout</taglib-uri> <taglib-location>/WEB-INF/struts-layout.tld</taglib-location> </taglib>
また「Resources」フォルダの「config」フォルダをWebアプリケーションのルートディレクトリに配置します。この際「image」フォルダ内のファイルも「config」フォルダへコピーして下さい。これで準備は完了です。
サンプルアプリケーションの概要
今回ご紹介するサンプルアプリケーションの機能は次の通りです。
- ログイン画面にてユーザ認証をする。
- 一覧画面にて書籍一覧を表示する。
- 検索画面にて書籍の検索をする。
- 登録画面にて新規の書籍を登録する。
- 更新画面にて書籍情報の編集をする。
- ユーザ管理画面にてシステム利用ユーザのメンテナンスをする。
また、今回のサンプルの主要ファイルは次表の通りです。
| ファイル名 | 説明 |
| index.jsp | ログイン画面 |
| home.jsp | 書籍の一覧画面 |
| addBook.jsp | 書籍の登録画面 |
| editBook.jsp | 書籍の編集画面 |
| searchBook.jsp | 書籍の検索画面 |
| maintainUser.jsp | ユーザの管理画面 |
| LoginAction.java | ログイン処理を行うアクションクラス |
| HomeAction.java | 一覧画面での処理を行うアクションクラス |
| AddBookAction.java | 書籍登録画面での処理を行うアクションクラス |
| EditBookAction.java | 書籍編集画面での処理を行うアクションクラス |
| SearchBookAction.java | 書籍検索画面での処理を行うアクションクラス |
| GetBookIsbnAction.java | サジェスト機能を利用するためのアクションクラス |
| UserAction.java | ユーザ管理画面での処理を行うアクションクラス |
| BookForm.java | 書籍情報をやり取りするアクションフォームクラス |
| UserForm.java | ユーザ情報をやり取りするアクションフォームクラス |
| LoginForm.java | ログイン情報をやり取りするアクションフォームクラス |
jspファイルとアクションクラスは、ほぼ1対1の関係で作成しており、アクションフォームクラスはパッケージ単位で作成しています。またGetBookIsbnActionクラスを除くアクションクラスは、org.apache.struts.actions.DispatchActionクラスを継承して作成されています。
org.apache.struts.actions.DispatchActionクラスを継承したクラスを作成し、独自のメソッドをPublicスコープで実装することで、関連したメソッドをひとつのActionクラスにまとめることができます。サンプルを実際に動作させてみたい場合には、記事上部のリンクから、ファイル「StrutsLayout.war」をダウンロードしてTomcatなどのアプリケーションサーバの「webapps」フォルダに配置（デプロイ）してください。アプリケーションサーバ起動後に、「http://localhost:8080/StrutsLayout」にアクセスすればサンプルを動作させることができます（ホスト名・ポート番号は読者の環境に合わせて変更してください）。
ログイン画面
それではサンプルアプリケーションの画面を見ながらStruts-Layoutの利用方法について見ていきましょう。
<layout:form action="/login" styleClass="FORM" key="index.title" reqCode="login" focus="id"> <layout:text key="index.id" property="id" isRequired="true"/> <layout:password key="index.password" property="password" isRequired="true" redisplay="true" /> <layout:submit><bean:message key="index.action"/></layout:submit> </layout:form>
フォーム
<layout:form>タグは、key属性に指定した値をキーにメッセージリソースより取得した文字列をタイトルに設定したパネルを生成することができます。key属性を指定しない場合には枠線で囲まれたパネルが表示されます。またキーとなる項目もディスプレイモードによりedit、inspection、creationのサフィックスが付加されます。特にディスプレイモードの指定が無い場合、デフォルトではeditモードで稼動しますので実際にメッセージリソースを検索するキーはindex.title.editとなります。ディスプレイモードについては後述するユーザ管理画面の説明をご覧下さい。
必須入力項目
<layout:text>タグ、<layout:password>タグなどのテキストフィールド系のタグでは、isRequired属性にtrueを設定することでテキストボックスの横に必須入力項目を示す星マークを表示することができます。フィールドにデータを入力し、フォーカスが外れると星マークは消えますので必須入力項目の状態確認には便利な機能です。
パスワード項目
<layout:password>タグではredisplay属性をtrueに設定することで、伏字の状態でパスワードの再表示が可能です。
ボタン
<layout:submit>タグでは<layout:form>タグのaction属性で指定したActionクラスが呼び出され、reqCode属性で指定したメソッドが実行されます。1つの<layout:form>タグに複数のサブミットボタンを実装したい場合、reqCode属性は<layout:submit>タグで指定して下さい。その場合<layout:submit>タグの属性が優先されます。
ID、パスワードにそれぞれ「book」を入力し、［ログイン］ボタンを押下すると書籍一覧画面へ遷移します。
一覧画面
<layout:row> <layout:pager maxPageItems="5"> <layout:collection title="book.list" name="allBook" styleClass="FORM" id="book" indexId="isbn"> <layout:collectionItem title="book.isbn" property="isbn" sortable="true"/> <layout:collectionItem title="book.date" property="date" type="date" sortable="true"/> <layout:collectionItem title="book.name" property="name"/> <layout:collectionItem title="book.edit"><center> <layout:link href="editBook.do?reqCode=editBook" paramId="isbn" paramName="book" paramProperty="isbn"> * </layout:link></center> </layout:collectionItem> <layout:collectionItem title="remove.action"><center> <layout:link href="allBook.do?reqCode=removeNews" paramId="isbn" paramName="book" paramProperty="isbn"> X </layout:link></center> </layout:collectionItem> <layout:collectionDetail property="isbn"/> <layout:collectionDetail property="name"/> <layout:collectionDetail property="author"/> <layout:collectionDetail property="publisher"/> <layout:collectionDetail property="price"/> <layout:collectionDetail property="size"/> <layout:collectionDetail property="page"/> </layout:collection> </layout:pager> <layout:column> <layout:panel key="book.details" styleClass="FORM"> <layout:detail key="book.isbn" property="isbn" styleClass="LABEL"/> <layout:detail key="book.name" property="name" styleClass="LABEL"/> <layout:detail key="book.author" property="author" styleClass="LABEL"/> <layout:detail key="book.publisher" property="publisher" styleClass="LABEL"/> <layout:detail key="book.price" property="price" styleClass="LABEL"/> <layout:detail key="book.size" property="size" styleClass="LABEL"/> <layout:detail key="book.page" property="page" styleClass="LABEL"/> </layout:panel> </layout:column> </layout:row>
一覧表示と詳細表示の方法
<layout:collection>タグ、<layout:collectionItem>タグでは一覧表示を作成できます。一覧で表示しきれない項目については詳細表示項目で表示しています。詳細項目に表示を行うためには、表示したい項目を<layout:collectionDetail>タグに記述し、表示を行う箇所に<layout:detail>タグを記述します。<layout:detail>タグはアクションフォーム、セッションやリクエストから値を取得するのではなく、コレクションから値を取得して表示することができるタグです。ここでは<layout:collectionDetail>タグで指定したproperty属性を<layout:detail>タグのproperty属性から指定していますので、カーソルを一覧に乗せると<layout:collectionDetail>タグに指定した項目を詳細情報として表示するようにしています。
<layout:panel>タグは先ほどご紹介した<layout:form>タグの表示部分のみを実装するタグです。HTML上Formタグは作成されませんので、画面上のデザインを揃えたい場合などに有効でしょう。
<layout:column>タグはネストしたタグを画面上水平に配置したい場合に使用します。
ソート処理の実装
Struts-Layoutでは一覧表示でソートを行う仕組みが用意されています。「Struts-config.xml」に次の定義を追加し、ソートのキーとしたい<layout:collectionItem>タグのsortable属性にtrueを設定して下さい。画面では項目名の横にソート実行用のイメージリンクが表示され、これをクリックすることで、その行をキーとしたソート処理が可能となります。
<action path="/sort" type="fr.improve.struts.taglib.layout.sort.SortAction" scope="request" validate="false"> </action>
改ページ処理の実装
Struts-Layoutでは一覧表の改ページを実装する仕組みについても用意されています。<layout:collection>タグをネストする形で<layout:pager>タグを書くだけで、改ページリンクの表示、改ページ機能の実装が可能です。maxPageItems属性で1ページのデータ表示件数を指定することができます。
それではページ上部のメニューより［検索］をクリックし、検索画面へ遷移してみましょう。
