Using Remote Object to Save an Order


In these next tasks you will modify the EComm.mxml to place an order using the <mx:RemoteObject> tag after the user has finished going through the checkout process. RemoteObject is different from Web Services on several points:

  • RemoteObject uses the serialized binary protocol AMF instead of XML-based Simple Object Access Protocol (SOAP).

  • RemoteObject requires a configuration file that is compiled with the application to determine the location of the remote service.

  • RemoteObject enables you to map a defined ActionScript class; for example, the Product value object, to a server class of the same definition.

Both RemoteObject and WebServices enable you to talk to multiple server technologies. Over Web Services, the WSDL file defines what the SOAP message should look like, and the WSDL on the server is used by the server technology to translate the SOAP message into the specific technology. RemoteObject, or Remoting (a slang term of the use of RemoteObjects) doesn't work that way. There is a configuration file, services-config.xml, that Remoting uses to determine how to make the calls to the server. This file acts much like the WSDL file does for WebService. To use Remoting in your stand-alone version, you need to make sure it is in your compiler commands in Flex Builder.

It is necessary for you to specify the following sections via the configuration file:

  • Technology Adapter: This is the specific class that translates the generic AMF message into the specific technology. In the following snippet, you see an adapter, referenced by the id of cf-object, which points to an adapter that handles ColdFusion requests. It is also marked as default= "true ", which means that this adapter is to be used for each destination defined that has no specific adapter noted.

    <adapters>    <adapter-definition         default="true"/> </adapters> 

  • Channels: This defines the location in which the server with the remote services exists and what the technology is that the server is using. You will be using only AMF, but it is possible to use other types of channels in a Flex application as well. You should also note two things from the following snippet of code. First is that the gateway used by Flex 2 is /flex2gateway, which is using the AMF 3.0 specification. Flex version 1.5 uses a different one. Second, note the <instantiate-types> tag, which must be set to false when connecting to ColdFusion.

    <channel-definition  >    <endpoint uri= "http://localhost:8300/flex2gateway/"       />    <properties>      <polling-enabled>false</polling-enabled>        <serialization>          <instantiate-types>false</instantiate-types>        </serialization>    </properties> </channel-definition> 

  • Destination Handles: These are the grouping of adapters, channels, and custom properties that Flex will reference by the id, that are needed to make the connection and request to the remote service using Remoting. When dealing with Remoting, the key tag to look at in the following code is the <source> tag. This can be used to restrict which class directories the Remoting can make the request to or specify the exact class that the destination is referencing. If you specify an exact class in the <source> tag, you will not need to pass in a source attribute in the <mx:RemoteObject> tag.

    <destination >    <channels>       <channel ref="my-cfamf"/>    </channels>    <properties>       <source>*</source> </properties> </destination> 

Update Flex Compiler Command

As noted, in order to have the stand-alone Flex Builder configuration work with RemoteObjects, you need to specify to the Flex Compiler which services-config.xml to use. The configuration file will store the location of your RemoteObjects.

Tip

You will have to compile with different configuration files if the final server location is different than your development or staging environment as each configuration file (when dealing with Standalone Deployments) will have a specific location in it. For ease of managing, it is best if you create a unique configuration file, as was done for this book, rather then modify the default one provided.


1.

Go to Projects > Properties > Flex Compiler screen. Enter -services "driveroot\flex2tfs\flexGrocer\assets\FlexGrocer_CF_Services.xml" into the Additional Compiler Arguments box after any existing items in this field.

Assuming that you have installed the ColdFusion as per the setup instructions (if not then the directory structure will be different), you should see the following before you click OK:

2.

Click OK to close the window.

Raise Order Confirmed Event in the Checkout Process

Now you need to provide a way to confirm an order so the checkout process knows it can place the order.

1.

Open OrderConf.mxml from the views/ecomm directory.

2.

Define an event named orderConfirmed. This will be a generic event, so you don't need to specify a specific event type in the event definition. Place it between the <mx:Metadata> tags at the top of the page.

[Event(name="orderConfirmed")] 


You will dispatch this event when the order is confirmed to let the checkout process know that it can now place the order.

