Utiliser les ToolTips sous Flex 2

Olivier Bugalotto

Ce tutoriel vous expliquera comment utiliser les infobulles des composants Flex. ♪

- Titre : Utiliser les ToolTips sous Flex 2

- Auteur : Olivier Bugalotto

- Parution : 6 juillet 2007

- Licence : Copyright ® 2007 Olivier Bugalotto. 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

Nous allons voir comment utiliser la bulle d'informations sur les composants ou plus communément appelée « ToolTip ».

Tous les composants permettent d'afficher des informations dans une bulle (ToolTip) lors de leur survol, à l'aide de la propriété tooltip définie dans la classe UIComponent :

<mx:Button label="Survolez-moi!" tooltip="Vous êtes en train de me survoler" />

ToolTip sur un bouton

Si nous appliquons une ToolTip sur un conteneur, ce sont les enfants qui l'afficheront. Bien entendu dans le cas où l'enfant lui-même n'a pas de ToolTip, exemple :

<mx:Panel title="Panel" toolTip="Je suis la toolTip du conteneur">
<mx:Button label="Button 1" toolTip="C'est ma ToolTip"/>
<mx:Button label="Button 2"/>
</mx:Panel>

ToolTip sur un container

Nous pouvons modifier l'apparence de la ToolTip, en modifiant la classe de style ToolTip, exemple :

<mx:Style>
ToolTip {
fontFamily: "Arial";
fontSize: 16;
color: white; /* #FFFFFF */
backgroundColor: red; /* #FF0000 */
corner-radius: 0;
}
</mx:Style>
<mx:Button label="Survole-moi!" toolTip="Je suis trop belle ..." />

Observations : vous remarquerez que nous pouvons indiquer une color par son nom comme en CSS.

Style de ToolTip personnalisée

Nous pouvons modifier la largeur d'une ToolTip en passant par la classe ToolTip utilisée pour créer un objet ToolTip (valeur par défaut : 300px), exemple :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
initialize="onInit()">

<mx:Script>
<![CDATA[
import mx.controls.ToolTip;
private function onInit():void {
ToolTip.maxWidth = 100;
}
]]>
</mx:Script>

<mx:Button label="Survolez-moi!"
toolTip="J'ai été réduite pour prendre moins de place."/>

</mx:Application>

Largeur de la ToolTip modifiée

Il est aussi possible s'utiliser le caractère d'échappement '\n' en Actionscript et ' ' dans un attribut d'une balise MXML pour effectuer un retour à la ligne, exemple :

<mx:Button label="Survolez-moi!"
toolTip="J'utilise le caractère d'échappement&#13;pour mettre en
page mon contenu."/>

La classe ToolTipManager responsable de la création des ToolTips diffuse à des moments précis les événements suivants :

- TOOL_TIP_CREATE : Emit avant la création de la ToolTip ;

- TOOL_TIP_END : Emit lorsque la ToolTip disparaît toute seule ;

- TOOL_TIP_HIDE : Emit lorsque la propriété visible passe à false ;

- TOOL_TIP_SHOW : Emit lorsque la propriété visible passe à true ;

- TOOL_TIP_SHOWN : Emit apprit que la ToolTip est apparue ;

- TOOL_TIP_START : Emit dès le survol de la souris sur un composant.

Visuel application AllEventToolTip

Nous permettant par exemple de déclencher des actions comme la lecture d'un son à l'apparition de la ToolTip :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
initialize="onInit()">

<mx:Script>
<![CDATA[
import mx.events.ToolTipEvent;

[Embed(source="medias/Exclamation.mp3")]
private var ExclamationSound:Class;

private var exclamationSnd:Sound;

private function onInit():void {
exclamationSnd = new ExclamationSound();
}

private function onToolTipShow(e:ToolTipEvent):void {
exclamationSnd.play();
}
]]>
</mx:Script>
<mx:Button label="Survolez-moi!"
toolTip="J'apparais en musique."
toolTipShow="onToolTipShow(event)"/>

</mx:Application>

Déclencher un son

Il est possible de déactiver les infos bulle sur les composants à partir de la propriété enabled de ToolTilManager, exemple :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">

<mx:Style>
.chkComment {
up-icon: Embed(source="assets/comment.png");
over-icon: Embed(source="assets/comment.png");
down-icon: Embed(source="assets/comment.png");
disabled-icon: Embed(source="assets/comment.png");

selected-up-icon: Embed(source="assets/comment_delete.png");
selected-over-icon: Embed(source="assets/comment_delete.png");
selected-down-icon: Embed(source="assets/comment_delete.png");
selected-disabled-icon: Embed(source="assets/comment_delete.png");
}
</mx:Style>

<mx:Script>
<![CDATA[
import mx.managers.ToolTipManager;
private function onEnabledToolTip():void {
ToolTipManager.enabled = !chkEnable.selected;
}
]]>
</mx:Script>

<mx:CheckBox id="chkEnable" styleName="chkComment"
click="onEnabledToolTip()" />
<mx:Button label="Survolez-moi!"
toolTip="Vous êtes en train de me survoler." />

</mx:Application>

Pour désactiver la ToolTip, il vous suffit de cliquer sur l'icône commentaire :

Activer/désactivez une ToolTip

Nous pouvons configurer le délai d'affichage d'une ToolTip ainsi que sa durée d'affichage, exemple :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="275" height="175">

