SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Struts-LayoutタグライブラリでリッチなUIを作成する

Struts-LayoutタグライブラリでリッチなUIを作成する

Struts-Layoutタグライブラリを利用した文書管理システムの構築


  • X ポスト
  • このエントリーをはてなブックマークに追加

JSF(Java Server Faces)、Flex、Curlなど昨今のWebアプリケーションはリッチで、生産性の高いUIに注目が集まっています。本稿では、実績のあるStrutsのtaglibを拡張したStruts-Layoutで簡単にリッチなUIを作成する方法をご紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 JSF(Java Server Faces)、FlexCurlなど昨今のWebアプリケーションはリッチで、生産性の高いUIに注目が集まっています。本稿では、実績のあるStrutsのtaglibを拡張したStruts-Layoutで簡単にリッチなUIを作成する方法をご紹介します。

必要な環境

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

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

Struts-Layoutの概要とセットアップ方法

 Struts-LayoutはStrutsのTaglibを内包する形で作成されたカスタムタグです。そのため属性のほとんどはStruts Taglibと共通のものが利用できます。またUI構築に必要なタグがほとんどStruts-Layoutにて提供されているため、Struts-LayoutのみでUIの作成が行えます。

 今回ご紹介するタグの内、主要なものを次表に挙げておきます。

Struts-Layoutの主要なタグ
タグ説明
<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-Layout1.1は、Struts1.1と1.2でのみ動作します。

 ダウンロードした「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」へ次のように記述しました。

「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」フォルダへコピーして下さい。これで準備は完了です。

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

 今回ご紹介するサンプルアプリケーションの機能は次の通りです。

  1. ログイン画面にてユーザ認証をする。
  2. 一覧画面にて書籍一覧を表示する。
  3. 検索画面にて書籍の検索をする。
  4. 登録画面にて新規の書籍を登録する。
  5. 更新画面にて書籍情報の編集をする。
  6. ユーザ管理画面にてシステム利用ユーザのメンテナンスをする。

 また、今回のサンプルの主要ファイルは次表の通りです。

サンプルの主要ファイル
ファイル名説明
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クラスを継承して作成されています。

補足説明
 Strutsではorg.apache.struts.actions.DispatchActionクラスを継承したクラスを作成し、独自のメソッドをPublicスコープで実装することで、関連したメソッドをひとつのActionクラスにまとめることができます。

 サンプルを実際に動作させてみたい場合には、記事上部のリンクから、ファイル「StrutsLayout.war」をダウンロードしてTomcatなどのアプリケーションサーバの「webapps」フォルダに配置(デプロイ)してください。アプリケーションサーバ起動後に、「http://localhost:8080/StrutsLayout」にアクセスすればサンプルを動作させることができます(ホスト名・ポート番号は読者の環境に合わせて変更してください)。

ログイン画面

 それではサンプルアプリケーションの画面を見ながらStruts-Layoutの利用方法について見ていきましょう。

ログイン画面
ログイン画面
「index.jsp」のソース一部
<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」を入力し、[ログイン]ボタンを押下すると書籍一覧画面へ遷移します。

一覧画面

一覧画面
一覧画面
「home.jsp」のソース一部
<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を設定して下さい。画面では項目名の横にソート実行用のイメージリンクが表示され、これをクリックすることで、その行をキーとしたソート処理が可能となります。

「Struts-config.xml」でのソート処理をするActionの定義例
<action path="/sort"
  type="fr.improve.struts.taglib.layout.sort.SortAction"
  scope="request"
  validate="false">
</action>

改ページ処理の実装

 Struts-Layoutでは一覧表の改ページを実装する仕組みについても用意されています。<layout:collection>タグをネストする形で<layout:pager>タグを書くだけで、改ページリンクの表示、改ページ機能の実装が可能です。maxPageItems属性で1ページのデータ表示件数を指定することができます。

 それではページ上部のメニューより[検索]をクリックし、検索画面へ遷移してみましょう。

次のページ
検索画面

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Struts-LayoutタグライブラリでリッチなUIを作成する連載記事一覧
この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/169 2006/10/11 19:34

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング