Actually, I am still reading through Peter Ent's dissertation on the subject.
>From what I have learned, what I am doing is not wrong per se. It works and >works very well for the smaller data sets that I use (Hundreds of rows, rather >than thousands). Also, doing it the way I do is a lot more readable. I don't >see it as a bad habit - just one way of many to get something done. I think that if I had a performance issue I would go back and tweak item renderers (And other components) to be more efficient. >From a new users perspective, if I had seen your item renderer when I first >started using Flex, I would have been totally intimidated and probably tried >very hard never to need an item renderer. --- In flexcoders@yahoogroups.com, "Tim Hoff" <timh...@...> wrote: > > > No response huh? Ok, you're welcome valdhor (Steve). One thing to > point out is that all flex controls, containers and components extend > UIComponent. Therefore, they all use the createChildren(), > commitProperties(), measure(), layoutChrome() and updateDisplayList() > methods. This applies to itemRenderers as well. The Flex engineers did > a great job developing the component life-cycle, and each of these > functions has a specific purpose. So really it's fine, if some other > practice, that circumvents the intended use of these methods, works for > you. However, it's propbably not fair to spread bad habits like this to > others; that are just learning. > > -TH > > --- In flexcoders@yahoogroups.com, "Tim Hoff" <TimHoff@> wrote: > > > > > > Ok, here's how I would do it; with efficiency and best-practice in > mind: > > > > > http://www.timothyhoff.com/projects/AgeItemRendererSample/AgeItemRendere\ > \ > > rSample.html > > > <http://www.timothyhoff.com/projects/AgeItemRendererSample/AgeItemRender\ > \ > > erSample.html> > > ( right click to view source ) > > > > Two main differences Steve: > > > > First, use createChildren to add the children, instead of in set data. > > I suspect that what's happening with the way you are doing it is that > > each time the data is changed (which, because the itemRenderers are > > recycled, happens on every scroll), the instance of the child is > > attempted to be added to the display list. I can't see the code in > > flash.display.DisplayObjectContainer, but I suspect that the code is > > checking to see if the instance exists already and/or re-parenting it. > > Either way, this is an un-necessary step. You only need to add the > > child once and then use the data to control it's state. > > > > Second, for efficiency, try to avoid using containers in > itemRenderers. > > A good practice is to extend UIComponent and do the layout manually. > > It's a little more work, but you get some good performance benefits. > > > > I encourage you to read this series > > <http://www.adobe.com/devnet/flex/articles/itemrenderers_pt5.html> and > > also look at the source code for the Flex controls. They all follow > the > > same component life-cycle pattern. > > > > Angelo, look at this sample for how to use an itemEditor. > > > > -TH > > > > --- In flexcoders@yahoogroups.com, "valdhor" valdhorlists@ wrote: > > > > > > I thought that was the idea. > > > > > > In the example, I wanted a new NumericStepper for each data item > > (Actually two new NumericSteppers). If createChildren only runs once, > > how would you get the required output? In other words, can you post > your > > version of the example using createChildren ? > > > > > > > > > > > > --- In flexcoders@yahoogroups.com, "Tim Hoff" TimHoff@ wrote: > > > > > > > > > > > > Yes, createChildren will only execute once; while set data will > > execute > > > > many times. Perhaps it's not a problem if the same child gets > added > > to > > > > the display list everytime that the data is set. But usually, you > > only > > > > need to add them once. > > > > > > > > -TH > > > > > > > > --- In flexcoders@yahoogroups.com, "valdhor" <valdhorlists@> > wrote: > > > > > > > > > > I use addChild in the set data function only because I always > > have. > > > > > > > > > > I have built hundreds of renderers this way and none of them > have > > > > given me a problem. If there's a good reason why I shouldn't do it > > this > > > > way, I'm all ears. > > > > > > > > > > > > > > > --- In flexcoders@yahoogroups.com, "Tim Hoff" TimHoff@ wrote: > > > > > > > > > > > > > > > > > > I'm with you Steve; about using AS for an itemRenderer. I do > > wonder > > > > why > > > > > > you would use addChild in the set data function though; rather > > than > > > > in > > > > > > createChildren . For mxml, this should work Angelo: > > > > > > > > > > > > <mx:itemRenderer> > > > > > > <mx:Component> > > > > > > <mx:HBox horizontalGap="5" horizontalAlign="center" > > > > > > width="100%" horizontalScrollPolicy="off" > > > > verticalScrollPolicy="off"> > > > > > > <mx:NumericStepper id="nsOutwardAgeYear" value="{ data.Age > > > > > > }" minimum="0" maximum="200" stepSize="1" width="50" > > > > > > textAlign="center"/> > > > > > > <mx:NumericStepper id="nsOutwardAgeMonths" value="{ > > > > > > data.Months }" minimum="0" maximum="200" stepSize="1" > width="50" > > > > > > textAlign="center"/> > > > > > > </mx:HBox> > > > > > > </mx:Component> > > > > > > </mx:itemRenderer> > > > > > > > > > > > > For the HBox, notice the use of horizontalGap, instead of a > > spacer > > > > as > > > > > > well. Just cleans it up a bit. > > > > > > > > > > > > Cheers, > > > > > > -TH > > > > > > > > > > > > --- In flexcoders@yahoogroups.com, "valdhor" <valdhorlists@> > > wrote: > > > > > > > > > > > > > > This is probably possible in MXML but I prefer to write my > > item > > > > > > > renderers in ActionScript... > > > > > > > > > > > > > > main.mxml: > > > > > > > <?xml version="1.0" encoding="utf-8"?> > > > > > > > <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; > > > > > > > layout="absolute"> > > > > > > > <mx:Script> > > > > > > > <![CDATA[ > > > > > > > import mx.collections.ArrayCollection; > > > > > > > > > > > > > > [Bindable] private var _arrTest:ArrayCollection = new > > > > > > > ArrayCollection([{"Age":5, "Months":10}, {"Age":18, > > "Months":3}, > > > > > > > {"Age":1, "Months":2}]); > > > > > > > ]]> > > > > > > > </mx:Script> > > > > > > > <mx:DataGrid dataProvider="{_arrTest}"> > > > > > > > <mx:columns> > > > > > > > <mx:DataGridColumn headerText="Age" width="120" > > > > > > > itemRenderer="NumericStepperRenderer"/> > > > > > > > </mx:columns> > > > > > > > </mx:DataGrid> > > > > > > > </mx:Application> > > > > > > > > > > > > > > NumericStepperRenderer.as: > > > > > > > package > > > > > > > { > > > > > > > import mx.containers.HBox; > > > > > > > import mx.controls.NumericStepper; > > > > > > > > > > > > > > public class NumericStepperRenderer extends HBox > > > > > > > { > > > > > > > private var nsOutwardAgeYear:NumericStepper = new > > > > > > > NumericStepper(); > > > > > > > private var nsOutwardAgeMonths:NumericStepper = new > > > > > > > NumericStepper(); > > > > > > > > > > > > > > public function NumericStepperRenderer() > > > > > > > { > > > > > > > super(); > > > > > > > nsOutwardAgeYear.minimum = 0; > > > > > > > nsOutwardAgeMonths.minimum = 0; > > > > > > > nsOutwardAgeYear.maximum = 200; > > > > > > > nsOutwardAgeMonths.maximum = 200; > > > > > > > nsOutwardAgeYear.stepSize = 1; > > > > > > > nsOutwardAgeMonths.stepSize = 1; > > > > > > > nsOutwardAgeYear.width = 50; > > > > > > > nsOutwardAgeMonths.width = 50; > > > > > > > nsOutwardAgeYear.setStyle("textAlign", "center"); > > > > > > > nsOutwardAgeMonths.setStyle("textAlign", "center"); > > > > > > > } > > > > > > > > > > > > > > override public function set data(value:Object):void > > > > > > > { > > > > > > > super.data = value; > > > > > > > if(value != null) > > > > > > > { > > > > > > > nsOutwardAgeYear.value = value.Age; > > > > > > > nsOutwardAgeMonths.value = value.Months; > > > > > > > addChild(nsOutwardAgeMonths); > > > > > > > addChild(nsOutwardAgeYear); > > > > > > > } > > > > > > > } > > > > > > > } > > > > > > > } > > > > > > > > > > > > > > I will leave it as an exercise for the reader how to add an > > event > > > > > > > listener for the change event. > > > > > > > > > > > > > > > > > > > > > HTH > > > > > > > > > > > > > > > > > > > > > > > > > > > > Steve > > > > > > > > > > > > > > --- In flexcoders@yahoogroups.com, Angelo Anolin > > angelo_anolin@ > > > > > > > wrote: > > > > > > > > > > > > > > > > Hi FlexCoders, > > > > > > > > > > > > > > > > I have a datagrid, where one of the columns is defined as > > > > follows: > > > > > > > > > > > > > > > > <mx:DataGridColumn width="150" > > > > > > > > > <mx:headerRenderer> > > > > > > > > <mx:Component> > > > > > > > > <mx:VBox horizontalScrollPolicy="off" > > verticalScrollPolicy="off" > > > > > > > verticalGap="2"> > > > > > > > > <mx:Box horizontalAlign="center" width="100%"> > > > > > > > > <mx:Label text="Age" /> > > > > > > > > </mx:Box> > > > > > > > > <mx:HBox horizontalAlign="center" width="100%" > > > > > > > > > <mx:Label text="Year" horizontalCenter="true" width="50" > /> > > > > > > > > <mx:Spacer width="10"/> > > > > > > > > <mx:Label text="Month" horizontalCenter="true" width="50" > /> > > > > > > > > </mx:HBox> > > > > > > > > </mx:VBox> > > > > > > > > </mx:Component> > > > > > > > > </mx:headerRenderer> > > > > > > > > <mx:itemRenderer> > > > > > > > > <mx:Component> > > > > > > > > <mx:HBox horizontalAlign="center" width="100%" > > > > > > > horizontalScrollPolicy="off" verticalScrollPolicy="off"> > > > > > > > > <mx:NumericStepper id="nsOutwardAgeYear" minimum="0" > > > > maximum="200" > > > > > > > stepSize="1" width="50" textAlign="center"/> > > > > > > > > <mx:Spacer width="5"/> > > > > > > > > <mx:NumericStepper id="nsOutwardAgeMonths" minimum="0" > > > > > > > maximum="200" stepSize="1" width="50" textAlign="center"/> > > > > > > > > </mx:HBox> > > > > > > > > </mx:Component> > > > > > > > > </mx:itemRenderer> > > > > > > > > </mx:DataGridColumn> > > > > > > > > > > > > > > > > Now, how would I be able to bind in both components my > array > > > > > > > collection? In the other columns, I can easily bind the > > > > datagridcolumn > > > > > > > with a single item inside the arrayCollection object by > > > > > > > > > > > > > > > > <mx:DataGridColumn headerText="Test" > dataField="myTestItem" > > > > > > > width="20"/> > > > > > > > > > > > > > > > > I want to bind two items inside my array collection into > the > > > > > > > numericStepper which I placed side by side in the datagrid. > > > > > > > > > > > > > > > > Like for example if my arraycollection has the following > > data > > > > > > > > > > > > > > > > var _arrTest:ArrayCollection = new > > ArrayCollection([{"Age":5, > > > > > > > "Months":10}, {"Age":18, "Months":3}, ("Age":1, > "Months":2)]); > > > > > > > > > > > > > > > > the Age and Months items should be bound to > nsOutwardAgeYear > > and > > > > > > > nsOutwardAgeMonths respectively. > > > > > > > > > > > > > > > > Thanks and regards, > > > > > > > > Angelo > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > >
