I am working on an application that requires users to select from long lists of options. I am not a fan of multiple select list boxes (that whole shift-click ctrl-click thing is a pain). In HTML I usually use lots and lots of checkboxes, but what I’d really like is a list of checkboxes, kind of a list/checkbox hybrid. HTML can’t do that, but Flex can. A simple demo of what I mean is at http://www.forta.com:8100/flex/work/testcbl.mxml. The listbox is scrollable, each item has a checkbox, and a counter shows the number of selected items.
Here’s the code used in this MXML file:
Most of the code is simply populating some test data (in a real app this data would likely come from a database or SOAP call or XML feed). The control itself is the CheckBoxList tag which takes a title, a dataProvider (the test data), and the name of the field to use for checkbox labels. The page then uses a mx:Label to display the count, binding the label text to the control’s selectedCount property.
But CheckBoxList is not a Flex control. What is it? It is a custom control, one that I just wrote. And the process was incredibly easy. Here is the control code:
The control extends VBox (the Flex vertical box control). A script block defines the properties (including selectedCount which is bound in the calling page), and a function named selectionMade() which updates the properties each time a checkbox is checked (or unchecked). Then comes the UI, an HBox is used to display the passed title, a scrollable VBox contains the checkboxes, a Repeater loops through the passed data, and for each item CheckBox defines a checkbox (and fires selectionMade() on each click).
And that is all it takes. File CheckBoxList.mxml is in the same directory and can thus be invoked just by specifying the tag name. The control is not tied to any specific data, and accepts both data and the name of the field to display, and bindings between Flex controls and custom controls just works.
It’s a beautiful thing indeed (and now I can get back to building the app that needed the control in the first place).
Building Custom Flex Controls
6 responses to “Building Custom Flex Controls”
-
This is one of the several ways in which you can do this. The other one is writing a custom CellRendered for the listbox. It’s a bit more complex, but will perform better for larger lists.
-
Curious about the mx:Model block. The FRUIT elements make the data model, but there is no root element for the model. Is the mx:Model the root element or does Flex not require one in data models?
Thanks! -
Great example, really love the way you can extend controls and drop them in the same folder as the mxml.
-
Thanks for posting this! I have to admit I’m terribly excited about this. Was running up the walls with excitement when the whole rich app thing was announced and I saw the hotel reservation app (https://reservations.ihotelier.com/onescreen.cfm?hotelid=1001), but was awfully let down when I saw how stinking difficult and time consuming it was to do in Flash (being a programmer, not a Flash guru). What I’ve seen of Flex so far, makes me drool. Too late to sign up for the beta? If not, slap me silly with the URL, please.
-
Great examples and the Flex demo in London was interesting. The current Flex links you have listed are no longer working. Could you restore them please?
-
They are back up, sorry about that.
Leave a Reply