Spring MVC traitant des formulaires de plusieurs pages avec AbstractWizardFormController

Spring MVC manipulant des formulaires multipages avec AbstractWizardFormController

Dans les derniersSpring MVC form handling example, nous devrions utiliserSimpleFormController pour gérer la soumission de formulaire d'une seule page, ce qui est assez simple et direct.

Mais, parfois, vous devrez peut-être traiter «wizard form», qui doivent gérer le formulaire sur plusieurs pages, et demander à l'utilisateur de remplir le formulaire page par page. La principale préoccupation dans cette situation de formulaire d'assistant est de savoir comment stocker les données du modèle (données remplies par l'utilisateur) et les amener sur plusieurs pages?

SAbstractWizardFormController

Heureusement, Spring MVC est fourni avec la classeAbstractWizardFormController pour gérer facilement ce formulaire d'assistant. Dans ce didacticiel, nous vous montrons comment utiliser la classeAbstractWizardFormController pour stocker et transférer les données du formulaire sur plusieurs pages, appliquer la validation et afficher les données du formulaire sur la dernière page.

1. Pages de formulaire de l'assistant

5 pages pour cette démonstration, travaillez dans les séquences suivantes:

[User] --> WelcomePage --> Page1 --> Page2 --> Page3 --> ResultPage

AvecAbstractWizardFormController, la séquence de pages est déterminée par le «nom» du bouton d'envoi:

  1. _finish: Terminez le formulaire de l'assistant.

  2. _cancel: Annuler le formulaire de l'assistant.

  3. _targetx: passer à la page cible, où x est l'index de page de base zéro. e.g _target0, _target1 and etc.

1. WelcomePage.jsp
Une page d'accueil, avec un lien hypertexte pour démarrer le processus de formulaire de l'assistant.



    

Handling multipage forms in Spring MVC

Click here to start playing - AbstractWizardFormController example

2. Page1Form.jsp
Page 1, avec une zone de texte «nom d'utilisateur», affiche le message d'erreur le cas échéant et contient 2 boutons d'envoi, où:

  1. _target1 - passer à la page 2.

  2. _cancel - annuler le processus de formulaire de l'assistant et le déplacer vers la page d'annulation

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>






    

Page1Form.jsp

Username :

3. Page2Form.jsp
Page 2, avec un champ «mot de passe», affiche le message d'erreur le cas échéant et contient 3 boutons d'envoi, où:

  1. _target0 - passer à la page 1.

  2. _target2 - passez à la page 3.

  3. _cancel - annuler le processus de formulaire de l'assistant et le déplacer vers la page d'annulation

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>






    

Page2Form.jsp

Password :

4. Page3Form.jsp
Page 3, avec une zone de texte «remarque», affiche le message d'erreur le cas échéant et contient 3 boutons d'envoi, où:

  1. _target1 - passer à la page 2.

  2. _finish - terminer le processus de formulaire de l'assistant et le déplacer vers la page de fin.

  3. _cancel - annule le processus de formulaire de l'assistant et le déplace vers la page d'annulation.

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>






    

Page3Form.jsp

Remark :

5. ResultForm.jsp
Affiche toutes les données du formulaire collectées sur les 3 pages précédentes.



    

ResultForm.jsp

UserName : ${user.userName}
Password : ${user.password}
Remark : ${user.remark}

2. Modèle

Créez une classe de modèle pour stocker les données du formulaire.

Fichier: User.java

package com.example.common.model;

public class User{

    String userName;
    String password;
    String remark;

    //getter and setter methods
}

3. AbstractWizardFormController

Étend lesAbstractWizardFormController, remplacez simplement les méthodes suivantes

  1. processFinish– Se déclenche lorsque l'utilisateur clique sur le bouton de soumission avec le nom «_finish».

  2. processCancel - Se déclenche lorsque l'utilisateur clique sur le bouton Soumettre avec un nom de «_cancel».

  3. formBackingObject - Utilisez la classe de modèle "Utilisateur" pour stocker toutes les données du formulaire sur plusieurs pages.

Fichier: UserController.java

package com.example.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.example.common.model.User;
import com.example.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");
    }
}

Un contrôleur simple pour retourner une vue «WelcomePage».

Fichier: WelcomeController.java

package com.example.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. Validation de formulaire multipage / assistant

DansSimpleFormController, vous créez une classe de validateur, placez toute la logique de validation dans la méthodevalidate() et enregistrez le validateur dans le contrôleur de formulaire simple de manière décorative.

Mais, c'est un peu différent dansAbstractWizardFormController. Tout d'abord, créez une classe de validateur, ainsi que la méthode de validation pour chacune des pages, comme suit:

Fichier: UserValidator.java

package com.example.common.validator;

import org.springframework.validation.Errors;
import org.springframework.validation.ValidationUtils;
import org.springframework.validation.Validator;
import com.example.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 - Propriétés pour stocker le message d'erreur

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

Et, dans le contrôleur de formulaire de l'assistant (UserController.java), remplacez lesvalidatePage() en appelant le validateur manuellement (plus de déclaration comme un simple contrôleur de formulaire).

Voir la version mise à jour deUserController.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;
        }
    }
}

Dans la méthodevalidatePage(), utilisez une fonction «switch» pour déterminer quelle page appelle et associez-la au validateur correspondant. La page est en index 0.

5. Configuration du ressort

Déclarez le contrôleur de formulaire de l'assistant (UserController.java), placez toutes les pages dans le bon ordre et enregistrez un validateur.

    
           
        
        
        Page1Form 
        Page2Form 
        Page3Form 
        
       
       
        
       
       

Note
Dans la propriété «pages», l'ordre de la valeur de la liste est utilisé pour définir la séquence de la page dans le formulaire de l'assistant.

Voir l'exemple complet:



 

    
    
        
       
        
        Page1Form 
        Page2Form 
        Page3Form 
       
       
       
        
       
      

      
      
       
      

      
           
                /WEB-INF/pages/
           
           
                .jsp
           
       

5. Demo

1. WelcomePage.jsp, cliquez sur le lien, passez àPage1Form.jsp.

SpringMVC-Multipage-Forms-Example1

2. Page1Form.jsp, contient un champ de zone de texte «nom d'utilisateur» et 2 boutons:

  1. Bouton «suivant» - passez à Page2Form.jsp.

  2. Bouton «annuler» - accédez à WelcomePage.jsp

SpringMVC-Multipage-Forms-Example2

Si le «nom d'utilisateur» est vide lors de la soumission du formulaire, affichez le message d'erreur.

SpringMVC-Multipage-Forms-Example2-Error

3. Page2Form.jsp, contient un champ «mot de passe» et 3 boutons:

  1. Bouton «précédent» - passez à Page1Form.jsp.

  2. Bouton «suivant» - passez à Page3Form.jsp.

  3. Bouton «annuler» - accédez à WelcomePage.jsp.

SpringMVC-Multipage-Forms-Example3

4. Page3Form.jsp, contient un champ de zone de texte «remarque» et 3 boutons:

  1. Bouton «précédent» - passez à Page2Form.jsp.

  2. Bouton «terminer» - accédez à ResultForm.jsp.

  3. Bouton «annuler» - accédez à WelcomePage.jsp.

SpringMVC-Multipage-Forms-Example4

5. ResultForm.jsp, affiche toutes les données du formulaire.

SpringMVC-Multipage-Forms-Example5

Télécharger le code source