As promised, I’m making my slides and the code samples from my 360Flex Atlanta session available for download. The session was officially titled Building Components That Use Item Renderers and it covers the use of custom item renderers for existing components (like List, Tree, DataGrid) and the creation of new components that can display item renderers.
The following examples of MXML List item renderers were shown during the session. These examples display their source code next to the components.
Font List Item Renderer Example
Color List Item Renderer Example
To access the source code for the CheckBoxList ActionScript item renderer, head over to my blog post, Open Source Flex Components: AdvancedList and CheckBoxList. The source code for the TabBar component for Flash CS3 is available in the Yahoo! Astra Library for Flash CS3. It’s not a Flex component, but it is a good example of recycling renderers for reuse.
You can download the source code for the TreeMap component at its Google Code project. The current stable release is available on the Downloads page. For the latest “unstable” revision (which is what I showed during the session) you can go to the Source page and follow the instructions to access the source code with your favorite Subversion client.
To all who attended such an early session after a night of partying, I appreciate it. Also, if you stopped me in the halls between sessions to say you liked it, thanks a lot. I’m excited for the next 360Flex. I heard rumors that Tom and John want to head back to the Bay Area, or at least the west coast, next time.
Download Slides (PDF file)
Hi Josh Tynjala
Thanks for the article, since we are scratching our head, why the application is taking so much of memory some times event the computer get crashed , or its showing the system a lot.
Now I figured out that because of the MXML based Itemrendere we are using causes this crash.
The application we are developing has a custom tilelist component, which loads a mxml heavy itemrenderer which is used to display the powerpoint slides(ranges from 60 to 120) jpg images, there are rules to be applied so lots of drawing api code is used to draw lines, and we are selecting the itemrenderers in different combinations like if u select one item and if it belongs to a family of bundles say 8 all are getting selected, for highlighting the selection we will be drawing 8 yellow rectangles, and other 2 type of complicated bundle rules.
As per our requirement we increase the size of the tilelist component, so that it does not unload the items which is not visible, we are manipulating the parent of the tilelist the canvas to display scrollbar for scrolling the tilelist component itself. So say if the tilelist has 50 items , all the 50 items are always in memory.
When I used profile to see whats happening, each itemrenderers, has more then 200 items it. , initially the application was developed using flex 2.0, then 3 days after reading some blogs we ported to flex 3.0 to see any improvement but nothing much.
I don’t know why adobe did not handled this kind of a big problem, its not removing the old items, don’t know from where its get created
actually in design time the itemrender has 8 image component to display 7 thumb nail images according to the rules set for each itemrender in runtime, 3 canvas , 4 hbox and 1 vbox and 3 spacers for alignments.
I taken ur advice to convert it into actionscript class, I like to have ur advice so that, whenever each itemrenderer is loaded into the tilelist component the Page File usage of the windows will not rice my 10 md which never reduce and on each drag and drop the Page File usage of the windows should not increase 15 to 20 mb,even on every action CPU usage should not touch 100%.
Please suggest me how to go about creating custom actionscript based Itemrenderer which does not take more memory.
Thanks
Thiru
Thiru, it simply sounds like you need to focus on improving your code. It seems complex enough from your description, however, that I can only give you some simple guidance.
First, if each item renderer individually consists of multiple Canvases, HBoxes, VBoxes, and Spacers, I’m 100% certain you can do it better. That many containers for a single item renderer is simply unacceptable. Even if it’s a pain, positioning everything manually in ActionScript will probably boost your performance significantly.
Second, with item renderers so complex, I have a very strong feeling that you might be suffering from memory leaks. I have no specific advice in this area. Just be on the lookout for event listeners that may not be removed.
Why can’t you “unload the items”? The standard TileList behavior of reusing item renderers is very beneficial for both CPU and memory usage.
In short, what I get out of your description is that you’re probably making things too complex. Simplify, work a little closer to the standard Flash Player APIs rather than using Flex containers, and make sure you’re allowing the garbage collector to collect when it must.
Hi Josh
Thanks for sparing some time and replay to my queries, regarding increasing the size of the tilelist, as I mentioned in my previous post, when I am selecting one slide from a bungle the slides belong to the same bundle should also want to be selected for dragging, we are using “indexToItemRenderer” get the reference of the indexToItemRenderer to update its properties, but if other slides are not visible(means outside the display area) and if I am not increasing the size of the tilelist to get the default benefit(memory management), I will not able to get the reference of the itemrenderers since its not there, so I will get null reference error, to avoid this only I am increasing the size of the tilelist.
Thanks
Thiru
Thanks for publishing this, Josh. We’ll be referring to your source code as we build a scrolling item renderer component for very large data sets. “We” is a small group of developers here at Allurent.