Il metodo app.popup

Oltre alle videate costituite da elementi visuali, nelle applicazioni web e mobile vengono utilizzati ulteriori componenti grafici con compiti specifici, come ad esempio i messaggi di attenzione o a scomparsa, le richieste di conferma, l’inserimento di un dato, gli spinner per segnalare il progresso di un’operazione in corso.

Per ottenere questi comportamenti, il framework IonicUI contiene un metodo di sessione chiamato app.popup che consente di visualizzare il componente specificato dalle opzioni e poi restituisce il risultato che l’utente ha indicato. Se ad esempio, si desidera richiedere dei dati all’utente, è possibile utilizzare app.popup con il seguente codice:

var ris = yield app.popup({
    type : "alert", 
    title : "Login info",
    message : "Please provide your credentials",
    inputs : [{
      id : "username", 
      type : "email", 
      placeholder : "Enter your email", 
      focus : true
    }, {
      id : "pwd", 
      type : "password", 
      placeholder : "Enter your password"
    }, {
      id : "rm", 
      type : "checkbox", 
      label : "Remember me"}],
    buttons : ["Cancel", "Ok"]
    });

Il risultato è la videata mostrata nell’immagine seguente:

Quando l’utente clicca su un pulsante, il metodo popup restituisce un oggetto che riporta i dati inseriti dall’utente e quale pulsante è stato cliccato.

Il tipo di popup viene selezionato tramite la proprietà type dell’oggetto passato al metodo.  Sono disponibili i seguenti tipi:

1. alert: una videata costituita da titolo, messaggio e pulsanti. Può contenere anche controlli visuali come input, radio button o checkbox.
2. actionsheet: un menu di opzioni (massimo 6) che appare dal fondo del dispositivo. Si consiglia l’uso di questo popup solo in caso di applicazioni mobile, soprattutto se su smartphone.
3. loading: un messaggio con un elemento spinner che indica che c’è una operazione in corso. L’interfaccia utente è bloccata. 
4. toast: un messaggio che appare dal basso o dall’alto dello schermo e scompare automaticamente dopo qualche secondo.
5. menu: un popup che contiene un menu di scelta. Può essere fatto apparire vicino ad un pulsante nell’interfaccia utente.

Per conoscere tutte le opzioni aggiuntive, si consiglia di leggere la documentazione in linea. del metodo app.popup. Per ulteriori esempi è disponibile il progetto: Mobile Design Patterns.
Si segnala infine che il framework IonicUI ridefinisce l’output grafico dei metodi app.alert, app.confirm e app.prompt: essi vengono visualizzati tramite app.popup.