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
		}
	}
 
}		

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();
		}
	}
 
}	

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 );
		}
 
	}
 
}