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

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

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

WINGSプロジェクト　奥山学[著] / 山田祥寛[監修]

更新日: 2006/10/11
公開日: 2005/12/05

ポスト

ダウンロードサンプルファイル (1.4 MB)

メール配信画面

sendMail.jsp（一部抜粋）

<layout:form action="/sendMail" styleClass="FORM" reqCode="sendMail">
  <layout:message key="mail.step1" styleClass="LABELLEFT"/>
  <layout:row>
    <layout:swap property="isbn,isbn" formProperty="ids1,ids2"
                 selectedStyleClass="FORMSWAP">
    <layout:collection name="list1" styleClass="FORM">
      <layout:collectionItem title="book.isbn" property="isbn"/>
      <layout:collectionItem title="book.name" property="name"/>
    </layout:collection>
    <layout:collection name="list2" styleClass="FORM">
      <layout:collectionItem title="book.isbn" property="isbn"/>
      <layout:collectionItem title="book.name" property="name"/>
    </layout:collection>
    </layout:swap>
  </layout:row>
  <layout:message key="mail.step2" styleClass="LABELLEFT"/>
  <layout:text key="mail.email" property="email" styleClass="LABEL"
               isRequired="true" />
  <layout:submit><bean:message key="mail.send"/></layout:submit>
</layout:form>

MailForm.java（一部抜粋）

public class MailForm extends DefaultForm {

    private String email;

    private String[] ids1;

    private String[] ids2;

    //（中略）

}

　この画面は一覧より書籍情報を選択して、入力したメールアドレスへ送信する画面です。一覧で表示される書籍情報から任意の項目を選択し、矢印ボタンを押下することで、選択した項目がテーブル間を移動します。

　このように、一覧から複数項目を選択する手段を提供するタグが、次に紹介する<layout:swap>タグです。

Swapの実装

　<layout:swap>タグは2つのテーブル間で行を交換する（Swap）処理を実装するためのタグです。<layout:swap>タグで2つの<layout:collection>タグをネストすることでSwap処理をするテーブルを定義することができます。そして<layout:swap>タグのproperty属性に、カンマ区切りで2つコレクションの、<layout:collectionItem>タグでキーにあたるproperty属性を指定します。

　またformProperty属性には2つのテーブルに格納されるキー項目が設定されるActionFormのプロパティを指定します。こうすることで、Submit実行時に2つのテーブルのキー項目にあたるisbn番号が、それぞれActionFormのids1,ids2に設定されます。

　メール配信する行を選択し、メールアドレスを入力したら［メール送信］ボタンを押下して下さい。メール配信結果画面へ遷移します。

メール配信結果画面

　<layout:swap>タグを実装するためには、「swap.js」ファイルをリンクする必要があります。リソースへのアクセスには<layout:resource>タグを利用します。

jspファイルでの「swap.js」へのリンク定義例

<script language="JavaScript"
        src="<layout:resource type="cfg" name="swap.js"/>"/>

BreadCrumbの実装

　画面数が多く、階層の深い画面構成を持つシステムを利用するユーザは、自分がいる画面を見失いがちです。そこで便利なのがBreadCrumbです。

　本システムでは画面数が少ないためメリットを感じることは少ないかと思いますが、ユーザはメール機能の中で、現在どの操作をしているのかを知ることができます。

includeCrumbsSendMail.jsp（一部抜粋）

<layout:crumbs styleClass="CRUMBS" separator="＞">
  <layout:crumb key="crumb.mail"/>
  <layout:crumb key="crumb.sendMail"
                link="/sendMail.do?reqCode=list"/>
</layout:crumbs>

補足説明

　Crumbsもサーバサイドで動的に作成することが可能です。Crumbs情報をHttpSessionに格納し、画面遷移をする度にCrumbを追加、削除すると、より便利に使うことができるでしょう。

ユーザ管理画面（データグリッド版）

　前回Struts-Layoutの大きな特徴のひとつであるディスプレイモードを紹介しましたが、Struts-LayoutではJSPの実装を簡単にし、かつユーザビリティも向上させる<layout:datagrid>タグも提供されています。

　前回ディスプレイモードで実装したユーザ管理画面を、今回はデータグリッド形式で実装してありますので、メニューより［ユーザ管理］の［データグリッド版］を選択して、画面を見てみましょう。

DataGridの実装

ユーザ管理画面（データグリッド版）

UserForm.java（一部抜粋）

public class UserForm extends DefaultForm {

    private Datagrid users;

    public Datagrid getUsers() {
        return users;
    }

    public void setUsers(Datagrid datagrid) {
        users = datagrid;
    }
    //（中略）

}

　ActionFormではfr.improve.struts.taglib.layout.datagrid.Datagridクラスの変数とそのGetter/Setterを実装しています。

UserAction.java（一部抜粋）


public class UserAction extends DispatchAction {

    /**
     * 編集画面オープン時の処理を行う
     */
    public ActionForward datagridEdit(ActionMapping mapping,
        ActionForm actionform, HttpServletRequest request,
        HttpServletResponse response) throws Exception {

        UserForm form = (UserForm) actionform;

        // ユーザ一覧の取得
        List users = UserDao.getInstance().findAll();

        // DataGridインスタンスの生成
        Datagrid datagrid = Datagrid.getInstance();

        // DataGridの初期化
        datagrid.setData(users);
        datagrid.setDataClass(User.class);
        form.setUsers(datagrid);

        //モードの初期化
        FormUtils
        .setFormDisplayMode(request,
            actionform, FormUtils.EDIT_MODE);
        return mapping.findForward("datagrid");
    }

    /**
     * 編集実行時の処理を行う
     */
    public ActionForward datagridSave(ActionMapping mapping,
        ActionForm actionform, HttpServletRequest request,
        HttpServletResponse response) throws Exception {

        UserForm form = (UserForm) actionform;

        // ActionFormからDatagridを取得
        Datagrid datagrid = form.getUsers();

        // 登録処理
        Collection added = datagrid.getAddedData();
        Iterator it = added.iterator();
        while (it.hasNext()) {
            User newUser = (User) it.next();
            //項目に値が入力されていれば永続化する
            if (newUser.getId()!=null && newUser.getId().length()!=0
                && newUser.getPassword() !=null
                && ewUser.getPassword().length()!=0) {
                //既に存在しているデータでなければ永続化する
                if (UserDao.getInstance().getUserByPrimaryKey(
                    newUser.getId())==null) {
                    UserDao.getInstance().addUser(newUser);
                }
            }
        }

        // 削除処理
        Collection removed = datagrid.getDeletedData();
        it = removed.iterator();
        while (it.hasNext()) {
            User removedUser = (User) it.next();
            UserDao.getInstance().deleteUser(removedUser);
        }

        // 更新処理
        Collection modified = datagrid.getModifiedData();
        it = modified.iterator();
        while (it.hasNext()) {
            User modifiedUser = (User) it.next();
            try {
                UserDao.getInstance().updateUser(modifiedUser);
            } catch (InvalidParameterException e) {

            }
        }

        // Datagridを初期化
        datagrid.setData(UserDao.getInstance().findAll());

        return mapping.findForward("datagrid");
    }
}

　データグリッドを利用するには、一覧データがfr.improve.struts.taglib.layout.datagrid.Datagridインスタンスに設定されていなくてはなりません。Actionクラスでは、ユーザ管理画面オープン時にUserDaoよりユーザ一覧を取得し、setDataメソッドでユーザ一覧をDataGridに設定しています。またsetDataClassメソッドでUserクラスを設定しています。

　このようにDataGridは一覧データだけではなく格納されるクラス情報も保持する必要があるため、DataGridを保持する変数のスコープはSessionで設定する必要があります。

maintainUserDatagrid.jsp（一部抜粋）

<layout:datagrid property="users" styleClass="DATAGRID"
                 model="datagrid">
  <layout:datagridColumn title="user.id" property="id"/>
  <layout:datagridColumn title="user.password" property="password"/>
</layout:datagrid>
<layout:row>
  <layout:button onclick="StrutsLayout.addDatagridLine('users')">
    <bean:message key="addLine.action"/></layout:button>
  <layout:button onclick="StrutsLayout.setDatagridLineState(
'users', 'removed')">
    <bean:message key="delete.action"/></layout:button>
  <layout:submit><bean:message key="submit.action"/></layout:submit>
</layout:row>

　jspでは<layout:datagrid>タグで表示する一覧を指定し、<datagridColumn>タグで一覧表示するカラムを指定します。

補足説明

　執筆時点では、DataGridでのSelectとRadioボタンを実装する<layout:datagridSelect>タグと<layout:datagridCheckbox>タグに関するアナウンスがあったもののリリースはされていません。今後対応されるでしょう。

　また、ダウンロードしたままのStruts-LayoutではCSSにDatagridに関する定義が無いため、利用するCSSへ次の定義が必要です。

Datagridに関するcss定義例

TABLE.DATAGRID {
    background-color : #336699;
}
TH.DATAGRID {
    color      : #FFFFFF;
    background-color : #336699;
    font-weight: bold;
    font-family : verdana;
}
TABLE.DATAGRID TR TD {
    font-family : verdana;
    padding: 2px;
}
TR.DATAGRID {
    background-color : #FFFFFF;
}
TR.DATAGRID2 {
    background-color : #FFFFFF;
}
.DATAGRID_SEL {
    background-color : #336699;
}
.DATAGRID_DEL {
    text-decoration: line-through;
}
TR.DATAGRID_DEL TD INPUT {
    text-decoration: line-through;
}
TABLE.DATAGRID TR TD INPUT {
    width: 100%;
}

次のページ
カスタマイズ

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

印刷用を表示

ポスト

Struts-LayoutタグライブラリでリッチなUIを作成する連載記事一覧: Struts-LayoutタグライブラリでリッチなUIを作成する（カスタマイズ編）

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 Twitter: @yyamada（公式）、@yyamada/wings（メンバーリスト） Facebook

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

この著者の最近の執筆記事