Looping over the data used by a Flex List component is easy enough, but what if you need to loop over the actual itemRenderers in the List? Recently I needed to do just that.
I needed a reference to each of the itemRenderers so that I could pass TextInput controls in my custom renderer into a 3rd party spell check library. Anytime you want to do something with the controls inside each of the custom itemRenderers in your list, looping over them will come in handy.
The key to doing it with Flex 3 is understanding the mx_internal namespace. A lot of variables in the Flex framework are mx_internal variables. Variables in the mx_internal namespace are ones that Adobe thinks have a high probability of changing in future versions of Flex, so they reside in a special namespace so developers know they may change. Since the Flex framework is open source, we can easily open the code and find which variables are mx_internal.
The List controls inherits from ListBase. ListBase has a mx_internal variable named rendererArray. rendererArray is just that, an array of renderer's used by your List. If you try to access rendererArray using the standard List component you wont be able to. To gain access to this array we will need to create a new component that inherits from List. Below is the full source for my ExposedRendererList :
1: package Controls
2: {
3: import mx.controls.List;
4: import mx.core.mx_internal; //this import statement should appear be last
5:
6: public class ExposedRendererList extends List
7: {
8: use namespace mx_internal; //tells Actionscript that mx_internal is a namespace
9:
10: public function ExposedRendererList()
11: {
12: super();
13: }
14:
15: //The array of renderer's being used in this list
16: public function get renderers():Array
17: {
18: //prefix the internal property name with its namespace
19: return mx_internal::rendererArray;
20: }
21:
22: }
23: }
There are 3 lines of code we need to take a look at. The first one is line 4. We need to import mx.core.internal namespace into our new class. On line 8 we tell Actionscript that mx_internal is a namespace we will be using in the class. And finally we create a new property on our class named renderers. The only thing it does is get the rendererArray from ListBase (which is the parent class for List). We have to prefix rendererArray with the mx_internal:: namespace in order to gain access to it. Now we've exposed the previously internal array for use anywhere in our Flex application.
Looping over the renderers or components in each of renderers becomes pretty trivial. The one thing to keep in mind is that rendererArray is an Array of Array so we'll need to write our ActionScript accordingly. Here is a sample method the does a for...each loop over the itemRenderers in a List:
1: private function LoopOverRenderers():void
2: {
3: for each(var renderer:Array in coolstuff.renderers)
4: {
5: //renderers is an array of arrays
6: //in a List component, our renders will be the first element of each array
7:
8: if(renderer[0] != null)
9: {
10: ProductRenderer(renderer[0]).img.rotation += 90;
11: }
12: }
13: }
I'm also including the obligatory live example with view source enabled so you can view the full source code and/or download the sample app.
In the sample application, I simply rotate the image in each of the renderers 90 degrees to show I have reference to each itemRenderer and its therefore its child components.
Adobe Flex