ear-fung.us I’m a programmer. I’m also pro-grammar.

Actionscript 3.0 List Toggler

So today, I found myself in need of a really long list inside a List() component in Flash. Thing is, that list needed to be able to toggle the elements on and off so that the toggled-on items would be used in another set of logic.

As far as I know, there's no way to embed a checkbox component inside a list component using a dataprovider. So I devised a solution.

Basically, I have two movies in the library (exported for actionscript) and create a DataProvider(), linking it to a List() component. I set the List's "iconField" to the movie clip that looks like an unchecked checkmark and then toggle to the checked movieclip when that list item was selected.

See below how I did it.

import fl.controls.List;
import fl.events.ListEvent;
import fl.data.DataProvider;

var dp:DataProvider = new DataProvider();
//Put a bunch of things in the list
for(var i = 0; i < 20; i++)
{
	dp.addItem( { iconSource:UncheckedBox, label:"Item "+ i } );
}

var list:List = new List();
list.iconField = "iconSource";
list.dataProvider = dp;
list.width = 150;
list.height = 200;
list.x = 10;
list.y = 10;
addChild(list);

list.addEventListener(ListEvent.ITEM_CLICK, toggleState);

function toggleState(e:ListEvent):void
{
	if(dp.getItemAt(e.index).iconSource == CheckedBox)
	{
		dp.getItemAt(e.index).iconSource = UncheckedBox;
	}
	else
	{
		dp.getItemAt(e.index).iconSource = CheckedBox;
	}
	//Must invalidate the list stage element so that it redraws with the new icon.
	list.invalidate();
}

In this example, you can select items on the left and the list on the right updates with only the content that is selected:

Here's the download to see how it's all put together. (602kb)

If I'm going about this all wrong or if you really can embed a checkbox into a list component, please leave me a note in the comments below.