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

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

カスタマイズ

　ここまで紹介してきた実装方法を見てみると、簡単にリッチな画面が作成できる反面、その分だけカスタマイズの自由度が低いと感じるかもしれません。しかし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.config	cssファイルやjavascriptファイルがあるディレクトリを指定します。指定がない場合はconfigが設定されます。
directory.css	cssファイルがあるディレクトリを指定します。指定がない場合はconfigが設定されます。
directory.images	imageファイルがあるディレクトリを指定します。
skin	cssファイル名を指定します。指定がない場合はconfigが設定されます。
display.null.fields	falseの場合、INSPECTモードでは空のフィールドは表示されません。
panel.class	fr.improve.struts.taglib.layout.util.PanelInterfaceを実装したクラスを指定します。
collection.class	fr.improve.struts.taglib.layout.util.CollectionInterfaceを実装したクラスを指定します。
tabs.class	fr.improve.struts.taglib.layout.util.TabsInterfaceを実装したクラスを指定します。
field.class	fr.improve.struts.taglib.layout.util.FieldInterfaceを実装したクラスを指定します。
treeview.class	fr.improve.struts.taglib.layout.util.TreeviewInterfaceを実装したクラスを指定します。
formatter.class	fr.improve.struts.taglib.layout.formatter.DispatchFormatterを実装したクラスを指定します。
layout.sort	ソート処理実行用リンクの画像ファイルを指定します。"none"と指定された場合、画像は表示されません。
layout.sort.label	ソート画像で表示されるHintの文字列を指定します。
layout.pager.previous.img	pagerタグにて作成される前のページへ戻るリンクに表示する画像ファイルを指定します。
layout.pager.previous.label	pagerタグにて作成される前のページへ戻るリンクに表示する画像ファイルのHintを指定します。
layout.pager.next.img	pagerタグにて作成される次のページへ進むリンクに表示する画像ファイルを指定します。
layout.pager.next.label	pagerタグにて作成される次のページへ進むリンクに表示する画像ファイルのHintを指定します。
layout.pager.maxPageItems	pagerタグで指定されるページあたりの最大一覧表示件数を指定します。
layout.pager.maxLinks	pagerタグで指定されるページあたりの最大リンク件数を指定します。
layout.calendar	カレンダーダイアログのimageファイルを指定します。
link.token.include	すべてのリンクにTokenを含めるかどうかを指定します。
sort.error.keep	ソート、改ページのアクションを実行後、エラーを再表示するか否かを指定します。デフォルトはtrueです。
sort.token.required	ソート処理にTokenが必要か否かを指定します。
sortutil.action	ソートを実行するアクションパスを指定します。デフォルトは"sort.do"です。
styleclass.collection	collectionタグで利用されるデフォルトのスタイルクラスを指定します。
styleclass.panel	panelタグで利用されるデフォルトのスタイルクラスを指定します。
styleclass.label	labelタグで利用されるデフォルトのスタイルクラスを指定します。
styleclass.grid	gridタグで利用されるデフォルトのスタイルクラスを指定します。
styleclass.pager	pagerタグで利用されるデフォルトのスタイルクラスを指定します。
styleclass.layer	layerタグで利用されるデフォルトのスタイルクラスを指定します。
error.display	入力フィールドの隣にエラーメッセージを表示するか否かを指定します。デフォルトはtrueです。
error.focus	エラー発生時に最初のエラーフィールドにフォーカスを設定するか否かを指定します。デフォルトはfalseです。
error.format	errors.header, errors.footer, errors.prefixとerrors.suffixをエラーメッセージフォーマットとして使用するか否かを指定します。
tree.numberOfMenusLoaded	treeviewで一度にロードするメニュー数を指定します。デフォルトは50です。
treeview.action	treeview処理を実行するアクションパスを指定します。デフォルトは"treeview.do"です。

まとめ

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

参考資料

• Struts（英語）
• Struts-layout（英語）