Formatting application-specific data

Formatter components are ActionScript components that perform a one-way conversion of raw data to a formatted string. They are triggered just before data is displayed in a text field. Flex includes a set of standard formatters. You can also create your own formatters. The following example shows an application that uses the standard ZipCodeFormatter component to format the value of a variable:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">

   <!-- Declare a ZipCodeFormatter and define parameters. -->
   <mx:ZipCodeFormatter id="ZipCodeDisplay" formatString="#####-####" />

   <mx:Script>
      <![CDATA[
         var storedZipCode=123456789;
      ]]>
   </mx:Script>
   <mx:Panel title="My Application" marginTop="10" marginBottom="10"
      marginLeft="10" marginRight="10" >

      <!-- Trigger the formatter while populating a string with data. -->
      <mx:TextInput text="{ZipCodeDisplay.format(storedZipCode)}" /> 

   </mx:Panel>
</mx:Application>

The following figure shows the application rendered in a web browser window:

Data model and validation example.

For more information about formatter components, see Formatting Data in Developing Flex Applications.

Version 1.5

Comments

No screen name said on Aug 22, 2005 at 7:57 AM :

I have tried to remove or add 1 letter in the script area. and also change the format string followed by the script letter. but when the page initial, the textarea have changed to blank.. why?

danger42 said on Aug 22, 2005 at 8:44 AM :

If you change the input value (say, from a 9 digit zip code to a 5 digit zipcode), you must also change the value of the formatString property from this:
formatString="#####-####"
to this:
formatString="#####"

hth,
matt horn
flex docs

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/15/flex_docs_en/00000022.htm