Design your own ToolTipBorder in Flex[Custom ToolTipBorder in Flex].With Example !

The first question is “From where does the ToolTip gets his Border ?“, well the answer to this question is from the ToolTipBorder Class.And this Class draws the border to the ToolTip., this class is from the Package mx.skins.halo and ToolTipBorder.as is the ActionScript Class.

Now lets see how can we change this Default Border of the ToolTip.[changes to this .as Class].Open the .as class from the sdk’s in the FlexBuilder installation folder as given per the package[look in to the package’s]

Now if you can see the Class File[.as] ,the updateDisplayList() is the method which draws the ToolTipBorder and in this method there’s a switch() statement and in this the “tooltip” case is the code which draws the ToolTipBorder.

And this is the code with the case statement inside the switch() statement.

case “toolTip”:

{

// face

drawRoundRect(

3, 1, w – 6, h – 4, cornerRadius,

backgroundColor, backgroundAlpha)

if (!dropShadow)

dropShadow = new RectangularDropShadow();

dropShadow.distance = 3;

dropShadow.angle = 90;

dropShadow.color = 0;

dropShadow.alpha = 0.4;

dropShadow.tlRadius = cornerRadius + 2;

dropShadow.trRadius = cornerRadius + 2;

dropShadow.blRadius = cornerRadius + 2;

dropShadow.brRadius = cornerRadius + 2;

dropShadow.drawShadow(graphics, 3, 0, w – 6, h – 4);

break;

}

Now if you want a different Border to the ToolTip change should be made to this and inside this case statement only.

For Example, I will include the following lines of code in to the “tooltip” case

// New border

var highlightAlphas:Array = [0.3,0.0];

drawRoundRect(

11, 0, w – 11, h – 2, 3,

[0xFF0000, 0xFFFFBB], backgroundAlpha);

// left pointer

g.beginFill(borderColor, backgroundAlpha);

g.moveTo(11, 7);

g.lineTo(0, 13);

g.lineTo(11, 19);

g.moveTo(11, 7);

g.endFill();

filters = [ new DropShadowFilter(2, 90, 0, 0.4) ];

break;

And save the Class file[ToolTipBorder.as] as NewToolTipBorder.as in to your projects.Then to include the New Class file[NewToolTipBorder] to the Application you got to do the following code.

<mx:Style>

ToolTip

{

borderSkin: ClassReference(“NewToolTipBorder”);

}

</mx:Style>

Now if you define the tooltip property to any visible component and run the Application you can observe the Change to the ToolTipBorder.A change to the Default border of the ToolTip is made , similarly and accordingly you can make changes to the code[case statement lines] and define your own ToolTipBorder to the ToolTip.

So Finally we made this. Click Here to view the sample Application.

This post touches the core concepts of Classes.Enjoy the post. 🙂 .Queries are welcome.

Advertisements

One Response to Design your own ToolTipBorder in Flex[Custom ToolTipBorder in Flex].With Example !

  1. JTtheGeek says:

    Ummm why no view source on the app dude?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: