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

Monday, December 12, 2011

I didn't see any code that actually changes the quantity in the data object. The TextInput gets its initial value from the data via databinding, and the change event calls something, but:

you don't want to update on change, but rather on focusOut or itemEditEnd (otherwise, as you type in "21" it will recompute for "2" and then "21")
You need to actually write to the dataObject. Probably no need to addEventListener again
Since you are using plain objects, you will need to call itemUpdated on the orderColl

-Alex

On 12/10/11 5:42 AM, "ZIONIST" <stinasius@yahoo.com> wrote:

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>