Flash CS3 Documentation

ActionScript 2.0 Components Language Reference > Data binding classes > CustomFormatter class > Sample custom formatter

Sample custom formatter

The following example demonstrates how to create a custom formatter class and then apply it to a binding between two components by using ActionScript. In this example, the current value of a NumericStepper component (its value property) is bound to the current value of a TextInput component (its text property). The custom formatter class formats the current numeric value of the NumericStepper component (for example, 1, 2, or 3) as its English word equivalent (for example, "one", "two", or "three") before assigning it to the TextInput component.

To create and use a custom formatter:

1. Select File > New and choose ActionScript File.
2. Add the following code to the file:

   // NumberFormatter.as
   class NumberFormatter extends mx.data.binding.CustomFormatter {
       // Format a Number, return a String
       function format(rawValue) {
           var returnValue;
           var strArray = new Array('one', 'two', 'three');
           var numArray = new Array(1, 2, 3);
           returnValue = 0;
           for (var i = 0; i<strArray.length; i++) {
               if (rawValue == numArray[i]) {
                   returnValue = strArray[i];
                   break;
               }
           }
           return returnValue;
       }    // convert a formatted value, return a raw value
       function unformat(formattedValue) {
           var returnValue;
           var strArray = new Array('one', 'two', 'three');
           var numArray = new Array(1, 2, 3);
           returnValue = "invalid";
           for (var i = 0; i<strArray.length; i++) {
               if (formattedValue == strArray[i]) {
                   returnValue = numArray[i];
                   break;
               }
           }
           return returnValue;
       }
   }
   

3. Save the file as NumberFormatter.as.
4. Select File > New and choose Flash File (ActionScript 2.0).
5. From the Components panel, drag a TextInput component to the Stage and name it textInput. Then drag a NumericStepper component to the Stage and name it stepper.
6. Open the Timeline and select the first frame on Layer 1.
7. In the Actions panel, add the following code to the Actions panel:

   import mx.data.binding.*;
   var x:NumberFormatter;
   var customBinding = new Binding({component:stepper, property:"value", event:"change"}, {component:textInput, property:"text", event:"enter,change"}, {cls:mx.data.formatters.Custom, settings:{classname:"NumberFormatter"}});
   

   The second line of code (var x:NumberFormatter) ensures that the byte code for your custom formatter class is included in the compiled SWF file.

8. Select Window > Common Libraries > Classes to open the Classes library.
9. Select Window > Library to open your document's library.
10. Drag DataBindingClasses from the Classes library to your document's library.

    This makes the data binding runtime classes available for your document. For more information, see Making data binding classes available at runtime.

11. Save the FLA file to the same folder that contains NumberFormatter.as.
12. Test the file (Control > Test Movie).

    Click the buttons on the NumericStepper component and watch the contents of the TextInput component update.

Method summary for the CustomFormatter class

The following table lists the methods of the CustomFormatter class.

Flash CS3