Utiliser la classe Alert comme popup de confirmation
7 mai 2008
Par Jean Marie Macé - Exemples Flex - Lien permanent
Pour confirmer ou non une action de l'utilisateur, il est souvent utile de lui rappeler et de lui faire confirmer son action. Le cas le plus utile concerne la suppression d'un élément ou de données. Plutôt que de surcharger son projet avec un composant qui ne sert, finalement, qu'a informer et recueillir la confirmation ou non de l'action, il est possible d'utiliser la classe Alert. Voyons comment...
Pour cela, encore une fois, il faut la documentation de la classe Alert. On s'aperçoit alors que plusieurs paramètres optionnelles semblent être interessant
public static function show(text:String = "", title:String = "", flags:uint = 0x4, parent:Sprite = null, closeHandler:Function = null, iconClass:Class = null, defaultButtonFlag:uint = 0x4):Alert
Je ne revient pas sur les deux premiers paramètres qui sont assez parlant. le troisième est intéressant, il permet en fait de choisir les boutons que nous souhaitons avoir sur notre popup à savoir:
- Le bouton cancel : Alert.CANCEL
- Le bouton ok : Alert.OK
- Le bouton yes : Alert.YES
- Le bouton no : Alert.NO
Mais comment afficher deux boutons pour demander confirmation à l'utilisateur? Il suffit en fait d'indiquer pour ce paramètres ceci :
[actionscript]
(Alert.YES | Alert.NO)
Il est possible de modifier le texte qu'affiche ces boutons, comme ceci :
[actionscript]
Alert.yesLabel = "Oui";
Alert.noLabel = "Non";
Maintenant que nous avons nos deux boutons francisé sur notre popup , il faut à présent savoir le choix de l'utilisateur! A t'il cliqué sur Yes ou No? Pour cela on utilise le cinquième paramètre qui prend la fonction qui écoute l'évènement de fermeture de la popup. Le quatrième paramètre étant la cible pour le centrage de la popup.
Voici donc le code pour mettre en place notre popup :
[actionscript]
Alert.show("Voulez vous vraiment supprimer cet élément?","Attention!",(Alert.YES | Alert.NO),this,closeDeleteEventAlert);
Alert.yesLabel = "Oui";
Alert.noLabel = "Non";
Il est nécessaire à présent de créer cette fonction closeDeleteEventAlert , encore une fois en fouillant dans la documentation de l'événement CloseEvent on remarque la propriété detail(entier) qui permet de connaître le choix de l'utilisateur:
- 1 : Alert.YES
- 2 : Alert.NO
- 3 : Alert.OK
- 4 : Alert.CANCEL
Voila donc notre fonction closeDeleteEventAlert
[actionscript]
private function closeDeleteEventAlert(e:CloseEvent):void{
if(e.detail == 1){
Alert.show("Element supprimé");
}
else{
Alert.show("Element non supprimé");
}
}
Et enfin l'exemple en action (click droit pour les sources) :
Commentaires
merci pour ton billet, simple efficace.
jeromePour changer le nom des boutons d'actions, j'ai trouvé qu'il fallait placer les assignations
Alert.yesLabel = "Oui";
Alert.noLabel = "Non";
avant l'appel à la fonction show().
HypoliteAutrement, les libellés sont ceux par défaut.
Oui, je ne l'ai pas précisé mais cela me paraissait tacite
Jim_NastiqMerciii, tellement plus simple que la gestion des popup (que je trouve vraiment horrible en flex).
Rata