<mx:Script>
<![CDATA[
import mx.managers.ToolTipManager;
import mx.utils.StringUtil;

private function onSetting():void {
var showDelay:Number = nsShowDelay.value;
var hideDelay:Number = nsHideDelay.value;

ToolTipManager.showDelay = showDelay;
ToolTipManager.hideDelay = hideDelay;
}
]]>
</mx:Script>

<mx:Button id="btn" label="Survolez-moi!"
toolTip="Cette ToolTip est configurée par vos soins."/>
<mx:Form>
<mx:FormItem label="ShowDelay">
<mx:NumericStepper minimum="0" maximum="10000" stepSize="100"
id="nsShowDelay" change="onSetting()" value="500"/>
</mx:FormItem>
<mx:FormItem label="HideDelay">
<mx:NumericStepper minimum="0" maximum="10000" stepSize="100"
id="nsHideDelay" change="onSetting()" value="10000"/>
</mx:FormItem>
</mx:Form>

</mx:Application>

Configuration de la ToolTip

Jusqu'à maintenant, nous avons vu comment configurer et personnaliser une ToolTip, nous allons voir comment en créer.

La création d'une ToolTip peut se faire à l'aide de la méthode ToolTipManager.createToolTip(), exemple :

<?xml version="1.0"?>
<!-- tooltips/CreatingToolTips.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="297"     height="127" horizontalAlign="left">
<mx:Script>
<![CDATA[
import mx.managers.ToolTipManager;
import mx.controls.ToolTip;

public var myTip:ToolTip;

private function createToolTip(e:MouseEvent):void {
var gap:uint = getStyle("verticalGap") as uint;
var paddingTop:uint = getStyle("paddingTop") as uint;
trace(gap);
var s:String = "Cette ToolTip du " + e.target.label +
" est créée à l'aide de la méthode createToolTip."
myTip = ToolTipManager.createToolTip(s,btn1.x + btn1.width + gap,paddingTop) as ToolTip;
myTip.setStyle("backgroundColor","white");
myTip.width = 150;
myTip.height = 80;
}

private function destroyToolTip(e:MouseEvent):void {
ToolTipManager.destroyToolTip(myTip);
}
]]>
</mx:Script>
<mx:Button id="btn1" label="Button 1"
rollOver="createToolTip(event)"
rollOut="destroyToolTip(event)"/>
<mx:Button label="Button 2"
rollOver="createToolTip(event)"
rollOut="destroyToolTip(event)"/>
<mx:Button label="Button 3"
rollOver="createToolTip(event)"
rollOut="destroyToolTip(event)"/>
</mx:Application>

Créer une ToolTip

Mais il est encore plus intéressant de créer une mise en page différente pour votre ToolTip en utilisant un composant MXML. Il suffit pour cela de créer un nouveau composant MXML et d'implémenter l'interface IToolTip, exemple :

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" implements="mx.core.IToolTip"
alpha=".8"
borderThickness="2"
backgroundColor="0xCCCCCC"
dropShadowEnabled="true"
borderColor="black"
borderStyle="solid">

<mx:Script>
<![CDATA[
[Bindable]
public var contact:Object;

public function get text():String {
return null;
}

public function set text(value:String):void {

}
]]>
</mx:Script>

<mx:Image source="{contact.avatar}"/>
<mx:Form paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
<mx:FormItem label="Nom :">
<mx:Label text="{contact.nom}"/>
</mx:FormItem>
<mx:FormItem label="Prenom :">
<mx:Label text="{contact.prenom}"/>
</mx:FormItem>
<mx:FormItem label="Email :">
<mx:Label text="{contact.email}"/>
</mx:FormItem>
</mx:Form>

</mx:HBox>

Dans mon cas, je ne me sers pas de la propriété text qui est obligatoire pour implémenter l'interface IToolTip. Venons-en maintenant à l'application qui va utiliser ce ToolTip :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:Script>
<![CDATA[
import mx.events.ToolTipEvent;
private function onCreateToolTip(e:ToolTipEvent):void {
var toolTip:ContactToolTip = new ContactToolTip();
toolTip.contact = e.target.data;
e.toolTip = toolTip;
}
]]>
</mx:Script>

<mx:ArrayCollection id="contacts">
<mx:Object nom="Dubreuil" prenom="Henry" email="dubreuil@cretin.fr" avatar="assets/avatar1.jpg" />
<mx:Object nom="Pecchi" prenom="Marcello" email="pecchi@free.fr" avatar="assets/avatar2.jpg" />
<mx:Object nom="Perez" prenom="Joseph" email="perez@orange.fr" avatar="assets/avatar3.jpg" />
</mx:ArrayCollection>

<mx:Repeater id="rp" dataProvider="{contacts}">
<mx:Label text="{rp.currentItem.nom + ' ' + rp.currentItem.prenom}"
toolTip=" " data="{rp.currentItem}"
toolTipCreate="onCreateToolTip(event)"/>
</mx:Repeater>

</mx:Application>

Tous les composants diffuse l'évènement createToolTip ce qui permet de récupérer dans l'évènement ToolTipEvent, la référence de la ToolTip que va utiliser ToolTipManager et ainsi de la modifier avec notre propre composant :

private function onCreateToolTip(e:ToolTipEvent):void {
var toolTip:ContactToolTip = new ContactToolTip();
toolTip.contact = e.target.data;
// Je passe l'instance de ma ToolTip
e.toolTip = toolTip;
}

Voici donc le rendu :

L'utilisation des ToolTips peut s'avérer très intéressant lorsque de l'information à afficher ne se limite plus à du texte. Vous trouverez dans le zip suivant le code source de ce tutoriel (attention j'utilise Flex builder 3) : source.zip (miroir)