Wicket - Modale con FORM

Nell'altro posto abbiamo costruito una modale con un contenuto statico. Purtroppo è una eventualità più remota rispetto ad una modale con dentro del codice da eseguire come nel caso di una FORM.

Il problema delle form dentro le modali riguarda il fatto che a tutti gli effetti tale finestra è una parte della pagina stessa quindi se inserite nella modale una form classica con un submit classico, alla pressione verrà caricata tutta la pagina facendo così scomparire la modale.

Per questo motivo tutte le componenti dentro la modale attiva devono essere sviluppate tramite Ajax. Fortunatamente Wicket ci da una mano.

Costruire il Panel


Il contenuto della modale viene realizzato tramite un pannello che funziona esattamente come quelli che generalmente realizzate. L'unica variazione riguarda la variabile della Finestra Modale che va passata al pannello così che una delle operazioni al suo interno possa chiuderla (il submit con successo per esempio).

final FeedbackPanel feedbackPanel = new FeedbackPanel("feedback");
public EditMicrorganismiLatteCrudo(String idPojo, final ModalWindow modalWindow) {
   super("content");
   add(new MyForm(idPojo,modalWindow));
}

Il costruttore del pannello è molto semplice. In ingresso abbiamo un qualsivoglia id legato ad un POJO a cui legherò la form (giusto per fare qualcosa) e la modale. Credo e aggiungo la form che sarà espressa tramite classe privata ed a cui passo di nuovo la modale.

IMP: Il feedback del pannello va esplicitato sia nel codice HTML che all'interno della classe.

add(new AjaxButton("Salva") {
    private static final long serialVersionUID = 1L;

    @Override
    protected void onSubmit(AjaxRequestTarget target, Form<?> form) {        
        getManager().inserisciPojo(myPojo);
        modalWindow.close(target);
    }

    @Override
    protected void onError(AjaxRequestTarget target, Form<?> form) {
        target.addComponent(feedbackPanel);
    }

});

Come anticipato, gli eventi devono essere tutti Ajax quindi il bottone di submit deve necessariamente esserlo. La onSubmit funziona analogamente ad un comune tasto submit con la differenza che se va a buon fine, si deve chiudere la modale.

L'altra cosa importante riguarda il feedback. In caso di errore occorre esplicitare il comportamento essendo tutto in Ajax. La form ha ovviamente un validatore interno in base a come avete impostato i campi. Se per esempio avete inserito un TextField<Integer> e poi inserite una stringa, la FORM riconosce l'errore e alla pressione del tasto salva, lancerà il metodo onError. A questo punto non vi resta che aggiornare il feedback panel con il solito comando target.addComponent.

IMP: Il feedback deve essere aggiunto all'interno della form in quanto è un elemento figlio dello stesso.