| This task shows you how you can map an ActionScript class to a Server object and pass an instance of that class between the two of them. This is done through the [RemoteObject()] metadata descriptor in your value object class and relies on the server and client objects having the same properties (names and number of). There are several benefits of this approach. For starters, you save the need to translate the result for a Remoting call into a specific value object. A good example of this is that the need you have for the buildProduct() function on the Product class. This would not be necessary if you could pass ActionScript objects via Web Services, which is only supported by Remoting. The second benefit is that it allows you to start using the results of the Remoting call right away; you can have methods on the value object that use the properties. This is immediately available. You can simply say event.result.someMethod(), assuming that event is the argument that is used to capture the result of a Remoting call. It is important to realize that this is not a requirement to pass data between Flex and the server via ActionScripts objects, but instead just a possibility for you to use when developing your applications. Tip  | This is especially helpful to do when you have all the data in your application stored in ActionScript classes (ValueObjects). |
1. | If you have not done so already, start your local ColdFusion server.
| 2. | Open OrderInfo.as from the valueObjects directory.
The file is located in the flexGrocer\valueObjects directory.
| 3. | Right above the class declaration, add a [RemoteClass] metadata attribute. Set the alias to FlexGrocer.cfcs.OrderInfo.
[RemoteClass(alias="FlexGrocer.cfcs.OrderInfo")] public class OrderInfo {
The RemoteClass metadata attribute points to the server object that the ActionScript class maps to via the alias argument. This is case-sensitive where the server object is located (class path). For the mapping to occur, Flex requires that there be an exact match in properties on the ActionScript class and the server object.
Tip | Be aware that when you are mapping ActionScript classes to server objects, you must keep the definitions in sync. Any change on the server object that is not exactly matched on the client will have Flex simply translate the server object returned as an Object. That said, the best patterns to use this feature with are Proxy, Domain, or ValueObject. |
| 4. | At the bottom of the other property declarations, declare a public variable named createDate, which will hold the date that the order was created. Make it of type Date.
public var createDate:Date;
As previously stressed, it is important to have an exact property match between the ActionScript class and the server object to which it is associated.
| 5. | At the bottom of the other property declarations, declare a public variable named orderNum that will hold the Order Number, which was created when the order was placed, to uniquely reference it. Make it of type String.
public var orderNum:String;
| | | 6. | Below all the property declarations, create a public function called getOrderInfoHeader(), which will return a message containing the order number and the date it was created. It will receive no arguments, using the value object properties instead, and will return a String.
public function getOrderInfoHeader():String{ return "Order '" + orderNum + "' was created on " + createDate; }
You will use this method to give a message to users about the details of the order they just placed.
| 7. | Save the OrderInfo.as file.
| 8. | Open Checkout.mxml from the views/ecomm directory.
| 9. | In the completeCheckOut() function, switch to call the saveOrderWithVO() function on the RemoteObject, svc, passing in the same arguments as before.
private function completeCheckOut(){ svc.saveOrderWithVO(orderInfo, cart.aItems); }
The method saveOrderWithVO() is already written on the RemoteObject. It is configured to accept a ValueObject rather then an Object.
| 10. | In the saveOrderResult() function, change the text being passed into the Alert.show() function to be returned from getOrderInfoHeader() method called directly on the event.result.
private function saveOrderResult(event:ResultEvent):void{ this.cart.aItems = new ArrayCollection(); Alert.show(event.result.getOrderInfoHeader()); var o:Event = new Event("checkOutComplete"); this.dispatchEvent(o); checkoutNav.selectedChild=billingInfo; }
The remote service is returning an OrderInfo value object from the server. This means that event.result is of type OrderInfo rather than Object. As a result, you can call the getOrderInfoHeader() method you created to get a formatted description of the order.
| 11. | Save the Checkout.mxml file.
| | | 12. | Run EComm.mxml.
When you run the EComm application and check out, you should get an alert at the end noting that the order was placed using the new header message. You should see the following:
|
 |
