Formatting Money, Dates, and Numbers with ActionScript 3 and Flash CS 5
Money, money, money. I can not think of another word that can make men, women, and children’s ears perk up.
But money has had a big problem for quite sometime in the world of Flash. Yes, I’m speaking of the age old lack of true formatting. Anyone who has ever built a Flash application that touches money knows exactly what I’m talking about.
Take this code snippet:
var myCash:Number = 20.526512317307293; trace( myCash ); //20.526512317307293
If we run this we'll get half pennies or even worse. The problem is that while a Number type (unlike int or uint) in Flash can have a decimal point, it does not allow us to restrict it to two decimal points. This tends to lead to pretty nasty strings of numbers.
Yes we could truncate the results after the third decimal point but this we are not rounding. Consider the number 2.499. If we simply truncate it we get 2.49 when rounding this really should give us 2.50. Do you need that level of precision? Maybe not, but keeping your dollar amount as close to reality is probably in the best interest of all the parties involved.
Also you get into the steps required to format it properly. If the number is 1.24565. its not so bad. We can make that $1.24 pretty quickly. But what if you have 1537343983553.2334564. We need to break it down to get all the commas in the right places, truncate the decimals, and also make sure the logic we write can deal with all types of numeric sizes. This get even less fun if your Flash application is built to live in more than one country or location.
Luckily, Flash CS 5 has finally, yes finally, offered us a solution for this problem. It only took a decade but it is finally here. So everyone raise your glass and salute our new friend the CurrencyFormatter class!
CurrencyFormatter is great for the situation I showed off a moment ago. It lets us take a numeric value and output it as a currency based two decimal point String. Best of all it offers powerful localization abilities. Yep, this means that you guys and gals with the euro or the pound can also take advantage of the class while making sure the end product offers as many decimals as your currency requires. It even allows you to sub a “.” separator with “,” if need be.
To some extent Flash will set the formatting for us. All we need to do is apply the Locale ID which is the ISO code for our home country.
So, for example, here we take that myCash variable from above and apply an instance of the CurrencyFormatter using its format method. Notice it uses the ISO code “en_US” to represent English specific to the United States.
import flash.globalization.CurrencyFormatter; var myCash:Number = 20.526512317307293; trace( myCash ); //20.526512317307293 var cf:CurrencyFormatter = new CurrencyFormatter( "en_US" ); trace( cf.format( myCash ) ); //USD20.53
Now this is just the start. We can use other Locale ID’s. These snippets represent code converted for various countries and languages around the world.
var cf2:CurrencyFormatter = new CurrencyFormatter( "fr_FR" ); trace( cf2.format( myCash ) ); //20,53 EUR
If that still does not get you the look you want for your currency you can take things even further. Using the CurrencyFormatter’s properties we can specify that we want a leadingZero, a specific format for negative numbers, custom currency symbol, a decimal separator, and much more.
So one day when I finally save up enough to buy “Jason Michael Perry Island”, we will all use the “Jasons” currency type. A beer in my land will run you 15 Jasons. using the Currency Formatter I can show you myCash formatted in “Jasons”.
var cf3:CurrencyFormatter = new CurrencyFormatter( "en_US" ); cf3.decimalSeparator = "'"; trace( cf3.format( myCash ) ); //USD20'53
Thankfully, while fulfilling our formatting dreams Adobe did not stop there. They tossed in Number and Date formatting for the fun of it.
The DateTimeFormatter class is perfect for getting you the perfect looking date (if only it was that easy). For us in the states we like our dates as MM/DD/YY while some other countries rather YY/MM/DD or other variations. This helps us deal with that. Check out an example of my DateTimeFormatter using a few different ISO Locales:
import flash.globalization.DateTimeFormatter; var myDate:Date = new Date(); var df:DateTimeFormatter = new DateTimeFormatter( "en_US" ); trace( df.format( myDate ) ); //November 1, 2010 10:42:30 PM CDT
Last, but not least is the NumberFormatter. This class shares a lot in similarity with its sibling the CurrencyFormatter. Using this we can take a number and state the separation between commas or how many decimal points we need. Once again a potentially big help in the formatting category.
import flash.globalization.NumberFormatter; var nf:NumberFormatter = new NumberFormatter( "en_US" ); trace( nf.formatNumber( myCash ) ); //20.527 trace( nf.formatInt( myCash ) ); //20 trace( nf.formatUint( myCash ) ); //20
Hopefully this helps anyone who has had the formatting blues. And thankfully these classes have been in the Flex family since Flex 3, even if they are new to Flash CS 5. As always you can download an FLA with the above code snippets. Happy formatting and ActionScripting.
Jason Michael Perry is a freelance instructor, developer, and writer. Please check out his new book Breadcrumbs: ActionScript 3 by Smart Ameba Publishing. If you have questions, a topic you would like covered, or more feel free to email him at firstname.lastname@example.org.
Optimizing workflow with Flash Catalyst CS5
Ten tips for building better Adobe AIR applications