The ZoomFrame component for Flex that I released last month got some good buzz. Today, I’m ready to release two more Flex components. Both are simple, but useful. The AdvancedList component adds a bit of functionality to the basic List. The CheckBoxList component adds a special item renderer with a CheckBox, and its selection changes hook into the standard List selection system. Have a look at the demo of AdvancedList and the demo for CheckBoxList to get an idea of how each works.
The AdvancedList adds two nice things. First, you have the ability to disable specific items in the List through the data provider. They won’t be selectable through user interaction. This is achieved through the enabledField and enabledFunction properties. They work very much like the standard labelField and labelFunction properties. Additionally, AdvancedList gives you more control over drag-and-drop operations. By default, items that are dragged from a List get the drag format type “items” and any List will accept these items if dropEnabled is set to true. However, what if you have several List on screen, all are able to accept dropped items, but you want to restrict drag-and-drop between certain specific Lists? With the ability to change the dragFormat from “items” to something more specific like “shoppingCartItems”, you have more options and control.
CheckBoxList, as I mentioned, creates a List where selected items are shown with CheckBoxes. Multiple selection is enabled by default, and pressing the Ctrl key is not required. This component has a couple advantages. First, a collection of related CheckBoxes is now enclosed in a scrolling List. This saves on space, and we all know many apps need all the extra space they can get. Plus, the frame helps to visually associate the CheckBoxes as a set. Secondly, this component can replace a regular multi-select list. If you’ve ever seen a web form where one of these lists is used, you’ll know that they must always have instructions to tell you to press the Ctrl or Command key to select multiple items. That’s barely usable. In fact, I’d be afraid to watch my grandma if she had to enter data into that form. Instead, the CheckBoxList offers a familiar concept, standard CheckBoxes, and it puts them within another familiar concept, a scrolling List. No instructions needed.
Of course, just like the ZoomFrame component, the source code for the AdvancedList and CheckBoxList components are available under the terms of an MIT-style license. Please feel free to use them in both commercial and open source projects. There are a few other components I intend to release after some polishing, so be sure to check back soon.
Very nice work Josh. I know I will be making use of the AdvancedList component in the near future.
Thanks, Scott. I’m glad you’ll find it useful.
Thanks!
Nice components Josh!
Agree with the others, another quality release mate. Nice!
I’m working on a List too, now you beat me
Josh – thanks for providing these. The CheckBoxList component will be very useful.
You have a little bug …
The disabled line 3 is selectable if you click on line one and then shift click the last one. Number three also selected
HTH
BOb
Thanks Bob. Good catch!
Was looking for a combobox that supports disabled items. Any chance this could be extended to produce it?
Erik, I haven’t looked very deeply into the ComboBox code, but I imagine that it wouldn’t be too difficult to make use of the AdvancedList (or at least some of its code) to give the ComboBox similar enhancements.
[...] Open Source Flex Components: AdvancedList and CheckBoxList [...]
[...] Open Source Flex Components: AdvancedList and CheckBoxList [...]
Hello,
I was also looking for a Combobox that can disable items. To achive this, I only had to use AdvancedList as dropdownFactory in my custom Combobox. Very nice, thanks a lot Josh!
That’s cool, Nico. I’m glad it was so easy!
Nice Job.
I needed the ability to pre-select the items using the dataProvider. So I added the following to your CheckBoxList. It checks for a “selected” key in the dataProvider array. Worked like a champ. I’m Still not sure if the validateNow() should be placed before setting the dataProvider or after.
override public function set dataProvider(value:Object):void { this.validateNow(); super.dataProvider = value; var selectedArray:Array = [ ]; for ( var i:int=0; i < value.length; i++ ) { if(value[i].selected) selectedArray.push(i); } super.selectedIndices = selectedArray; }Without wanting to appear totally stupid..I have downloaded the source code but don’t know where to place them to use the advanced list eg where does the com. file go?
David, you can put them directly in your project next to the main MXML application file, or you can put them anywhere and add the containing folder to the Build path in your project’s properties.
Thanks Josh..this will be very useful
Thanks a lot for this, it is perfectly what I was looking for.
Excellent!
Hi!
Thanks for the great component.
I also needed a ComboBox with disabled fields, was really helpful.
Thanks,
Fritz
Hi,
Great component, but it seems the measure() method in the CheckBoxListItemRenderer fails when I do not set a explicit width to the CheckBoxList control. This results in a CheckBoxList control of 4 pixels wide.
Is this an error, or do I do something wrong ?
Thanks,
Peter
This is an error that started occurring in Flex 3. I have not looked into it yet.
Thanks so much, Josh — I, too, found this to be exactly what I needed for disabling items in a combobox. Excellent component!
Thats Great, i just wanted a plugin sort of stuff for my already existing app and it works wonderful.
Thanks
When I apply an itemrenderer to the list it is not obvious that a list item is disabled until you give it focus with the cursor. Is there a way around this?
I just downloaded the source for the checkbox list. There is no doubt you have saved me a couple of hours of dev time. I owe you a beer
[...] List component for Combobox through “dropdownFactory” property of Combobox. For this example I used AdvancedList component from ZeusLabs and modified a bit. You can assign custom List component to Combobox as following PLAIN TEXT [...]
Great component, saved me a lot of working out. One question though, the textRollOverColor doesn’t seem to be working, is there a trick to getting this to work?
Hey really cool Components.
Exactly what I needed! Thx
But i have a question;
Is there a posibilty to make the checkbox list poping up, like the combobox list?
Niko,
Check out the
dropdownFactoryproperty on ComboBox.It should work something like this (untested):
How would I got about handling the individual item clicks? I’d like to call a function and be able to determine which checkbox item was toggled. Whenever I bind a click=”" or change=”" function to the control I get a reference to the entire list instead of the individual items.
Dave, They’re subclasses of the standard List, so you can use the
itemClickevent. Also, if you didn’t know about that one, there’s alsoitemRollOver,itemRollOut,itemDoubleClick, and a couple others that you might like. Check outmx.events.ListEvent.Hi, first of all, congratulations. This was just I was looking for, so thanks.
Now, I’m trying to use the “advancedlist” component with a custom itemRenderer (just to add an icon by the text), and I’m having problems with disabled items, they appear as normal ones until the mouse pass over them, thats when they get gray background.
I was expecting the were gray since the beginning, like in your sample.
I’ve tried both, inline and external itemRenderer.
It is no so big problem, but I’m wondering if it has a simple solution or I’ve to leave that part.
Thankyou in advance. Sorry for my English.
Some people might be getting disabled list items are showing up as enabled until the cursor rolls over it. (David’s comment). A fix for this is to call the assignment to renderer.enabled before super.drawItem inside the drawItem function override. That way the item will be drawn with settings set by isItemEnabled.
Replace:
override protected function drawItem(renderer:IListItemRenderer, selected:Boolean = false, highlighted:Boolean = false, caret:Boolean = false, transition:Boolean = false):void { if(renderer) //sometimes renderer is null { super.drawItem(renderer, selected, highlighted && renderer.enabled, caret, transition); renderer.enabled = this.isItemEnabled(renderer.data); } }With this:
override protected function drawItem(renderer:IListItemRenderer, selected:Boolean = false, highlighted:Boolean = false, caret:Boolean = false, transition:Boolean = false):void { if(renderer) //sometimes renderer is null { renderer.enabled = this.isItemEnabled(renderer.data); super.drawItem(renderer, selected, highlighted && renderer.enabled, caret, transition); } }Thanks, Tom. Good find. I’ll try to get that fix integrated soon.
How does one set the style of the disabled items? I’ve tried various things to no avail.
[...] as part of the common documentation with my other “Flex Toolbox” controls like ZoomFrame and CheckBoxList. As with most of my other open source code, PopUpThumbnail is available under the terms of an [...]
Tom, I made your change but it didn’t fix it. Items in the list aren’t redrawn to show their new state (enabled to disabled) until you mouse over them. If useRollover=false, then they are not redrawn by mousing over. Choose one of the list items (my list items are comboBoxes) *then* the list will redraw its correct state (disabled items will be redrawn as disabled, enabled items shown as enabled.)
Mike – you can set the style of the disabled items using backgroundDisabledColor and disabledColor.
[...] I found a sample of a disabled list items on http://joshblog.net but yet again it was dealing with list, not a combo box. In my case the combo box has very [...]
Thanks for an awesome tool! I’m using this for an AIR application.
I’m running into a weird error though. Please let me know if anyone else has come across a similar issue.
This component is attached on my applications mainwindow. If I maximize this window, for some reason the component’s checkboxes are null, ie, flex throws an exception about a null object reference. However, when I resize, the checkboxes are yet again available.
Any ideas?
Thanks!
Paul, is the null object reference coming from inside one of my list classes, or are you trying to access the list’s internal checkboxes from your own code? If it’s from my code, can you post the stack trace you get when the error is thrown? Thanks!
Thanks for the components..May God bless you even more…
Thanks for the components! It’s exactly what I’ve been looking for
Josh, I am a complete newb to flex. this is exactly what i was looking for. However can I get a , delimeted list of the values instead of the indices from the checkboxes?
John, you should be able to access the
selectedItemsproperty and build a delimited list from that.Josh, that returns [object Object] for each item. I have tried selectedItems and selectedItems.toString().
John, it is a collection of items. You will need to loop over it and grab the properties that you want to see from the items. There is no shortcut here. I’m just telling you where to get the data you need to do it yourself.
I want to thank you for all your work building this great component. I have one issue I was hoping you could help on and that is font sizing. I noticed that some of my letters were getting cutoff on the bottom and so I started playing with row height and font size. What I found was that larger fonts (i.e. 15 and above and regardless of the row height) are not displaying fully and appear to be limited to the height of the checkbox control associated with each row.
Todd, it may be that I’m not measuring the CheckBox height correctly when measuring the renderer, or not setting its dimensions correctly when drawing it. I don’t have time to investigate right now, unfortunately.
Really like this component, thanks so much for posting it. I am a newbe and wanted to know if it was even possible to add a number field next to the checkbox item and have the ability to periodically change the number within the field. Just wanted to know if was even possible before I dived into it. Thanks for any feedback you could provide.
Hi Josh,
Thanks for the tutorial. i tried using the code with flash player 10 flex 3, it shows error when i drag.
Stack trace:
Main Thread (Suspended: TypeError: Error #1009: Cannot access a property or method of a null object reference.)
mx.core::UIComponent/drawFocus
mx.controls.listClasses::ListBase/showDropFeedback
mx.controls.listClasses::ListBase/dragEnterHandler
flash.events::EventDispatcher/dispatchEventFunction [no source]
flash.events::EventDispatcher/dispatchEvent [no source]
mx.core::UIComponent/dispatchEvent
mx.managers.dragClasses::DragProxy/dispatchDragEvent
mx.managers.dragClasses::DragProxy/mouseMoveHandler
kindly help.
Sorry, i forgot to mention that i m using “AdvancedList” as popUp for a PopUpButton.
Saurav, I’m afraid I haven’t used this code in some time. It’s possible that changes to the framework have caused new bugs. Or, perhaps, it simply never was compatible with the use-case you mention (as used by a PopUpButton). I certainly never tested it in that situation.
You rock my sox. I used this in a combobox to disable items and it worked like a charm.
Thank you for great work! Very useful CheckBoxList component
Great components. I have 1 problem/bug though. I’m using the CheckBoxList and I want all the items to be disabled if the first item is selected. The first item is a ‘use all’ option while the other rows are different sub options.
[]use all
[]book1
[]book2
[]book3
You get the picture… Now, I set all the enabled properties to false when the first item is selected and I set them to true when it’s unselected. After doing this, the selectedIndices no longer work. If I have 2 items selected and deselect the first, THAT items index is in the selectedIndices while the other (still selected) row isn’t.
Here’s some code:
var lst:List = e.currentTarget as List; trace(lst.selectedIndices); //this one is correct !! var dp:ArrayCollection = lst.dataProvider as ArrayCollection; if(lst.selectedIndices.length > 0 && lst.selectedIndices[0] == 0) { for(var i:int = 1; i< dp.length; i++) { dp.getItemAt(i).canSelect = false; } } else { for(var j:int = 1; j< dp.length; j++) { dp.getItemAt(j).canSelect = true; } } dp.refresh(); trace(lst.selectedIndices);//but this one gives the wrong index.Has to do with firstSelectionData in the ListBase class, but don't know why …
Please let me know if you have a solution or if you no longer feel like supporting these components.
Thanks!
Jeroen, I don’t really have time to support these components anymore. Best of luck finding the solution. Feel free to post it here if you figure something out.
Hi everyone, i’m new in Flex and i need help urgently!!, how can i check all the checkboxes in the start of the program?… i tried by many days and i got any results. The listbox is fedeed by a httpresponse with the data, and works perfectly, but al the checkboxes are unchecked. PLEASE HELP!!!!! (and sorry the bad english)
Felipe, try setting the selectedIndices property. Just pass an Array of int values corresponding to each of the items you want selected. For instance, if you want the first three items selected, you’d do this:
If you want all the items selected, then you could use a for loop to go through each item in the data and add its index.
Thank you very much, you have created a wonderful tool!!