P4A Framework: uso degli ajax-popup

Il framework p4a ha introdotto il supporto agli ajax-popup già dalla versione 1.99.15. Questa feature permette agli sviluppatori di far visualizzare all'utente maschere come "finestre modali".

In p4a i popup sono implementati utilizzando ajax, in modo completamente trasparente allo sviluppatore, e per la loro visualizzazione non sono utilizzate nuove istanze del browser. I contenuti sono presentati in div xhtml con z-index maggiore di tutti gli altri componenti della pagina. In questo modo il framework garantisce la visibilità completa dei contenuti del popup "sopra" la pagina chiamante che rimane "oscurata" fino alla chiusura del popup.

L'esempio che riporto in questo post permette il passaggio dei dati tra la maschera chiamante ed il popup (tecnicamente tra due maschere). Il meccanismo si basa sull'assunto che la maschera popup, essendo modale, può presentarsi in una sola istanza.

L'applicazione visualizza all'avvio due campi non editabili con valore numerico casuale. Il pulsante posto a fianco di ogni campo permette di modificarne il valore numerico agendo sul bottone di incremento o decremento presentato nella finestra popup.

Quando si verifica il click su un bottone della maschera principale, viene richiesta l'esecuzione del metodo "setCaller" della finestra da aprire in modalità ajax-popup. Passando a questo metodo il nome del bottone che è stato premuto sarà possibile memorizzare nella classe che genera il popup il nome del widget che ne ha richiesto l'apertura.

L'esecuzione di "openPopup" permette  al framework di far apparire il popup:

1. $p4a->openPopup('popup_mask');

Alla chiusura della finestra popup il controllo torna automaticamente alla maschera chiamante. Avendo un riferimento al componente che ha richiesto l'apertura del popup (nell'attributo privato caller della classe che implementa la maschera popup-mask) è possibile memorizzare il valore restituito nel componente opportuno della maschera base.

Riporto ad esempio il codice che restituisce al chiamante il valore incrementato:

1. function modify_value_inc() {
   1. $p4a =& p4a::singleton();
   2. $caller_mask =& p4a_mask::singleton( 'first_mask' );
   3. if ($this->caller=="btn_value_setter_1") {
      1. $caller_mask->counter_1->setNewValue(
         1. $caller_mask->counter_1->getNewValue()+1);
   4. }
   5. if ($this->caller=="btn_value_setter_2") {
      1. $caller_mask->counter_2->setNewValue(
         1. $caller_mask->counter_2->getNewValue()+1);
   6. }
   7. $p4a->closePopup(FALSE);
2. }

Gli ajax-popup hanno di default una icona (una x presente nell'angolo superiore sinistro del popup) che ne permette la chiusura senza l'esecuzione di alcun codice.

Il codice sorgente completo dell'esempio è disponibile qui.