CodeZine(コードジン)

特集ページ一覧

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

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

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

カスタマイズ

 ここまで紹介してきた実装方法を見てみると、簡単にリッチな画面が作成できる反面、その分だけカスタマイズの自由度が低いと感じるかもしれません。しかしStruts-Layoutではその点も考慮されており、Skinフレームワークとプロパティファイルにより、さまざまな項目のカスタマイズが可能となっています。

Skinフレームワーク

 まず、Skinの切り替えによるスタイルシートのカスタマイズについて見てみましょう。メニューより[スキン切り替え]の[カスタマイズ]を選択して下さい。

スキン切り替え後のホーム画面
スキン切り替え後のホーム画面

 画面デザインが変更され、書籍管理のホーム画面が表示されます。

SkinAction.java(一部抜粋)
public class SkinAction extends DispatchAction {

    public ActionForward changeSkin(ActionMapping mapping,
            ActionForm actionform, HttpServletRequest request,
            HttpServletResponse response)
            throws IOException, ServletException {

        SkinForm form = (SkinForm) actionform;
        LayoutUtils.setSkin(request.getSession(), form.getSkin());
        return mapping.findForward("home");
    }
}
スキン切り替えを実行するリクエストの定義
<layout:menuItem key="menu.custom"
               page="/changeSkin.do?reqCode=changeSkin&skin=MySkin"/>

 ここではfr.improve.struts.taglib.layout.util.LayoutUtilsクラスのsetSkinメソッドで送信されたスキン名をHttpSessionへ格納しています。このような設定を行うことで、標準で利用していた「default.css」から、スキン名として指定されたcssファイルを参照することができるようになります。

補足説明
 Skinの名前は任意ですが、そこから参照されるcssの名称は小文字になるため注意が必要です。例えばStruts-Layout_TypeA.propertiesの場合、jspからlinkされるcssファイル名は「typea.css」となります。

プロパティ指定

 Struts-Layoutでは、スタイルシート以外にもカスタマイズを行う仕組みが提供されています。ソート、カレンダー用のイメージファイルの置き換えや非表示の設定、パネルクラス、タブクラスなどの置き換えによる実装の変更などが可能です。

 またStruts1.1以降で提供されるpluginの仕組みを利用して、デフォルトのプロパティを変更することができます。ここではカスタマイズしたプロパティをMySkinとしてデフォルトプロパティに指定しています。

デフォルトプロパティを指定した「struts-config.xml」の一部抜粋
<plug-in className="fr.improve.struts.taglib.layout.workflow.
LayoutPlugin">
  <set-property property="skinResources" value="MySkin"/>
</plug-in>

 Struts1.0をお使いの場合は、次の記述をすることで同様の設定が可能です。

Struts1.0でデフォルトプロパティを設定するコーディング
fr.improve.struts.taglib.layout.skin.Skin.setResourcesName("MySkin");

 この場合、利用されるプロパティファイルは「MySkin.properties」となり、プロパティファイルでskin項目の値が未指定の場合はCSSファイルは「myskin.css」が参照されます。

 最後にプロパティファイルで定義できる主な項目を挙げます。

プロパティファイルで定義可能な主な項目
項目内容
directory.configcssファイルやjavascriptファイルがあるディレクトリを指定します。指定がない場合はconfigが設定されます。
directory.csscssファイルがあるディレクトリを指定します。指定がない場合はconfigが設定されます。
directory.imagesimageファイルがあるディレクトリを指定します。
skincssファイル名を指定します。指定がない場合はconfigが設定されます。
display.null.fieldsfalseの場合、INSPECTモードでは空のフィールドは表示されません。
panel.classfr.improve.struts.taglib.layout.util.PanelInterfaceを実装したクラスを指定します。
collection.classfr.improve.struts.taglib.layout.util.CollectionInterfaceを実装したクラスを指定します。
tabs.classfr.improve.struts.taglib.layout.util.TabsInterfaceを実装したクラスを指定します。
field.classfr.improve.struts.taglib.layout.util.FieldInterfaceを実装したクラスを指定します。
treeview.classfr.improve.struts.taglib.layout.util.TreeviewInterfaceを実装したクラスを指定します。
formatter.classfr.improve.struts.taglib.layout.formatter.DispatchFormatterを実装したクラスを指定します。
layout.sortソート処理実行用リンクの画像ファイルを指定します。"none"と指定された場合、画像は表示されません。
layout.sort.labelソート画像で表示されるHintの文字列を指定します。
layout.pager.previous.imgpagerタグにて作成される前のページへ戻るリンクに表示する画像ファイルを指定します。
layout.pager.previous.labelpagerタグにて作成される前のページへ戻るリンクに表示する画像ファイルのHintを指定します。
layout.pager.next.imgpagerタグにて作成される次のページへ進むリンクに表示する画像ファイルを指定します。
layout.pager.next.labelpagerタグにて作成される次のページへ進むリンクに表示する画像ファイルのHintを指定します。
layout.pager.maxPageItemspagerタグで指定されるページあたりの最大一覧表示件数を指定します。
layout.pager.maxLinkspagerタグで指定されるページあたりの最大リンク件数を指定します。
layout.calendarカレンダーダイアログのimageファイルを指定します。
link.token.includeすべてのリンクにTokenを含めるかどうかを指定します。
sort.error.keepソート、改ページのアクションを実行後、エラーを再表示するか否かを指定します。デフォルトはtrueです。
sort.token.requiredソート処理にTokenが必要か否かを指定します。
sortutil.actionソートを実行するアクションパスを指定します。デフォルトは"sort.do"です。
styleclass.collectioncollectionタグで利用されるデフォルトのスタイルクラスを指定します。
styleclass.panelpanelタグで利用されるデフォルトのスタイルクラスを指定します。
styleclass.labellabelタグで利用されるデフォルトのスタイルクラスを指定します。
styleclass.gridgridタグで利用されるデフォルトのスタイルクラスを指定します。
styleclass.pagerpagerタグで利用されるデフォルトのスタイルクラスを指定します。
styleclass.layerlayerタグで利用されるデフォルトのスタイルクラスを指定します。
error.display入力フィールドの隣にエラーメッセージを表示するか否かを指定します。デフォルトはtrueです。
error.focusエラー発生時に最初のエラーフィールドにフォーカスを設定するか否かを指定します。デフォルトはfalseです。
error.formaterrors.header, errors.footer, errors.prefixとerrors.suffixをエラーメッセージフォーマットとして使用するか否かを指定します。
tree.numberOfMenusLoadedtreeviewで一度にロードするメニュー数を指定します。デフォルトは50です。
treeview.actiontreeview処理を実行するアクションパスを指定します。デフォルトは"treeview.do"です。

まとめ

 今回はStruts-Layoutのカスタマイズ方法を中心について紹介しました。本家Struts-Layoutのページでは現在もタグの拡張が実施されているようです。これからも簡単にユーザビリティの高い画面を実装できるタグが登場するでしょう。また、同じような画面になりがちなStruts-Layoutですが、今回紹介した方法でオリジナルな画面を作成することも可能ですので、お使いになってみることをおすすめします。

参考資料



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

バックナンバー

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

著者プロフィール

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

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

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

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

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5