Wicket: Form con Ajax

NB: Questo esempio è legato al post Wicket: Form con misto PropertyModel e CompoundModel quindi se volete provare il codice vi conviene guardarvi prima quello.

Andiamo ad evolvere il form dei due post precedenti aggiungendo una semplicemente componente Ajax.

Per il nostro esempio mettiamo un label comandato da un controllo che ci dice se il campo mail inserito è uscito indenne da un qualche controllo.
IMP: Wicket mette a disposizione dei validatori di default tra cui quello per le email. Il nostro è solo un esempio proforma.

Per prima cosa inseriamo uno span HTML di fianco alla input della email nella quale andremo a scrivere il messaggino nella quale diciamo se va bene o male.

Questo LABEL dovrà essere legato ad un PropertyModel ovvero ad un'area "sensibile" legata ad una variabile come abbiamo visto nei primissi esempi.

<wicket:panel>
<form wicket:id="countryForm">
    <input wicket:id="country" />
    <br />
    <input wicket:id="email" /><span wicket:id="goodemail"></span>
    <br />
    <input wicket:id="submit" type="submit" />
</form>
</wicket:panel>

Associamo quindi la ID goodemail.
Occorre ora legare questo ID ad un Label sensibile a sua volta legata ad una variabile della classe.

Per farlo creiamo una proprietà della classe Panel che contiene la form e la chiameremo goodEmailFeedback.

Creiamo quindi il Label a cui associamo la variabile.

 PropertyModel<String> goodEmailFeedbackModel = 

                            new PropertyModel<String>(this,"goodEmailFeedback");
 final Label goodEmailLabel = new Label("goodemail", goodEmailFeedbackModel); 
 goodEmailLabel.setOutputMarkupId(true);
 cForm.add(goodEmailLabel);

La prima istruzione serve a creare un modello legato ad una variabile che guarda caso è proprio quella della classe. Quel this indica quale classe ha la proprietà. Essendo questo codice dentro il Panel, con this prendo direttamente la variabile.
La seconda istruzione crea la label associandoci la variabile e mappandola sul wicket id "goodemail". Questo permette di rendere "sensibile" la label così alla modifica della proprietà goodEmailFeedback, il contenuto della label viene modificato.
La terza istruzione serve a Wicket per capire che la label è "targettabile" da uno script Ajax.
Infine aggiungiamo il label al flusso Wicket.
IMP: Essendo il label figlio della form nel codice HTML, essa deve essere aggiunta all'oggetto form e non all'oggetto panel.

A questo punto aggiungiamo il controllo Ajax che in Wicket è gratuito. Non serve né Javascript né un controllo del risultato.

eField.add(new AjaxFormComponentUpdatingBehavior("onblur"){
            private static final long serialVersionUID = 1L;
            @Override
            protected void onUpdate(AjaxRequestTarget target) {                
                target.addComponent(goodEmailLabel);
                if ("ciccio@ciccio.it".equals(myTinyUser.getEmail()) )
                    goodEmailFeedback = "giusta";
                else 
                    goodEmailFeedback = "falsa";
            }
        });

All'oggetto eField aggiungiamo un behavior ajax chiamato AjaxFormComponentUpdatingBehavior ovvero "Fai qualcosa di Ajax se il componente viene aggiornato". L'evento scatenante che abbiamo deciso è onblur ovvero quando l'input NON ha più il focus (leggasi, si clicca da un'altra parte).
Dobbiamo quindi sovrascrivere il metodo onUpdate (la IDE ve lo suggerisce se aprite la graffa). Il sistema ci regala l'oggetto di tipo target che rappresenta il suo oggetto di risposta.

NB: Nella vecchia programmazione Ajax ad un dato evento si faceva tramite javascript una chiamata ad una qualche risorsa esterna. Diciamo che per esempio si chiamava un url PHP chiamato risposta.php. In questo file PHP si era soliti fare operazioni e buttare in output il risultato che poi era ricevuto dallo script javascript che aveva lanciato la richiesta. Solitamente era un XML.
L'oggetto target è esattamente questa cosa. Il nome purtroppo fa cadere in errore perché in realtà si sarebbe dovuto chiamare "response" oppure qualcosa tipo "quello che poi ritorno".
Essendo però l'oggetto maneggiato e maneggiabile da Wicket, con il metodo addComponent dobbiamo dargli l'elenco di tutte le componenti che sono state influenzate da questo evento. Nel nostro caso gli diciamo che il Label precedentemente creato dovrà essere modificato o comunque che l'evento lo ha influenzato in qualche modo.

Nell'esempio mettiamo un semplice IF ed aggiorniamo di conseguenza la nostra proprietà della classe goodEmailFeedback che essendo legata al label ne modificherà il contenuto.

NB: Wicket mette a disposizione molti Behavior in Ajax. In seguito ne vedremo degli altri.