Using a Web Service in the DataEntry Application | Adobe Flex 2: Training from the Source

This next set of tasks has you going to the DataEntry.mxml file and using a Web Service to create a new product through ActionScript rather then via the <mx:WebService> tag. When creating a workflow to work with data you need to plan for three pieces of your application:

The data or value object that is to be changed
How that data is displayed (to be selected)
Howdata is changed and saved

In the DataEntry application, the existing data is shown via a Tree control and is edited through various controls. You select the data to change by selecting the product via its category in the tree.

You need to pass the product information back to the server. To uniquely identify each product, you need to add an attribute that acts as its ID or primary key. You will also need to update everything in the code that makes reference to the product.

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

Open Product.as from your valueObject directory.

You can also copy Lesson17/start/valueObjects/Product.as to your flexGrocer/valueObjects directory if you choose.

Add a public attribute called prodID that is a Number.

public var prodID:Number;

From this point forward, you can use the prodID to unique identify the product.

Add a _prodID argument to the product() constructor and set the product's prodID attribute with it.

public function Product(   _prodID:Number,   _catID:Number,   _prodName:String,   _unitID:Number,   _cost:Number,   _listPrice:Number,   _description:String,   _isOrganic:Boolean,   _isLowFat:Boolean,   _imageName:String){     prodID = _prodID;     catID = _catID;     prodName = _prodName;     unitID = _unitID;     cost = _cost;     listPrice = _listPrice;     description = _description;     isOrganic = _isOrganic;     isLowFat = _isLowFat;     imageName = _imageName; }

You currently have the constructor set up to accept one argument per attribute so that by adding the _prodID, you can now create a new product and set the prodID via a new Product(..) statement.

Tip

Refactoring occurs when you introduce a change to a method signature and have to make the change everywhere.

Update the buildProduct() function to look for o.prodID and pass it into the new Product() method call.

public static function buildProduct(o:Object):Product{   var p:Product = new Product(      o.prodID,      o.catID,      o.prodName,      o.unitID,      o.cost,      o.listPrice,      o.description,      Boolean(o.isOrganic),      Boolean(o.isLowFat),      o.imageName);   return p; }

Save the Product.as file.

Open CategorizedProductManager.mxml from your managers directory.

You can also copy Lesson17/intermediate/managers/CategorizedProductManager.mxml to your flexGrocer/managers directory if you choose.

As you remember, the CategorizedProductManager.mxml file deals with the retrieval of the product data and the categories that they are assigned to. You need to update this file to make sure that it creates its products with the new prodID and you need to make sure that you can tell the manager to refresh its data on every add, update, or delete of the products.

In the prodByCategoryHandler() function, locate where you are creating a new product. Add a new argument using the XML variable p.@prodID. Make sure it is a Number.

for each (var p:XML in c..product){    var prod:Product = new Product(       Number(p.@prodID),       Number(p.@catID),       String(p.@prodName),       Number(p.@unitID),       Number(p.@cost),       Number(p.@listPrice),       String(p.@description),       Boolean(p.@isOrganic=="Yes"),       Boolean(p.@isLowFat=="Yes"),       String(p.@imageName));    ... }

Create a public function called refreshData() that returns void. In this function have it make a call to the HTTPService prodByCatRPC to refetch the XML data.

public function refetchData():void{    prodByCatRPC.send(); }

You can now call the refetchData() method to refresh the data from outside this file.

10.

Replace the url attribute of the <mx:HTTPService> tag at the bottom of the page with http://localhost:8300/flexGrocer/xml/categorizedProducts.cfm

<mx:HTTPService    url="http://localhost:8300/flexGrocer/xml/categorizedProducts.cfm"   result="prodByCategoryHandler(event)"   resultFormat="e4x"/>

Because you will be adding, updating and deleting products, the XML feed will no longer get static and to avoid any browser caching issues that would arise from updating the xml document directly, you will want to have the xml dynamically generated using ColdFusion.

11.

Save the CategorizedProductManager.mxml file.

12.

Open DataEntry.mxml.

You can also copy Lesson17/intermediate/DataEntry.mxml to your flexGrocer directory if you choose.

13.

Inside the script block, add an import for the mx.rpc.soap.WebService class.

import mx.rpc.soap.WebService;

14.

Create a new private function called addProduct(). Have it pass in one argument called product of type Product. This function does not return anything.

private function addProduct(product:Product):void{ }

15.

Declare a local variable called ws of type WebService and set it equal to new WebService(). Set the wsdl attribute to http://localhost:8300/flexGrocer/cfcs/ProductManager.cfc?wsdl.

var ws:WebService = new WebService(); ws.wsdl = "http://localhost:8300/flexGrocer/cfcs/ProductManager.cfc?wsdl";

You created a WebService object through the use of the WebService class instead of the <mx:WebService> tag. There is no difference in the way the WebService is internally handled.

16.

Call the loadWSDL() function on the WebService object.

ws.loadWSDL();

Before you can call any methods on the WebService, you must load the WSDL file so that the WebService knows what methods it can call, which arguments to pass the method, and what is returned. The WebService uses this information to make requests to the Web Service correctly. You cannot call any method on the WebService without having this loaded.

Tip

You can use the canLoadWSDL() function on the WebService object to see whether it could load the WSDL.

17.

Assign a listener on the WebService object that listens for the result event and maps it to the addProductResult() method. Add another listener to the WebService object that listens to the fault event and maps it to the addProductFault() method.

ws.addEventListener("result", addProductResult); ws.addEventListener("fault", addProductFault);

You will be creating the addProductResult() and the addProductFault() methods next to handle the results.

18.

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

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

19.

Show a pop-up window with the results using the showPopUp() function. You need to use the Product.buildProduct() method to take the result of the call to the server and create a new Product from the event.result.

showPopUp(Product.buildProduct(event.result),'Product Added');

The result from the Web Service is an Object that you pass to the buildProduct() function. It will create a new product with the data returned. The Object return type is defined by the WSDL file.

20.

Call the refetchData() function on prodMgr to have it go to the server to get the updated XML file.

prodMgr.refetchData();

There are several ways to deal with updating the list of products that populates the Tree component. Instead of adding this product to the collection (which is one option), you will simply recall the method to refetch the data from the server. This was chosen for simplicity rather then a best practice.

21.

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

private function addProductFault(event:FaultEvent):void{ }

Ensure that the import statement for mx.rpc.events.FaultEvent was added by Flex Builder or add it manually to the top of the script block.

22.

Add a trace statement to this function which sends the contents of the variable event.fault.message to the console in the event of a fault.

trace( event.fault.message );

If a problem occurs accessing the ColdFusion CFC, a fault message will be printed in your Flex Builder console.

23.

In the addProduct() function, call the ws.addProduct() method at the bottom and pass in an argument called product.

ws.addProduct(product);

Earlier you learned how to call a WebService when the methods are declared as part of the WebService's definition. When you are using a WebService ActionScript object, you will want to use the wsObject.methodName (arg1, arg2, ...) format because the method names and signatures are not known.

This calls the addProduct() function on the Web Service. The product argument passed in will be translated into an Object to be passed to the Web Service.

24.

Look for the included AddProduct component. Change the productAdded event to call the addProduct() function, passing into it event.product.

<v:AddProduct cats="{categories}"    units="{units}"    productAdded="addProduct(event.product)"/>

25.

Save DataEntry.mxml and run the application. Fill out the new product section. Notice the category you specified in the ComboBox and click Add Product. You will notice a pop-up window confirming that the new product was added. Go to the Edit/Delete tab to see the new product in the Tree component.

When you run the DataEntry and add a product to the Meat category, you should see the following after you expand the Tree component: