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:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"
width="200"
height="200">
<!-- Test data -->
<mx:Model id="data">
<fruit prod_id="1" prod_name="Apple" />
<fruit prod_id="2" prod_name="Grapefruit" />
<fruit prod_id="3" prod_name="Kiwi" />
<fruit prod_id="4" prod_name="Lemon" />
<fruit prod_id="5" prod_name="Lime" />
<fruit prod_id="6" prod_name="Mango" />
<fruit prod_id="7" prod_name="Orange" />
<fruit prod_id="8" prod_name="Pear" />
<fruit prod_id="9" prod_name="Tangerine" />
</mx:Model>
<!-- CheckBoxList control -->
<CheckBoxList id="dbCbl"
title="Build your fruit salad:"
dataProvider="{data.fruit}"
labelField="prod_name"
heightFlex="1"
widthFlex="1" />
<!-- Feedback, how many selected? -->
<mx:Label id="feedback" text="Selected: {dbCbl.selectedCount}" />
</mx:Application>
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:
<?xml version="1.0" encoding="iso-8859-1"?>
<mx:VBox xmlns:mx="http://www.macromedia.com/2003/mxml"
hScrollPolicy="off"
vScrollPolicy="off">
<mx:Script>
// Properties
var title:String; // Control title
var dataProvider:Object; // Data provider
var labelField:String; // Label field
var selectedCount:Number=0; // Total checked
var selectedIndices:Array; // Checked indices
// Update selectedIndices and selectedCount
<![CDATA[
function selectionMade() {
// Init vars
selectedCount=0;
selectedIndices.length=0;
// Loop through the checkboxes
for (var i=0; i<cb.length; i++) {
if (cb[i].selected) {
// If checked
selectedCount++;
selectedIndices.push(i);
}
}
}
]]>
</mx:Script>
<!-- Title -->
<mx:HBox widthFlex="1">
<mx:Label id="lbl" text="{title}" />
</mx:HBox>
<!-- Checkboxes -->
<mx:VBox borderStyle="inset" widthFlex="1" height="{height - lbl.height}" vScrollPolicy="auto">
<!-- Loop through data -->
<mx:Repeater dataProvider="{dataProvider}" id="r">
<!-- Checkbox for each item -->
<mx:CheckBox id="cb" label="{r.currentItem[labelField]}" click="selectionMade()" />
</mx:Repeater>
</mx:VBox>
</mx:VBox>
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).
There are no comments for this entry.
[Add Comment]