A description of the List component

The FlexJS List component is fairly complex component compared to such components as Label, TextButton, and even Panel. Originally, the List component started out simply, especially on the JavaScript side, but it is now a more robust component.

The original List component (now SimpleList) consisted of a model and item renderers but on the JavaScript side, it was merely a wrapper for the HTML <select> element. Since the JavaScript FlexJS components should reflect their ActionScript counterparts as much as possible, the JavaScript List had to also make use of item renderers.This is that story.

The following diagram shows how the ActionScript List component is composed.

The List contains:

A selection model which encapsulates a data provider as well knowledge about which item is selected (the item and the index).
A view bean that displays the container housing the list control.
A factory bean that can produce instances of item renderers as needed.
An item renderer to display each element of the list; created by the factory bean.
A mouse controller for the list as a whole that handles the selection for the list.
A mouse controller for item renderer to handle the hover and selected states.

These parts are specified by the List's style definition in the defaults.css file: