dNotify è un plugin jQuery che ci aiuta a gestire l'interazione con l'utente, fondamentale nei siti e nelle applicazioni web moderne in cui il coinvolgimento prevede messaggi e segnali immediati in risposta alle azioni compiute.
Il modo in cui si visualizzano questi messaggi deve essere chiaro ma non troppo invasivo,
permettendo all'utente di capire quello che sta succedendo senza annoiarlo con click inutili e finestre ingombranti. In questo articolo vedremo come dNotify ci può essere d'aiuto per far comunicare le nostre applicazioni con gli utenti.
Installare dNotify
L'installazione avviene come un qualsiasi altro plugin per jQuery: scarichiamo il pacchetto dal
repository GitHub del progetto ed estraiamo il contenuto in una cartella del nostro sito.
Per includerlo nelle nostre pagine è sufficiente inserire le seguenti righe di codice:
<script type="text/javascript" src="./dNotify/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="./dNotify/dNotify.css" media="screen" />
<script type="text/javascript" src="./dNotify/jquery.dNotify.js"></script>Oltre a jQuery, includiamo il foglio di stile per la struttura grafica delle notifiche e il plugin vero e proprio. Non resta che invocarlo a seguito di un'azione dell'utente (conferma, errore, ecc..):
$(document).ready(function() {
$.dNotify("good", "Benvenuto nel sito di HTML.it .");
});Vediamo nel dettaglio come utilizzare il plugin.
I parametri
Il plugin offre alcuni parametri che possono essere modificati sia globalmente sia localmente per ogni chiamata (vedremo in seguito come farlo). Le opzioni a disposizione sono le seguenti:
| Opzione | Descrizione |
|---|---|
| sticky | flag booleano per scegliere se visualizzare i messaggi in maniera permanente (true) o per un determinato periodo (false). Se impostato a true, per nascondere il messaggio sarà necessario cliccarci sopra |
| duration | imposta la durata di visualizzazione per i messaggi non sticky (in millisecondi) |
| slideTime | specifica la durata delle animazioni di comparsa/scomparsa dei messaggi (in millisecondi) |
| message | messaggio da visualizzare |
| type | tipo di messaggio da visualizzare (good, bad, warn) |
| showIcon | flag boolean per scegliere se visualizzare un'icona assieme al messaggio |
| iconPosition | imposta la posizione dell'icona ("left" o "right") |
| iconFile | specifica il file da utilizzare come icona |
Lo sviluppo
Ad esempio, se vogliamo impostare globalmente il tempo di visualizzazione a 2 secondi
dei messaggi, e la loro chiusura dopo appena 250 millisecondi, è sufficiente richiamare il plugin nel seguente modo:
$.dNotify({ duration: 2000, slideTime: 250 });Ora che abbiamo capito come impostare il plugin, passiamo alla parte più interessante: la visualizzazione
dei messaggi.
La modalità più giusta per visualizzare i messaggicon dNotify, ed anche la più impegnativo, è l'utilizzo del metodo show, il quale prende come parametro un oggetto nel quale inserire tutte le opzioni
desiderate. La sintassi è la seguente:
$.dNotify("show", {
message: "Test HTML.it",
sticky: false,
duration: 2000,
type: "good"
});All'utente verrà mostrato il messaggio "Test HTML.it" per 2 secondi con tonalità sul verde, poi
svanirà automaticamente.
Per personaizzare la visualizzazione dei messaggi esistono 3 metodi, good, bad, warn che settano alcune impostazioni in automatico, lasciando allo sviluppatore solo il settagio del messaggio.
$.dNotify("good", "Questo è un messaggio positivo");
$.dNotify("bad", "Questo è un messaggio negativo");
$.dNotify("warn", "Questo è un messaggio di attenzione");good visualizza un messaggio con tonalità verdi che scompare automaticamente dopo 5 secondi,
mentre bad e warn, rispettivamente con tonalità rosse e gialle, mostrano messaggi
sticky, ovvero che richiedono un click da parte dell'utente per la chiusura, .
È possibile visualizzare più messaggi contemporaneamente di vario tipo semplicemente richiamando più volte il plugin, i messaggi verranno visualizzati in cascata a partire dal meno recente.
Ognuno dei metodi accetta un terzo parametro opzionale, un oggetto contenente eventuali opzioni per il singolo messaggio. Ad esempio se volessimo visualizzare un messaggio di tipo bad non sticky che si chiuda dopo 10 secondi, possiamo utilizzare il seguente codice:
$.dNotify("bad", "Messaggio negativo che scompare dopo 10 secondi", {
sticky: false,
duration: 10000
});Personalizzazione
L'aspetto grafico dei vari messaggi è definito in un foglio di stile, dNotify.css: ogni tipo di messaggio corrisponde ad una classe CSS avente lo stesso nome; questo permette di modificare le classi esistenti e di crearne di nuove.
Ad esempio un messaggio good è associato con la classe CSS .good che contiene le seguenti proprietà:
#dNotify .msg.good {
background-color: #9f9; /* Fallback for IE */
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(221,255,221,0.8)), to(rgba(153,255,153, 0.8)));
background: -moz-linear-gradient(top, rgba(221,255,221,0.8), rgba(153,255,153, 0.8));
color: #3a3;
border-color: #3a3;
}Un altro aspetto che possiamo personalizzare è la presenza o
meno di un'icona rappresentativa per i vari tipi di messaggi mediante l'opzione showIcon.
Impostata a true possiamo definire la sua posizione con iconPosition e il file da visualizzare con iconFile.
Il plugin contiene altri metodi che possono risultare utili durante lo sviluppo, li esponiamo brevemente nella tabella seguente:
| Metodo | Descrizione |
|---|---|
| $.dNotify("close", type"); | toglie tutti i messaggi del tipo "type" correntemente visualizzati |
| $.dNotify("closeAll"); | toglie tutti i messaggi correntemente visualizzati (indipendentemente dal tipo) |
| $.dNotify("fromArray", errors); | parsa un array di errori e li visualizza |
L'ultimo metodo, fromArray, è probabilmente il più interessante, in quanto consente
di visualizzare gli errori da un array, ritornato ad esempio attraverso una chiamata ajax in JSON.
La struttura dell'array è semplice:
errors = [[false, "Messaggio di errore"], [true, "Messaggio positivo"]];L'elemento in posizione "0" rappresenta il tipo di messaggio, false=bad, true=good, mentre l'elemento in posizione "1" contiene il testo da visualizzare.
Conclusioni
In rete è possibile trovare molte alternative per visualizzare messaggi di notifica agli utenti, ma
questo plugin costituisce una soluzione semplice e facilmente personalizzabile mediante l'utilizzo di poche righe di CSS.
