MACROMEDIA FLASH 8-LEARNING ACTIONSCRIPT 2.0 IN FLASH - Page 585

Creating runtime data bindings using ActionScript 585
9. Select Control > Test Movie to test the document again.
Now the text field displays the entire date, although it is awkward and lacks formatting.
Depending on your own time zone and selected date, the date might appear similar to
this:
Thu Nov 4 00:00:00 GMT-0800 2004
Even though the binding works properly and displays the selectedDate property, these
dates aren’t very user friendly. Nobody wants to see time-zone offsets, and you might not
want to display hours, minutes, and seconds. What you need is a way to format the date
so that it’s more readable and a little less mechanical. Custom formatters are particularly
useful for formatting text.
Formatting data using the CustomFormatter class
The CustomFormatter class defines two methods, format() and unformat(), that provide
the ability to transform data values from a specific data type to String, and the reverse. By
default, these methods do nothing; you must implement them in a subclass of
mx.data.binding.CustomFormatter. The CustomFormatter class lets you convert data
types to strings and back. In this case, you want to convert the
selectedDate property from
the DateChooser component into a nicely formatted string when the value copies into the
Label component.
The following example shows you how to create your own custom formatter, which displays
the date as
NOV 4, 2004 instead of displaying a default date string.
To format data using the CustomFormatter class:
1. Select File > New and then select ActionScript File to create a new AS file.
2. Select File > Save As and save the new file as DateFormat.as.
3. Enter the following code into the Script window:
class DateFormat extends mx.data.binding.CustomFormatter {
function format(rawValue:Date):String {
var returnValue:String;
var monthName_array:Array =
["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","D
EC"];
returnValue = monthName_array[rawValue.getMonth()]+"
"+rawValue.getDate()+", "+rawValue.getFullYear();
return returnValue;
}
}
NOTE
You need to complete the exercise from “Using components, bindings, and custom
formatters” on page 584 before you begin this one.