3.

Create a private function called orderConfirm() that returns void.

private function orderConfirm():void{ } 


This function will be called when the order is confirmed and then dispatch the orderConfirmed event.

4.

Create a local variable, called o, of type Event. Set it equal to a new event with an event name of orderConfirmed.

private function orderConfirm():void{    var o:Event = new Event("orderConfirmed"); } 


The simplest way of raising an event on a component is to use the Event class. This event only holds an event name and is used only to note that the event occurred instead of passing data around.

5.

Dispatch the locally created event, called o, via this.dispatchEvent() passing in o.

private function orderConfirm():void{    var o:Event = new Event("orderConfirmed");    this.dispatchEvent(o); } 


6.

Call the orderConfirm() function from the Complete Order button's click handler.

<mx:Button label="Complete Order" click="orderConfirm()"/> 


Create and Call Remote Object

In this task, you will configure the Checkout component to send order information directly to a ColdFusion component. You will also create and dispatch an event to notify other areas of the application that the user has completed their order successfully.

1.

Open Checkout.mxml from the views/ecomm directory.

2.

Inside the script block, add an import for the valueObjects.ShoppingCart class.

import valueObjects.ShoppingCart; 


3.

Below the imports, declare a public variable named cart, which will hold the reference of the shopping cart of the application. Make it of type ShoppingCart.

public var cart:ShoppingCart = null; 


The cart will be set by the component being included in the main application. This is a reference to the whole shopping cart.

4.

Insert a <mx:MetaData> pair above the <mx:Script> block.

<mx:Metadata> </mx:Metadata> 


5.

Define an event named checkOutComplete. This will be a generic event, so you don't need to specify a specific event type in the event definition.

<mx:Metadata>    [Event(name="checkOutComplete")] </mx:Metadata> 


Upon the completion of the checkout, you will want to raise an event that you successfully completed the checkout.

6.

Below the <mx:Script> tags put a <mx:RemoteObject> tag. Set the id attribute to srv, set the destination attribute to ColdFusion, set source to FlexGrocer.cfcs.Order, and set showBusyCursor to true. Finally set the default result handler result to saveOrderResult, passing along the event.

<mx:RemoteObject        destination="ColdFusion"    source="FlexGrocer.cfcs.Order"    result="saveOrderResult(event)"    showBusyCursor="true"/> 


This creates a RemoteObject component with the id of svc, which points to the Order ColdFusion component on the server. You know it is ColdFusion not by the destination called ColdFusion but also by looking in the services-config.xml file to see which technology the destination of ColdFusion pointed to. The showBusyCursor attribute equal to true is used to turn the cursor to a busy icon. It does not restrict the user from clicking buttons or using the application; it is just visual.

Because the RemoteObject requests are made external to the Flex application, you need to "listen" for the result back from the server. The RemoteObject class enables you to listen for the result at the RemoteObject itself via the result event. The event class that is returned to these methods is mx.rpc.events.ResultEvent.

Tip

You can also define your operations on your RemoteObject just as you could with the <mx:WebService> tag. It follows the same rules.

7.

Inside the script block, add an import for the mx.collections.ArrayCollection class.

import mx.collections.ArrayCollection; 


You need this to reset the item's ShoppingCart value object.

8.

Inside the script block, add an import for the mx.rpc.events.ResultEvent class.

import mx.rpc.events.ResultEvent; 


9.

Inside the script block, add an import for the mx.controls.Alert class.

import mx.controls.Alert; 


You need this to be able to show an alert window to the user on order placement.

10.

Create a private function called saveOrderResult(). Have it pass in one argument called event of type ResultEvent. This function does not return anything.

private function saveOrderResult(event:ResultEvent):void{ } 


11.

Clear the items in the ShoppingCart, stored on cart.aItems, by setting the variable to a new ArrayCollection().

private function saveOrderResult(event:ResultEvent):void{    this.cart.aItems = new ArrayCollection(); } 


12.

You want to show a MessageBox, or Alert, with the order number generated for this new order. You will need to raise the alert window with Alert.show() and pass it a single string argument. You will pass in a message using the orderNum property of the event.result object.

private function saveOrderResult(event:ResultEvent):void{    this.cart.aItems = new ArrayCollection();    Alert.show("New Order Num: " + event.result.orderNum); } 


If you need to create a simple alert window, you can call the static show() method on the Alert class. The event.result holds the result of the call to the server. In this case, the server returns a result that is an Object. It has all the same properties as an OrderInfo value object plus the orderNum, which holds the Order Number created.

13.

Create a local variable, called o, of type Event. Set it equal to a new Event with an event name of checkOutComplete.

private function saveOrderResult(event:ResultEvent):void{    this.cart.aItems = new ArrayCollection();    Alert.show("New Order Num: " + event.result.orderNum);    var o:Event = new Event("checkOutComplete"); } 


The simplest way of raising an event on a component is to use the Event class. This event only holds an event name and is used only to note that the event occurred rather than passing data around.

14.

Dispatch the locally created event, called o, that was created via this.dispatchEvent() passing in o.

private function saveOrderResult(event:ResultEvent):void{    this.cart.aItems = new ArrayCollection();    Alert.show("New Order Num: " + event.result.orderNum);    var o:Event = new Event("checkOutComplete");    this.dispatchEvent(o); } 


15.

Set the ViewStack for the checkout process, checkoutNav, to display the billingInfo view.

private function saveOrderResult(event:ResultEvent):void{    this.cart.aItems = new ArrayCollection();    Alert.show("New Order Num: " + event.result.orderNum);    var o:Event = new Event("checkOutComplete");    this.dispatchEvent(o);    checkoutNav.selectedChild=billingInfo; } 


You need to set the process back to the beginning, so the next time you check out it will start from the beginning.

16.

Create a private function called completeCheckOut() that will call the RemoteObject. Have it return void.

private function completeCheckOut():void{ } 


This function will be called when the user confirms that the order is correct.

17.

In completeCheckOut() function, make a call to the saveOrder() method on the RemoteObject svc. Pass in orderInfo and cart.aItems.

private function completeCheckOut():void{    svc.saveOrder(orderInfo, cart.aItems); } 


Calling a method on RemoteObject is the same as you did with WebService. You call the actual method name on the RemoteObject you want to call using the remoteObject.methodName (arg1, arg2, etc) format.

The Checkout component acts as a wizard in that it collects the order information, address, and credit card data and puts it into an OrderInfo value object called orderInfo. You need to pass that information and the items in the shopping cart to the remote service.

18.

Call the completeCheckOut() function from the OrderConf component's orderConfirmed event handler.

<v:OrderConf  width="100%" height="100%"    orderInfo="{orderInfo}"    back="checkoutNav.selectedChild=billingInfo"    orderConfirmed="completeCheckOut()"/> 


19.

Save the Checkout.mxml file.

Pass in ShoppingCart into Checkout Component

Your new Checkout component needs a reference to the user's shopping cart. You will now add that information to the component in EComm.

1.

Open the EComm.mxml file.

The file is located in flexGrocer/ directory.

2.

In the Checkout component, add an attribute of cart that is bound to the public variable of cart.

<v:Checkout  cart="{cart}" width="100%" height="100%"/> 


Change State of the Application Back to Welcome

Once the user has completed the ordering process, we need to return them to the welcome screen. You will now use the event previously created to facilitate this change.

1.

If you have not done so already, start your local ColdFusion server.

2.

Capture the checkOutComplete event on the Checkout component and have it set the selectedChild on the ecommNave ViewStack equal to homePage.

<v:Checkout        checkOutComplete="ecommNav.selectedChild=homePage"     cart="{cart}" width="100%" height="100%"/> 


This will cause the EComm application to show the home page upon successful completion of the order.

3.

Save EComm.mxml and run the application.

When you run the EComm application and check out, you should get an alert at the end noting that the order was placed. You should see the following:




Adobe Flex 2.Training from the Source
Adobe Flex 2: Training from the Source
ISBN: 032142316X
EAN: 2147483647
Year: 2006
Pages: 225

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net