Using the <mx:Consumer> Tag For your Flex application to make use of messages from the FDS, you use the <mx:Consumer> tag. This tag specifies which destination the Flex application will listen to. The following is an example of the syntax of the <mx:Consumer> tag: <mx:Consumer destination="destination name" message="event handler" fault="event handler"/>
With this simple syntax, you can specify an identifier for the tag, the name of the destination, and event handlers for the message or fault events. Whenever an incoming message is heard, the message event is fired, containing an mx.messaging.events.MessageEvent object. The body of the message can be referenced by the event.message.body property. In addition to adding the tag, one more step is required to register a consumer: to call the subscribe() method of the consumer. 1. | Open Dashboard.mxml from your flexGrocer directory.
Alternatively, you can open this file from the Lesson20/start directory and save it in the new flexGrocer directory.
| 2. | Just after the opening <mx:Application> tag, add an <mx:Consumer> tag with an id of consumer, a destination of TypeSalesUpdate, and event handlers for the message and fault events.
<mx:Consumer destination="TypeSalesUpdate" message="messageHandler(event)" fault="faultHandler(event)"/>
The destination is set to match the destination id you specified in the messaging-config.xml file.
| 3. | In the script block, add a faultHandler() function, which takes an argument of type MessageFaultEvent. The body of this method should use an Alert to display the event.faultString.
private function faultHandler(event:MessageFaultEvent):void{ Alert.show(event.faultString); }
If the import for the MessageFaultEvent was not automatically added, you need to manually add that import statement. The same is true for the Alert class.
import mx.messaging.events.MessageFaultEvent; import mx.controls.Alert;
If any issues arise in messaging, you will see the error in an Alert box. Otherwise, you might not be aware of any issues.
| | | 4. | Still in the script block, add a messageHandler() function, which takes an argument of type messageEvent.
private function messageHandler(event:MessageEvent):void{ type.dp = new ArrayCollection(event.message.body.ATYPESALES as Array); startDate.selectedDate = event.message.body.STARTDATE; endDate.selectedDate = event.message.body.ENDDATE; dashboardWS.getSalesData.send(); }
If the import for the MessageEvent was not automatically added, you need to manually add that import statement.
import mx.messaging.events.MessageEvent;
The data coming back from the FDS via the ColdFusion gateway is an object with an array of Sales data called ATYPESALES, and STARTDATE and ENDDATE properties. The sales data is passed into the type chart, so it can be graphed; then the start and end dates are used to update the interface. Finally, the getSalesData service is used to retrieve the latest data for the other two charts as well.
| 5. | Find the init() method. Just before the end of the method, add consumer.subscribe(), to subscribe to the TypeSalesUpdate destination.
private function init():void{ startDate.selectedDate = new Date(2006,3,1); endDate.selectedDate = new Date(2006,4,1); catRPC.send(); getData(); consumer.subscribe(); }
Subscribing to a destination enables you to receive the messages that the destination sends.
| 6. | In two separate browsers, run the EComm and Dashboard applications. In the EComm application, add a product to the cart, check out, and complete the checkout process.
When the sale is completed, the pie chart automatically updates itself to reflect the latest sales data.
| 7. | Save and close Dashboard.mxml.
|
 You have now reconfigured your application to receive real-time updates to the Dashboard data when a new order is placed. When you place an order from the e-commerce application, it calls a method in Order.cfc on the ColdFusion server. The order is recorded in the system. Order.cfc sends a message to the event gateway. The consumer in the Dashboard application has subscribed to receive any messages from the gateway. So, when this new message arrives from the ColdFusion server, the Dashboard application is immediately notified and uses the new data to update its model. Using data binding, the charts respond to the change in this model and update the screen display. |
