Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

Struts-Layoutにおけるメニュー・データグリッド・スキンの利用

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2005/12/05 12:00

別稿『Struts-LayoutタグライブラリでリッチなUIを作成する』に引き続き、本稿では、前回紹介できなかったStruts-Layoutの基本機能とカスタマイズ方法について解説します。

目次

はじめに

 別稿『Struts-LayoutタグライブラリでリッチなUIを作成する』に引き続き、本稿では、前回紹介できなかったStruts-Layoutの基本機能とカスタマイズ方法について解説します。Struts-Layoutに関する概要およびインストール方法については、別稿を参照してください。

必要な環境

 このサンプルはJ2SE Development Kit 5.0 Update 4(JDK)、Tomcat5.5.9Struts-Layout1.1にて動作確認をしています。また、WebフレームワークのStruts1.2.7を使用していますが、サンプルソースに内包しているためJDKとサーブレットコンテナ以外の環境は必要ありません。

 環境についての詳細や設定方法については、「サーバサイド技術の学び舎 - WINGS」にある「サーバサイド環境構築設定」を参照してください。

今回紹介するタグ一覧

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

本稿で紹介するStruts-Layoutのタグ
タグ説明
<layout:menu>Tree構造のメニューを表示するタグ
<layout:dynMenu>ドロップダウン構造のメニューを表示するタグ
<layout:menuItem>メニューの要素を定義するタグ
<layout:crumbs>Crumb形式のメニューを表示するタグ
<layout:crumb>Crumbメニューの要素を構成するタグ
<layout:datagrid>データグリッドを表示するタグ
<layout:datagridColumn>データグリッドの表示項目を定義するタグ

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

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

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

サンプルの主要ファイル
ファイル名説明
includeHeader.jspメニューを実装したjspファイル
maintainUserDatagrid.jspDatagridを利用したユーザの管理画面
sendMail.jsp書籍情報をメール配信する画面
sendResult.jspメール配信結果確認画面
includeCrumbsSendMail.jspメール配信画面のCrumbsメニューを実装したjspファイル
includeCrumbsSendResult.jspメール配信結果画面のCrumbsメニューを実装したjspファイル
Struts-Layout.propetiesStruts-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」にアクセスすれば、サンプルを動作させることができます(ホスト名・ポート番号は読者の環境に合わせて変更してください)。

書籍一覧画面

 それではサンプルアプリケーションの画面を見ていきましょう。基本的なアプリケーション構成は別稿から変わりませんので、今回は主に変更点を紹介します。まずはログイン画面よりシステムへログインします。

一覧画面
一覧画面
includeHeader.jsp(一部抜粋)
<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>タグで記述しています。

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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 奥山 学(オクヤマ マナブ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:Struts-LayoutタグライブラリでリッチなUIを作成する
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5