10741!

In the previous parts we build and deployed a small Flex app, in this part of the tutorial we will upgrade the Flex application. The following new features will be implemented:

• Add product
• Remove product
• Update prodcuct

Since the WebService already implements these operations we only need to change the Flex mxml code. Add the following code somewhere in the mx:webservice tag:

<mx:operation name=”removeProduct”>
<mx:request xmlns=”http://service.test.com”>
<id>{productGrid.selectedItem.id}</id>
</mx:request>
</mx:operation>

This XML defines the removeProduct method, using the selected product id as parameter, the {productGrid.selectedItem.id} glues the DataGrid to the SOAP operation. Add the following XML as wel, this attaches the description and price fields ( which we will define later ) to the updateProduct SOAP call.

<mx:operation name=”updateProduct”>
<mx:request xmlns=”http://service.test.com”>
<id>{productGrid.selectedItem.id}</id>
<description>{s_description.text}</description>
<price>{s_price.text}</price>
</mx:request>
</mx:operation>

The last operation defines the addProduct method

<mx:operation name=”addProduct”>
<mx:request xmlns=”http://service.test.com”>
<description>
{p_description.text}
</description>
<price>
{p_price.text}
</price>
</mx:request>
</mx:operation>

At this point we defined the SOAP operations, in the next step we will create the necessary text boxes.

First of all we will create the update/remove text boxes,

<mx:Label x=”418″ y=”12″ text=”Id”/>
<mx:TextInput x=”511″ y=”10″ id=”s_id” editable=”false” htmlText=”{productGrid.selectedItem.id}”/>
<mx:Label x=”418″ y=”70″ text=”Description”/>
<mx:TextInput x=”511″ y=”68″ id=”s_description” htmlText=”{productGrid.selectedItem.description}”/>
<mx:Label x=”418″ y=”42″ text=”Price” />
<mx:TextInput x=”511″ y=”40″ id=”s_price” htmlText=”{productGrid.selectedItem.price}”/>

These text boxes automatically  get the values from the DataGrids selected item.
Beneath the text boxes there are two buttons :

<mx:Button id=”removeButton” x=”511″ y=”98″ label=”Remove” click=”WS.removeProduct.send();WS.getProducts.send()”/>
<mx:Button id=”updateButton” x=”604″ y=”98″ label=”Update” click=”WS.updateProduct.send();WS.getProducts.send()”/>

The most interesting part of these buttons is the onClick code; after clicking one of the buttons the following actions are performed :

• The WS.removeProduct.send() method is invoked
  • The send() method of the removeProduct operation gathers the message data as we defined before.
  • A Soap call is performed,the server removes the product from the array

• The WS.getProducts.send() method is invoked
  • A soap call is performed, the server return the current products ( not including the one we just removed ).

The last element on the page is the Add functionality, just like the update/remove XML it contains a button and some text fields.

<mx:Button x=”682″ y=”190″ label=”Add” click=”WS.addProduct.send();WS.getProducts.send()”/>
<mx:TextInput x=”514″ y=”162″ id=”p_price”/>
<mx:TextInput x=”514″ y=”190″ id=”p_description”/>
<mx:Label x=”421″ y=”192″ text=”Description”/>
<mx:Label x=”421″ y=”164″ text=”Price”/>
<mx:HRule x=”421″ y=”137″ width=”250″ height=”4″/>
<mx:HRule x=”418″ y=”218″ width=”250″ height=”4″/>

After inserting this XML you should be able to perform all operations on the product database.