ActionScript Facile Chapitre 9 Création du composant AS3 ToolTip

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 trouve 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 à une 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 );
        }
 
    }
 
}