Wicket - Sostituire un Panel da una chiamata Ajax

Come sappiamo i Panel sono l'unità di sviluppo primaria in Wicket e vengono aggiunti alle pagine per generare i contenuti.
I Panel sono molto comodi perché, se fatti bene, sono altamente riutilizzabili.

In questo articolo vediamo velocemente come aggiornare il contenuto di un Panel, legato ad un POJO, in seguito ad un evento AJAX.

SITUAZIONE


Avete una pagina con una form che fa una qualche ricerca e volete stampare l'oggetto che vi ritorna in una scheda (non tabella) sotto la form stessa.

COME PROCEDERE

Per prima cosa create un Pannello (che chiameremo SchedaPanel) ed aggiungetela alla pagina assieme alla form.

Il codice del Panel deve avere la parte della scheda dati nascosta se il POJO è nullo altrimenti prima ancora di submittare la form, vedrete la scheda. Per farlo ci viene in contro l'utile accrocchio di Wicket chiamato ENCLOSURE.

<wicket:panel>
    <fieldset class="informazioni info-ditta" wicket:enclosure="dettagli">
        <legend>Dettagli </legend>
        <div wicket:id="dettagli">
            <ul>
                <li><b>Denominazione</b>: <span wicket:id="denominazione"></span></li>
                <li><b>Forma Giuridica</b>: <span wicket:id="formaGiuridica"></span></li>
                <li><b>Codice Fiscale o PIVA</b>: <span wicket:id="partitaIva"></span></li>
                <li><b>Ragione Sociale</b>: <span wicket:id="codiceFiscale"></span></li>
                <li><b>Indirizzo</b>: <span wicket:id="toponimo"></span> <span wicket:id="via"></span> <span wicket:id="civico"></span> <span wicket:id="cap"> </span><span wicket:id="comune"></span> <span wicket:id="provincia"></span></li>
                <li><b>Telefono</b>: <span wicket:id="telefono"></span></li>
                <li><b>Email Certificata</b>: <span wicket:id="emailCertificata"></span></li>
            </ul>            
        </div>
    </fieldset>
</wicket:panel>

Il codice HTML è molto semplice. Abbiamo un elenco di wicket:id nella quale andremo a mettere i dati del nostro POJO.

Notate però come il FIELDSET sia associato ad un ENCLOSURE chiamato dettagli che guarda caso è uno degli id wicket interni (il DIV).
Le enclosure servono per nascondere l'intero blocco se l'elemento figlio associato è nascosto.

In questo caso quindi se l'oggetto associato al wicket ID dettaglio ha setVisibile a false, allora tutto il fieldset sarà nascosto. E' utile per evitare di dover settare a false tante cose. In pratica il div comanda l'intera visione del blocco.

@Override
protected void onInitialize() {
    super.onInitialize();
    
    dettagli = new WebMarkupContainer("dettagli");
    dettagli.setVisible(false);
    add(dettagli);
    buildSchedaDitta();
}

La initialize del pannello è molto semplice e come vediamo mettiamo a false il div dettagli così da triggerare l'Enclosure.

public void buildSchedaDitta(){
    dettagli.setVisible(true);
    if (this.ditta == null) {
        ditta = new DittaParix();
        dettagli.setVisible(false);
    }
    else {
        dettagli.add(new Label("denominazione",ditta.getDenominazione()));
        dettagli.add(new Label("partitaIva",ditta.getPartitaIva()));
        dettagli.add(new Label("codiceFiscale",ditta.getCodiceFiscale());
        dettagli.add(new Label("formaGiuridica",ditta.getFormaGiuridica()));
        dettagli.add(new Label("toponimo",ditta.getToponimo()));
        dettagli.add(new Label("via",ditta.getVia()));
        dettagli.add(new Label("cap",ditta.getCap()));
        dettagli.add(new Label("civico",ditta.getCivico()));
        dettagli.add(new Label("telefono",ditta.getTelefono()));
        dettagli.add(new Label("emailCertificata",ditta.getEmailCertificata()));
        dettagli.add(new Label("provincia",ditta.getProvincia()));
        dettagli.add(new Label("comune",ditta.getComune()));
        
    }
}

Il metodo di costruzione della scheda è anch'esso intuitivo. Controllo se mi è stata settata la ditta nel qual caso ne inizializzo una a vuota e rimetto a false la visibilità del pannello.
Se invece qualcuno mi ha settata la ditta, questo metodo metterà a true la visibilità e riempirà i dati con le proprietà del POJO.

@Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
    SchedaPanel panelTemporaneo = new SchedaPanel("schedaPanel");
    try {
        ditta = QUALCHE_METODO(PIVA);
        if (ditta != null){ 
           panelTemporaneo.setDitta(ditta);
        }
    }
    catch (Exception e){
        fatal("ERRORE: Si è verificato un errore di comunicazione oppure la ditta non è stata trovata");
        target.addComponent(feedbackPanel);
    }
    panelTemporaneo.setOutputMarkupId(true);
    panelOriginale.replaceWith(panelTemporaneo); 
    panelOriginale = panelTemporaneo;
    target.addComponent(panelOriginale);
    target.addComponent(feedbackPanel);
}

La form invece che un Button normale, avrà un AjaxButton perché non dobbiamo riaggiornare tutta la pagina ma solo il panel.
Nella onSubmit lanceremo il nostro metodo di ricerca, riempiremo il nostro POJO ditta e creeremo un nuovo Pannello settandogli la ditta (innescando così la setVisible a true di cui sopra).

La parte interessante arriva adesso. panelOriginale, che era il panel dello stesso tipo aggiunto alla pagina assieme alla form, viene rimpiazzato dalla nuova istanza aggiornata con i dati del Pojo tramite la replaceWith.

A questo punto non dobbiamo fare altro che dire a Wicket di aggiornare sia il panel originale che il feedbackpanel (nel caso vi siano eccezioni) tramite il consueto target.addCompoment.