検索画面
<layout:form action="/searchBook" styleClass="FORM" key="book.search" reqCode="findByDateAndIsbn"> <layout:suggest key="book.isbn" property="isbn" suggestAction="/getBookIsbn" styleId="title" styleClass="LABEL" /> <layout:date key="book.date" property="date" styleClass="LABEL" startYear="1996" endYear="2016"/> <layout:submit reqCode="findByDateAndIsbn"> <bean:message key="search.action"/></layout:submit> </layout:form>
サジェスト処理の実装
<layout:suggest>タグではsuggestAction属性で指定したアクションを実行し、一覧候補から選択する形式でフィールド入力をサポートすることができます。suggestAction属性に呼び出すアクションパスを指定して下さい。ここでは呼び出すアクションクラスとしてGetBookIsbnActionクラスを作成しました。
public class GetBookIsbnAction extends SuggestAction { public Collection getSuggestionList (HttpServletRequest request, String word) { Collection books = BookDao.getInstance().findAll(); TreeSet suggestions = new TreeSet(); if (word != null && word.length() > 0) { Iterator iter = books.iterator(); while (iter.hasNext()) { Book book = (Book) iter.next(); if (book.getIsbn().toLowerCase() .startsWith(word.toLowerCase())) suggestions.add(book.getIsbn()); } } return suggestions; } }
サジェスト処理用のアクションクラスはfr.improve.struts.aglib.layout.suggest.SuggetActionを継承しなければなりません。<layout:suggest>タグにはreqCode属性がありませんのでアクションクラスを単体で実装し、getSuggestionListメソッドをオーバーライドして処理を実装します。フォームの値が変更された時にgetSuggestionListメソッドが実行され、入力値が引数wordとして渡されますので、その状態により検索処理を実行し、ISBN番号一覧を作成しています。
カレンダー表示の実装
<layout:date>タグでは日付形式の入力が可能です。入力フィールドの隣に表示される画像をクリックすることで、カレンダーダイアログを表示して日付を選択することができます。ダイアログで表示する日付の範囲はstartYear属性、endYear属性でそれぞれ指定が可能です。
検索を実行すると該当するデータが一覧画面へ表示されます。
検索結果が表示されたら、上段メニューより［登録］をクリックし、登録画面へ遷移してみましょう。
登録画面
<layout:form action="/addBook" styleClass="FORM" key="book.add" reqCode="addBook" width="500"> <layout:tabs styleClass="FORM" width="500"> <layout:tab key="tab.baseInfo" width="100"> <layout:text key="book.isbn" property="isbn" isRequired="true" styleClass="LABEL"/> <layout:text key="book.name" property="name" isRequired="true" styleClass="LABEL"/> <layout:text key="book.author" property="author" isRequired="true" styleClass="LABEL"/> <layout:text key="book.publisher" property="publisher" isRequired="true" styleClass="LABEL"/> <layout:text key="book.price" property="price" isRequired="false" styleClass="LABEL"/> <layout:text key="book.size" property="size" isRequired="false" styleClass="LABEL"/> <layout:text key="book.page" property="page" isRequired="false" styleClass="LABEL"/> <layout:submit><bean:message key="add.action"/></layout:submit> </layout:tab> <layout:tab key="tab.additionalInfo" width="100"> <layout:textarea key="book.review" property="review" isRequired="false" styleClass="LABEL" size="50"/> <layout:submit><bean:message key="add.action"/></layout:submit> </layout:tab> </layout:tabs> </layout:form>
タブ表示の実装
通常のJSP、HTMLでは実装が面倒なタブ形式の画面表示ですが、Struts-Laytoutでは、あらかじめタブ形式で画面を構成するカスタムタグが用意されています。ここでは<layout:tabs>タグにネストした基本情報と追加情報の<layout:tab>タグがタブ表示されています。タブ名はkey属性で指定した値がメッセージリソースより設定されます。
HTMLではタブの表示はJavascriptにより制御されていますので、タブごとに異なった送信情報やボタンの配置を行いたい場合には、<layout:tab>タグごとに<layout:form>タグを配置するなどすると良いでしょう。
［登録］ボタンを押下し、登録が成功すると一覧画面へ遷移します。登録結果が表示されたら、一覧表示より編集対象データの*（アスタリスク）をクリックして更新画面へ遷移してみましょう。
更新画面
<layout:form action="/editBook" styleClass="FORM" key="book.edit" reqCode="updateBook" width="500"> <layout:tabs styleClass="FORM" width="500"> <layout:tab key="tab.baseInfo" width="100"> <layout:text key="book.isbn" property="isbn" readonly="true" styleClass="LABEL"/> <layout:text key="book.name" property="name" isRequired="true" styleClass="LABEL"/> <layout:text key="book.author" property="author" isRequired="true" styleClass="LABEL"/> <layout:text key="book.publisher" property="publisher" isRequired="true" styleClass="LABEL"/> <layout:text key="book.price" property="price" isRequired="false" styleClass="LABEL"/> <layout:text key="book.size" property="size" isRequired="false" styleClass="LABEL"/> <layout:text key="book.page" property="page" isRequired="false" styleClass="LABEL"/> <layout:submit> <bean:message key="edit.action"/></layout:submit> </layout:tab> <layout:tab key="tab.additionalInfo" width="100"> <layout:textarea key="book.review" property="review" isRequired="false" styleClass="LABEL" size="50"/> <layout:submit> <bean:message key="edit.action"/></layout:submit> </layout:tab> </layout:tabs> </layout:form>
ご覧のとおり、画面構成は登録画面とほぼ同じですが、入力フィールドの状態が異なっています。ISBN番号はキー項目ですので、ここでは変更が行えません。このように各画面を実装していくと同じ構成の画面は多く、冗長な記述が多くなることがあります。これを解決する方法がStruts-Layoutでは用意されていますので、その実装方法を次のユーザ管理画面で見て見ましょう。
上段のメニューより［ユーザ管理］をクリックするとユーザメンテナンス画面へ遷移します。
ユーザ管理
<layout:form align="center" action="/maintainUser.do" key="user" reqCode="create" styleClass="FORM" width="50%"> <layout:text key="user.id" property="id" styleClass="LABEL" mode="E,I,N" isRequired="true"/> <layout:text key="user.password" property="password" styleClass="LABEL" mode="E,E,N" isRequired="true"/> <layout:select key="user.id" property="id" styleClass="LABEL" mode="N,N,E"> <layout:optionsCollection name="users" label="id" value="id"/> </layout:select> <layout:formActions> <layout:submit mode="N,N,D" reqCode="modeCreate"> <bean:message key="toCreate.action"/></layout:submit> <layout:submit mode="N,N,D" reqCode="modeEdit"> <bean:message key="toEdit.action"/></layout:submit> <layout:submit mode="D,D,N" reqCode="modeInspect"> <bean:message key="toInspection.action"/></layout:submit> <layout:submit mode="D,N,N" reqCode="create"> <bean:message key="add.action"/></layout:submit> <layout:submit mode="N,D,N" reqCode="edit"> <bean:message key="edit.action"/></layout:submit> </layout:formActions> </layout:form>
一覧からユーザを選択し、［編集画面へ］のボタンを押下すると編集画面が表示されます。また［登録画面へ］を押下すると登録画面が表示されます。
画面上の構成は異なりますが、各画面は1つのjspファイルで構成されています。この仕組みがディスプレイモードです。
ディスプレイモード
Struts-Layoutの特徴の大きな特徴のひとつに、ディスプレイモードがあります。
ディスプレイモードは1つのJSP、1つのDispatchAction、そして1つのActionFormで1機能を構成することを目標に作成されており、画面タイプを登録、編集、照会の3種類に分けます。そして画面に記述する各タグのそれぞれのmode属性で、この3種類のディスプレイモードに連動した振る舞いを設定することができます。
ユーザ管理画面ではユーザ選択、ユーザ登録、ユーザ編集画面への遷移時にアクションクラスで次のような記述を行い、ディスプレイモードを変更しています。
FormUtils.setFormDisplayMode (request, actionform, FormUtils.CREATE_MODE);
用意されているディスプレイモードは次の通りです。
| 種類 | 説明 | FormUtilsクラスの属性 |
| CREATION | 登録モード | FormUtils.CREATE_MODE |
| EDIT | 編集モード | FormUtils.EDIT_MODE |
| INSPECT | 照会モード | FormUtils.INSPECT_MODE |
またディスプレイモードごとの各入力フィールド、ボタンタグの振る舞いはmode属性に次のような方式で指定を行っています。
mode="X,Y,Z"
ここでのXはCREATEモードでの振る舞い、YはEDITモードでの振る舞い、そしてZはINSPECTモードでの振る舞いを指定します。指定できる振る舞いの種類は次表の通りです。
| 種類 | 説明 |
| E | 編集可能フィールドとしてラベルとともに生成される。 |
| I | 文字列としてラベルとともに生成される。hidden項目も生成されるためパラメータとして送信可能。 |
| S | 文字列としてラベルとともに生成される。hidden項目は生成されない。 |
| N | 表示されない。 |
| P | フィールドの値がNULLの場合は「N」と同様の扱いとなり、NULLではない場合は「S」と同様の扱いとなる。 |
| H | hidden項目として生成される。ラベルは生成されない。 |
| R | readonly属性が設定されたフィールドとして、ラベルとともに生成される。 |
| D | disable属性が設定されたフィールドとして、ラベルとともに生成される。 |
これらのディスプレイモードを利用し、ユーザ管理画面は1つのJSPで実装されています。
Struts-Layout Studio
Eclipse向けにStruts-Layout用のプラグインが提供されています。このプラグインではlayoutタグのコードアシスト、画面レイアウトの確認を行うことができます。サーバへデプロイすることなく、jspファイルのみでレイアウトの確認ができるため、アプリケーションの開発時には画面開発者とサーバサイド開発者の作業を分割することが可能でしょう。
Struts-Layout Studioは、http://struts.application-servers.com/sls/からダウンロードして下さい。ダウンロードしたアーカイブを解凍し、「plugin」「features」フォルダをそれぞれEclipseの該当フォルダへ配置すればインストールは完了です。ユーザ登録が必要ですが、Community Editionは無料ですので、ぜひダウンロードして見て下さい。
まとめ
Struts-Layoutでは本稿では紹介しきれないほどの豊富なタグが提供されています。また今回ご紹介できなかったプロパティファイルによる設定の一元管理方法、カスタムポリシーによるフィールドの制御方法など便利な機能をたくさん備えています。「Struts-layout」ではこれらの説明に関するドキュメントも充実していますので、一度ご覧になって、お使いになってみることをおすすめします。
