What I said in my last comment referred to the QuantityComponent and not the item-renderer itself. Anyway, it is still better to dispatch bubbling events and handle them where needed than using topLevelApplication for that purpose...
On Mon, Jun 10, 2013 at 9:51 AM, Evyatar Ben Halevi-Arbib < [email protected]> wrote: > 1. I would use a RadioButton in the item-renderer for a clear selection. > 2. You can dispatch bubbling events from within an item-renderer, so the > event listener would be defined on the list itself. > 3. An item-renderer shouldn't access the topLevelApplication unless > there's a REALLY good reason (which you don't seem to have). > 4. You can define the first tag of the item-renderer as VGroup and then > you won't need the internal VGroup. > For better performance one must always try to use the minimal number of > components needed for accomplishing the desired layout. > > Good luck, > Evyatar > > > On Mon, Jun 10, 2013 at 8:30 AM, Sumudu Chinthaka <[email protected]>wrote: > >> thanks Alex >> >> what im actually trying to do is implement a meal menu >> passenger can only select one meal at a time >> so i have a custom component that i have added to itemrenderer which >> fires events when quantity change happen >> whenever quntity is changed i want to reset all the other component >> values because passenger should be able to select only one meal >> >> please find the code below >> >> >> ShowMeals View with list of avalable meals >> >> <?xml version="1.0" encoding="utf-8"?> >> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"; >> xmlns:s="library://ns.adobe.com/flex/spark" >> creationComplete="init(event)"> >> <fx:Script> >> <![CDATA[ >> import com.isa.mobile.data.Globals; >> import mx.collections.ArrayCollection; >> import mx.core.FlexGlobals; >> import mx.events.FlexEvent; >> import mx.events.ResizeEvent; >> import mx.resources.IResourceManager; >> [Bindable] >> *private var meals:ArrayCollection;* >> [Bindable] >> private var resMgr:IResourceManager; >> [Bindable] >> private var defHeight:Number; >> protected function init(event:FlexEvent):void >> { >> defHeight = Globals.getComponentHeight(Globals.BUTTON_HEIGHT); >> resMgr = FlexGlobals.topLevelApplication.appResourceManager; >> this.meals = data as ArrayCollection; >> } >> protected function confirm_clickHandler(event:MouseEvent):void >> { >> } >> ]]> >> </fx:Script> >> <fx:Metadata> >> [ResourceBundle("form_resources")] >> </fx:Metadata> >> <s:Group width="100%" height="100%" verticalCenter="0" >> horizontalCenter="0"> >> <s:Rect width="100%" height="100%"> >> <s:fill> >> <s:SolidColor color="0x32373d"/> >> </s:fill> >> </s:Rect> >> <s:VGroup width="98%" height="98%" verticalCenter="0" >> horizontalCenter="0"> >> <s:Button >> label="{resMgr.getString('form_resources','app.setMeal.selectMeal')}" >> skinClass="com.isa.mobile.skins.ViewTitleButtonSkin" >> height="{Globals.getComponentHeight(Globals.TITLE_HEIGHT)}" width="100%"/> >> <s:List width="100%" height="100%" dataProvider="{meals}" >> itemRenderer="com.isa.mobile.renderers.MealsItemRenderer" > >> </s:List> >> <s:Button >> label="{resMgr.getString('form_resources','app.common.confirm')}" >> click="confirm_clickHandler(event)" >> skinClass="com.isa.mobile.skins.ViewSubmitButtonSkin" height="{defHeight}" >> width="100%" /> >> </s:VGroup> >> </s:Group> >> </s:View> >> >> >> *com.isa.mobile.renderers.MealsItemRenderer* >> >> package com.isa.mobile.renderers >> { >> import com.isa.mobile.data.Globals; >> import com.isa.mobile.events.QuantityComponentEvent; >> import flash.display.GradientType; >> import flash.display.Loader; >> import flash.events.Event; >> import flash.events.IOErrorEvent; >> import flash.geom.Matrix; >> import flash.net.URLRequest; >> import flash.text.TextLineMetrics; >> import mx.core.FlexGlobals; >> import mx.effects.Resize; >> import mx.events.FlexEvent; >> import mx.events.ResizeEvent; >> import mx.rpc.events.ResultEvent; >> import spark.components.Group; >> import spark.components.HGroup; >> import spark.components.IconItemRenderer; >> import spark.components.Image; >> import spark.components.Label; >> import spark.components.LabelItemRenderer; >> import spark.components.VGroup; >> import spark.primitives.BitmapImage; >> import views.components.QuantityComponent; >> public class MealsItemRenderer extends LabelItemRenderer >> { >> private var loader:Loader; >> [Embed(source="assets/dpi160/food.png")] >> private var defaultFood_160:Class; >> [Embed(source="assets/dpi240/food.png")] >> private var defaultFood_240:Class; >> [Embed(source="assets/dpi320/food.png")] >> private var defaultFood_320:Class; >> [Bindable] >> private var dpi:Number; >> private var imageSource:Class; >> private var foodImage:Image; >> [Bindable] >> private var listItemHeight:Number; >> private var paddingYValue:Number; >> private var paddingXvalue:Number; >> private var listItemHeadingHeight:Number = 30; >> private var defaultLabelheight:Number; >> private var imageHeight:Number; >> private var rowHeadTxt:Label; >> private var mealDesc:Label; >> private var qty:QuantityComponent; >> private var price:Label; >> private var totalDisplay:Label; >> private var vg:VGroup; >> private var hGroup_header:HGroup; >> private var hGroup_1:HGroup; >> private var hGroup_2:HGroup; >> private var _price:Number; >> private var _isMultipleMealsAllowed:Boolean; >> private var _qtyChnageEvent:QuantityComponentEvent; >> public function MealsItemRenderer() >> { >> loader = new Loader(); >> dpi = Globals.getComponentHeight(Globals.DPI); >> * >> FlexGlobals.topLevelApplication.dispatcher.addEventListener(QuantityComponentEvent.QUANTITY_CHANGED,qtyChangeHandler); >> * >> } >> override protected function createChildren():void >> { >> switch(dpi) >> { >> case 160: >> { >> imageSource = defaultFood_160; >> paddingYValue = 5; >> paddingXvalue = 10; >> listItemHeadingHeight = 30; >> defaultLabelheight = 26; >> imageHeight = 50; >> break; >> } >> case 240: >> { >> imageSource = defaultFood_240; >> paddingYValue = 7; >> paddingXvalue = 15; >> listItemHeadingHeight = 45; >> defaultLabelheight = 39; >> imageHeight = 75; >> break; >> } >> case 320: >> { >> imageSource = defaultFood_320; >> paddingYValue = 10; >> paddingXvalue = 20; >> listItemHeadingHeight = 60; >> defaultLabelheight = 52; >> imageHeight = 100; >> break; >> } >> } >> rowHeadTxt = new Label(); >> rowHeadTxt.percentWidth = 50; >> mealDesc = new Label(); >> mealDesc.percentWidth = 100; >> totalDisplay = new Label(); >> totalDisplay.percentWidth = 50; >> totalDisplay.height = Globals.getComponentHeight(Globals.LABEL_HEIGHT); >> totalDisplay.styleName = "totalDisplay"; >> totalDisplay.visible = false; >> foodImage = new Image(); >> qty = new QuantityComponent().initializeQuantityComponent("Quantity"); >> qty.percentWidth = 50; >> price = new Label(); >> price.percentWidth = 50; >> price.styleName = "price"; >> vg = new VGroup; >> vg.verticalCenter = 0; >> vg.percentWidth = 100; >> hGroup_header = new HGroup(); >> hGroup_header.percentWidth = 100; >> hGroup_header.addElement(rowHeadTxt); >> hGroup_header.addElement(price); >> hGroup_1 = new HGroup(); >> hGroup_1.percentWidth = 100; >> hGroup_1.percentHeight = 30; >> hGroup_1.addElement(foodImage); >> hGroup_1.addElement(mealDesc); >> hGroup_2 = new HGroup(); >> hGroup_2.percentWidth = 100; >> hGroup_2.percentHeight = 70; >> hGroup_2.verticalAlign = "top"; >> hGroup_2.addElement(qty); >> hGroup_2.addElement(totalDisplay); >> vg.addElement(hGroup_1); >> vg.addElement(hGroup_2); >> addChild(vg); >> addChild(hGroup_header); >> } >> *private function qtyChangeHandler(event:QuantityComponentEvent):void{* >> * _qtyChnageEvent = event;* >> * * >> * if(this.qty == event.quantityComponent){* >> * var tot:Number = _price * event.quantity;* >> * totalDisplay.text = "Total : " + tot;* >> * totalDisplay.visible = true;* >> * }else{* >> * if(!_isMultipleMealsAllowed){* >> * qty.setQuantity(0);* >> * totalDisplay.visible = false;* >> * }* >> * } * >> * } * >> override public function set data(value:Object):void >> { >> rowHeadTxt.text = value.mealName; >> rowHeadTxt.setStyle("color",0xffffff); >> mealDesc.text = value.mealDescription; >> loader.load(new URLRequest(encodeURI(value.mealImageLink))); >> >> loader.contentLoaderInfo.addEventListener(Event.COMPLETE,function(e:Event):void{ >> foodImage.source = e.currentTarget.content; >> }); >> >> loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,function(e:Event):void{ >> foodImage.source = new imageSource(); >> }); >> //test >> if(_qtyChnageEvent!=null) >> { >> if(_qtyChnageEvent.quantityComponent != qty){ >> this.qty.setQuantity(0); >> }else{ >> this.qty.setQuantity(_qtyChnageEvent.quantity); >> } >> } >> if(value.isMultipleMealsAllowed){ >> qty.setNoMaxQuantity(true); >> _isMultipleMealsAllowed = true; >> }else{ >> qty.setMaxQuantity(1); >> _isMultipleMealsAllowed = false; >> } >> price.text = "Price : "+value.mealCharge; >> _price = value.mealCharge; >> var s:TextLineMetrics = mealDesc.measureText(value.mealDescription); >> var sss:Number = mealDesc.getStyle("lineHeight"); >> listItemHeight = listItemHeadingHeight + paddingYValue + imageHeight >> +paddingYValue + qty.getComponentHeight() + paddingYValue ; >> var ww:Number =vg.rowHeight; >> } >> override protected function layoutContents(unscaledWidth:Number, >> unscaledHeight:Number):void >> { >> var yPos:Number = paddingYValue + listItemHeadingHeight; >> setElementSize(hGroup_header,unscaledWidth - (paddingXvalue * >> 2),listItemHeadingHeight - (paddingYValue)); >> setElementPosition(hGroup_header,paddingXvalue * >> 2,(listItemHeadingHeight/2) - paddingYValue); >> setElementSize(vg,unscaledWidth - (paddingXvalue * 4),unscaledHeight); >> setElementPosition(vg,paddingXvalue*2,yPos); >> /*setElementSize(foodImage,imageHeight,imageHeight); >> setElementPosition(foodImage,paddingXvalue * 2,yPos); */ >> /*setElementSize(mealDesc,unscaledWidth - imageHeight - (paddingXvalue >> * 4),imageHeight/2); >> setElementPosition(mealDesc,paddingXvalue + imageHeight + paddingXvalue + >> paddingXvalue ,yPos); >> yPos += imageHeight/2; >> setElementSize(qty,(mealDesc.width/2),qty.getComponentHeight()); >> setElementPosition(qty,paddingXvalue + imageHeight + paddingXvalue + >> paddingXvalue,yPos);*/ >> } >> override protected function measure():void >> { >> super.measure(); >> /*measuredHeight = this.listItemHeadingHeight + >> vg.getExplicitOrMeasuredHeight(); /*this.listItemHeight;*/ >> var dd:Number = vg.contentHeight; >> var ddd:Number = vg.height; >> switch(dpi) >> { >> case 160: >> { >> measuredHeight = 200; >> break; >> } >> case 240: >> { >> measuredHeight = 300; >> break; >> } >> case 320: >> { >> measuredHeight = 400; >> break; >> } >> } >> } >> override protected function drawBackground(unscaledWidth:Number, >> unscaledHeight:Number):void >> { >> graphics.lineStyle(1,0xcccccc); >> graphics.beginFill(0xcccccc); >> graphics.drawRoundRect(paddingXvalue, 0, unscaledWidth - (paddingXvalue * >> 2), unscaledHeight - paddingYValue,10,10); >> graphics.endFill(); >> var ratioArray:Array = [0,100]; >> var backgroundColors:Array = [0x505358, 0x1d2028]; >> var matrix2:Matrix = new Matrix(); >> matrix2.createGradientBox(unscaledWidth, listItemHeadingHeight, Math.PI >> / 2, 0, 0); >> graphics.beginGradientFill(GradientType.LINEAR, backgroundColors, [1,1], >> ratioArray, matrix2); >> graphics.drawRoundRectComplex(paddingXvalue,0 , unscaledWidth - >> (paddingXvalue * 2), listItemHeadingHeight,5,5,0,0); >> graphics.endFill(); >> } >> } >> } >> >> >> *QuantityComponent* >> >> >> <?xml version="1.0" encoding="utf-8"?> >> <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"; >> xmlns:s="library://ns.adobe.com/flex/spark" preinitialize="init(event)" > >> <fx:Script> >> <![CDATA[ >> import com.isa.mobile.data.Globals; >> import com.isa.mobile.events.QuantityComponentEvent; >> import mx.core.FlexGlobals; >> import mx.events.FlexEvent; >> [Bindable] >> private var minQuantity:Number = 0; >> [Bindable] >> private var maxQuantity:Number; >> [Bindable] >> private var noMaxQuantity:Boolean = false; >> [Bindable] >> private var heading:String; >> [Bindable] >> private var qty:Number = 0; >> [Bindable] >> private var componentHeight:Number; >> [Bindable] >> private var defButtonHeight:Number; >> [Bindable] >> private var defLabelHeight:Number; >> [Bindable] >> private var defPadding:Number; >> public function >> initializeQuantityComponent(heading:String,minQty:Number=0,maxQty:Number=0):QuantityComponent{ >> this.minQuantity = minQty; >> this.maxQuantity = maxQty; >> this.heading = heading; >> return this; >> } >> protected function decrementQty(event:MouseEvent):void >> { >> if((qty-1) >= minQuantity){ >> --qty; >> FlexGlobals.topLevelApplication.dispatcher.dispatchEvent(new >> QuantityComponentEvent(QuantityComponentEvent.QUANTITY_CHANGED,this,this.qty)); >> } >> } >> protected function incrementQty(event:MouseEvent):void >> { >> if(!noMaxQuantity){ >> if((qty+1) <= maxQuantity){ >> ++qty; >> FlexGlobals.topLevelApplication.dispatcher.dispatchEvent(new >> QuantityComponentEvent(QuantityComponentEvent.QUANTITY_CHANGED,this,this.qty)); >> } >> }else{ >> ++qty; >> FlexGlobals.topLevelApplication.dispatcher.dispatchEvent(new >> QuantityComponentEvent(QuantityComponentEvent.QUANTITY_CHANGED,this,this.qty)); >> } >> } >> public function setMinQuantity(min:Number):void{ >> this.minQuantity = min; >> } >> public function setMaxQuantity(max:Number):void{ >> this.maxQuantity = max; >> } >> public function setNoMaxQuantity(noMaxQty:Boolean):void{ >> this.noMaxQuantity = noMaxQty; >> } >> public function getComponentHeight():Number{ >> return this.componentHeight; >> } >> protected function init(event:FlexEvent):void >> { >> this.defButtonHeight = Globals.getComponentHeight(Globals.BUTTON_HEIGHT); >> this.defLabelHeight = Globals.getComponentHeight(Globals.LABEL_HEIGHT); >> this.componentHeight = defLabelHeight + defButtonHeight; >> this.defPadding = Globals.getComponentHeight(Globals.PADDING_SIZE); >> } >> public function getQuantity():Number{ >> return this.qty; >> } >> public function setQuantity(qty:Number):void{ >> this.qty = qty; >> } >> ]]> >> </fx:Script> >> <s:VGroup width="95%" verticalCenter="0" horizontalCenter="0" >> verticalAlign="middle" horizontalAlign="center"> >> <s:Label height="{defLabelHeight}" textAlign="center" >> verticalAlign="middle" width="100%" text="{this.heading}"/> >> <s:HGroup width="100%" > >> <s:Button height="{defButtonHeight}" >> skinClass="com.isa.mobile.skins.ViewDefaultButtonSkin" width="33%" >> label="-" click="decrementQty(event)" /> >> <s:Label height="{defButtonHeight}" textAlign="center" >> verticalAlign="middle" width="33%" text="{this.qty}"/> >> <s:Button height="{defButtonHeight}" >> skinClass="com.isa.mobile.skins.ViewDefaultButtonSkin" width="33%" >> label="+" click="incrementQty(event)"/> >> </s:HGroup> >> </s:VGroup> >> </s:Group> >> >> >> AS YOU CAN SEE IN THE ATTACHED SCREEN SHOTS >> IF I SET THE QUANTITY TO 1 IN THE FIRST MEAL LAST MEAL ALSO UPDATE WITH >> THE SAME VALEUE >> >> also is there a way to disable itemrendere recycling >> >> thanks >> Sumudu >> >> >> On Mon, Jun 10, 2013 at 10:36 AM, Alex Harui <[email protected]> wrote: >> >>> Your renderer should only display stuff based on its data property (or >>> associated data properties). A button should update a property on each >>> data item which will then be reflected by the renderer when it is used to >>> display an item that was off-screen. >>> >>> -Alex >>> >>> On 6/9/13 9:38 PM, "Sumudu Chinthaka" <[email protected]> wrote: >>> >>> >hi >>> > >>> >i have a list with a custom ItemRenderer with a button on it >>> >when the button click inside a renderer i want to update all other >>> >renderers with some specific value >>> > >>> >so what i did was add a event listener and the handler inside the >>> >itemrendere to response to button click event >>> > >>> >this works fine for the items that are displayed on the screen >>> >i think due to item renderer recycling what ever items that are not >>> >displayed in the screen does not receive this event >>> >as i scroll down the list i could see those items not being update and >>> >only >>> >the top items of the list that were displayed on the screen updated >>> > >>> >how can i force to update all items upon my event >>> > >>> >thanks >>> >Sumudu >>> >>> >> >
