はじめに
別稿『Struts-LayoutタグライブラリでリッチなUIを作成する』に引き続き、本稿では、前回紹介できなかったStruts-Layoutの基本機能とカスタマイズ方法について解説します。Struts-Layoutに関する概要およびインストール方法については、別稿を参照してください。
必要な環境
このサンプルはJ2SE Development Kit 5.0 Update 4（JDK）、Tomcat5.5.9、Struts-Layout1.1にて動作確認をしています。また、WebフレームワークのStruts1.2.7を使用していますが、サンプルソースに内包しているためJDKとサーブレットコンテナ以外の環境は必要ありません。
環境についての詳細や設定方法については、「サーバサイド技術の学び舎 - WINGS」にある「サーバサイド環境構築設定」を参照してください。
今回紹介するタグ一覧
今回紹介するタグの一覧を見てみましょう。
| タグ | 説明 |
<layout:menu> | Tree構造のメニューを表示するタグ |
<layout:dynMenu> | ドロップダウン構造のメニューを表示するタグ |
<layout:menuItem> | メニューの要素を定義するタグ |
<layout:crumbs> | Crumb形式のメニューを表示するタグ |
<layout:crumb> | Crumbメニューの要素を構成するタグ |
<layout:datagrid> | データグリッドを表示するタグ |
<layout:datagridColumn> | データグリッドの表示項目を定義するタグ |
サンプルアプリケーションの概要
今回紹介するサンプルアプリケーションは、前回で紹介したアプリケーションを機能拡張したものとなっています。変更点はMenuと、DataGridタグを用いたユーザ管理画面、またSkinの切り替え機能が追加となっています。
追加された主要ファイルは次表の通りです。
| ファイル名 | 説明 |
| includeHeader.jsp | メニューを実装したjspファイル |
| maintainUserDatagrid.jsp | Datagridを利用したユーザの管理画面 |
| sendMail.jsp | 書籍情報をメール配信する画面 |
| sendResult.jsp | メール配信結果確認画面 |
| includeCrumbsSendMail.jsp | メール配信画面のCrumbsメニューを実装したjspファイル |
| includeCrumbsSendResult.jsp | メール配信結果画面のCrumbsメニューを実装したjspファイル |
| Struts-Layout.propeties | Struts-Layoutの標準プロパティファイル |
| Menu.propeties | 標準メニューのプロパティファイル |
| MySkin.properties | カスタム画面用のプロパティファイル |
| Menu_myskin.properties | カスタム画面のメニュー用プロパティファイル |
| MailAction.java | メール配信処理を行うアクションクラス |
| SkinAction.java | スキン切り替えを行うアクションクラス |
| UserAction.java | ユーザ管理画面での処理を行うアクションクラス |
| MailForm.java | メール配信情報をやり取りするアクションフォームクラス |
| SkinForm.java | スキン切り替え情報をやりとりするアクションフォームクラス |
| UserForm.java | ユーザ情報をやりとりするアクションフォームクラス |
サンプルを実際に動作させてみたい場合には、記事上部のリンクからファイル「StrutsLayout2.war」をダウンロードして、Tomcatなどのアプリケーションサーバの「webapps」フォルダに配置（デプロイ）してください。アプリケーションサーバ起動後に「http://localhost:8080/StrutsLayout2」にアクセスすれば、サンプルを動作させることができます（ホスト名・ポート番号は読者の環境に合わせて変更してください）。
書籍一覧画面
それではサンプルアプリケーションの画面を見ていきましょう。基本的なアプリケーション構成は別稿から変わりませんので、今回は主に変更点を紹介します。まずはログイン画面よりシステムへログインします。
<layout:dynMenu config="Menu" left="70" top="30"> <layout:menuItem key="menu.book"> <layout:menuItem key="menu.home" page="/allBook.do?reqCode=showAllBook"/> <layout:menuItem key="menu.search" page="/searchBook.jsp"/> <layout:menuItem key="menu.add" page="/addBook.jsp"/> </layout:menuItem> <layout:menuItem key="menu.mail"> <layout:menuItem key="menu.sendMail" page="/sendMail.do?reqCode=list"/> </layout:menuItem> <layout:menuItem key="menu.user"> <layout:menuItem key="menu.DisplayMode" page="/maintainUser.do?reqCode=modeInspect"/> <layout:menuItem key="menu.Datagrid" page="/maintainUser.do?reqCode=datagridEdit"/> </layout:menuItem> <layout:menuItem key="menu.skin"> <layout:menuItem key="menu.default" page="/changeSkin.do?reqCode=changeSkin&skin="/> <layout:menuItem key="menu.custom" page="/changeSkin.do?reqCode=changeSkin&skin=MySkin"/> </layout:menuItem> <layout:menuItem key="menu.logout" page="/login.do?reqCode=logout"/> </layout:dynMenu>
メニューの実装
初期表示される画面が書籍管理のホーム画面です。また画面上部に表示されているのが今回追加されたメニューです。
Struts-Layoutで提供されるメニューの種類は、縦型のツリーメニューとJavaScriptによる横型メニューの2つのメニューとなっています。本サンプルでは横型メニューの<layout:dynMenu>タグを実装していますが、メニューの要素定義は2つのメニューとも同一の記述ですので、変更も簡単に行うことができます。
メニュー全体を定義する<layout:dynMenu>タグのconfig属性にはクラスルートからのプロパティファイルを指定します。<layout:menuItem>タグでは各メニュー項目を定義します。page属性は任意項目でリンク先を定義可能ですが、省略した場合にはメニューの表示のみを行うことができます。<layout:menuItem>タグは入れ子構造にすることが可能で入れ子の階層構造がそのまま表示されるメニューに反映されます。
サンプルはjspにメニューの内容を直接記述していますが、Actionクラスでデータベースやxmlからの取得も可能となっています。画面で表示されるメニュー構造とその内容は次のようになります。
| メニュー項目 | 説明 |
| 書籍管理 | 書籍管理機能のカテゴリを表します。 |
| ホーム | 書籍管理機能のホーム画面へのリンクです。 |
| 検索 | 書籍管理機能の検索画面へのリンクです。 |
| 登録 | 書籍管理機能の登録画面へのリンクです。 |
| メール | メール関連機能のカテゴリを表します。 |
| メール配信 | メール関連機能のメール配信画面へのリンクです。 |
| ユーザ管理 | ユーザ管理機能のカテゴリを表します。 |
| ディスプレイモード版 | ディスプレイモード版のユーザ管理画面へのリンクです。 |
| データグリッド版 | データグリッド版のユーザ管理画面へのリンクです。 |
| スキンの切り替え | スキン切り替え機能のカテゴリを表します。 |
| 標準 | 標準スキンに切り替えます。 |
| カスタム | カスタムスキンに切り替えます。 |
| ログアウト | ログアウトを実行します。 |
<layout:dynMenu>タグを利用するためには、関連するJavaScriptへのリンクが定義される<layout:html>タグを使うことが必須となっていますので注意して下さい。本サンプルではすべてのhtmlタグは<layout:html>タグで記述しています。それではメニューの［メール］から［メール配信］を選択して、次の画面へ遷移しましょう。
