Sunday, November 4, 2012

Creating EasyTooltip class: Part 3

In this part we continue working on adding tooltip listeners.

Let's create a new class called TooltipListener. This will be the class of the objects that we will add to the listeners array in EasyTooltip class.

This class will manage a single visible object that displays a tooltip when rolled over. Declare two private variables:

private var tip:Tooltip;
private var list:DisplayObject;

In the constructor, receive 2 parameters - listener and tooltip. Apply those values to our private variables, and then add 2 mouse event listeners to the listener - listen for ROLL_OVER and ROLL_OUT:

public function TooltipListener(listener:DisplayObject, tooltip:Tooltip) 
{
list = listener;
tip = tooltip;
listener.addEventListener(MouseEvent.ROLL_OVER, onOver);
listener.addEventListener(MouseEvent.ROLL_OUT, onOut);
}

Add a function which removes these listeners:

public function kill():void {
list.removeEventListener(MouseEvent.ROLL_OVER, onOver);
list.removeEventListener(MouseEvent.ROLL_OUT, onOut);
}

Add the mouse event handlers. For now, we will set the tooltip's "display" property to true and false when rolled over and out, and trace the tooltip message.

private function onOver(evt:MouseEvent):void {
tip.display = true;
trace("Display tooltip: " + tip.msg);
}

private function onOut(evt:MouseEvent):void {
tip.display = false;
trace("Hide tooltip: " + tip.msg);
}

Full class code:

package com.kircode.EasyTooltip 
{
import flash.display.DisplayObject;
import flash.events.MouseEvent;

/**
 * Manages a single visible object that displays a tooltip when rolled over.
 * @author Kirill Poletaev
 */
public class TooltipListener 
{

private var tip:Tooltip;
private var list:DisplayObject;

public function TooltipListener(listener:DisplayObject, tooltip:Tooltip) 
{
list = listener;
tip = tooltip;
listener.addEventListener(MouseEvent.ROLL_OVER, onOver);
listener.addEventListener(MouseEvent.ROLL_OUT, onOut);
}

public function kill():void {
list.removeEventListener(MouseEvent.ROLL_OVER, onOver);
list.removeEventListener(MouseEvent.ROLL_OUT, onOut);
}

private function onOver(evt:MouseEvent):void {
tip.display = true;
trace("Display tooltip: " + tip.msg);
}

private function onOut(evt:MouseEvent):void {
tip.display = false;
trace("Hide tooltip: " + tip.msg);
}

}

}

Go to Tooltip.as and add the "display" boolean. Set it to false by default:

package com.kircode.EasyTooltip 
{
import flash.display.MovieClip;
/**
 * Basic tooltip.
 * @author Kirill Poletaev
 */
public class Tooltip extends MovieClip
{
public var msg:String;
public var display:Boolean;

public function Tooltip(message:String) 
{
msg = message;
display = false;
}

}

}

Now go to EasyTooltip class and find the addListener() function. Update it to declare a new TooltipListener object, which is then added to the listeners array.

public function addListener(listener:DisplayObject, tooltip:String):Tooltip {
var tip:Tooltip = new Tooltip(tooltip);
var list:TooltipListener = new TooltipListener(listener, tip);
listeners.push(list);
return tip;
}

Full class so far:

package com.kircode.EasyTooltip 
{
import flash.display.DisplayObject;
/**
 * Utility for creation of tooltips.
 * @author Kirill Poletaev
 */
public class EasyTooltip 
{

private var par:DisplayObject;
public var listeners:Array;

/**
 * Create a Tooltip manager. Needed for creating and managing tooltips.
 * @paramparent Reference to the parent of tooltips - the container, which will contain the objects that will be rolled over.
 */

public function EasyTooltip(parent:DisplayObject) 
{
par = parent;
listeners = [];
trace("Tooltip manager created!");
}

/**
 * Add a Tooltip listener.
 * @paramlistener Object, which invokes the tooltip on roll over.
 * @paramtooltip Message to be displayed.
 * @returnNewly created Tooltip object. Can be used to dynamically change its properties in real-time.
 */

public function addListener(listener:DisplayObject, tooltip:String):Tooltip {
var tip:Tooltip = new Tooltip(tooltip);
var list:TooltipListener = new TooltipListener(listener, tip);
listeners.push(list);
return tip;
}

}

}

Now you can go to main.as and (assuming you have a Movieclip or a similar object on stage called "object1") add a listener to your visual object this way:

tooltip = new EasyTooltip(stage);
tooltip.addListener(object1, "This is an object.");

You can test the code and roll over the object to see a message traced, which proves that our listener is working.

You can also take advantage of the fact that the Tooltip object is returned by the addListener() function, and we can use it to change tooltip message in real time. Example:

tooltip = new EasyTooltip(stage);
var t:Tooltip = tooltip.addListener(object1, "This is an object.");
t.msg = "This is an edited message!";

This might be very useful in the future for some library users.

Thanks for reading!

No comments:

Post a Comment