Sometimes it is necessary to display a formatted value such as currency or a percentage in a NumericStepper component, but that is not a default behavior. I need something extremely simple that can be written as:
-
<mx:CurrencyFormatter id="currencyFormatter"
-
currencySymbol="$"
-
precision="2"/>
-
-
<controls:FormattedStepper formatter="{currencyFormatter}"/>
My internet searches turned up this similar attempt, but it seemed overly complicated (just my opinion). Continue reading to view my attempt at a simple formatted numeric stepper with source. I've also included an example of a custom formatter as well as an item renderer / item editor in a DataGrid.
Try it out:
(Right click to view source)
Flex ships with several formatters: mx.formatters. All formatters extend the Formatter class by overriding the format() method. This makes it very easy to write your own formatters or extend the functionality of the ones that already exist (which is exactly what I have done with the UTC date formatter in the example above).
There is a need for improvement but the component is stable. I will update this post as the example code is modified. If you have any suggestions or comments I would appreciate hearing about them below. Thanks for reading.
great work here, Thanks to Flex 3 making the listeners of buttons mx_internal. Else, we might have had to re-write the listener code into the class itself.
it would be nice to have an itemEditor version of the formattedCurrencyStepperRenderer component, but great work anyways:)
gif - Thanks for suggesting an example using an item editor. I have updated the example to use an item editor / renderer in the Data Grid. For a good resource on getting started with item editors, take a look at:
http://www.adobe.com/devnet/flex/quickstart/creating_item_editors/
wow:) great, thanks again, your example helped me a lot.
i needed a time formatter (like 00:00:12.345 -from 12.345 as cell value), and it works well as a standalone editor, but in a datagrid.. i spent hours with that issue, but couldn't find a way to get that stepper.value trick:)
thanks for the quick response.
I am having a problem when trying to instantiate a FormattedStepper in an ActionScript class. I get an exception because mx_internal::inputField is null so the mx_internal::inputField.text assignment in doFormat fails.
Otherwise, great component and very handy functionality. Thanks Scot!
Glad to hear it's handy. I never tested the component the way you're describing it being used - so hopefully you'll come up with a good solution and let me know about it! Thanks.
OK, I figured out at least a work around for the problem in trying to add a FormattedStepper in an ActionScript class. I'm not sure of the difference between MXML declaration and AS construction that causes it, but if you change the functions as follows it will compile and render properly:
private function doFormat(event:Event = null):void {
if (_formatter != null
&& mx_internal::inputField != null
&& mx_internal::inputField.text != null)
{
mx_internal::inputField.text = _formatter.format(value);
}
}
private function unFormat(event:Event = null):void {
if (_formatter != null
&& mx_internal::inputField != null
&& mx_internal::inputField.text != null)
{
mx_internal::inputField.text = String(value);
}
}
Another odd behavior that I observed was that if you declare a Formatter in a VBox I couldn't get the MXML component to compile, but if it was within an HBox it would.
Hey good stuff!
One thing I have noticed with this kind of method is if a maximum value has been set on the stepper and you keep mouse down on the nextButton then the value will display un-formatted
The way to overcome this is as equally simple as your tasty example and that is to run the doFormat() method on BUTTON_DOWN.
Cheers,
Simon
after clicking on the hour minute field its showing the long value formatted value is going off...
Hi Tatini
That's right. Clicking in the text input of the stepper component will show the raw, un-formatted value. You'll notice the same behavior on the currency formatter. This is the expected behavior.