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" />![[ALT-PASTOUCHE]](./images/ButtonToolTip.png)
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>![[ALT-PASTOUCHE]](./images/ContainerToolTip.png)
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.
![[ALT-PASTOUCHE]](./images/StyleToolTip.png)
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>
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 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.
![[ALT-PASTOUCHE]](./images/AllEventToolTip.png)
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>![[ALT-PASTOUCHE]](./images/EventToolTip.png)
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 :
![[ALT-PASTOUCHE]](./images/EnabledToolTip.png)
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>![[ALT-PASTOUCHE]](./images/SettingToolTip.png)
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>![[ALT-PASTOUCHE]](./images/CustomToolTip.png)
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 :
![[ALT-PASTOUCHE]](./images/ComponentToolTip.png)
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)