La nostra panoramica “per esempi” su Wicket continua con un nuovo articolo. In questa terza parte verranno illustrati i principali componenti extension del nostro Java framework a componenti per applicazioni web.

Nella seconda parte di questa serie di articoli è stata presentata una applicazione Wicket based che coinvolgeva i principali componenti core del framewok. In questa terza parte modificheremo tale applicazione utilizzando anche i componenti extension del framework. Sono componenti che ricorrono ampiamente ad AJAX (Asynchronous Javascript And XML), in maniera però trasparente allo sviluppatore.
La versione a cui faremo riferimento in questo terzo articolo è la 1.4-m3. Ricordo ancora che, a partire dalla versione 1.4, Wicket richiede necessariamente Java 1.5 o release successiva.

L’applicazione Comics Convention Registration

Come esempio per il precedente articolo era stata implementata una semplice applicazione per la registrazione dei partecipanti ad una convention fumettistica. Dopo il login iniziale l’applicazione consentiva di registrare nuovi partecipanti o di modificare i dati di partecipanti già registrati in precedenza.

L’introduzione di alcuni componenti extension di Wicket riguarda le funzionalità di scelta delle nazionalità dei partecipanti e dei talk a cui è possibile partecipare.

Dettagli implementativi

Nella Registration Page la scelta della nazione di appartenenza avveniva tramite una DropDownChoice popolata in fase di caricamento della pagina con dati che, nel caso reale, vengono recuperati da una base dati. Si può semplificare il tutto sostituendo la DropDownChoice con un

org.apache.wicket.extensions.ajax.markup.html.autocomplete.AutoCompleteTextField

un TextField dotato di funzionalità AJAX di autocompletamento, man mano che l’utente inserisce del testo al suo interno. Da un punto di vista implementativo questo nuovo componente non differisce dall’utilizzo di un normale TextField:

countryTextField =
    new CountryAutoCompleteTextField("countryTextField",
    new Model(participant.getCountry()));

anche per quanto riguarda il codice HTML:

Eviteremo di dover ricorrere allo storage ed al salvataggio dei countries in un database implementando una inner class della WebPage, che estende il componente Wicket AutoCompleteTextField e che ne esegue l’override del metodo getChoices():

private class CountryAutoCompleteTextField extends AutoCompleteTextField {
    public CountryAutoCompleteTextField(String id) {
        super(id);
    }
    
    public CountryAutoCompleteTextField(String id, IModel model) {
        super(id, model);
    }
    
    @Override
    protected Iterator getChoices(String input) {
        if (Strings.isEmpty(input)) {
            return Collections.EMPTY_LIST.iterator();
        }
        
        List choices = new ArrayList(10);
        
        Locale[] locales = Locale.getAvailableLocales();
        
        for (int i = 0; i < locales.length; i++) {
            final Locale locale = locales[i];
            final String country = locale.getDisplayCountry();
            
            if (country.toUpperCase().startsWith(input.toUpperCase())) {
                choices.add(country);
                if (choices.size() == 10) {
                break;
                }
            }
        }
 
        return choices.iterator();
    }
}

Sfruttiamo i java.util.Locale disponibili recuperandoli con il metodo Locale.getAvailableLocales() e visualizzando i nomi tramite il metodo getDisplayCountry() (sempre della classe Locale).
La scelta del talk è stata spostata in una finestra modale. Nella Registration Page, al posto della ListMultipleChoice, adesso troviamo solo un TextField e un org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow. Un componente ModalWindow è una finestra trascinabile che impedisce all’utente di interagire con il resto della pagina chiamante finche’ la finestra non viene chiusa. L’aspetto della Registration Page adesso è quello mostrato in figura 1.

In figura 2 invece vediamo come appare la finestra modale.

La finestra modale è una WebPage che contiene la DropDownChoice per la selezione di un talk, il button di selezione e un AjaxLink (org.apache.wicket.ajax.markup.html.AjaxLink) per la gestione della chiusura della finestra con restituzione del focus e del valore di ritorno (il nome del talk selezionato) alla finestra chiamante.

add(new AjaxLink("closeOK") {
    public void onClick(AjaxRequestTarget target) {
        if (modalWindowPage != null) {
        
            modalWindowPage.setTalk(selectedTalk);
        }
        window.close(target);
    }
});

Nella Registration Page è presente ovviamente anche il codice per la gestione del ritorno dalla modal window:

final ModalWindow talkModalWindow = new ModalWindow(“talkModalWindow”);
talkModalWindow.setPageMapName(“talkModalWindow”);
talkModalWindow.setCookieName(“talkModalWindow”);
talkModalWindow.setPageCreator(new ModalWindow.PageCreator() {
public Page createPage() {
return new TalkModalPage(RegistrationPage.this, talkModalWindow);
}
});
talkModalWindow.setWindowClosedCallback(new ModalWindow.WindowClosedCallback() {
public void onClose(AjaxRequestTarget target) {
target.addComponent(talkTextField);
}
});
talkModalWindow.setCloseButtonCallback(new ModalWindow.CloseButtonCallback() {
public boolean onCloseButtonClicked(AjaxRequestTarget target) {
return true;
}

});
registrationForm.add(talkModalWindow);

registrationForm.add(new AjaxLink(“showTalkModalWindow”) {
public void onClick(AjaxRequestTarget target) {
talkModalWindow.show(target);
}
});

Poichè è possibile accedere alla Modal Window solo dalla Registration Page, non è necessario registrarla nell’init() method della WebApplication.

Nella Modal Window, oltre ai titoli dei talk, troviamo altre informazioni relative a questi ultimi: le descrizioni e le date. Le informazioni sono presenti in tre Panel distinti, navigabili tramite breadcrumbs. Ciascuna breadcrumb tramite Wicket viene implementata con una classe che estende la classe astratta org.apache.wicket.extensions.breadcrumb.panel.BreadCrumbPanel. La navigazione avviene tramite gli org.apache.wicket.extension.breadcrumb.panel.BreadCrumbPanelLink. Il codice Java per il Panel iniziale è il seguente:

public class FirstBreadCrumbPanel extends BreadCrumbPanel {
    public FirstBreadCrumbPanel(final String id, final IBreadCrumbModel breadCrumbModel) {
        super(id, breadCrumbModel);
        add(new BreadCrumbPanelLink("linkToSecondPanel",
                this, SecondBreadCrumbPanel.class));
        
    }
    
    public String getTitle() {
        return "Talks";
    }
}

Mentre il template HTML corrispondente è:

Stessa cosa per gli altri due Panel. Le figure 3 e 4 mostrano i due Panel con le descrizioni e le date dei talk.

Il codice dell’applicazione di esempio può essere scaricato come allegato dal menu in alto a sinistra. L’archivio non comprende le librerie necessarie per la compilazione e/o il runtime. Le dipendenze sono le seguenti:

• wicket-1.4-m3.jar (compilazione e runtime)
• wicket-extensions-1.4-m3.jar (compilazione e runtime)
• slf4j-api-1.5.0.jar (runtime)
• slf4j-jcl-1.5.0.jar (runtime)

Conclusioni

In questo secondo articolo sono stati introdotti alcuni dei principali component extension del framework. Una volta presa confidenza anche con questi ultimi, nel prossimo articolo vedremo come implementare, tramite Wicket, lo strato di presentation in applicazioni Spring based e che utilizzano iBatis o Hibernate per la persistenza.

Riferimenti

[1] Karthik Gurumurthy, “Pro Wicket”, Apress, 2006

[2] Sito ufficiale di Wicket presso Apache
http://wicket.apache.org/