tutorials flex tooltip

ï»¿

ANYBODY CAN WRITE IN YOUR BLOG - STUPID !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Personalise your information bubbles (ToolTip)

Article written the 20/06/2007 19:02.
By iteratif ( Bugalotto Olivier ).

tutorial,

We are going to see how to use the information bubble on components (better known as ToolTip).

All components allow you to display information in a bubble (ToolTip) when you roll over them with the help of the tooltip property defined in the UIComponent class:

<mx:Button label="Hover over me!" tooltip="You are hovering over me" />

ToolTip on a button

If we apply a ToolTip on a container, it is the children that are displayed (if the child has not go a ToolTip):

  <mx:Panel title="Panel" toolTip="I am the ToolTip of the container">
     <mx:Button label="Button 1" toolTip="Itâ€™s my ToolTip"/>
     <mx:Button label="Button 2"/>
  </mx:Panel>

ToolTip on a container

We can change the appearance of a ToolTip by changing the class of the ToolTip style:

       <mx:Style>
		ToolTip {
			fontFamily: "Arial"; 
		      fontSize: 16;
		      color: white; /* #FFFFFF */
		      backgroundColor: red; /* #FF0000 */
		      corner-radius: 0;
		}
	</mx:Style>
 
	<mx:Button label="Hover over me!" toolTip="Iâ€™m very pretty ..." />

You can see that we can specify a colour by its name as in CSS.

Personalised ToolTip

We can modify the width of a ToolTip by going via the ToolTip class used to create a ToolTip object (default value : 300px):

<?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="Survoler moi!" 
		toolTip="J'ai ete reduite pour prendre moins de place."/>
 
</mx:Application><?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="Hpver over me!" 
		toolTip="I have been made smaller to take up less space."/>
 
</mx:Application>

Modified width of the ToolTip

It is also possible to use the escape character â€˜\nâ€™ in Actionscript and â€˜â€™ in an attribute in an MXML tag to do a line-return:

<mx:Button label="Hover over me!" 
		toolTip="I use the escape key&#13; to put a 
		in my content."/>

The ToolTipManager class is responsable for the creation of ToolTips and broadcasts the following events at precise moments:

TOOL_TIP_CREATE : Happens before the creation of the ToolTip
TOOL_TIP_END : Happens once the ToolTip has disappeared by itself
TOOL_TIP_HIDE : Happens once the visible property becomes false
TOOL_TIP_SHOW : Happens once the visible property becomes true
TOOL_TIP_SHOWN : Happens after the ToolTip has appeared
TOOL_TIP_START : Happens once the user has hovered over a component

We are allowed to launch actions like the reading of a sound at the appearance of the 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="Hover over me!"
		toolTip="I will appear in music."
		toolTipShow="onToolTipShow(event)"/>
 
</mx:Application>

Emits a sound

It is possible to deactivate the info bubbles on components with the ToolTipManager enabled property:

<?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="Hover over me!" 
		toolTip="You are hovering over me." />
 
</mx:Application>

To deactivate the ToolTip you need to click on the comments icon:

Activate/deactivate a ToolTip

We can configure the display time of a ToolTip as well as the amount of time it is displayed:

<?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="Hover over me!" 
		toolTip="This ToolTip is configured by us."/>
	<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 of the ToolTip

Up until now we have seen how to configure and personalize a ToolTip. We will now see how to create one.

The creation of a ToolTip can be done with the ToolTipManager.createToolTip() method:

<?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 = "This ToolTip of " + e.target.label + 
	" is created with the createToolTip method."
     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>

Create a ToolTip

But it is more interesting to create a different page layout for your ToolTip by using a MXML component. To do this you just need a new MXML component and to implement the IToolTip interface:

<?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="Surname :">
			<mx:Label text="{contact.surname}"/>
		</mx:FormItem>
		<mx:FormItem label="Name :">
			<mx:Label text="{contact.name}"/>
		</mx:FormItem>
		<mx:FormItem label="Email :">
			<mx:Label text="{contact.email}"/>
		</mx:FormItem>
	</mx:Form>
 
</mx:HBox>

I personally donâ€™t use the text property which is obligatory for implementing the IToolTip interface. So, to the application that will use 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 surname="Dubreuil" name="senthilkumar" email="dubreuil@cretin.fr" avatar="assets/avatar1.jpg" />
		<mx:Object surname="Pecchi" name="Marcello" email="pecchi@free.fr" avatar="assets/avatar2.jpg" />
		<mx:Object surname="Perez" name="Joseph" email="perez@orange.fr" avatar="assets/avatar3.jpg" />
	</mx:ArrayCollection>
 
	<mx:Repeater id="rp" dataProvider="{contacts}">
		<mx:Label text="{rp.currentItem.surname + ' ' + rp.currentItem.name}" 
			toolTip=" " data="{rp.currentItem}"
			toolTipCreate="onCreateToolTip(event)"/>
	</mx:Repeater>
 
</mx:Application>

All components can broadcast the createToolTip event which allows you to recuperate the ToolTip reference in the ToolTipEvent event which will use the ToolTipManager as well as modifying it with our own component:

private function onCreateToolTip(e:ToolTipEvent):void {
	var toolTip:ContactToolTip = new ContactToolTip();
	toolTip.contact = e.target.data;
        // I pass the instance of my ToolTip
	e.toolTip = toolTip;
}

Here is the result:

The use of ToolTips is very interesting when the display information is not limited to text. You will find all of the source code in the following zip (note that I use Flex builder 3) : source.zip

By ITERATIF - BUGALOTTO Olivier (2007) You can view the tutorial and its comments on my blog!

inscrits inscrits !