In generale, quando si sviluppano applicazioni basate su una complessa interfaccia grafica, è necessario studiare un buon sistema per comunicare all'utente il successo o il fallimento di un'operazione.
Utilizzare i classici popup (che spesso “bloccano” l'interfaccia utente) è alquanto fastidioso. La maggior parte degli utenti web odia i popup e utilizzarli in un'applicazione può essere causa del fallimento dell'applicazione stessa. Gli utenti inizieranno ad “odiare” l'applicazione con la conseguenza che nessuno vorrà più utilizzarla.
A parte la divagazione un po' estrema, è bene utilizzare un sistema alternativo per le comunicazioni all'utente: un sistema che deve essere più semplice, più snello e soprattutto meno fastidioso.
Negli ultimi mesi si è iniziato a diffondere un tipo di messaggistica stile Growl (Mac OSX) o SystemTray (Windows) anche per le applicazioni web. Esistono diversi framework per Flex ma in questo articolo ci concentreremo sulla presentazione di Bark!.
Bark
Bark, a differenza di altri sistemi di notifiche per Flex, non necessita di framework cui appoggiarsi per poter funzionare (ad esempio Rawr! utilizza HydraFramework e lo skinning di Degrafa).
Bark utilizza le funzionalità di skinning di Flex4, offrendo la possibilità di cambiare dinamicamente le skin delle notifiche utilizzando gli stili CSS. Inoltre, è possibile personalizzare il titolo e il messaggio oltre che l'icona e la durata di visualizzazione della notifica. Le notifiche vengono inviate come eventi flex e vengono intercettate da un oggetto NotificationManager che ha il compito di “tradurre” l'evento in un box di notifica grafico per l'utente.
Compilare la libreria
Il progetto è distribuito come Flex Library Project. È, quindi, necessario installare e compilare il progetto in Flash Builder per ottenere il file SWC da utilizzare nei nostri progetti.
Iniziamo con lo scaricare il progetto. Una volta scaricato il progetto, in Eclipse (o Flash Builder 4) selezioniamo la voce Import dal menu File, in modo da poter creare automaticamente il progetto “Flash library project” (fugure 1 e 2):
Una volta importato il progetto (se la configurazione scelta non prevede la retrocompatibilità con MX), verranno rilevati dall'editor degli errori nel file src/org/tylerchesley/bark/skins/NotificationRendererSkin.mxml. Questi errori derivano dall'inclusione di oggetti del package “mx” (Halo) nell'interfaccia che sono stati trasferiti all'interno del package “s” (Spark). Correggiamo questi errori sostituendo mx:SolidColorStroke con s:SolidColorStroke, mx:Transition con s:Transition e così via.
Dopo aver compilato il progetto, nella cartella bin troveremo il file swc da utilizzare nelle applicazioni in cui vogliamo inserire le notifiche stile Growl (figura 3):
L'applicazione di esempio
Passiamo a sviluppare un esempio di utilizzo del tool Bark. L'applicazione che svilupperemo in questo articolo è finalizzata solo ad illustrare il funzionamento del framework. Sarà quindi composta da due pulsanti, uno per il lancio di un messaggio di operazione riuscita e uno per il lancio di un messaggio di errore, in modo da capire come differenziare i messaggi in base all'evento che deve essere comunicato all'utente.
Dopo aver creato il progetto Flex, passiamo ad importare la libreria Bark-Flex-beta-2.swc che abbiamo appena compilato. La libreria può essere importata semplicemente copiando il file Bark-Flex-beta-2.swc all'interno della cartella libs/ del progetto o dal menu Build Path della finestra delle preferenze del progetto, come mostrato in figura:
Per utilizzare Bark, è necessario che all'evento di CreationComplete dell'applicazione venga inizializzato il gestore delle notifiche. Lo facciamo scrivendo una funzione init() invocata quando l'applicazione ha terminato il suo caricamento.
private function init() : void {
NotificationManager.initialize();
}
Per inviare a video una notifica bisogna creare un oggetto di tipo Notification:
var notification:Notification = new Notification(type, duration, title, description, icon);
e deve essere effettuato il dispatch di un evento NotificationEvent.NOTIFY, con argomento un oggetto di tipo Notification. Il NotificationManager intercetterà l'evento e mostrerà il box con la notifica:
dispatchEvent(new NotificationEvent(NotificationEvent.NOTIFY, notification));
Per poter personalizzare l'icona visualizzata insieme al messaggio, dobbiamo dichiarare due oggetti (in questo caso usiamo due icone diverse) tra i tag <fx:Declarations> e </fx:Declarations> come mostrato di seguito:
<fx:Declarations>
<fx:Object id="successIcon" icon="@Embed('assets/ok.png')" />
<fx:Object id="errorIcon" icon="@Embed('assets/error.png')" />
</fx:Declarations>Questi due oggetti devono essere passati come argomento al metodo che effettua il dispath dell'evento per visualizzare la notifica:
<s:Button x="124" y="63" label="Successo!" width="138" height="60"
skinClass="spark.skins.spark.ButtonSkin" fontSize="18"
click="notify('default', 'Successo', 'L'operazione è andata a buon fine', successIcon,
5000)" />Il codice completo dell'applicazione di esempio è il seguente:
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:components="org.tylerchesley.bark.components.*"
applicationComplete="init();" minHeight="300" minWidth="300"
viewSourceURL="srcview/index.html" xmlns:mx1="library://ns.adobe.com/flex/mx">
<fx:Style source="BarkDemo.css" />
<fx:Declarations>
<fx:Object id="successIcon" icon="@Embed('assets/ok.png')" />
<fx:Object id="errorIcon" icon="@Embed('assets/error.png')" />
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.controls.Image;
import org.tylerchesley.bark.components.NotificationRenderer;
import org.tylerchesley.bark.core.Notification;
import org.tylerchesley.bark.events.NotificationEvent;
import org.tylerchesley.bark.managers.NotificationManager;
import spark.primitives.BitmapImage;
import spark.skins.SparkSkin;
private function init() : void {
NotificationManager.initialize();
}
private function notify(type:String = 'default',
title:String = '',
description:String = '',
icon:Object = null,
duration:Number = 3000) : void {
var notification:Notification = new Notification(type, duration, title, description, icon.icon);
notification.addEventListener(NotificationEvent.NOTIFICATION_ITEM_CLICK, clickHandler);
dispatchEvent(new NotificationEvent(NotificationEvent.NOTIFY, notification));
}
private function clickHandler(event:NotificationEvent) : void {
}
]]>
</fx:Script>
<s:Button x="124" y="63" label="Successo!" width="138" height="60"
skinClass="spark.skins.spark.ButtonSkin" fontSize="18"
click="notify('default', 'Successo', 'L'operazione è andata a buon fine', successIcon, 5000)" />
<s:Button x="124" y="140" label="Errore!" width="138" height="60"
skinClass="spark.skins.spark.ButtonSkin" fontSize="18"
click="notify('error', 'Errore!', 'Si è verificato un problema', errorIcon, 5000)" />
</s:Application>Dal codice dell'applicazione va notato come il secondo pulsante richieda la visualizzazione di una notifica di tipo “error”. Le classi di notifica sono definite nel file style.css:
.default {
skinClass: ClassReference("org.tylerchesley.bark.skins.NotificationRendererSkin");
}
.error {
skinClass: ClassReference("ErrorNotificationSkin");
}Notiamo che le due classi CSS fanno riferimento a due skin: la prima è fornita direttamente con la libreria mentre la seconda è una skin personalizzata, usata nell'esempio per la customizzazione del messaggio di errore (il box verrà colorato di rosso).
Il component da creare è di tipo SparkSkin e dovrà avere una struttura ben definita, come mostrato di seguito:
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
color="#FFFFFF" minWidth="250">
<s:states>
<s:State name="normal" />
<s:State name="hover" />
</s:states>
<s:transitions>
<s:Transition fromState="*" toState="*">
<s:Parallel>
<s:Fade target="{closeElement}" />
<s:AnimateColor target="{borderStroke}" colorPropertyName="color" />
</s:Parallel>
</s:Transition>
</s:transitions>
<s:Rect id="background" bottom="0" top="0" left="0" right="0"
radiusX="5" radiusY="5">
<s:filters>
<s:GlowFilter color="#000000" blurX="10" blurY="10" alpha="0.5" />
</s:filters>
<s:fill>
<s:SolidColor color="#cb2e2e" alpha="0.5" />
</s:fill>
<s:stroke>
<s:SolidColorStroke id="borderStroke" weight="2"
color.hover="#FFFFFF" color="#cb2e2e" />
</s:stroke>
</s:Rect>
<s:BitmapImage id="iconElement"
left="10" top="10" bottom="10" />
<s:Label id="titleElement"
fontWeight="bold" fontSize="14"
left="{iconElement.width + 20}" top="10" right="10" />
<s:RichText id="descriptionElement"
top="{titleElement.height + 20}" bottom="10" right="10"
left="{iconElement.width + 20}" width="100%" />
<s:Group id="closeElement" top="10" left="10"
includeIn="hover" width="25" height="25" toolTip="Close">
<s:filters>
<s:GlowFilter color="#000000" />
</s:filters>
<s:Ellipse width="25" height="25">
<s:fill>
<s:SolidColor color="#cb2e2e" />
</s:fill>
<s:stroke>
<s:SolidColorStroke color="#FFFFFF" weight="2" />
</s:stroke>
</s:Ellipse>
<s:Line width="14" rotation="45" verticalCenter="0" horizontalCenter="0">
<s:stroke>
<s:SolidColorStroke color="#FFFFFF" weight="3" caps="round" />
</s:stroke>
</s:Line>
<s:Line width="14" rotation="135" verticalCenter="0" horizontalCenter="0">
<s:stroke>
<s:SolidColorStroke color="#FFFFFF" weight="3" caps="round" />
</s:stroke>
</s:Line>
</s:Group>
</s:SparkSkin>È possibile scaricare a questo punto il progetto Flex per Flash Builder.
Su questa pagina trovate invece l'esempio completo (disponibile anch'esso per il download).
Conclusione
L'utilizzo di un framework per notifiche stile growl è una caratteristica importante per lo sviluppo di Rich Internet Applications con un elevato livello di interazione con l'utente. L'abolizione dei popup che bloccano l'interfaccia è una conseguenza notevolmente apprezzabile. Per quanto riguarda l'utilizzo di Bark, invece, è consigliabile quando si ha la necessità di utilizzare un framework leggero e poco invasivo, che non necessiti di utilizzare librerie molto più complicate (Rawr!, come sopra).
Nicola Strisciuglio è uno sviluppatore Java/Flex, con una vocazione per la progettazione di software riutilizzabile. Gestisce un blog di approfondimento su temi di ingegneria del software applicata al web.
