Cela fait un moment que j'en parle sur flex-tutorial à gauche à droite mais la voilà, ma dernière création, la ToasterLib. Comme indiqué dans le titre, la ToasterLib est une librairie Flex permettant d'afficher des notifications dans une appli Adobe Flex. Par notification, j'entends les notifications qui apparaissent quand quelqu'un se connecte sur GTalk ou que l'on essaie de vous envoyer un message sur MSN ou quand avast! met à jour sa base de données (vous pouvez aussi rajouter la petite voix ennuyeuse). Le mouvement ascendant / pop-up faisant penser à un toast qui sort du toaster, on appelle ces petites fenêtres, des "Toast-window".
C'est pas tout neuf
Un bon tutorial Adobe existe déjà pour ajouter ces notifications dans des applications Adobe Air, dans une NativeWindow à part. Vous pouvez le consulter ici:
Mais ici, on s'appuie sur NativeWindow, impossible de faire cela donc en dehors du contexte bureautique. Mon composant, lui, ne fonctionne qu'à l'intérieur d'une application Flex.
Pourquoi des toasts ?
Vous utilisez sûrement dans vos applications pro, des messages de type "Alert" qui ouvrent une pop-up pour signaler quelque chose à votre utilisateur (modification effectuée, mauvais password, ...). Ces composants sont assez intrusifs puisqu'ils ouvrent une pop-up que l'utilisateur doit obligatoirement fermer s'il veut continuer à utiliser l'application (pop-up modale). On peut bien sûr créer des Alert qui se ferment tout seul mais on garde l'esprit de la grosse pop-up qui tâche.
La notification, elle, peut être affichée sans troubler le travail de l'utilisateur. Dans la plupart des cas, vous voudrez même que cette notification disparaisse toute seule au bout d'un certain temps.
ToasterLib? Ca sert à quoi ?
La ToasterLib sert justement à vous aider à envoyer ces notifications utilisateurs. En effet, il y a de nombreux paramètres à prendre en compte si vous devez faire ces notifications vous-même:
- Quel effet donner à l'apparition/disparition?
- Comment empiler plusieurs notifications?
- Comment afficher des notifications depuis un autre coin que le coin en bas à droite ?
- Comment afficher des notifications par rapport à un autre conteneur que l'application?
- Comment accéder facilement à mon toaster depuis n'importe quelle partie de mon application?
- Comment donner un style qui ressemble à mon application pour ma notification?
Et bien, vous l'avez sûrement deviné, la ToasterLib vous permet de ne pas vous soucier de toutes ces problématiques et de vous concentrer sur votre Business Logic.
Personne ne l'a déjà fait avant?
Et bien si, d'autres s'y sont déjà essayé. Parfois de manière artisanale mais on peut voir plusieurs flexeurs qui se sont frottés aux notifications:
Ces librairies étaient plutôt bonnes, mais pas suffisantes pour mon besoin. J'avais besoin d'afficher des notifications personnalisées pour une application professionnelle que je développe et bien souvent, les librairies existantes ne contenaient pas toutes les options dont j'avais besoin. J'ai donc essayé de prendre le meilleur de chaque librairie (les meilleures idées) pour montre ma propre librairie.
En savoir plus / Téléchargement
Pour utiliser la ToasterLib, voir l'ASDoc et autres, tout se trouve sur la page Google Code qui y est consacrée:
Comment ça marche?
Pour pouvoir afficher un "toast", c'est très simple. Il faut tout d'abord télécharger la librairie SWC que vous trouverez sur la page Google Code du projet. Ajoutez ce SWC en référence à votre projet, vous savez comment faire.
Modifier légèrement son application ...
Ensuite, passez le layout de votre application en "absolute" pour pouvoir afficher les notifications au dessus de n'importe quel autre élément. Ajoutez aussi le namespace de la librairie, fnicollet (URI: http://www.flex-tutorial.fr/2009). Vous aurez donc un tag application qui va ressembler à :
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:fnicollet="http://www.flex-tutorial.fr/2009" layout="absolute" ...
Ajoutons maintenant notre composant Toaster à notre application. Le Toaster est le composant-clé, qui va contrôler tout le comportement de nos notifications. Tout à la fin de votre application, ajoutez:
<fnicollet:Toaster id="simpleToaster" width="100%" height="100%">
</fnicollet:Toaster>
</mx:Application>
Pour vérifier que votre Toaster couvre bien l'ensemble de votre application, vous pouvez lui donner temporairement un "backgroundColor" égal à "red", il devrait recouvrir l'ensemble de l'application. On va maintenant créer notre notification.
Mon premier toast!
Les notifications que vous pouvez afficher sont entièrement personnalisables. En effet, tout composant peut être "toasté", peu importe ce qu'il contient ou ce qu'il fait. Enfin pas vraiment tous les composants mais plutôt tous les composants qui héritent de la classe "ToastMessageBase" (classe comprise dans la ToasterLib).
On va donc créer une notification très simplement en MXML (New > MXML Component > MonToast.mxml):
<?xml version="1.0" encoding="utf-8"?>
<ToastMessageBase xmlns="com.fnicollet.toaster.message.*" xmlns:mx="http://www.adobe.com/2006/mxml"
width="200" height="120">
<mx:Label text="Texte dans ma notification"/>
<mx:Button label="Bouton"/>
</ToastMessageBase>
Afficher ma notification dans mon application
Plusieurs méthodes sont possibles pour afficher une notification. Vous pouvez donner un "id" à votre Toaster ou bien l'appeler directement par une méthode static si vous ne comptez en utiliser qu'un seul. Si vous voulez utiliser plusieurs Toaster, vous pouvez accéder aux même méthodes sur les instances de Toaster.
La méthode qui nous intéresse est ici la méthode toast() qui prend en paramètres:
- Un objet de type ToastMessageBase
- Une position que vous pouvez définir avec les constantes de la classe ToasterPosition (Bottom-Right par défaut)
Voilà donc l'exemple le plus simple:
var toastMessage:MonToast = new MonToast;
Toaster.toast(toastMessage);
Et la notification apparaîtra dans le coin de votre application!
D'autres exemples des capacités de la ToasterLib...
Compatibilité Flex 4
La librairie ToasterLib a aussi une version compatible Flex 4. Plus d'informations ici:
ToasterLib - Maintenant disponible pour Flex 4
Autres Tutoriaux Flex liés:
nice job
je vois déjà où cela pourra m'être utile...
Hello,
pas mal
.
La possibilité de faire des notifs (ou Toast) incluant n'importe quel composant était une évolution de mes Notifications que je m'étais noté d'implémenter un jour. Je vais donc tester ta version.
@+
Salut !
Bravo et encore Bravo !
Rien de plus à dire
Nico.
Salut,
très joli composant. Toutefois je rencontre des difficultés pour l'utiliser. J'ai créer un ToastMessageBase (composant me semble t'il tout désigner pour la création de toast personnalisé ) auquel j'ajoute un simple composant Label dans lequel se trouve mon message à afficher. Lorsque je clique sur un bouton pour faire apparaitre le toast, il ne se passe rien... Je suis sûr de mon évènement déclencheur (vérifier en utilisant l'exemple simple fournie ci-dessus dans le tutoriel). Que me manque t'il ?
Tom.
Salut,
alors déjà, il faut voir si ton Toaster est bien positionné. Pour faire cela facilement, met lui un backgroundColor="red" et tu verras direct s'il est bon. Normalement, tu devrais démarrer ton application avec un écran rouge. Si non, plusieurs raisons:
- Ton application n'est pas en layout="absolute" et que ton Toaster soit tout à la fin de ton application (obligatoire pour que tes toasts apparaissent par dessus)
- Regarde si tu l'as bien mis en width/height = 100%
Si tout cela est ok, renvoie un message, je verrai avec toi
Fabien
Merci pour ta réponse rapide.
Avec un backgroundColor="red" j'ai effectivement un joli écran tout rouge qui occupe toute la taille de mon écran (mon appli est full screen).
Pour répondre à tes autres question :
- mon layout est bien en absolute
- mon toaster est bien à la fin de mon application
- le width / height est bien à 100%
Pour essayer de faire avancer le schmilblick, voila ce qui est déclaré dans l'event sensé faire apparaitre mon toast :
avec mysimpleToaster comme id du Toaster déclaré à la fin de mon mxml.
D'avance merci pour ton aide.
Tom
Ok, on en parle par mail
Fabien
Salut,
Merci c'est très utile, ergonomique et simple à utiliser
.
Comment faire pour faire apparaitre le toast par dessus une popup ?
Mon application est en layout="absolute" et j'ouvre une popup TitleWindow qui prend a peu près tout l'espace. Lorsque je déclenche le toast, il s'affiche entre l'application et la popup :S, donc on le voit à peine. Je n'ai pas renseigné toastContainerParent.
Une idée?
Bonne continuation,
BnJ
Salut BnJ,
très bonne question, je n'avais jamais essayé cela ^^. Je viens de faire quelques tests non concluants. Quand Flex utilise le PopUpManager (même avec un parent), on dirait qu'il est au dessus de tout (un peu comme quand on crée une pop-up modale mais sans le voile.
Bravo si tu trouves une solution à ton problème
Fabien
Ok, j'ai trouvé une solution pour contourner mon pb...
J'ai posé un deuxième toaster dans ma popup, et lorsque je balance mon toast message je test si ma popup est ouverte pour le diffuser dans le bon toaster... ca rajoute 2/3 lignes ma ca fonctionne
J'en profite pour t'encourager pour flex-tutorial, continue on est nombreux à le consulter régulièrement!
Bonne journée!
Salut,
Effectivement, comme le Toaster n'est qu'un élément de la liste d'affichage (et qu'il peut être utilisé en non-Singleton, tu peux en utiliser plusieurs.
Bravo ^^
Fabien
Is there a Flex 4 version?
@Hilary
. I'm gonna work on it this afternoon, should be quite straight forward as there is not much dependency with the Flex framework itself.
Not yet cause well, no one asked for it yet
I'll post the SWC on the google code project asap and email it to you
Cheers,
Fabien
@Hilary
The Flex 4 version is now available, you can find it in the Downloads section (ToasterLibFx4_v1.0):
http://code.google.com/p/flex-toasterlib/downloads/list
If you run into any trouble, leave an issue on Google Code or leave me a message. Examples should work exactly as the current code in the demo.
Fabien