If you are using Adobe Flex forms, chances are you have come across validators. I do not like the way validators work out of the box, and it is a real pain to work against them. I will post a better way to validate your forms later. For now, I want to show you how to save real estate in your Flex forms when using validators.
The error tool tips associated with validators are big. I will show you how to make them smaller.
Add this CSS to your Flex project (mx:style tag or external css file):
.errorTip { borderColor: #0000FF; paddingTop: 0; paddingBottom: 0; paddingLeft: 4; paddingRight: 4; fontWeight: bold; fontSize: 9px; backgroundColor: #0000ff; cornerRadius: 8; } ToolTip{ borderSkin: ClassReference("com.your_project_name.skins.SmallToolTip"); }
Then put a file called SmallToolTip.as in your com.__________.skins (fill in the blank) directory with these contents:
package com.your_project_name.skins { import mx.skins.halo.HaloBorder; import mx.core.mx_internal; import flash.display.Graphics; use namespace mx_internal; public class SmallToolTip extends HaloBorder { public function SmallToolTip() { super(); } override mx_internal function drawBorder(w:Number, h:Number):void{ super.drawBorder(w,h); // Draw a small tail at the bottom left side of the tooltip var gr:Graphics = graphics; gr.beginFill(getStyle('borderColor'), 1); gr.moveTo(x + 7, y + h); gr.lineTo(x + 10, y + h + 4); gr.lineTo(x + 13, y + h) gr.moveTo(x + 7, y + h); gr.endFill(); } } }
This only works for drawing a tool tip with the tail at the bottom left. But you can draw a tail wherever you want by altering the Graphics code which is super easy. Removing the padding and drawing a smaller tail are the two big ways to make the tool tip take up less real estate, with the least amount of work.
Before:
After:
If you enjoyed this post, make sure you subscribe to my RSS feed!
5 Comments
I don’t like the way Flex handles validation either and this is way better. Thanks for this!
Thanks Zachary. One day I will get around to posting a better complete validation solution if Flex does not come up with one. Their validation is truly limited. Also nice blog, I am subscribed. Small recommendation – move the subscribe links to the top to get more subscribers!
Tony – this is great stuff. My question to you: did you have a custom class you were using in the “before” picture? I don’t know how to make the tooltips align to the top of the text field rather than the right, which is something mandatory for a project I’m on.
It’s been a while since I have messed with this code, but maybe you need something like this:
private function createAndShowToolTip(target:Object, message:String):void{
var errorTip:ToolTip;
// Otherwise create it
var pt:Point = target.contentToGlobal( new Point(0,0) );
errorTip = ToolTipManager.createToolTip(message, pt.x + 5, pt.y - target.height + 12, "errorTipAbove") as ToolTip;
errorTip.setStyle("styleName", "errorTip");
// Save a reference to the error message ToolTip in a hash for later use.
errorMessageToolTips[target.name] = errorTip;
}
Thanks – it’s too bad this isn’t something that can be accomplished with MXML or CSS. But at least it’s not complicated.