Adobe Flex Tutorial - Adobe Flex Tutorial

10jan/091

Flex ToolTip – Créer des ToolTips avec la méthode createToolTip()

Vous savez surement ajouter des toolTip à vos composants Flex. Rien de plus simple, il suffit de spécifier la propriété toolTip. Mais peut-être que dans certains cas, vous voudrez créer ces toolTip à la main grâce à du code ActionScript 3.

Le ToolTipManager à deux méthodes qui vous permettent d'utiliser les toolTips de manière programmatique. Ces méthodes sont createToolTip() et destroyToolTip(), que vous pouvez utiliser pour créer ou détruire les objets ToolTip. Quand vous créez un objet toolTip, vous pouvez le personnaliser comme vous le feriez pour n'importer quel objet, en accédant à ses propriétés, styles, events et effets.

La méthode createToolTip() retourne un objet de type IToolTip, que Flex va afficher jusqu'à ce que vous le détruisiez. Cette méthode à la signature suivante:

createToolTip(text:String, x:Number, y:Number, errorTipBorderStyle:String, context:IUIComponent):IToolTip

Le paramètre text définit le contenu du toolTip. Les paramètres x et y définissent les coordonnées x et y, relative à l'application. La propriété errorTipBorderStyle donne la position du pointeur du toolTip d'erreur. Ce paramètre est optionnel.

Remplis sous: ActionScript, Exemple, ToolTip Lire la suite

10jan/090

Flex ToolTip – Appliquer des Effets aux ToolTips

Vous le savez déjà, vous pouvez appliquer des effets à vos composants Flex pour rendre l'expérience utilisateur plus intéressante. Et bien vous pouvez appliquer des effets comme le flou, le mouvement, etc, à l'apparition et à la disparition des Flex ToolTip. Vous pouvez utiliser tous les effets que vous utilisez avec des composants Flex. Vous pour presque toutes les autres propriétés des tool-tip, elles s'appliquent globalement. Vous pouvez modifier l'effet qui est appliqué à l'affichage des toolTip en modifiant la propriété showEffect (hideEffect pour la disparition des toolTips).

L'effet hideEffect est joué seulement si l'utilisateur reste sur le toolTip le temps du hideDelay. S'il sort de l'objet, il ne sera pas joué.

L'exemple suivant illustre ce fonctionnement et il montre comment on peut utiliser des effets simple ou composés:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initializeHandler(event)" viewSourceURL="srcview/index.html">
	<mx:Style>
		@font-face{
			src: local("Georgia");
			fontFamily:GeorgiaEmbedded;
		}
		ToolTip{
			fontSize:16;
			fontFamily: GeorgiaEmbedded;
			background-color:#FFFFFF;
		}
	</mx:Style>
	<mx:Script>
		<![CDATA[
			import mx.managers.ToolTipManager;
			private function initializeHandler(event:Event):void{
				ToolTipManager.hideDelay = 2000;
				ToolTipManager.showEffect = toolTipShowEffect;
				ToolTipManager.hideEffect = toolTipHideEffect;
			}
		]]>
	</mx:Script>

	<mx:Parallel id="toolTipShowEffect">
		<mx:Fade alphaFrom="0" alphaTo="1" duration="1000"/>
		<mx:Blur blurXFrom="10" blurYFrom="10" blurXTo="0"
			blurYTo="0" duration="1000"/>
	</mx:Parallel>
	<mx:Parallel id="toolTipHideEffect">
		<mx:Fade alphaFrom="1" alphaTo="0" duration="1000"/>
		<mx:Blur blurXFrom="0" blurYFrom="0" blurXTo="10"
			blurYTo="10" duration="1000"/>
	</mx:Parallel>

	<mx:Button id="button" label="ToolTip au survol" toolTip="ToolTip avec effet!"/>
</mx:Application>

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

This movie requires Flash Player 11

Remplis sous: ActionScript, Effect, Exemple, ToolTip Lire la suite

9jan/090

Flex ToolTip – Configurer les ToolTips (Temps d' apparition / disparition)

Vous pouvez personnaliser plusieurs paramètres des tool-tips en utilisant la classe mx.managers.ToolTipManager. En utilisant la propriété "enabled", vous pouvez activer et désactiver les toolTips de manière globale. Cela peut être utile si par exemple, vous voulez temporairement désactiver les toolTips pendant l'appel à un script serveur. La valeur par défaut de cette propriété est true, ce qui signifie que si vous voulez activer les toolTip, vous n'avez rien à faire.

Si vous voulez désactiver les toolTips, vous n'avez qu'à mettre cette valeur à false:

ToolTipManager.enabled = false;

Les propriétés static showDelay, hideDelay et scrubDelay vont vous permettre de régler le temps d'apparition et de disparition des tooltip. La propriété showDelay donne le délai avant que le toolTip s'affiche, après que l'utilisateur ait mis la souris sur le composant. Cette valeur est en millisecondes, la valeur par défaut étant 500, ce qui veut dire que le toolTip va s'affiche après une demi-seconde.

Remplis sous: ActionScript, Exemple, ToolTip Lire la suite

9jan/090

Flex ToolTip – Appliquer des Styles aux ToolTips

Vous pouvez personnaliser l'apparence des toolTips en utilisant les styles. Le Framework Flex ne permet pas de fixer des styles pour des toolTips individuels, vous devez fixer le style des toolTips globalement pour toutes les instances. Vous pouvez le faire en changeant la définition du style ToolTip en utilisant le sélécteur CSS de la classe. L'exemple suivant montre comment changer la définition du style en utilisant le tag Style (il peut aussi être fait dans une feuille CSS séparée):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Style>
		ToolTip{
			fontFamily: "_typewriter";
			background-color:#FFFFFF;
		}
	</mx:Style>
	<mx:Button label="Tool Tip" toolTip="Exemple de toolTip avec style"/>
</mx:Application>

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

This movie requires Flash Player 11

Remplis sous: ActionScript, StyleManager, ToolTip Lire la suite

Anciennes »