All Over Software Jobs: [flexcoders] Re: getting the total of values of an array collection that is updated manually

Saturday, December 10, 2011

I have modified the app using Alex Harui's solution and it works when i add a product to the cart and also updates the total when i delete an item from the cart. But when i edit the quantity in the text input, the total does not get updated. Below is the modified version. Anything am missing?

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal"
xmlns:ns1="*"
xmlns:ns2="as_logic.*">
<mx:states>
<mx:State name="dark">
<mx:SetProperty target="{product}"
name="text"
value="Dark Chocolate"/>
<mx:SetProperty target="{price}"
name="text"
value="50"/>
</mx:State>
<mx:State name="spread">
<mx:SetProperty target="{product}"
name="text"
value="Drinking Chocolate"/>
<mx:SetProperty target="{price}"
name="text"
value="100"/>
</mx:State>
</mx:states>

<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.controls.listClasses.ListData;
import mx.collections.ArrayCollection;
import mx.events.CollectionEvent;

[Bindable]
private var orderColl:ArrayCollection=new ArrayCollection();

private function addProduct():void
{

/*** Create an object to hold the data ***/
var obj:Object=new Object();

/*** Assign the variables to it ***/
obj.Product=product.text;
obj.Price=price.text;
obj.Qty=1;

/*** Add the object to the list ***/
orderColl.addItemAt(obj, 0);
orderColl.addEventListener(CollectionEvent.COLLECTION_CHANGE, calculateSum);
}

public function deleteOrder():void
{

/*** Remove the item from the array collection ***/
orderColl.removeItemAt(products.selectedIndex);
orderColl.addEventListener(CollectionEvent.COLLECTION_CHANGE, calculateSum);
}

public function changeQty(event:Event):void
{
orderColl.addEventListener(CollectionEvent.COLLECTION_CHANGE, calculateSum);
}

public function calculateSum(event:CollectionEvent):void
{
var amt:Number=0;
var n:int=orderColl.length;
for (var i:int=0; i < n; i++)
{
var cartEntry:Object=orderColl.getItemAt(i);
amt+=cartEntry.Qty * cartEntry.Price;
}
sum.text=usdFormatter.format(amt.toString());
}
]]>
</mx:Script>

<mx:DefaultTileListEffect id="dtle0"
fadeOutDuration="300"
fadeInDuration="300"
moveDuration="650"
color="0xffffff"/>

<mx:CurrencyFormatter id="usdFormatter"
precision="0"
currencySymbol="$"
alignSymbol="left"/>

<mx:Canvas width="500"
height="300">
<mx:Label x="10"
y="10"
text="Milk Chocolate"
id="product"/>
<mx:Label x="10"
y="36"
text="10"
id="price"/>
<mx:Button x="10"
y="62"
label="submit"
click="addProduct()"/>
<mx:Button x="10"
y="92"
label="Change State"
click="currentState='dark'"/>
<mx:Button x="10"
y="122"
label="Drinking Chocolate"
click="currentState='spread'"/>
</mx:Canvas>

<mx:VBox width="340"
height="340"
horizontalAlign="center"
verticalAlign="middle">

<ns2:transparentList id="products"
width="300"
height="300"
dataProvider="{orderColl}"
borderStyle="none"
itemsChangeEffect="{dtle0}">
<ns2:itemRenderer>
<mx:Component>
<mx:HBox width="100%"
height="100%"
horizontalAlign="center"
verticalAlign="middle"
horizontalGap="0">
<mx:Image source="assets/trashcan.gif"
click="outerDocument.deleteOrder()"/>
<mx:Label text="{data.Product}"
styleName="orderLabel"/>
<mx:Spacer width="100%"/>
<mx:Label id="price"
text="${Number(qty.text)* Number(oldPrice.text)}"
styleName="orderLabel"/>
<mx:TextInput id="qty"
width="30"
height="20"
text="{data.Qty}"
change="outerDocument.changeQty(event)"
styleName="qtyInput"/>

<mx:Label id="oldPrice"
text="{data.Price}"
visible="false"
includeInLayout="false"/>
</mx:HBox>
</mx:Component>
</ns2:itemRenderer>
</ns2:transparentList>
<mx:HBox>
<mx:Label text="Total:"
color="#FFFFFF"
fontWeight="bold"/>
<mx:Label id="sum"/>
</mx:HBox>
</mx:VBox>

</mx:Application>