ActionScript FacileChapitre 9Création du composant AS3 ToolTip

L'auteur

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

Dans ce chapitre, nous allons créer un nouveau composant ActionScript : le ToolTip.

Le ToolTip n'est ni plus ni moins qu'une simple bulle d'information. Elle est utilisée pour afficher des informations supplémentaires sur un bouton, un formulaire...

II. Cahier Des Charges Fonctionnel du ToolTip

Un ToolTip est un UIComponent composé :

  • d'un background ( arrière-plan )
  • d'un champ texte de type UITextField.

Comme nous l'avons appris dans les chapitres précédents, il suffit de passer en paramètre une instance de la classe ToolTip au setter tooltip de la classe de base UIComponent.

La méthode show() (du composant) sera appelée lorsque l'UIComponent en question sera survolé par l'utilisateur.

Le composant ToolTip possède les fonctionnalités suivantes :

  • Personnalisation du texte ainsi que de son formatage.
  • Personnalisation de l'arrière-plan de l'infobulle.
  • Apparition après un délai défini de l'infobulle ( exprimé en millisecondes ).

III. Cahier Des Charges Techniques du ToolTip

Le Cahier Des Charges Techniques du composant ToolTip est relativement simple.

  • Personnalisation du texte ainsi que de son formatage.

Pour cela, nous coderons un getter qui renverra une référence au champ texte de type UITextField.

  • Personnalisation de l'arrière-plan de l'infobulle.

Comme d'habitude, nous allons overrider la méthode de base applySkin de la classe UIComponent.

  • Apparition après un délai défini de l'infobulle ( exprimé en millisecondes ).

Nous allons overrider la méthode de base show de la classe UIComponent. Et ensuite, nous lancerons la méthode parente après le délai défini dans un setTimeOut.

Nous laisserons également la possibilité à l'utilisateur de modifier ce délai à tout moment à l'aide d'un getter / setter.

IV. Conclusion

Ce chapitre conclut la série vous expliquant la création du Framework de Composants AS3 Facile.

Ci-dessous, le composant AS3 ToolTip en action.


Cliquez pour lire la vidéo



Évolutions des fonctionnalités
Je vous propose de laisser vagabonder votre imagination et de créer des Skins pour le composant ToolTip. Étonnez les développeurs d'ActionScript-Facile.

Vous pouvez également ajouter un effet Tween pour gérer l'apparition du ToolTip, un effet alpha, lui ajouter une ombre, etc.

Sources commentées

  • ToolTipExample.as
  • com.actionscriptfacile.ui.tooltip.ToolTip.as
  • com.as3facileexemple.skin.classic.DefaultToolTipSkin.as

Vous trouverez ci-dessous l'ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre au mieux leur fonctionnement.
Vous pouvez télécharger le fichier zip : Component ToolTip Framework actionscript-facile

