Looks ok to me. Is there some specific issue we should look at? The expectation is that this is for a shopping cart and the number of items won't be very big. If you had 100,000 items, recomputing on every change could be slow, and then you might try to get smarter by looking at the event's CollectionEventKind and making specific changes based on the kind. For example, for an ADD event, all you need to do is add the new value to the old sum, no need to loop over everything.
On 12/21/11 7:35 AM, "ZIONIST" <stinasius@yahoo.com> wrote:
Hi guys, thanks to your help i have managed to get it to work finally. One question though, is this best practice? Below is the code.
<?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]
public 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
{
var currentlySelectedItem:Object = products.selectedItem;
currentlySelectedItem.Qty = qty.text;
}
*/
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:Script>
<![CDATA[
public function changeQty(event:Event):void
{
var currentlySelectedItem:Object = outerDocument.products.selectedItem;
currentlySelectedItem.Qty = qty.text;
outerDocument.orderColl.itemUpdated(currentlySelectedItem);
}
]]>
</mx:Script>
<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="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>
--
Alex Harui
Flex SDK Team
Adobe Systems, Inc.
http://blogs.adobe.com/aharui
