Wicket - Finestra Modale

Prima o poi te la chiedono la modale e quindi il passo successivo è sperare che non ti diano delle form interne da metterci.

Wicket supporta bene le modali, meno però quelle che hanno dentro delle form da committare perché se submitti una pagina dentro la modale, lui ricarica tutta la pagina originale, non solo la modale.

Per ora quindi vediamo una semplice modale con dentro un pannello che stampa, per esempio, il contenuto di una news.

Nel codice HTML della vostra pagina padre, dovrete avere essenzialmente 2 cose:

• Un oggetto HTML con WicketID legato alla modale;
• Qualcosa che triggera l'apertura della stessa (link, icona, bottone ecc...);

<div wicket:id="elencoNews">
        <div class="singleNews">
        <div class="newsTitle" wicket:id="descrizione"></div>
          <div class="newsDate"> Pubblicata il <span wicket:id="dataInizioPubblicazione"></span></div>
        <div>
        <div class="newsContent"><span wicket:id="testo"></span>  <a class="newsCompletaLink" wicket:id="mostraModal"><i>...continua</i></a></div>
        </div>
        <div wicket:id="modale"></div>
    </div>
</div>

Il pezzo sopra rappresenta un estratto del codice HTML di un ipotetico Pannel che mostra un elenco News. Abbiamo visto in altre lezioni come stampare un elenco di informazioni bindate su un certo pezzo di codice. Nel mio caso ho usato il classico DataView con ID elencoNews. Ogni oggetto di tipo News aveva una proprietà Descrizione, DataInizioPubblicazione e Testo, che verranno legate ai wicket-id corrispondenti.

La cosa che ci interessa a noi però, sono le due parti sotto. Abbiamo un LINK con la scritta "...continua" che farà aprire la modale, ed un DIV modale che rappresenta la modale stessa.
Ovviamente le abbiamo messe entrambe dentro il blocco "elencoNews" che nel DataView verrò ripetuto così da avere una modale per ogni news.

//MODALE
    final ModalWindow modale;
    modale = new ModalWindow("modale");
    modale.setContent(new InformazioniNewsPanel("content",news.getId()));
    modale.setTitle("Scheda News");
    modale.setResizable(false);
    modale.setInitialWidth(500);
    modale.setInitialHeight(300);
    modale.setWidthUnit("px"); 
    modale.setHeightUnit("px"); 
    item.add(modale);
    modale.setCookieName(null);

    item.add(new AjaxLink<Void>("mostraModal")
    {
        @Override
        public void onClick(AjaxRequestTarget target)
        {
        modale.show(target);
        }
    });

All'interno della POPULATEITEM del DataView che state implementando, dovrete creare le vostre modali come si vede sopra.
Usiamo l'oggetto ModalWindow di Wicket associato all'ID modale. Lo configuriamo con Titolo, dimensioni ecc...
A questo punto abbiamo due possibilità. O ci mettiamo un contenuto dentro, come un Panel, oppure gli facciamo aprire un'intera pagina. Nel primo caso basta usare il metodo setContent.

modale.setPageCreator(new ModalWindow.PageCreator() 
    {
        @Override
        public Page createPage() 
        {
            return new MyPage("My Page");
        }
    });

Il codice sopra mostra invece come inserire una pagina. In questo caso occorre impostare un PageCreator come nell'esempio.

Infine possiamo vedere come il LINK fa aprire la modale semplicemente lanciando il metodo .show