ToolTipExample.as
Sélectionnez
package
{
	import com.actionscriptfacile.ui.combo.element.ComboBoxElement;
	import com.actionscriptfacile.ui.utils.UIMargins;
	import com.actionscriptfacile.ui.combo.ComboBox;
	import com.actionscriptfacile.ui.text.UITextField;
	import com.actionscriptfacile.ui.tooltip.Tooltip;
	import com.as3facileexemple.skin.classic.DefaultComboBoxSkin;
	import com.as3facileexemple.skin.classic.DefaultToolTipSkin;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.Font;
 
	/**
	 *
	 * On reprend le même exemple que pour l'UITextField en ajoutant simplement
	 * un ToolTip à la combobox
	 *
	 * @author Matthieu
	 */
	public class ToolTipExample extends Sprite
	{
 
		protected var m_comboFonts:ComboBox;
		protected var m_textField:UITextField;
 
		public function ToolTipExample()
		{
			/**
			 * On construit la combobox
			 */
			m_comboFonts = new ComboBox();
			m_comboFonts.applySkin( new DefaultComboBoxSkin() );
 
			// on écoute les changements qui interviennent dans la combobox
			m_comboFonts.addEventListener(Event.CHANGE, changeHandler );
			m_comboFonts.resize( 300, 70 );
			m_comboFonts.componentsHeight = 25;// hauteur des éléments de la CombobBox
			m_comboFonts.margins = new UIMargins( 2, 2, 2, 2 );// ajout des marges au contenu de la liste
 
			/**
			 * On construit sa tooltip
			 */
			m_comboFonts.tooltip = new Tooltip();
			m_comboFonts.tooltip.applySkin( new DefaultToolTipSkin() );
 
			m_comboFonts.tooltip.label = 'Choisissez une police de Caractères';
			m_comboFonts.tooltip.labelField.changeFormat("color", Math.random() * 0X00FFFFFF);
			// changement de la couleur du texte
			m_comboFonts.tooltip.labelField.changeFormat("size", 12);
			// changement de la taille de la police du texte
			m_comboFonts.tooltip.labelField.changeFormat("font", "Arial");
			// changement de la police du texte
			m_comboFonts.tooltip.resize( 210, 30 );
 
			// on ajoute tous les noms de polices autorisées comme élément de la combobox
			var fonts:Array = Font.enumerateFonts( true );
 
			var boxElement:ComboBoxElement;
 
			for each ( var font:Font in fonts )
			{
				boxElement = m_comboFonts.addElement( font.fontName, font.fontName );
				boxElement.labelField.changeFormat("color", Math.random() * 0X00FFFFFF);
				// changement de la couleur du texte
				boxElement.labelField.changeFormat("size", 14);
				// changement de la taille de la police du texte
			}
 
			/**
			 * Définition du format du titre de la ComboBox.
			 *
			 * Remarquez l'utilisation du paramètre true pour définir le format par défaut de notre Titre
			 */
			m_comboFonts.currentElement.labelField.changeFormat("font", "Arial",-1,-1,true);
			m_comboFonts.currentElement.labelField.changeFormat("color", Math.random() * 0X00FFFFFF,-1,
									    -1,true);
			m_comboFonts.currentElement.labelField.changeFormat("size", 15,-1,-1,true);
			m_comboFonts.currentElement.labelField.changeFormat("bold", true,-1,-1,true);
			m_comboFonts.currentElement.labelField.alignCenter();
 
			/**
			 * On construit un UITextField
			 */
			m_textField = new UITextField();
			m_textField.text = 'Enjoy Your Life  ';
 
			m_textField.x = m_textField.y = 5;
			m_textField.width = m_textField.maxWidth = 300;
			m_textField.height  = m_textField.maxHeight = 30;
			m_textField.changeFormat("size", 20);// changement de la taille de la police du texte
			m_textField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur
 
			m_comboFonts.y = m_textField.y + m_textField.height;
			m_comboFonts.x = 20;
 
			m_comboFonts.tooltip.y = m_comboFonts.y - 55;
			m_comboFonts.tooltip.x = m_comboFonts.x + 200;
 
			addChild( m_textField );
			addChild( m_comboFonts );
		}
 
		/**
		 * Fonction servant à écouter le changement de police au sein de la combobox.
		 * On applique la police à l'UITextField que l'on a créé et placé sur la
		 * scène.
		 *
		 * @param	e	Evènement de type Event.CHANGE
		 */
		private function changeHandler(e:Event):void
		{
			m_textField.font = m_comboFonts.currentLabel;
			m_textField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur
		}
	}
 
}		
com.actionscriptfacile.ui.tooltip.Tooltip.as
Sélectionnez
package  com.actionscriptfacile.ui.tooltip
{
	import com.actionscriptfacile.skin.ISkin;
	import com.actionscriptfacile.ui.text.UITextField;
	import com.actionscriptfacile.ui.UIComponent;
 
	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.utils.clearTimeout;
	import flash.utils.setTimeout;
 
	/**
	 * La classe Tooltip est une infobulle comme on peut en voir dans n'importe quel logiciel graphique.
	 * Elle sert à donner une information à l'utilisateur sur la fonction d'un objet graphique.
	 *
	 * @author Matthieu
	 */
	public class Tooltip extends UIComponent
	{
 
		// constante de skin ( arrière-plan )
		static public const TOOLTIP_BACKGROUND_SKIN:String = 'TOOLTIP_BACKGROUND_SKIN';
 
		private var m_background:DisplayObject; // l'arrière plan de l'infobulle
		private var m_texte:UITextField; // le champ texte de l'infobulle
		private var m_appearTimeout:Number; // le nombre qui va nous servir à réceptionner le setTimeOut
		private var m_appearTime:Number; // le temps ( en ms ) que va mettre l'infobulle à apparaître
 
		public function Tooltip()
		{
			/*
			 * on crée une méthode init pour gagner des ressources,
			 * en effet en AS3 tout ce qui se trouvre dans le constructeur n'est
			 * pas optimisé à la compilation,
			 * on met donc toutes nos instructions dans une méthode privée init
			 *
			 */
			init();
		}
 
		/**
		 * Initialise proprement les différents éléments du composant
		 *
		 */
		private function init():void
		{
			/**
			 * On définit le temps d'apparition à 1 seconde, on crée l'arrière-plan ( vide par défaut )
			 * ainsi que le champ texte puis on les ajoute à la displayList du composant.
			 */
			m_appearTime = m_appearTimeout = 300;
			mouseChildren = false;// désactive les évènements souris des enfants
 
			m_background = new Sprite();
			m_texte = new UITextField();
			m_texte.alignCenter();
 
			addChild( m_background );
			addChild( m_texte );
 
			// on place le champ texte à 5 pixels histoire de laisser une marge
			m_texte.x = m_texte.y = 5;
		}
 
		/**
		 * Définit / récupère le texte de l'infobulle
		 */
		public function set label( p_text:String ):void
		{
			// on définit le texte puis on redimensionne avec une marge de 10 pixels en hauteur + 10 pixels en largeur
			m_texte.text = p_text;
			resize( m_texte.textWidth + 10, m_texte.textHeight + 10 );
		}
		public function get label():String { return m_texte.text; }
 
		// récupère la référence UITextField du champ texte de l'infobulle
		public function get labelField():UITextField { return m_texte; }
 
		/**
		 * Récupère / définit le temps d'apparition de l'infobulle
		 */
		public function get appearTime():Number { return m_appearTime; }
		public function set appearTime(value:Number):void { m_appearTime = (value < 0 ) ? 0 : value; }
 
		/**
		 * Applique une skin à un composant de type ToolTip
		 *
		 * @param	p_skin	Objet implémentant l'interface ISkin
		 */
		override public function applySkin(p_skin:ISkin):void
		{
 
			var definition:Class;
 
			definition = p_skin.getSkin( TOOLTIP_BACKGROUND_SKIN ) as Class;
 
			// si on a réussi à récupérer une définition pour l'arrière-plan alors ...
			if ( definition != null )
				m_background = new definition(); // on l'applique
 
			// on rajoute le texte et l'arrière-plan à la displayList
			addChild( m_background );
			addChild( m_texte );
		}
 
		/**
		 * Redimensionne intelligemment un composant de type ToolTip
		 *
		 * @param	p_width		nouvelle largeur du composant
		 * @param	p_height	nouvelle hauteur du composant
		 */
		override public function resize( p_width:Number, p_height:Number ):void
		{
			// la hauteur maximale du ToolTip est la hauteur - 5 pixels
			m_texte.maxHeight = p_height - 5;
 
			// même chose pour la largeur, de cette manière on préserve la marge 
			// de 5 pixels que l'on s'est laissé.
			m_texte.maxWidth = p_width - 5;
 
			// la hauteur et la largeur du background sont égales aux dimensions passées en paramètre.
			m_background.width = m_texte.width = p_width;
			m_background.height = m_texte.height = p_height;
		}
 
		/**
		 * Ajoute le composant à la Display List de son lastParent après que le temps d'apparition
		 * soit écoulé
		 */
		override public function show():void
		{
			// on se charge d'appeler la fonction show() parente au bout de m_appearTime ms.
			m_appearTimeout = setTimeout( super.show, m_appearTime );
		}
 
		/**
		 * Enlève le composant de la Display List de son lastParent
		 */
		override public function hide():void
		{
			// on tue le setTimeOut
			clearTimeout( m_appearTimeout );
 
			// et on appelle la fonction hide() parente
			super.hide();
		}
 
		/**
		 * Détruit proprement un composant de type ToolTip
		 */
		override public function destroy():void
		{
			// on tue proprement le timeout
			clearTimeout( m_appearTimeout );
 
			// on détruit proprement le texte
			m_texte.destroy();
 
			// on enlève l'arrière-plan de la displayList
			removeChild( m_background );
 
			// on passe les références à null.
			m_texte = null;
			m_background = null;
 
			// et on appelle la fonction destroy() parente
			super.destroy();
		}
	}
 
}	
com.as3facileexemple.skin.classic.DefaultToolTipSkin.as
Sélectionnez
package com.as3facileexemple.skin.classic
{
	import com.actionscriptfacile.skin.Skin;
	import com.actionscriptfacile.ui.tooltip.Tooltip;
 
	// Import des classes gérant la partie graphique du composant dans le fla (movieclip)
	// Provient de ui.swc (créé avec la compilation de UI.fla)
	import com.as3facile.skin.tooltip.TooltipBackgroundSkin;
 
	/**
	 * Définition du skin utilisée pour un composant ToolTip
	 *
	 * @author Matthieu
	 */
	public class DefaultToolTipSkin extends Skin
	{
 
		public function DefaultToolTipSkin()
		{
			setSkin( Tooltip.TOOLTIP_BACKGROUND_SKIN, TooltipBackgroundSkin );
		}
 
	}
 
}		

IV-A. Partagez vos créations graphiques du composant ToolTip

Et vous, quels sont les skins que vous avez créé pour le ToolTip : Commentez Donner une note à l'article (4.5)

V. Remerciements / Téléchargements

Je tiens ici à remercier La Rédactrice Kalyparker pour la mise au gabarit de l'article original au format Developpez.com.

Merci beaucoup à l'équipe Developpez.com de contribuer à la diffusion du Framework ActionScript-Facile.

TéléchargezTéléchargez le Framework AS3 Facile l'ensemble des classes commentées du Framework AS3 FacileTéléchargez le Framework AS3 Facile (avec le code source et les exemples de tous les composants AS3).

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2010 Matthieu - www.actionscript-facile.com. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.