Sunday, February 26, 2012

Flex FormattedTextInput Component

Although I've seen this in a few applications, I've never seen this type of component available for Flex. The idea is that when you click and bring focus in to a TextInput, it shows the raw data for editing. When the value is committed and focus leaves the TextInput, it displays a formatted version of the value. It's very similar to concept of ItemEditors and ItemRenderers in list-based component, where the editor show the raw data and the renderer shows formatted data. In the case of the FormattedTextInput, you simply pass it an instance of IFormatter to the formatter property:

<sn:FormattedTextInput restrict="0-9.">
 <sn:formatter>
  <s:NumberFormatter/>
 </sn:formatter>
</sn:FormattedTextInput>

The example below shows three FormattedTextInput components, the first formatting data as USD currency, the second as a US date, and the third using custom PercentFormatter (which is also available in the ShinyLib library).


Either scripts and active content are not permitted to run or Adobe Flash Player version 11.1.0 or greater is not installed.

Get Adobe Flash Player


Source code located at: https://www.assembla.com/code/shinynet/subversion/nodes

No comments:

Post a Comment