Wicket - Usiamo il DataGrid

Altra richiesta ed altro componente da usare.
Mettiamo che avete una bella form con tanti input e poi vi chiedano di metterli su due o più colonne.

Per gestire questo genere di problematiche, andiamo ad usare il GridView che permette di specificare come riempire una singola cella della griglia per poi specificare il numero di righe o di colonne.

GridView<MyFormItem> gridView = new GridView<MyFormItem>("rows",new ExternalDataProvider<MyFormItem>(elencoDellaRoba))
{
    private static final long serialVersionUID = 1L;
    @Override
    protected void populateItem(Item<MyFormItem> item)
    {
        final MyFormItem r = item.getModelObject();
    final TextField<Integer> na = new TextField<Integer>("braccia", new PropertyModel<Integer>(r, "numeroDiBraccia"));
    item.add(na.setRequired(true));
    item.add(new Label("bracciaLabel",r.getDescrizione()));
    }

    @Override
    protected void populateEmptyItem(Item<Rpp_LatteCrudo> item)
    {
        item.add(new Label("braccia", "").setVisible(false));
        item.add(new Label("bracciaLabel", "").setVisible(false));
    }
};
gridView.setColumns(2);
add(gridView);

Il GridView è facile da usare analogamente al DataView che abbiamo visto più volte. L'unica parte importante riguarda il metodo populateEmptyItem che serve per decidere cosa stampare nel caso la lista non sia interamente divisibile per il numero di colonne che decideremo. Nel nostro caso, avendo scelto due colonne, se ho una lista dispari l'ultima cella sarà riempita con quello indicato in questo metodo.

Nel mio caso stampo due Label vuote e le nascondo.

Andiamo a vedere il codice HTML a cui attaccare questa cosa:

<table cellspacing="0" cellpadding="2" border="1">
    <tr wicket:id="rows">
        <td wicket:id="cols">
         <ul>
             <li><b><span wicket:id="bracciaLabel"></span></b></li>
             <li><input type="text" size="2" maxlength="3" wicket:id="braccia" /></li>
         </ul>
    </td>
    </tr>
</table>

Come vedete occorre solo definire una struttura che lui ripeterà analogamente a quanto succede per il DataView.
L'uso della tabella, in questo caso, è puramente opzionale. L'importante è definire un componente di tipo ROWS ed uno di tipo COLS. Potete mettere degli UL, degli SPAN ecc... e gestirvi tutto tramite CSS. La tabella a mio parere è più facile da gestire e più vicina al concetto di GRIGLIA.

All'interno del "COLS", definiamo cosa e come stampare la roba ricordandoci che è la stessa che dovremo mettere nella populate item.

Anche per questo componente avrete a disposizione il navigator.