Struts-LayoutタグライブラリでリッチなUIを作成する（カスタマイズ編）

はじめに

　別稿『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」にある「サーバサイド環境構築設定」を参照してください。

今回紹介するタグ一覧

　今回紹介するタグの一覧を見てみましょう。

サンプルアプリケーションの概要

　今回紹介するサンプルアプリケーションは、前回で紹介したアプリケーションを機能拡張したものとなっています。変更点はMenuと、DataGridタグを用いたユーザ管理画面、またSkinの切り替え機能が追加となっています。

　追加された主要ファイルは次表の通りです。

　サンプルを実際に動作させてみたい場合には、記事上部のリンクからファイル「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からの取得も可能となっています。画面で表示されるメニュー構造とその内容は次のようになります。

メニュー

　それではメニューの［メール］から［メール配信］を選択して、次の画面へ遷移しましょう。