Nel tutorial precedente per spiegare le Table ho creato una intera pagina con dentro la tabella dovendo poi ricorrere al barbatrucco dell'estensione della WelcomePage ed alla adozione del tag child dell'HTML per far capire a Wicket che dentro ci sarebbe stato del codice Wicket creato da qualcuno che mi avrebbe esteso.
La panel è simile come concetto a livello di codice ma è gestita in maniera diversa a livello logico.
Convertire il codice precedente è estremamente banale. Create una classe TablePanel.java copiandoci dentro tutto il contenuto della TablePage.java cambiando solo il nome della classe, il fatto che estende Panel invece che Page ed infine cambiate il costruttore come segue:
public TablePanel (String id){ super(id); buildPage(); }
A differenza delle Page, i Panel hanno bisogno di un ID di tipo stringa che sarà quello associato al tag wicket:id presente nel codice della pagina di chi lo chiamerà. NB. La chiamata al costruttore del padre è obbligatoria.
A differenza infatti della Page di prima, in questo caso esplicito chiaramente dove andrà messo il panel.
<body> <div id="pageContainer"> <div wicket:id="content"></div> </div> <div wicket:id="tablePanel"></div> </body>
Il codice della WelcomePage.html cambierà in questo modo. Aggiungo un tag wicket:id chiamato tablePanel nella quale metterò il pannello.
Il codice html del pannello sarà identico a quello della vecchia pagina con la differenza che il tag iniziale invece che wicket:extend sarà wicket:panel.
<wicket:panel> <table cellspacing="0" class="dataview"> <tbody> <tr wicket:id="trContacts"> <td><span wicket:id="tdName"></span></td> <td><span wicket:id="tdSurname"></span></td> </tr> </tbody> </table> <div wicket:id="navigator"></div> </wicket:panel>
Infine la chiamata nella WelcomePage.java che adesso verrà nuovamente chiamata per davvero nella classe Application.
package it.trewps.heavyexamples.web; import org.apache.wicket.markup.html.WebPage; import org.apache.wicket.markup.html.basic.Label; public class WelcomePage extends WebPage{ public WelcomePage(){ add(new Label("content","Hello World")); add(new TablePanel("tablePanel")); } }
Come vedete chiamo nuovamente la add passandogli la new del pannello e la stringa dell'ID.
Il risultato a video è esattamente lo stesso della precedente soluzione con il vantaggio però della riusabilità.
Dove infatti pensare che nella vostra applicazione questo Pannello potrebbe contenere dati stand-alone legati magari ad un DB e che debbano essere visualizzate all'occorrenza nelle pagine che vogliamo. Con questo sistema abbiamo creato di fatto un "componente wicket".
Immaginate per esempio un sistema di login o un carrello di un e-commerce e capirete cosa si intende per estendibilità e usabilità degli oggetti.
Ovviamente nessuno vi vieta di insere più di una volta il pannello nella stessa pagina a patto ovviamente che lo chiamate con ID differenti.
Poniamo che abbiate un panel che visualizza un banner caricato tramite un parametro, potete avere una colonna di banner aggiungendo Panel istanziati con un parametro diverso ogni volta che discrimina quale banner visualizzare.
Nessun commento:
Posta un commento