One of my previous posts on Always showing error tips (validators) presented one way of trying and improve the built-in validation error handling in Flex. It was a nice idea, but as many people have pointed out in the comments there are too many different use cases that causes the error tips to not show up properly.
Below is another alternative approach, and one that I hope is less of a hack.
I've created a class called InputControl which is very similar to the Flex 3 FormItem. It has a label property, and can contain one or more child elements.
What this control does that makes it useful is to listen for when the errorString property changes on an input control (such as a TextInput), and instead of displaying the default Flex error toolTip, it shows that errorString in a label that is always visible. It also immediately clears the input's errorString property so that the default error toolTip is not displayed.
The InputControl class is skinnable, and I've created two different skins. The default one InputControlSkin has the same layout as the FormItem (label on the left) and displays the error string on the right of the input.
The second skin is called InputControlVerticalSkin which displays the label, input, and error message in a vertical layout. This skin is more suited for large inputs like a TextArea.
There are definitely a few issues with this approach:
- longer error messages either don't show up properly or are truncated
- form label alignment is not customizable
Feel free to modify my code to make it work differently. Most properties are hard coded in the skins, and I didn't spend the time to extract them out into styles.
Here it is in action, right click to view source:
Thursday, March 24, 2011
Subscribe to:
Post Comments (Atom)
6 comments:
You should look at Spark Form class and SparkFormItemSkin class from Flex 4.5
You'll be pleasantly surprised ;)
I know :(
I still have to use 4.1, and so that is where this came from.
Thanks for the comment though, other users will definitely want to check it out.
Chris
a bit off topic. my apologies for that. i've been following your blog for quite sometime.
i have a requirement to display a timeline[gantt] chart in flex. for this i have used an adv data grid. the chart will display data for 60 mins when it gets loaded for the first time. the user will have an option to drill down further to see 5 min data or 30 min data instead of the whole 60 min. in that case, the data grid should be redrawn including the columns.
how to achieve this?
as of now, i am calling the invalidateDisplayList function of the component. but when i tried adding trace statements, i found that the invalidateDisplayList and updateDisplayList functions are getting called three times.
my requirement is the data grid should get redrawn whenever the data provider changes[including the no of columns, as its variable]
can you help me out.
Hi Karthick,
I don't totally understand your problem, but you might try subclassing the AdvancedDataGrid class and adding in your redraw (or invalidateDisplayList) calls whenever it is appropriate - e.g. when the data provider changes.
I don't actually have any real experience with the AdvancedDataGrid component. I would suggest maybe you ask one of the authors of these blogs:
http://dougmccune.com/blog/2007/02/01/building-a-gantt-chart-component-in-flex/
http://blog.flexgeek.in/2010/07/prototype-flex-4-gantt-chart/
Chris
where is red balloon?
My controls above don't use the built-in Flex error validation red balloons. The text that is shown beside the input boxes is the same as what would be shown in the default red balloons.
Post a Comment