ActionScript Facile Chapitre 9 Création du composant AS3 ToolTip

Matthieu

Article original : ActionScript-Facile.com - Création du composant AS3 ToolTip

Commentez cet article : Commentez ♪

- Titre : ActionScript Facile Chapitre 9 Création du composant AS3 ToolTip

- Auteur : Matthieu

- Parution : 30 novembre 2010

- Licence : 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.

Sommaire

- I. Introduction

- II. Cahier Des Charges Fonctionnel du ToolTip

- III. Cahier Des Charges Technique du ToolTip

- IV. Conclusion

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

- V. Remerciements/Téléchargements

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 Technique du ToolTip

Le Cahier Des Charges Technique 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.

Animation en format "flash" non supportée.
Contenu uniquement consultable en ligne à cette adresse :
http://www.actionscript-facile.com/wp-content/uploads/2010/09/tooltip_exemple.swf

É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

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

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

}

com.as3facileexemple.skin.classic.DefaultToolTipSkin.as

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éés pour le ToolTip : Commentez

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échargez l'ensemble des classes commentées du Framework AS3 Facile (avec le code source et les exemples de tous les composants AS3).