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

[ZIONIST]

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>