Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex ToolTip – Ajouter des ToolTips à vos composants

Quand une application contient des éléments graphiques (icônes, images...), il peut être utile de donner une description textuelle de ces éléments. C'est encore plus pratique quand l'élément graphique n'a pas un sens évident. Plutôt que de charger l'écran avec des descriptions textuelles fixes, vos applications Flex peuvent comporter des ToolTips. Ce sont des blocs de texte qui apparaissent quand l'utilisateur bouge la souris au dessus d'un élément graphique.

Ajouter des ToolTips avec Flex

Tous les composants qui héritent de UIComponent (ce qui inclut tous les composants visuels et les conteneurs) implémentent une propriété toolTip (getter/setter) qui va vous permettre d'assigner une String à l'objet sur lequel vous voulez afficher un tooltip. Vous pouvez fixer cette propriété simplement en utilisant du MXML comme dans cet exemple:

<mx:Button id="button" label="Exemple" toolTip="Exemple de ToolTip"/>

Flex Source Code Download: Télécharger le code source complet de l'application

Vous pouvez aussi fixer cette propriété en ActionScript:

button.toolTip = "Exemple de ToolTip";

Par défaut, la propriété toolTip d'un composant est null. Quand la valeur est null, aucun tool tip ne va apparaître. Quand vous assignez une valeur non null, le toolTip va apparaître après un court délai une fois que l'utilisateur bouge la souris sur un objet en n'en sort pas. Le toolTip disparaît ensuite après un certain délai ou si l'utilisateur bouge la souris en dehors de l'objet.

Vous pouvez aussi utiliser le Data Binding  pour fixer la valeur du toolTip d'un objet. L'exemple suivant utilise le Data Binding pour mettre à jour la valeur du tooltip d'un bouton, en se basant sur un champ texte:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Button id="button" label="Exemple" toolTip="{input.text}"/>
	<mx:TextInput id="input" text="Entrez un texte"/>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application

Il y a des règles qui déterminent le comportement des toolTips pour les conteneurs et les composants enfant. Le composant le plus "à l'intérieur" (le plus bas dans la liste d'affichage) a la priorité. Si le composant a une valeur de toolTip valide, l'affichage du toolTip pour ce composant sera déclenché. Sinon, le déclenchement va remonter (bubble up) au conteneur jusqu'à ce qu'une valeur valide soit trouvée ou qu'il n'y ait plus de conteneur. L'exemple suivant illustre ce comportement. Puisque le bouton a une valeur de toolTip, bouger la souris sur le bouton va déclencher son affichage. Et puisque le composant TextInput n'a pas de valeur de toolTip, le déclenchement (trigger) va remonter jusqu'à la VBox, affichant le tool tip du conteneur.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:VBox toolTip="ToolTip de la VBox" borderStyle="solid">
		<mx:Button id="button" label="Exemple" toolTip="Exemple de toolTip intérieur"/>
		<mx:TextInput id="input" text="Entrez un texte"/>
	</mx:VBox>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application

Les composants de type Navigator comme les Accordion ou les ViewStack/TabNavigator ont par contre des comportement différents quant à l'affichage des tooltips Flex. Alors que la plupart des enfants de conteneurs vont déclencher le toolTip du conteneur parent, les enfants des composant de type Navigator ne le feront pas. Les seuls déclencheurs de toolTip de conteneurs sont les éléments de navigation correspondant au composant. Par exemple, les onglets pour un TabNavigator.L'exemple suivant illustre ce comportement. L'accordéon a deux enfants VBox. Chaque VBox spécifie une valeur de toolTip. Chaque instance de VBox contient un Button. Le bouton à l'intérieur de la première VBox ne spécifie pas de valeur de toolTip alors que le second oui. Testez ce code et vous verrez que les toolTips des conteneurs VBox ne sont jamais déclenchés par le bouton enfant:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Accordion height="200" width="200">
		<mx:VBox label="Première VBox" toolTip="A">
			<mx:Button label="Bouton sans toolTip"/>
		</mx:VBox>
		<mx:VBox label="Deuxieme VBox" toolTip="B">
			<mx:Button label="Avec toolTip mais rien autour"
				toolTip="Aucun toolTip ne s'affiche sur ce conteneur à part sur l'élément de navigation"/>
		</mx:VBox>
	</mx:Accordion>

</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application