更改Flex Validator的字体大小
Posted by Oscar Tang | Filed under Web前端开发
Q : Flex的验证组件（Validator）默认字体大小只有10px，显示中文一塌糊涂，但又没有styleName或者fontSize属性让我去设置字体大小，该怎么办哇？？
A : 只需在<mx:Style/>样式定义标签内添加如下代码即可：
.errorTip {
font-size:12px;
}
Flex comes with a built-in form validation system that unfortunately uses mystery meat tooltips to display component validation errors.
To see what I mean, take a look at the example I wrote a while back in the Validating Data Quick Start.
If you tab around that example, you may notice that you are probably doing something wrong (as indicated by the red borders around the form items that begin to appear) but you have no idea what you're doing wrong. In order to find out, you have to mouse over the form field. Only then does a tooltip appear to tell you what the problem is.
Needless to say, having the user switch input devices and exert additional effort in order to see a form validation error does not make for good ergonomics or usability.
A better alternative is to actually display the error message beside the control.
You can, of course, do this simply by having the error message in a label.
For example:
<mx:FormItem label="Your name">
<mx:HBox>
<mx:TextInput id="yourName" change="validateNotEmptyTextInput(yourName);" focusOut="validateNotEmptyTextInput(yourName);"/>
<mx:Label id="yourNameError" visible="false" text="Your name cannot be empty."/>
</mx:HBox>
</mx:FormItem>
The validateNotEmptyTextInput() method, in this example, is not a Flex Validator (as used in my Validation Quick Start), but a simple method.
For example:
private function validateNotEmptyTextInput(target:TextInput):void
{
(this[target.name+"Error"] as Label).visible = (target.text == "");
}
In the above example, I'm using a pragmatic naming convention to create a generic validation method that works with TextInput components. Nothing too spectacular visually, but usability-wise already better than the default Flex behavior.
Creating an error Label for each component, though, is not very practical. We can overcome this limitation and add a little visual flare by using the Flex error tooltip instead of a label.
Kyle Quevillon has a post in which he details how to use the Flex Tooltip Manager to create Error Tooltips. Referring to Kyle's post, we can alter the validateNotEmptyTextInput() method as follows:
// If the TextInput is empty, display an error message.
if (target.text == "")
{
// Has the error message ToolTip already been created?
// (A reference to created ToolTip instances is saved in a hash called errorMessageToolTips.)
var toolTipExists:Boolean = errorMessageToolTips.hasOwnProperty(target.name);
if (toolTipExists)
{
// Error message ToolTip has already been created, just show it.
(errorMessages[target.name] as ToolTip).visible = true;
}
else
{
// Create the ToolTip instance.
var pt:Point = new Point(target.x, target.y);
pt = target.contentToGlobal(pt);
var errorTip:ToolTip = ToolTipManager.createToolTip(errorMessages[target.name] + " cannot be empty", pt.x + target.width + 5, pt.y) as ToolTip;
errorTip.setStyle("styleName", "errorTip");
// Save a reference to the error message ToolTip in a hash for later use.
errorMessages[target.name] = errorTip;
}
}
else
{
// TextInput is valid. Hide the error message if one exists.
if (toolTipExists)
{
(errorMessageToolTips[target.name] as ToolTip).visible = false;
}
}
Where errorMessages is a hash of personalized messages:
errorMessages =
{
yourName: "Your name",
yourEmail: "Your email",
phone: "The phone number"
}
Thus, we no longer need the Label component but there is a catch: we still need the HBox (or a container of some sort) if the TextInput is in a FormItem. Otherwise, contentToGlobal() returns an incorrect value when trying to position the error message.
So the new FormItem looks something like this:
<mx:FormItem label="Your name">
<mx:HBox>
<mx:TextInput id="yourName" change="validateNotEmptyTextInput(yourName);" focusOut="validateNotEmptyTextInput(yourName);"/>
</mx:HBox>
</mx:FormItem>
And the resulting validation errors both look nice and are functional.
(In the above example, I modified the errorTip style to make the message boxes slightly shorter than usual by setting the paddingTop and paddingBottom properties to 2.)
To summarize, I'm not a big fan of the mystery meat validation error tooltips in Flex. Displaying validation errors on the form itself leads to better usability as users do not have to exert additional effort to find out what they did incorrectly.
Update: Someone has filed a bug about this very issue in the public Flex Bug and Issue Management System. I've left a comment on the bug and linked it to this post.
The
Better form validation in Flex article by
Aral Balkan, unless otherwise expressly stated, is licensed under a
Creative Commons Attribution-Noncommercial 2.0 UK: England License.
10 comments on this item • Email this • Digg This! • Share on Facebook • Save to del.icio.us (58 saves, tagged: flex validation form) • Stumble It! • Sphere: Related Content • Twit This! • Technorati Links • Subscribe to this feed
扫一扫
6890
到【灌水乐园】发言
bjorn
Thanks for the tip (heh), Aral
January 10th, 2008 at 10:29 amaYo
“Abstraction for the sake of abstraction is nothing but an ego trip for Real Programmers. For everyone else, it’s a pain the ass, lost productivity, and lost time.”
I SOOOOOOO agree.
January 10th, 2008 at 1:25 pmDan W
That’s awesome!
However, if you resize browser windows the tooltips do not adjust to the new position of form elements.
Any idea how to sort it out?
Dan
January 18th, 2008 at 2:23 pmIlan
Very useful !
However, I think there’s a slight error in this example code:
You use the errorMessageToolTips as a hash for the Tooltips created, but later on, when it’s time to retrieve the Tooltip or save it to this hash, you use the errorMessages hash instead:
// Error message ToolTip has already been created, just show it.
(errorMessages[target.name] as ToolTip).visible = true;
And
// Save a reference to the error message ToolTip in a hash for later use.
errorMessages[target.name] = errorTip;
Where it should be:
// Error message ToolTip has already been created, just show it.
January 22nd, 2008 at 1:42 pm(errorMessageToolTips[target.name] as ToolTip).visible = true;
And
// Save a reference to the error message ToolTip in a hash for later use.
errorMessageToolTips[target.name] = errorTip;
udayms
I had created a demo for my CForm component - http://flexed.wordpress.com/2008/01/02/component-cform-v10/…. This demo has an example of form validation. Check the source of the demo. Demo available @ http://www.udayms.com/flex/cform/cform.html
January 24th, 2008 at 1:25 pmudayms
oops…. the url got screwed up… here it is…
http://flexed.wordpress.com/2008/01/02/component-cform-v10/
January 24th, 2008 at 1:26 pmGambit
I can’t figure this out. I’m using the final version of flex 3 but I keep getting an error on “var toolTipExists:Boolean = errorMessageToolTips.hasOwnProperty(target.name);” It says that it’s null.
is anyone else getting this error or am I missing something
February 25th, 2008 at 10:47 pmGambit
finally got it…here is a full example.
February 26th, 2008 at 12:01 amGambit
import mx.collections.ArrayCollection;
import mx.controls.ToolTip;
import mx.managers.ToolTipManager;
import mx.controls.Alert;
//private var errorTip:ToolTip;
private var myError:String;
private var errorMessageToolTips:Array;
private var errorMessages:Array;
private function doInit():void{
errorMessages = new Array();
errorMessages["yourName"] = “Your name”;
errorMessages["yourphone"] = “The phone number”;
errorMessageToolTips = new Array();
errorMessageToolTips["yourName"];
errorMessageToolTips["yourphone"];
}
private function validateNotEmptyTextInput(target:TextInput):void{
// If the TextInput is empty, display an error message.
if (target.text == “”){
// Has the error message ToolTip already been created?
// (A reference to created ToolTip instances is saved in a hash called errorMessageToolTips.)
var toolTipExists:Boolean = errorMessageToolTips.hasOwnProperty(target.name);
if (toolTipExists){
// Error message ToolTip has already been created, just show it.
(errorMessageToolTips[target.name] as ToolTip).visible = true;
}else{
// Create the ToolTip instance.
var pt:Point = new Point(target.x, target.y);
pt = target.contentToGlobal(pt);
var errorTip:ToolTip = ToolTipManager.createToolTip(errorMessages[target.name] + ” cannot be empty”, pt.x + target.width + 5, pt.y) as ToolTip;
errorTip.setStyle(”styleName”, “errorTip”);
// Save a reference to the error message ToolTip in a hash for later use.
errorMessageToolTips[target.name] = errorTip;
}
}else{
// TextInput is valid. Hide the error message if one exists.
toolTipExists = errorMessageToolTips.hasOwnProperty(target.name);
if (toolTipExists){
(errorMessageToolTips[target.name] as ToolTip).visible = false;
February 26th, 2008 at 12:03 am}
}
}
Sebastien
Thanks for the workaround !!! I was starting to go crazy with my tooltip not EXACTLY where i wanted it to be !
Saved my day !
March 8th, 2008 at 5:10 pmSebastien
i was talking about the HBox workaround (HBox word has been removed from previous post)
March 8th, 2008 at 5:12 pmHmm
Your point about the red borders not being enough information is a good one, but what if your form is complicated with about 10 or 15 fields? You can’t display them all (especially if the page just loaded). It’d be good if an error tip only displayed like this for the component that currently has the focus.
March 21st, 2008 at 10:37 pmjustin
abstraction for those that know what they’re doing saves a lot of time and money. Real programmers know that…
March 26th, 2008 at 8:57 pmLeandro
Hi, send me tutorial of Flex?
March 28th, 2008 at 5:55 pmthank you
Leandro
Quinton
Thanks!!! This is good stuff.
April 17th, 2008 at 12:58 amHmm
Abstraction??
June 9th, 2008 at 7:57 pmThis won’t work for large forms. A more sophisticated solution is needed.
Tami
Abstraction also adds scalability to a solution–and as “Hmm” pointed out this “simple” solution won’t scale to large forms. My plug for “complex” yet “elegant” solutions…
June 15th, 2008 at 6:07 amswitcher
Thanks a lot for this tip, but you have to write :
var toolTipExists:Boolean = errorMessageToolTips.hasOwnProperty(target.name);
before
if (target.text == “”)
if not, it can’t work because var toolTipExists doesn’t exist !
July 21st, 2008 at 9:55 pmelse
{
// TextInput is valid. Hide the error message if one exists.
if (toolTipExists)
{
(errorMessageToolTips[target.name] as ToolTip).visible = false;
gembin
if i put the form in the TitleWindow, when i drag the window the toolTip is not following the window, how to manage this situation?
August 19th, 2008 at 9:27 amHmm
This is fine for small forms like this.
But what’s needed is error tips that optionally display for a few seconds, and disappear automatically. For large forms/screens often present in APPLICATIONS (not little WEBSITE type forms like this), this would improve usability massively. In this case, error tips should also stay up for the ACTIVE field, just like the example here, but only for the field that has focus. This should all be configurable through Flex property settings…
So options would include:
September 29th, 2008 at 5:45 pm1) Default Flex behavior
2) Permanent error tips, like this blog has
3) Temporary error tips, which show for a few seconds but revert to look like the Flex default after that time has expired (mouse-over should still show the field again like it does by default)
4) Permanent error tips for the FOCUSED component only (this option would be compatible with both 1 and 3)
Hmm
And I realize this level of flexibility isn’t trivial, which is why it really needs to be in Flex 4 and not on blogs.
September 29th, 2008 at 5:48 pmClaudio Parnenzini
Hi,
I just added the capability to the validate() method to show the error message into a ToolTip when typing. As I’m not a Flex expert, maybe there is a better way to do that.
You should add to your class a ToolTip var named tmpToolTip, to work correctly.
Here is the code:
// Helper method. Performs validation on a passed Validator instance.
// Validator is the base class of all Flex validation classes so
// you can pass any validation class to this method.
private function validate(validator:Validator):Boolean
{
// Get a reference to the component that is the
// source of the validator.
var validatorSource:DisplayObject = validator.source as DisplayObject;
// Suppress events if the current control being validated is not
// the currently focussed control on the form. This stops the user
// from receiving visual validation cues on other form controls.
var suppressEvents:Boolean = (validatorSource != focussedFormControl);
// Carry out validation. Returns a ValidationResultEvent.
// Passing null for the first parameter makes the validator
// use the property defined in the property tag of the
// tag.
var event:ValidationResultEvent = validator.validate(null, suppressEvents);
// Supress the old tooltip
if(tmpToolTip != null && !suppressEvents) {
ToolTipManager.destroyToolTip(tmpToolTip);
tmpToolTip = null;
}
// Show the tooltip with the validation error message
if(!suppressEvents && (event.type == ValidationResultEvent.INVALID)) {
var point:Point = validatorSource.localToGlobal(new Point(0,0));
tmpToolTip = ToolTipManager.createToolTip(event.message, point.x+validatorSource.width+5, point.y) as ToolTip;
}
// Check if validation passed and return a boolean value accordingly.
var currentControlIsValid:Boolean = (event.type == ValidationResultEvent.VALID);
// Update the formIsValid flag
formIsValid = formIsValid && currentControlIsValid;
return currentControlIsValid;
December 24th, 2008 at 2:47 pm}
Todd Rothe
Thanks Aral! Exactly what i was looking for.
January 6th, 2009 at 2:12 amIn case anyone is curious about the errorTip style ( ‘errorTip.setStyle(”StyleName”, “errorTip”); )
it’s defined by the framework ( http://livedocs.adobe.com/flex/3/html/help.html?content=tooltips_5.html )
Ingo
Hey,
January 12th, 2This is a good solution to the bad-form-problem.
But its unusable for big forms since the tooltips dont scroll with the rest of the form.
Is there already a solution to this problem out there?