Wicket - Finestra Modale al posto del Confirm

Abbiamo visto nel precedente post come fare una semplice modale che stampa qualcosa.

Oggi vediamo come creare un minimo di interazione di ritorno tra la modale e la pagina che la istanza. Per esempio vogliamo sostituire il classico CONFIRM di javascript con una modale che ci chieda conferma di una operazione.

La costruzione della modale è identica a quella vista nel precedente post. L'unica differenza è la chiamata al Panel che ci mettiamo dentro.
Riportiamo comunque tutta l'inizializzazione:

avvertenzaCancellazione = new ModalWindow("modaleElimina");
avvertenzaCancellazione.setContent(new AvvertenzaEliminaPanel("content",avvertenzaCancellazione,answer));
avvertenzaCancellazione.setTitle("ATTENZIONE");
avvertenzaCancellazione.setResizable(false);
avvertenzaCancellazione.setInitialWidth(500);
avvertenzaCancellazione.setInitialHeight(300);
avvertenzaCancellazione.setWidthUnit("px");
avvertenzaCancellazione.setHeightUnit("px");
avvertenzaCancellazione.setCookieName(null);

avvertenzaCancellazione.setWindowClosedCallback(new ModalWindow.WindowClosedCallback() {
    @Override
    public void onClose(AjaxRequestTarget target) {
        if (answer.isAnswer()) {
           FACCIO QUALCOSA
           target.addComponent(COMPONENTE_DA_AGGIORNARE);
        } 
    }
});
    
add(avvertenzaCancellazione);

La differenza con la precedente MODALE riguarda essenzialmente il Panel che usiamo come contenuto ed ovviamente l'ovveride del metodo onClose su cui arriveremo tra poco.

PANELLO

Il pannello della modale, nel nostro caso AvvertenzaEliminaPanel, riceve nel costruttore la stessa modale ed una variabile chiamata Answer che è praticamente la nostra variabile PONTE tra la pagina e il contenuto della modale.

public class Answer {
    
    private boolean answer;
    
    public void Answer(){
        this.answer = false;
    }

    public boolean isAnswer() {
        return answer;
    }

    public void setAnswer(boolean answer) {
        this.answer = answer;
    }

}

La classe è molto semplice e serve per bypassare il problema del passaggio di informazione. Come sapete Java passa le classi per riferimento ed i tipi primitivi per valore. Non potevo usare una semplice variabile boolean per capire se ho premuto su CONFERMA o ANNULLA perché dentro il panel la modifica non sarebbe stata propagata.

public class AvvertenzaEliminaPanel extends ProtectedPanel {

    private static final long serialVersionUID = 1L;
    
    public AvvertenzaEliminaPanel(String id, final ModalWindow modalWindow, final Answer answer) {
        super(id);
        
        Form yesNoForm = new Form("yesNoForm");
         
        AjaxButton yesButton = new AjaxButton("yesButton", yesNoForm) {
 
            @Override
            protected void onSubmit(AjaxRequestTarget target, Form form) {
                if (target != null) {
                    answer.setAnswer(true);
                    modalWindow.close(target);
                }
            }
        };
 
        AjaxButton noButton = new AjaxButton("noButton", yesNoForm) {
            @Override
            protected void onSubmit(AjaxRequestTarget target, Form form) {
                if (target != null) {
                    answer.setAnswer(false);
                    modalWindow.close(target);
                }
            }
        };
 
        yesNoForm.add(yesButton);
        yesNoForm.add(noButton);
 
        add(yesNoForm);
        
    }


}

Ecco il codice del Panello interno. Abbiamo una FORM (chiamata yesNoForm) ed i due bottoni da premere, uno YES e l'altro NO.

I due bottoni come vedete sono speculari. L'unica cosa che fanno è settare il bolean della variabile ANSWER a true o false in base al bottone stesso ed ovviamente chiudere la modale. E' proprio per chiudere la modale che nel costruttore del pannello devo passare anche la modale. Per poterci lanciare il metodo .close(target).

Riporto anche il codice HTML del pannello.

<wicket:panel>
<div class="avvertenza">
    ATTENZIONE:
    Stai per cancellare qualcosa. Procedere comunque?
    
    <form wicket:id="yesNoForm" action="">
      <div style="margin-top:25px;">
        <table class="yesNo" border="0">
            <tr>
                <td style="width:50%;"><input class="buttonConfirm left" type="submit" wicket:id="yesButton" value="Sì"/></td>
                   <td style="width:50%;"><input class="buttonCancel right" type="submit" wicket:id="noButton" value="No" /></td>
               </tr>
        </table>
      </div>
    </form>
    
</div>
</wicket:panel>

MODALE ON CLOSE

A questo punto quando nel pannello chiudo la modale, viene lanciata il metodo onClose che avevamo visto sopra e che riporto qua sotto:

    @Override
    public void onClose(AjaxRequestTarget target) {
        if (answer.isAnswer()) {
           FACCIO QUALCOSA
           target.addComponent(COMPONENTE_DA_AGGIORNARE);
        } 
    }

Come vedete posso leggere il contenuto della variabile ANSWER che sarà stato aggiornato dal panello (ricordate di dichiararla nella pagina o pannello nella quale state aprendo la modale così da avere lo scope).
In questo caso si entra nell'IF se nel pannello avevo premuto YES (se guardate sopra, la inizializiamo a true). A questo punto posso fare le mie operazioni e riaggiornare eventualmente qualche componente. La onClose è infatti una chiamata Ajax quindi la FORM eventualmente presente non viene submitata quindi se avete, per esempio, bisogno di riaggiornare qualcosa, dovrete aggiungere vari target.addComponent... con le varie componenti. Potete anche riaggiornare tutto il pannello se volete riportarvi ad una situazione base oppure tutta la pagina semplicemente mettendo questo comando:

setResponsePage(PAGINA.class);

Ciao e alla prossima...