Passing Data to List itemRenderers

We send out a monthly newsletter to subscribers, and this is April's newsletter. You can subscribe to our mailing list by creating an account at www.flextras.com

The AutoCompleteComboBox is now feature complete and I'm adding some polish to the code and documentation. I expect to have a final version out to beta testers later this week and it will be available for sale before the end of the month. Since you guys like the technical stuff, I thought I'd talk about one of the challenges I had while creating the AutoCompleteComboBox.

What is an AutoCompletes?

An AutoComplete is a text input box. When you start typing, a list of possible options is displayed, trying to guess what you want to find. Two common examples are a browser address bar or an e-mail client address field. In the list that pops up, the text you typed is usually highlighted. Here is an example:

In the Flextras AutoCompleteComboBox, each item in that list is displayed with an itemRenderer. Inside the itemRenderer, I wanted to provide access to the type ahead text so that you guys could style or process it in any way you wanted. This was not as easy as I thought it'd be.

How do AutoCompletes work?

Our AutoCompleteComboBox is an extension of the ComboBox in the Flex Framework. The drop down portion of the ComboBox is a List. The itemRenderer that you set on the ComboBox is passed into the list and used to create each list item. The AutoCompleteComboBox has a property named typeAheadText that lets us know what the user typed. To provide syntax highlighting the itemRenderer needs to know what the type ahead text is.

I thought this would be easy. I could just use the listData property to get the listOwner and access the public property on the AutoCompleteComboBox. Right? Unfortunately, no, that was wrong. The drop down is positioned using the PopUpManager. The parent of the drop down is not the ComboBox. There was no easy, consistent way to traverse the hierarchy using listOwner to get to the AutoCompleteComboBox values.

While Building the Flextras DataSorter I spent a lot of time rummaging through the List code in the Flex SDK. It gave me good insight into how lists work, and that knowledge was very useful here. Let's solve the problem.

Creating My Own List?

I decided the best solution would be to create my own custom List that could send in the typeAheadText as part of the list data. These are the steps:

1. First, I decided to create my own ListData class, AutoCompletListData. This class extends ListData and adds my new instance variable, typeAheadText as a public property.
2. Next, I created my own extension of the List Class, AutoCompleteDropDown. In this class, I added the typeAheadText as a public property.
3. In my custom List class, I overrode the makeListData function. makeListData creates the listData instance that is passed to each itemRenderer. Instead of returning an instance of the ListData class, it returns an instance of my new AutoCompleteListData class.
4. From within the AutoCompleteComboBox, I changed the dropdownFactory to create my AutoCompleteDropDown instead of a standard list. Whenever the type ahead text changes in the AutoCompleteComboBox, it is set in the ComboBox dropdown, and filtered on down to the itemRenderers.
5. From Within the itemRenderer, I can access the typeAheadText by casting this.ListData to my AutoCompleteListData and then accessing the value:
   AutoCompleteListData(this.listData).typeAheadText
   

Once you can access the typeAheadText in your itemRenderer, you can use it to style the display in any way you can imagine. I used a regex to add some bold statements to the HTML text on a label. That is baked right in. But, if you want to do something more in your development, you can. Once the component is released, I plan to make a bunch of different examples for how this works.