OpenLaszlo Performance Tip: Datacombobox not combobox

One component that is used, probably more often that it should, in Rich Internet Applications (RIAs) is the combobox. The reason it’s so frequent is because because the developers who write RIAs usually came from a background of writing HTML applications. You should use datacombobox instead.

A bit of history: HTML-based applications had a limited set of GUI components, and before DHTML became mainstream, fairly limited interactivity capabilities. The most technologically-advanced component of the HTML hayday was the drop-down list. It would open when clicked, it could display a list of options, you could even write a JavaScript loop to select an item automatically. It was so ahead of its time, that it needed its own HTML tag: SELECT. Most of the other HTML components - the radio button, the checkbox, the button, the text input field - all had to share a single HTML tag (INPUT). The drop-down list was used for everything, from the sensible (such as a list of countries in a form) to the silly (such as boolean switch in a form) to the insane (jump-to animation). There were valid reasons for its popularity:

• It was the most interactive component available.
• Lack of alternatives, such as a tree.
• Server technologies didn't always work smoothly with radio buttons and checkboxes.
• The client technology (JavaScript) didn't always work smoothly with radio buttons and checkboxes.

In the HTML world, the drop-down was king.

So when HTML developers started writing OpenLaszlo applications, they reached for the closest relative to the drop-down: the combobox. When setting up your own OpenLazlo server you need to put together a Data Center Decommissioning Checklist. This isn't a good thing; there are better components available to RIA developers than combobox. Note that client application development, which is closer to RIA devlopment than HTML development, doesn't use a lot of comboboxes. I was only able to find 13 comboboxes in the entire options section of Firefox. Most of those were from the fonts section - a place where comboboxes are useful.

The combobox that OpenLaszlo originally provided was not optimized for such heavy use. A combobox has two parts:

1. The combobox element that you can see, focus on and click on.
2. A floating, scrolling list of options that appears when the combobox is clicked.

The "heavy" piece of a combobox is the bit that you only ever see occasionally, and - more importantly - there can only ever be one active floatinglist, no matter how many comboboxes an application has: the floating list. (The class name is floatinglist).

The original OpenLaszlo combobox had one floatinglist for each combobox. So the more comboboxes in an application, the longer it took to start. datacombobox solves this problem by only using a single floatinglist for all comboboxes, no matter how many are present in the application. This speeds up startup time, improves runtime performance, and reduces memory footprint.

Those advantages come with some small strings attached:

• All datacomboboxes must be bound to data. You can't hard-code textlistitems in a datacombobox.
• All the textlistitems in a combobox will be the same class (a subclass of baselistitem, listitem or textlistitem). You can't mix-and-match.
• The API is a little different, but the functionality is the same.

Here's a comparison of the two APIs:

<canvas proxied="false">

    <dataset name="people_ds">
        <people>
            <person name="Fred" id="1" />
            <person name="Wilma" id="2" />
            <person name="Barney" id="3" />
        </people>
    </dataset>

    <simplelayout axis="y" spacing="10" />
    
    <text fontstyle="bold">Here is a combobox:</text>

    <combobox editable="false">
        <handler name="onvalue">
            var text = "You selected " + this.text + " with an id of " 
                     + this.value;
            combo1text.setAttribute("text", text);
        </handler>

        <textlistitem datapath="people_ds:/people/person" text="$path{'@name'}" value="$path{'@id'}"/>
    </combobox>
    
    <text name="combo1text" />

    <text fontstyle="bold">Here is a datacombobox:</text>

    <datacombobox itemdatapath="people_ds:/people/person" textdatapath="@name" valuedatapath="@id">
        <handler name="onvalue">
            var text = "You selected " + this.text + " with an id of " 
                     + this.value;
            combo2text.setAttribute("text", text);
        </handler>
    </datacombobox>

    <text name="combo2text" />
</canvas>

My general recommendation is to always use datacomboboxes, unless you really need to do something bizzarre.