SHOEISHA iD

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

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

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

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

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


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

検索画面

検索画面
検索画面
「searchBook.jsp」のソース一部
<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クラスを作成しました。

「GetBookIsbnAction.java」のソース一部
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属性でそれぞれ指定が可能です。

カレンダーダイアログ表示
カレンダーダイアログ表示

 検索を実行すると該当するデータが一覧画面へ表示されます。

 検索結果が表示されたら、上段メニューより[登録]をクリックし、登録画面へ遷移してみましょう。

登録画面

登録画面
登録画面
「addBook.jsp」のソース一部
<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>タグを配置するなどすると良いでしょう。

 [登録]ボタンを押下し、登録が成功すると一覧画面へ遷移します。登録結果が表示されたら、一覧表示より編集対象データの*(アスタリスク)をクリックして更新画面へ遷移してみましょう。

更新画面

更新画面
更新画面
「editBook.jsp」のソース一部
<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では用意されていますので、その実装方法を次のユーザ管理画面で見て見ましょう。

 上段のメニューより[ユーザ管理]をクリックするとユーザメンテナンス画面へ遷移します。

ユーザ管理

ユーザ管理画面 - ユーザ選択
ユーザ管理画面 - ユーザ選択
ユーザ管理画面 - ユーザ編集
ユーザ管理画面 - ユーザ編集
ユーザ管理画面 - ユーザ登録
ユーザ管理画面 - ユーザ登録
「maintainUser.jsp」のソース一部
<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属性の定義パターン
mode="X,Y,Z"

 ここでのXはCREATEモードでの振る舞い、YはEDITモードでの振る舞い、そしてZはINSPECTモードでの振る舞いを指定します。指定できる振る舞いの種類は次表の通りです。

mode属性で指定できる振る舞いの種類
種類説明
E編集可能フィールドとしてラベルとともに生成される。
I文字列としてラベルとともに生成される。hidden項目も生成されるためパラメータとして送信可能。
S文字列としてラベルとともに生成される。hidden項目は生成されない。
N表示されない。
Pフィールドの値がNULLの場合は「N」と同様の扱いとなり、NULLではない場合は「S」と同様の扱いとなる。
Hhidden項目として生成される。ラベルは生成されない。
Rreadonly属性が設定されたフィールドとして、ラベルとともに生成される。
Ddisable属性が設定されたフィールドとして、ラベルとともに生成される。

 これらのディスプレイモードを利用し、ユーザ管理画面は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 Studio - コードアシスト
Struts-Layout Studio - コードアシスト
Struts-Layout Studio - レイアウト確認
Struts-Layout Studio - レイアウト確認
補足説明
 Struts-Layout StudioのCommunity EditionはEclipse 3.0/3.1のみに対応し、Layoutタグの入力コードアシスト、プレビューのみ可能ですが、有料版のEnterprise EditionはEclipse 2.1/3.0/3.1やWSAD 5.1、RAD 6に対応し、他のStruts Taglibのコードアシスト、プレビューに加えQuick Fixというエラー修正サポート機能も利用可能です。

まとめ

 Struts-Layoutでは本稿では紹介しきれないほどの豊富なタグが提供されています。また今回ご紹介できなかったプロパティファイルによる設定の一元管理方法、カスタムポリシーによるフィールドの制御方法など便利な機能をたくさん備えています。「Struts-layout」ではこれらの説明に関するドキュメントも充実していますので、一度ご覧になって、お使いになってみることをおすすめします。

参考資料

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング