Wicket - Form e validazioni

Nell'articolo precedente abbiamo visto un esempio di form e lo abbiamo evoluto per aggiungere un Behaviour Ajax che controllasse in tempo reale la validità di un campo.

Oggi facciamo un passo indietro riproponendo una form ed utilizzando il sistema di validazione classico che Wicket mette a disposizione e che viene lanciato all'atto dell'invio della form.

Create quindi un nuovo progetto da zero e generate le solite classi di base (Consultate il post Wello World). Creiamo quindi una pagina HTML semplice con dentro una form.

<div wicket:id="formFeedback"></div>
<form wicket:id="testForm">
    <label>Nome:</label><input wicket:id="name" />
    <label>Cognome:</label><input wicket:id="surname" />
    <input wicket:id="submit">
</form>

Come vedete il codice HTML è molto semplice. Due input, un submit ed un DIV che conterrà il nostro Feedback Panel. Quest'ultimo altro non è che un placeholder che conterrò un oggetto che Wicket mette a disposizione per visualizzare gli errori di una form.

Creiamo quindi una pagina con dentro una form secca sotto forma di classe privata.

package it.trewps.testajax.web;

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.Button;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.TextField;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.model.PropertyModel;
import org.apache.wicket.validation.validator.StringValidator;

public class HomePage extends WebPage{
    
    
    public HomePage(){
        add(new FeedbackPanel("formFeedback").setOutputMarkupId(true));
        add(new InputForm("testForm"));
    }
    
    private class InputForm extends Form{
        
        private String myName;
        private String mySurname;
        
        private static final long serialVersionUID = 1L;
        
        public InputForm(String id) {
            super(id);
            TextField name = new TextField ("name",new PropertyModel(this,"myName"));
            name.setRequired(true);
            name.add(StringValidator.lengthBetween(5, 50));
            
            TextField surname = new TextField ("surname",new PropertyModel(this,"mySurname"));
            surname.setRequired(true);
            Button submit = new Button("submit");
            this.add(name);
            this.add(surname);
            this.add(submit);
        }
        
        @Override
        protected void onSubmit() {
            System.out.println("Ciao");
        }
        
        public String getMyName() {
            return myName;
        }

        public void setMyName(String myName) {
            this.myName = myName;
        }

        public String getMySurname() {
            return mySurname;
        }

        public void setMySurname(String mySurname) {
            this.mySurname = mySurname;
        }
        
    }
    
}

Ho messo la classe al completo compresi i package per semplificare le cose. Abbiamo una WebPage di Wicket che verrà richiamata dalla ClassApplication.
Il costruttore si occupa semplicemente di aggiungere un FeedbackPanel e la form.

IMP: Essendo nel codice il feedbackpanel esterno alla form, occorre addarlo alla pagina esternamente. Wicket funziona a gerarchie quindi le add al flusso della pagina devono rispecchiare le gerarchie del codice. All'interno della stessa gerarchia le add possono essere in qualsiasi ordine quindi nella form non è importante che name venga addato prima di surname.

La form ha due proprietà interne di tipo stringa che sono mappate, come vedete dal PropertyModel, sui due oggetti di tipo TextField. Ovviamente occorre come sempre implementare i get e set relativi. A questo punto aggiungiamo un controllo ai due campi TextField rendendoli obbligatori ed aggiungendo un ulteriore validatore al campo name. Tramite il metodo add possiamo aggiungere dei validatori aggiuntivi. Mentre la required indica semplicemente che il campo deve contenere qualcosa, con i validatori possiamo perfezionare ulteriormente i controlli. Come primo esempio forziamo la lunghezza del nome ad essere compreso tra 5 e 50 caratteri.

All'invio della form, il feedbackpanel viene automaticamente riempito con i messaggi di errore.
Sotto l'errore legato al validator sulla lunghezza.