Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

ToasterLib – Les fonctionnalités avancées pour vos notifications Flex

Il y a quelques jours, je vous présentais la "ToasterLib", une librairie que j'ai crée permettant d'afficher facilement des notifications dans vos applications Flex. Par notification, j'entends les petits messages que l'on reçoit souvent dans les logiciels bureautiques type MSN, GTalk, avast! et autres.

Pour ceux qui ont raté un épisode, un petit rappel:

ToasterLib – Affichez des notifications dans vos applications Flex

ToasterLib sur Google Code

Pendant ces longues soirées/nuits de code, j'ai pensé au fonctionnement dont j'avais besoin (affichage de notifications en bas à droite), mais aussi à tout ce que les développeurs Flex qui vont télécharger cette librairie (oui, vous) vont pouvoir demander comme fonctionnalités, qu'elles soient utiles ou juste fun. Je n'ai bien sûr pas pensé à tout ou pas tout réaliser à la perfection mais tout comme la DataFilterLib, le projet est open source en licence "vous-en-faites-ce-que-bon-vous-semble". N'hésitez donc pas à demander des améliorations ou à proposer des patchs!

Bref, ce billet va exposer les fonctionnalités "avancées" déjà développées de la librairie. Je vais essayer d'accompagner les explications avec un maximum de code et d'exemples.

Comprendre l'architecture globale de la ToasterLib

Les sources du projet sont disponibles sur la page Google Code de la ToasterLib, en libre accès. Je vais résumer rapidement comment j'ai construit cette librairie.

Alors tout en haut, on a le composant Toaster qui est le composant graphique principal mais aussi la classe d'accès pour pouvoir envoyer de toasts. Le Toaster contient des ToastContainer.

Un ToastContainer est lui aussi un objet graphique qui dérive au moins de la classe ToastContainerBase. Un ToastContainer représente un emplacement dans lequel les toasts vont s'afficher. Pour faire simple, un ToastContainer est "un coin" dans lequel on a les toasts (même si on peut afficher les toasts dans les 9 directions). Chaque ToastContainer peut être configuré comme on le verra plus loin. Un ToastContainer va contenir des ToastMessage.

Un ToastMessage est un composant visuel lui aussi qui est en fait la notification affichée à l'écran. Pour faire simple, un ToastMessage est un composant qui hérite de ToastMessageBase. On verra donc que pour créer ses propres notifications, il suffit de créer un composant qui hérite de cette classe.

2 modes de fonctionnement: Par instance ou en Singleton

Les notifications peuvent être lancées pour de très nombreuses manières. Vous pourriez donc en avoir besoin un peu partout dans votre application. Au lieu de devoir référencer votre composant Toaster dans toutes les classes de votre applications, vous pouvez y accéder en tant que Singleton:

Toaster.toast(toastMessage, position);

Alors bien sûr, dans ce cas, vous ne pouvez avoir qu'un seul Toaster dans votre application ce qui va être le cas pour la plupart des applications. Mais je n'ai pas bridé la ToasterLib, vous pouvez donc en avoir plusieurs si vous le souhaitez. Cette fois, vous devrez y accéder directement par l'instance, les méthodes static (Singleton) et les méthodes classique (par instance) ont les mêmes signatures. C'est simplement le comportement derrière qui est spécifique.

Pour accéder aux instances de Toaster, pas de mystère:

<mx:Script>
 <![CDATA[
myToaster.toast(toastMessage, position);

 ]]>
 </mx:Script>
<fnicollet:Toaster id="myToaster" width="100%" height="100%" />

Configuration globale du Toaster

Vous avez accès à des propriétés globales sur le Toaster, pour une utilisation simplifiée en Singleton. Par exemple, si vous ne voulez pas spécifier tout le temps de "position" dans la méthode toast (Bottom-Right par défaut), vous pouvez utiliser la propriété "globalPosition":

Toaster.globalPosition = ToasterPosition.BOTTOM_LEFT;

D'autres propriétés sont disponibles, qui vont être propagées à tous les ToastContainer. Par exemple useLocalPosition (voir explication plus loin).

Définition d'un composant parent pour votre Toaster

De base, si vous ne définissez pas cette propriété, le Toaster va prendre 100% de la taille de l'application. Les notifications apparaîtront donc par dessous tout. Seulement, vous pouvez restreindre cette zone en donnant une référence vers un composant visuel de votre application. Par exemple, pour mon application cartographique, il a fallut que je n'affiche les notifications que sur la zone réservée à a carte. Il ne fallait pas que les notifications empiètent sur le bandeau de l'application ou sur les copyrights.

Pour utiliser un parent, votre code doit se présenter comme ceci:

<fnicollet:Toaster width="100%" height="100%" toastContainerParent="{myComponent}" />

Pour des raisons qui me sont parfois inconnues, vous aurez peut-être à mettre la propriété "useLocalPosition" à true. Si des décalages apparaissent, essayez cela

Configuration des "ToasterContainer" (temps d'affichage, bloquage au rollOver, …)

Vous pouvez configurer les ToasterContainer (les coins) avec diverses options. Tout cela se passe de manière déclarative, en MXML, dans la déclaration du Toaster.