Using a Formatter Class to Display Currency Information in the E-commerce Application

In this task, you will apply a CurrencyFormatter class so all the price selections are displayed as U.S. dollars in the e-commerce application. There are multiple places in which prices are displayed in the application, including these:

  • The list of grocery products displayed

  • The total of the shopping cart

  • The subtotal and list prices in the DataGrid that is the user's shopping cart

The CurrencyFormatter adjusts the decimal rounding and precision, and sets the thousands separator and the negative sign. You can specify the type and placement of the currency symbol used, which can contain multiple characters including blank spaces. The first step of using the CurrencyFormatter involves instantiating the Formatter class by using either MXML or ActionScript; the second step is calling the format method of the object, passing the number to be formatted to the method.


Open the GroceryDetail.mxml from the views/ecomm folder.

This is the component that is duplicated using the repeater control based on the grocery information retrieved from the server. All the information about each grocery product is displayed in this component.


Immediately after the script block, add an <mx:CurrencyFormatter> tag. Assign the tag an id of curFormat and specify the currencySymbol attribute as a dollar sign ($) and a precision of 2, as follows:

<mx:CurrencyFormatter     currencySymbol="$"    precision="2"/> 

The decimal rounding, the thousands separator, and the negative sign are properties that can be specified on the CurrencyFormatter; we have left these at their defaults. You specified a precision of 2, meaning that two decimal places will always be displayed, and that a dollar sign be added to the formatted number. You could have specified any other character, for example, the character string Yen, for the currency symbol, including an empty space to be added between the symbol and the formatted number.


Locate the Label control a few lines down that displays the list price. Inside of the data binding for the text property, call the format() method of the curFormat object, and pass the groceryItem.listPrice to the method, as follows:

<mx:Label     text="{curFormat.format(groceryItem.listPrice)}"    x="100"    y="20"/> 

The format() method takes the value and applies all the parameters you specified in the <mx:CurrencyFormatter> MXML tag. In this case, you are adding a dollar sign and specifying the precision, so two digits to the right of the decimal point will always be maintained.


Save the changes to GroceryDetail.mxml and run the application. Select some grocery items.

You should see that all the grocery items display formatted list prices, as shown.


Open the EComm.mxml file.

EComm is where the total of the end user's shopping cart is displayed. You will apply a currency formatter to this field.


Immediately after the script tag, add an <mx:CurrencyFormatter> tag. Assign the tag an id of cartFormat, specify the currencySymbol as a dollar sign($), and the precision as 2, as follows:

<mx:CurrencyFormatter     currencySymbol="$"    precision="2"/> 


Locate the Label control (on approximately line 66) that displays "Your Cart Total". In place of the existing dollar sign, call the format() method of the cartFormat CurrencyFormat object, and pass the to the method. Remove the second Label control, which currently displays the, and delete the HBox that surrounds them both. The code for the remaining Label control should look as shown here:

<mx:Label text="Your Cart Total: {cartFormat.format(}"/> 

The format() method will format the according to the parameters you specified in the cartFormat object.


Save and run the application. Add some grocery items to the cart.

The total text field describing the contents of the shopping cart is displayed as currency with a dollar sign.


Open the OrderConf.mxml file from the views/ecomm directory.

In the last lesson, you concatenated portions of the date, (month, day and year) to format the delivery date for orders. Flex provides a built-in DateFormatter class. In this exercise, you will apply a DateFormatter to your class.


Directly below the existing <mx:Script> add an <mx:DateFormatter> tag. Assign the tag an id of orderFormat.

<mx:DateFormatter /> 

A new object with the name of orderFormat is created. You can use this Formatter class to format dates throughout the application. Because you have not specified any properties, the default format is used, "MM/DD/YYYY". You can customize it by setting the formatString property.


Still in OrderConf.mxml, locate the Delivery Date form item, and change the <mx:Label> so the text property calls the format() method of the orderFormat DateFormatter on the deliveryDate property of the orderInfo data structure. Be sure to remove manual date formatting from the last lesson. The <mx:Label> should look as shown here:

<mx:Label text="{orderFormat.format(orderInfo.deliveryDate)}"/> 

This applies the DateFormatter object to the deliveryDate property and displays the date in the format "MM/DD/YYYY".


Save and run the application. Fill in the customer information fields and be sure to choose a delivery date. Note that the warnings are gone in the Problems section. Browse to the order confirmation section.

Note that the delivery date is formatted as shown in the following example.

Adobe Flex 2.Training from the Source
Adobe Flex 2: Training from the Source
ISBN: 032142316X
EAN: 2147483647
Year: 2006
Pages: 225 © 2008-2017.
If you may any questions please contact us: