Tucker Watson» Flex

Arrow ToolTips in Flex with Customized Color and Position

Tucker — Fri, 06 Mar 2009 01:51:03 +0000

Flex doesn’t make it easy to customize your ToolTip’s positioning or look. You can write your own ToolTip style and draw your own borders or you can use the “error tips” that already have arrows built in.

Manually creating and destroying tooltips

Rather than use the ‘toolTip’ property of a component, we’re going to use the ToolTipManager to create and remove tooltips. This method allows us to position tooltips anywhere on the stage, apply animations, and provide dynamic text.

private var myToolTip:ToolTip;
 
private function showToolTip(evt:MouseEvent, text:String):void
{
   // Create a simple tooltip that appears at the mouse x and y position
   myToolTip = ToolTipManager.createToolTip("Tooltip", evt.x, evt.y) as ToolTip;
}
 
// Remove the tooltip
private function killToolTip():void
{
   ToolTipManager.destroyToolTip(myToolTip);
}

To use the above functions, we need to assign them to a components mouseOver and mouseOut events:

 label="Button" mouseOver="showToolTip(event)" mouseOut="killToolTip()"/>

Adding arrows by using Flex’s “error tips”

When creating tooltips by using “ToolTipManager.createToolTip(…)” you can pass in a 4th parameter as a string that specifices which error tip to use. The available options are:

“errorTipAbove”
“errorTipBelow”
“errorTipRight”

Error tips default to a red background color and black text but you can easily change this through styles:

myToolTip.setStyle("borderColor", "#ff6600");
myToolTip.setStyle("color", "white");

Positioning tooltips above, below, and to the right

Another pitfall when creating tooltips manually is specifying the position of the tooltip. The “createToolTip” method requires the x and y coordinates passed in are “global” coordinates, rather than the local x and y coordinates within a container. This makes it a little more tricky to place a tooltip directly below or to the right of a component. The easiest way to fix this is using the method “contentToGlobal(point)”.

var pt:Point = new Point(evt.currentTarget.x, evt.currentTarget.y);
pt = evt.currentTarget.parent.contentToGlobal(pt);

Putting it all together (right click for source):

Flex Custom Column Chart ItemRenderer

Tucker — Sun, 22 Feb 2009 15:11:25 +0000

I’ve spend a lot of time lately trying to figure out how to draw on chart components and how to use Degrafa (graphics framework for Flex). I thought it’d be cool to have a column chart change colors programmatically based on its value.

This example demonstrates how to:

Createa custom ItemRenderer and apply it to a series
Use Degrafa to convert numbers to a color in the spectrum
Convert pixel to chart coordinates to smoothly change column colors

See the example below, more code and comments after the break (right click to view source):

Creating a programmatic ItemRenderer

package util
{
	import flash.display.GradientType;
	import flash.display.Graphics;
	import flash.geom.Point;
	import flash.geom.Rectangle;
 
	import mx.charts.ChartItem;
	import mx.charts.ColumnChart;
	import mx.charts.chartClasses.LegendData;
	import mx.core.Application;
	import mx.core.IDataRenderer;
	import mx.core.UIComponent;
 
	public class ThermalColumnChartRenderer extends UIComponent implements IDataRenderer
	{
 
	    public function ThermalColumnChartRenderer():void
	    {
	        super();
	    }
	    private var chartItem:ChartItem;
 
		public function set data(value:Object):void
	    {
	        if (chartItem == value)
	            return;
 
	        if (value is LegendData)
	        	return;
	        chartItem = ChartItem(value);
	    }	
 
	    public function get data():Object
	    {
	        return chartItem;
	    }
 
	    override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
	    {
	        super.updateDisplayList(unscaledWidth, unscaledHeight);
 
	        // Convert the pixel location into the chart location
	        var curValue:Number = convertDataToLocal(chartItem.itemRenderer.y);
 
	        var rc:Rectangle = new Rectangle(0, 0, width , height );
	        var columnColor:uint;
	        var g:Graphics = graphics;
		g.clear();
		g.moveTo(rc.left,rc.top);
		g.lineStyle(2);
 
		// Use thermal class to convert our 0-100 value to a color
		g.beginFill(getThermalColor(curValue));	  	
 
	        g.lineTo(rc.right,rc.top);
	        g.lineTo(rc.right,rc.bottom);
	        g.lineTo(rc.left,rc.bottom);
	        g.lineTo(rc.left,rc.top);
	        g.endFill();
  		}
 
  		private function getThermalColor(num:Number):Number
  		{
  			return Application.application.thermalColor.getColor(num);
  		}
 
	    private function convertDataToLocal(yNum:Number):Number
	    {
	    	var chart:ColumnChart = ColumnChart(parentApplication.columnChart);
	    	var oldPoint:Point = new Point(0,yNum);
	    	var newPoint:Array = chart.localToData(oldPoint);
 
			// Not sure why but the data value is always slightly larger than the
			// actual value, so cap at 100
			if(newPoint[1] &gt; 100) return 100;
 
	    	return (newPoint[1]);
	    }
	}
}

Converting a number to a color with help from Degrafa

package util
{
	import com.degrafa.paint.palette.PaletteUtils;
 
	public class ThermalColor
	{
		private var hi:int = 0;
		private var lo:int = 0;
		private var colorMap:Array;
 
		// Number of different colors in range
		private var size:int = 150;
 
		public function ThermalColor()
		{
			colorMap = getColorMap();
		}
 
		public function setHi(hi:int):void
		{
			this.hi = hi;
		}
 
		public function setLo(lo:int):void
		{
			this.lo = lo;
		}
 
		public function setSize(newSize:int):void
		{
			size = newSize;
			colorMap = getColorMap();
		}		
 
		// Generates a thermal color map with [size] many colors
        public function getColorMap():Array
        {
        	var colorMap:Array = new Array();
            var h:Number;
            for (var i:int=0; i

References:

http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=2021
http://blog.sunild.com/2009/01/simple-degrafa-color-picker.html
http://livedocs.adobe.com/flex/3/html/help.html?content=charts_formatting_12.html

Hello world!

Tucker — Mon, 05 Jan 2009 00:03:24 +0000

My name is Tucker Watson and I’m a software developer for Activelogix located in Charlotte, NC. I graduated from Clemson University in May 2008 with a degree in Computer Science and have since been working on a Flex project to allow end-users to manage and monitor their facilities.

I was introduced to the HVAC world in 2005 while interning at Tridium. I was a software tester for two summers and spent one as a software developer. This blog will mostly revolve around Niagara AX and Flex development.