I’ve taken a step that I’ve been wanting to do for quite some time, extending UIComponent.  Sometimes I think it’s amazing that I’ve made it this long without having to do it.

I’m working on a project right where I’m using an ItemRenderer in a List control (nothing new) but there may be up to 100 of these renderers on screen at any given point, and even more on a large monitor.  I tried the quick and dirty method of extending HBox and adding labels and such, and I’ve finally seen firsthand what others have described about bloated item renderers.  It took about 8 seconds to render the screen on my development machine (which is a pretty powerful computer).  I decided that was unacceptable and that I finally needed to dig in.

 There are quite a few good resources I made use of, some of them more complete than others.  The first thing I did was read the Adobe documentation (Creating and Extending Flex 3 Components, PDF), specifically Chapter 9 (Advanced Visual Components in ActionScript).  It was a bit overwhelming at first, but as soon as I sat down to write some code it started making more sense.

I’m going to document a few of the things I discovered (many of these apply only because I was creating a list item renderer).

First, it’s pointless to do much initialization in the createChildren method.  My component consisted of a checkbox, an image, and a bunch of UITextFields (based on the recommendations from others).  I was able to set some styles on the image and the checkbox, but no method of setting styles on the text fields seemed to be effective in the createChildren method.  This point merits its own post.  For the text fields, all I did was create and add.

Second, commitProperties is where I handled setting my data and my visual styles on the text fields.  The documentation on commitProperties seemed a bit scattered, and it actually took me some time to arrive at this conclusion.  I had the impression that some of this, particularly styling should be taken care of in the updateDisplayList method.  I tried with no success, possibly because I was still trying to call setStyle on my UITextFields (see comment about meriting its own post above).  I ended up just setting the sizes and placement in updateDisplayList (which is mentioned in all the documentation).

Third, invalidateProperties and invalidateList (for ArrayCollection, etc) are useful for refreshing the renderers.  I tried a few convoluted methods of getting the screen to refresh programmatically, most of which worked and none of which I was pleased with, before I stumbled upon the invalidateList method.

Fourth, in trying to change the styles of my UITextFields, I independently discovered that it’s good to go to the code (the framework code) when trying to figure something out.

That sums up my first experience, in a nutshell, with extending UIComponent.  I’m excited about trying another one, which I am sure will go over a lot more smoothly.  I didn’t need to override measure() in this one, my next subproject will be working on a component that will help me remove the mystery from it.