AbstractWizardFormControllerで複数のフォームを処理するSpring MVC

投稿日: 2019-11-05 2019-11-05
タグ: Spring MVC

最後のリンク://spring-mvc/spring-mvc-form-handling-example/[Spring MVCフォームの処理例]では、単一ページフォームの送信を処理するために

SimpleFormController

を使用する必要があります。。

しかし、時には、複数のページにハンドルフォームを必要とする ”

ウィザードフォーム

“に対処する必要があり、ページごとにフォームに記入するように要求することがあります。このウィザードフォームの主な問題は、モデルデータ（ユーザーが入力したデータ）を保存し、複数のページに渡す方法です。

SAbstractWizardFormController

幸いにも、Spring MVCには

AbstractWizardFormController

クラスが付属しているため、このウィザードフォームを簡単に処理できます。このチュートリアルでは、

AbstractWizardFormController

クラスを使用して、フォームのデータを複数のページに格納して持ち込み、検証を適用し、最後のページでフォームのデータを表示する方法を示します。

1.ウィザードフォームページ

このデモンストレーションの5ページは、以下のシーケンスで作業します。

….[User]-→ WelcomePage -→ Page1 -→ Page2 -→ Page3 -→ ResultPage

**  AbstractWizardFormController ** を使用すると、ページの順序は送信ボタンの "名前"によって決まります。

.  __finish:ウィザードフォームを終了します.

.  __cancel:ウィザードフォームをキャンセルします.

.  __targetx:ターゲットページに移動します.xはゼロベースのページです

インデックス。例えば**  __target0 ** 、**  __target1 ** など

__1。 WelcomePage.jsp__ +ウィザードフォームプロセスを開始するためのハイパーリンクが付いたウェルカムページ。

<html>
<body>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-2836379775501347″
data-ad-slot=”8821506761″
data-ad-format=”auto”
data-ad-region=”mkyongregion”></ins>
<script>
(adsbygoogle = window.adsbygoogle ||[]).push({});
</script><h2>Handling multipage forms in Spring MVC</h2>
Click here to start playing –
<a href=”user.htm”>AbstractWizardFormController example</a>
</body>
</html>

__2。 Page1Form.jsp__「username」テキストボックスを持つ1ページ目にエラーメッセージが表示され、2つの送信ボタンが含まれています。

.  __target1  - ページ2に移動します.

.  __cancel  - ウィザードフォームプロセスをキャンセルし、キャンセルに移動します

ページ

<%@ taglib prefix=”form” uri=”http://www.springframework.org/tags/form”%>
<html>
<head>
<style>
.error {
color: #ff0000;
}

errorblock {

    color: #000;
    background-color: #ffEEEE;
    border: 3px solid #ff0000;
    padding: 8px;
    margin: 16px;
}
</style>
</head>

<form:form method="POST" commandName="userForm">
    <form:errors path="** " cssClass="errorblock" element="div"/>
    <table>
        <tr>
            <td>Username :</td>
            <td><form:input path="userName"/>
            </td>
            <td><form:errors path="userName" cssClass="error"/>
            </td>
        </tr>
        <tr>
        <tr>
            <td colspan="3"><input type="submit" value="Next"
                name="__target1"/> <input type="submit" value="Cancel"
                name="__cancel"/></td>
        </tr>
    </table>
</form:form>

</body>
</html>

__3。 Page2Form.jsp__ページ2は、「パスワード」フィールドを持ち、エラー・メッセージがあればそれを表示し、3つの送信ボタンを含みます。

.  __target0  - ページ1に移動します.

.  __target2  -  3ページに移動します.

.  __cancel  - ウィザードフォームのプロセスをキャンセルし、キャンセルに移動します

ページ

<%@ taglib prefix=”form” uri=”http://www.springframework.org/tags/form”%>
<html>
<head>
<style>
.error {
color: #ff0000;
}

errorblock {

    color: #000;
    background-color: #ffEEEE;
    border: 3px solid #ff0000;
    padding: 8px;
    margin: 16px;
}
</style>
</head>

<form:form method="POST" commandName="userForm">
    <form:errors path="** " cssClass="errorblock" element="div"/>
    <table>
        <tr>
            <td>Password :</td>
            <td><form:password path="password"/>
            </td>
            <td><form:errors path="password" cssClass="error"/>
            </td>
        </tr>
        <tr>
        <tr>
            <td colspan="3"><input type="submit" value="Previous"
                name="__target0"/> <input type="submit" value="Next"
                name="__target2"/> <input type="submit" value="Cancel"
                name="__cancel"/></td>
        </tr>
    </table>
</form:form>

</body>
</html>

__4。 Page3Form.jsp__ 3ページ目に、「remark」テキストボックスがあり、エラーメッセージがあればそれを表示し、3つのsubmitボタンが含まれています。

.  __target1  - ページ2に移動します.

.  __finish  - ウィザードフォームプロセスを終了し、それを仕上げに移動します.

ページ。

.  __cancel  - ウィザードフォームプロセスをキャンセルし、キャンセルに移動します

ページ。

<%@ taglib prefix=”form” uri=”http://www.springframework.org/tags/form”%>
<html>
<head>
<style>
.error {
color: #ff0000;
}

errorblock {

    color: #000;
    background-color: #ffEEEE;
    border: 3px solid #ff0000;
    padding: 8px;
    margin: 16px;
}
</style>
</head>

<form:form method="POST" commandName="userForm">
    <form:errors path="** " cssClass="errorblock" element="div"/>
    <table>
        <tr>
            <td>Remark :</td>
            <td><form:input path="remark"/>
            </td>
            <td><form:errors path="remark" cssClass="error"/>
            </td>
        </tr>
        <tr>
        <tr>
            <td colspan="3"><input type="submit" value="Previous"
                name="__target1"/> <input type="submit" value="Finish"
                name="__finish"/> <input type="submit" value="Cancel"
                name="__cancel"/></td>
        </tr>
    </table>
</form:form>

</body>
</html>

__5。 ResultForm.jsp__前の3ページから収集したすべてのフォームのデータを表示します。

<html>
<body>
<h2>ResultForm.jsp</h2>

<table>
    <tr>
        <td>UserName :</td>
        <td>${user.userName}</td>
    </tr>
    <tr>
        <td>Password :</td>
        <td>${user.password}</td>
    </tr>
    <tr>
        <td>Remark :</td>
        <td>${user.remark}</td>
    </tr>
</table>

</body>
</html>

===  2.モデル

フォームのデータを格納するモデルクラスを作成します。

ファイル:Using.java

package com.mkyong.common.model;

public class User{

String userName;
String password;
String remark;

   //getter and setter methods
}

===  3. AbstractWizardFormController

**  AbstractWizardFormController ** を拡張し、次のメソッドをオーバーライドするだけです

.  **  processFinish **   - ユーザーが送信ボタンをクリックしたときに呼び出されます

「**  __finish ** 」の

.  **  processCancel **   - ユーザーが送信ボタンをクリックしたときに起動します.

"**  __cancel ** "の名前です。

.  **  formBackingObject **   -  "User"モデルクラスを使用してすべてのフォームを保存する

複数ページのデータ。

__File:UserController.java__

package com.mkyong.common.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.validation.BindException;
import org.springframework.validation.Errors;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.AbstractWizardFormController;
import com.mkyong.common.model.User;
import com.mkyong.common.validator.UserValidator;

public class UserController extends AbstractWizardFormController{

public UserController(){
    setCommandName("userForm");
}

@Override
protected Object formBackingObject(HttpServletRequest request)
    throws Exception {

    return new User();
}
@Override
protected ModelAndView processFinish(HttpServletRequest request,
    HttpServletResponse response, Object command, BindException errors)
    throws Exception {

//Get the data from command object
 User user = (User)command;
 System.out.println(user);

   //where is the finish page?
    return new ModelAndView("ResultForm", "user", user);
}

@Override
protected ModelAndView processCancel(HttpServletRequest request,
    HttpServletResponse response, Object command, BindException errors)
    throws Exception {

       //where is the cancel page?
        return new ModelAndView("WelcomePage");
    }
}

"**  WelcomePage ** "ビューを返す単純なコントローラ。

__File:WelcomeController.java__

package com.mkyong.common.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.AbstractController;

public class WelcomeController extends AbstractController{

@Override
protected ModelAndView handleRequestInternal(HttpServletRequest request,
    HttpServletResponse response) throws Exception {

    return new ModelAndView("WelcomePage");
}

}

===  4.マルチページ/ウィザードフォーム検証

`SimpleFormController`では、バリデータークラスを作成し、すべてのバリデーションロジックを**  validate（）** メソッドの中に置き、validatorをシンプルフォームコントローラに飾り付け登録します。

しかし、それは**  AbstractWizardFormController ** で少し異なっています。まず、次のようにバリデータクラスと各ページの検証メソッドを作成します。

__File:UserValidator.java__

package com.mkyong.common.validator;

import org.springframework.validation.Errors;
import org.springframework.validation.ValidationUtils;
import org.springframework.validation.Validator;
import com.mkyong.common.model.User;

public class UserValidator implements Validator{

@Override
public boolean supports(Class clazz) {
   //just validate the User instances
    return User.class.isAssignableFrom(clazz);
}

//validate page 1, userName
 public void validatePage1Form(Object target, Errors errors) {
     ValidationUtils.rejectIfEmptyOrWhitespace(errors, "userName",
             "required.userName", "Field name is required.");
 }

//validate page 2, password
 public void validatePage2Form(Object target, Errors errors) {
     ValidationUtils.rejectIfEmptyOrWhitespace(errors, "password",
         "required.password", "Field name is required.");
 }

//validate page 3, remark
 public void validatePage3Form(Object target, Errors errors) {
     ValidationUtils.rejectIfEmptyOrWhitespace(errors, "remark",
         "required.remark", "Field name is required.");
 }

    @Override
    public void validate(Object target, Errors errors) {
        validatePage1Form(target, errors);
        validatePage2Form(target, errors);
        validatePage3Form(target, errors);
    }
}

__File:User.properties__  - エラーメッセージを格納するプロパティ

required.userName = Username is required!
required.password = Password is required!
required.remark = Remark is required!

また、ウィザードフォームコントローラ（ `UserController.java`）では、バリデーターを手動で呼び出すことで**  validatePage（）** をオーバーライドします（シンプルフォームコントローラのような宣言はもう必要ありません）。

**  UserController.java ** の更新版を参照してください。

public class UserController extends AbstractWizardFormController{
//other methods, see above

@Override
protected void validatePage(Object command, Errors errors, int page) {

UserValidator validator = (UserValidator) getValidator();

       //page is 0-indexed
        switch (page) {
           case 0://if page 1 , go validate with validatePage1Form
            validator.validatePage1Form(command, errors);
            break;
           case 1://if page 2 , go validate with validatePage2Form
            validator.validatePage2Form(command, errors);
            break;
           case 2://if page 3 , go validate with validatePage3Form
            validator.validatePage3Form(command, errors);
            break;
        }
    }
}

**  validatePage（）** メソッドでは、 "**  switch ** "関数を使用して呼び出し元のページを特定し、対応するバリデーターに関連付けます。

ページは0で索引付けされています。

===  5.春の設定

ウィザードフォームコントローラ（ `UserController.java`）を宣言し、すべてのページを正しい順序で配置し、バリデータを登録します。

<bean class="com.mkyong.common.controller.UserController" >
       <property name="pages">
    <list>
    <!-- follow sequence -->
    <value>Page1Form</value> <!-- page1, __target0 -->
    <value>Page2Form</value> <!-- page2, __target1 -->
    <value>Page3Form</value> <!-- page3, __target2 -->
    </list>
   </property>
   <property name="validator">
    <bean class="com.mkyong.common.validator.UserValidator"/>
   </property>
   </bean>

** 注**  "pages"プロパティでは、リスト値の順序は、ウィザード形式でページの順序を定義するために使用されます。

完全な例を参照してください:

<beans xmlns=”http://www.springframework.org/schema/beans”
xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xsi:schemaLocation=”http://www.springframework.org/schema/beans

http://www.springframework.org/schema/beans/spring-beans-2.5.xsd”&gt

;

<bean
 class="org.springframework.web.servlet.mvc.support.ControllerClassNameHandlerMapping"/>

<bean class="com.mkyong.common.controller.WelcomeController"/>
<bean class="com.mkyong.common.controller.UserController" >
    <property name="pages">
   <list>
    <!-- follow sequence -->
    <value>Page1Form</value> <!-- page1 -->
    <value>Page2Form</value> <!-- page2 -->
    <value>Page3Form</value> <!-- page3 -->
   </list>
   </property>
   <property name="validator">
    <bean class="com.mkyong.common.validator.UserValidator"/>
   </property>
  </bean>

<!-- Register User.properties for validation error message -->
<bean id="messageSource"
     class="org.springframework.context.support.ResourceBundleMessageSource">
 <property name="basename" value="User"/>
</bean>

      <bean id="viewResolver"
           class="org.springframework.web.servlet.view.InternalResourceViewResolver" >
           <property name="prefix">
                <value>/WEB-INF/pages/</value>
           </property>
           <property name="suffix">
                <value>.jsp</value>
           </property>
       </bean>
</beans>

===  5.デモ

URL:**  http://localhost:8080/SpringMVC/welcome.htm **

**  1。 WelcomePage.jsp ** 、リンクをクリックして、**  Page1Form.jsp ** に移動します。

image://wp-content/uploads/2010/08/SpringMVC-Multipage-Forms-Example1.jpg[SpringMVC-Multipage-Forms-Example1、title = "SpringMVC-Multipage-Forms-Example1"、width = 640、height = 247]

**  2。 Page1Form.jsp ** には、「username」テキストボックスフィールドと2つのボタンがあります。

.  "next"ボタン -  Page2Form.jspに移動します.

.  "キャンセル"ボタン -  WelcomePage.jspに移動する

image://wp-content/uploads/2010/08/SpringMVC-Multipage-Forms-Example2.jpg[SpringMVC-Multipage-Forms-Example2、title = "SpringMVC-Multipage-Forms-Example2"、width = 639、height = 270]

フォームの送信中に「ユーザー名」が空白の場合は、エラーメッセージを表示します。

image://wp-content/uploads/2010/08/SpringMVC-Multipage-Forms-Example2-Error.jpg[SpringMVC-Multipage-Forms-Example2-Error、title = "SpringMVC-Multipage-Forms-Example2-Error"、幅= 612、高さ= 282]

**  3。 Page2Form.jsp ** には、「パスワード」フィールドと3つのボタンがあります。

.  "previous"ボタン -  Page1Form.jspに移動します.

.  "next"ボタン -  Page3Form.jspに移動します.

.  "cancel"ボタン -  WelcomePage.jspに移動します.

image://wp-content/uploads/2010/08/SpringMVC-Multipage-Forms-Example3.jpg[SpringMVC-Multipage-Forms-Example3、title = "SpringMVC-Multipage-Forms-Example3"、width = 640、height = 279]

**  4。 Page3Form.jsp ** には、「remark」テキストボックスフィールドと3つのボタンがあります。

.  "previous"ボタン -  Page2Form.jspに移動します.

.  "finish"ボタン -  ResultForm.jspに移動します.

.  "cancel"ボタン -  WelcomePage.jspに移動します.

image://wp-content/uploads/2010/08/SpringMVC-Multipage-Forms-Example4.jpg[SpringMVC-Multipage-Forms-Example4、title = "SpringMVC-Multipage-Forms-Example4"、width = 639、height = 266]

**  5。 ResultForm.jsp ** は、すべてのフォームのデータを表示します。

image =//wp-content/uploads/2010/08/SpringMVC-Multipage-Forms-Example5.jpg[SpringMVC-Multipage-Forms-Example5、title = "SpringMVC-Multipage-Forms-Example5"、width = 640、height = 285]

=== ソースコードをダウンロードする

ダウンロードする -  link://wp-content/uploads/2010/08/SpringMVC-MultiPage-Form-Handling-Example.zip[SpringMVC-MultiPage-Form-Handling-Example.zip]（12KB）

=== 参考文献

.  http://static.springsource.org/spring/docs/2.5.x/api/org/springframework/web/portlet/mvc/AbstractWizardFormController.html[AbstractWizardFormController

Javadoc]。 link://spring-mvc/spring-mvc-form-handling-example/[Spring MVCフォーム

処理例]

link://tag/spring-mvc/[spring mvc]

getdocs

13036