Custom errorTooltip pour Flex
Par Gwenn Guihal :: 18/11/2007 :: Flex :: #14 :: rss
Bonjour !
Si vous avez déjà créer des formulaires en Flex, vous savez surement qu'il n'est pas toujours évident de réaliser les feedBacks que l'on souhaite.
Prennons l'exemple d'un formulaire de connexion.
Vous avez votre formulaire, avec login et password. Cependant, vous souhaitez vérifier, en plus des Validators traditionnels, si le login entré, existe dans votre base de données, puis, si c'est le cas, vérifier que le password est juste. Si une de ces conditions est fausse, vous souhaitez avertir l'utilisateur avec un jolie toolTip tout rouge dont Flex a le secret.
Un petit exemple en vidéo :
Nous partons du principe que l'accès à votre BDD se fait grâce à AMFPhp.
Vous vous dites alors qu'il suffit de créer son propre validator, en utilsant AMFPHP... Bonne idée, mais malheuresement impossible, car AMFPHP va demander une méthode du type onResult et le validator attend pour chaque validation, un tableau results comprenant les erreurs. Il est malheuresement impossible de retourner ce tableau dans la méthode doValidation de votre constructeur en appelant la méthode onResult que requiert AMFPHP...J'espère que vous m'avez suivi...
Ainsi, il faut passer par autre chose : créer un tooltip d'erreur personnalisé.
C'est pourquoi je vous propose une classe : CustomErrorTooltip. Cette classe va vous permettre d'afficher un errorToolip sur n'importe quel textInput ou autre dès que vous le souhaitez. Selon votre skin, il vous faudra changer certaines propriétés de style.
Pour l'utiliser il vous suffit de faire comme ceci :
import com.valid.CustomErrorTooltip;
/* méthode appellée lors d'un click sur le bouton Connexion du formulaire de connexion */
private function verifFormulaire():void {
/* AMFPHP : verifie l'username et le password */
gateway.call( "bc.Joueur.connexion", new Responder(onResultVerifFormulaire, onError),username_txt.text,password_txt.text);
CursorManager.setBusyCursor();
}
/* Méthode de retour de AMFPHP */
private function onResultVerifFormulaire(result:Boolean):void {
/* on crée une instance de CustomErrorTooltip */
var monTooltip:CustomErrorTooltip = new CustomErrorTooltip();
if (!result) {
/* création d'un tooltip rouge sur votre champ text */
monTooltip.errorToolTip(username_txt,"L'username n'existe pas.");
}else {
// connexion
}
CursorManager.removeBusyCursor();
}
Voila, je pense avoir tout dit.
Télécharger la classe CustomErrorTooltip.
A bientôt !

Commentaires
1. Le 18/11/2007 à 16:54, par PeZ
2. Le 19/11/2007 à 05:31, par Fardeen
3. Le 19/11/2007 à 20:56, par myrddin
4. Le 19/11/2007 à 21:20, par Wizdom
5. Le 20/11/2007 à 02:24, par Fardeen
6. Le 01/12/2007 à 23:05, par switcher
7. Le 02/12/2007 à 01:30, par myrddin
8. Le 16/01/2008 à 17:20, par remi26
9. Le 25/01/2008 à 01:51, par myrddin
10. Le 28/06/2008 à 08:20, par rencontre
Ajouter un commentaire