Development scratchbook

Had some difficulty in formulating a good title. But the problem is as follows:

If you have an HSlider and the right side of the slider is close to the right side of the stage, the tooltip may ‘walk off’ the screen. See the following image.  The grey background is the standard Flex Halo background. The green background is the color of my desk top.

This does not happen at the left side of the stage. If you drag the thumb to the left end of the slider, you see some smart things happening: the tooltip gets stuck at stage.x = 0;

I set myself to solve this problem and came up with a solution, which may also be called a hack. It uses mx_internal namespace, which means that it may not work in future versions of the Flex SDK. But I don’t know a better way. You do? Please let me know!

Step 1. Extend the SliderDataTip class:

package cbs.components.sliderClasses
{
	import flash.geom.Point;

	import mx.controls.sliderClasses.Slider;
	import mx.controls.sliderClasses.SliderDataTip;

	public class MySliderDataTip extends SliderDataTip
	{
		private var _slider:Slider;

		public function MySliderDataTip(owner:Slider):void {
			_slider = owner;
		}

	 	override protected function updateDisplayList(w:Number, h:Number):void {
			super.updateDisplayList(w,h);
			// Check if the tip overlaps the right side of the slider

			if (_slider) {
				var sliderPos:Point = _slider.localToGlobal(new Point(0, 0));
				if (this.x + w >= sliderPos.x + _slider.width) {
					this.x = sliderPos.x + _slider.width - w;
				}
			}
		}
	}
}

Extend the HSlider and override the onThumbPress function.

override mx_internal function onThumbPress(thumb:Object):void {
	// Hack this function, to be able to generate our own slidertip and
	// set a parameter.
	if (!dataTip) {
		dataTip = MySliderDataTip(new MySliderDataTip(this));
		systemManager.toolTipChildren.addChild(dataTip);

		var dataTipStyleName:String = getStyle("dataTipStyleName");
		if (dataTipStyleName)
		{
			dataTip.styleName = dataTipStyleName;
		}
	}
	super.onThumbPress(thumb);
}

That’s it!