MACROMEDIA FLEX-FLEX BUILDER, Tutorial, Page: 54 / 56

54 Flex Builder Tutorials
9.
Press F12 to test the file in a browser.
Click any product in the list view or the thumbnail view. The product details should appear in
the product detail area. Click the Add to Cart button to add the product to the shopping cart.
Choose another product, change the quantity, and click the Add to Cart button again.
Activate the Delete button
The final step in this tutorial is to active the Delete button in the shopping cart area so the user
can remove items from the cart.
1.
Switch to the CartView.mxml file.
2.
In Code view, enter the following function in the
<mx:Script>
tag (shown in bold type):
<mx:Script>
var dataObject:ShoppingCart;
function removeItem() {
if (dg.selectedIndex!=undefined)
dataObject.removeItemAt(dg.selectedIndex);
}
</mx:Script>
The function calls the
remoteItemAt
method of the cart object.
3.
Locate the
<mx:Button>
tag for the Delete button near the end of the file and add the following
two properties (shown in bold type):
<mx:Button label="Delete"
width="75"
enabled="{dg.selectedItem!=null}"
click="removeItem()" />
The Delete button is enabled only when a user selects an item in the shopping cart. When the
user clicks the button when an item is selected, the
removeItem()
function is called.
4.
Save the CartView.mxml file.
5.
Switch to the flexstore.mxml file and click Run on the Document toolbar to test the Delete
button in the browser embedded in Flex Builder.
Add items to the shopping cart, select an item in the cart, and click the Delete button. The
item should be removed from the cart.