AbstractWizardFormControllerで複数のフォームを処理する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;
}
color: #000; background-color: #ffEEEE; border: 3px solid #ff0000; padding: 8px; margin: 16px; } </style> </head>
<body>
<h2>Page1Form.jsp</h2>
<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;
}
color: #000; background-color: #ffEEEE; border: 3px solid #ff0000; padding: 8px; margin: 16px; } </style> </head>
<body>
<h2>Page2Form.jsp</h2>
<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;
}
color: #000; background-color: #ffEEEE; border: 3px solid #ff0000; padding: 8px; margin: 16px; } </style> </head>
<body>
<h2>Page3Form.jsp</h2>
<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”>
;
<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]