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.
September 28th, 2008 - 16:47
Exactly what I need…. but your download link is 404!
September 28th, 2008 - 16:50
Sorry about that… I fixed the link to the zip file and it should be hunkey-dorey now.
September 28th, 2008 - 18:30
Sweet. Speedy too!
I have not tried to load a checkbox component into a list object, but I like your implementation, so I’ll work it into my code. Many thanks.
September 28th, 2008 - 18:45
Haven’t merged it into my code as yet, but I did pull all the ActionScript out of your .fla file and move it into a .as file (Document class is “List Toggle”). Here’s the code (only slightly modified with naming conventions and formatting).
package
{
import flash.display.*;
import fl.controls.List;
import fl.events.ListEvent;
import fl.data.DataProvider;
public class ListToggle extends MovieClip
{
private var dp:DataProvider = new DataProvider();
private var dp2:DataProvider = new DataProvider();
private var sList:List = new List();
//————————————————————————
public function ListToggle()
{
init();
}
//————————————————————————
public function init()
{
//Put a bunch of things in the list
for(var i = 0; i < 20; i++)
{
dp.addItem( { iconSource:UncheckedBox, label:”Item “+ i } );
}
sList.iconField = “iconSource”;
sList.dataProvider = dp;
sList.width = 150;
sList.height = 200;
sList.x = 10;
sList.y = 10;
addChild(sList);
var selectedList:List = new List();
selectedList.dataProvider = dp2;
selectedList.width = 150;
selectedList.height = 200;
selectedList.x = sList.x + sList.width + 20;
selectedList.y = sList.y;
addChild(selectedList);
sList.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;
}
sList.invalidate();
updateChecked();
}
//————————————————————————
function updateChecked():void
{
dp2.removeAll();
for(var i = 0; i < dp.length; i++)
{
if(dp.getItemAt(i).iconSource == CheckedBox)
{
dp2.addItem({label:dp.getItemAt(i).label});
}
}
}
//————————————————————————
//————————————————————————
}
}
June 30th, 2009 - 00:24
Is there a way to set the iconField without using a dataprovider of the List Control?
What I want todo is change the icon on fly without using a dataprovider. I’ve made this work using the dataprovder but not without dataprovider? Any help would be awsome. Thanks in advance.
import fl.controls.List;
import fl.events.ListEvent;
var oList:List;
oList.addEventListener (ListEvent.ITEM_CLICK,clicked);
for (var i=0; i<1000; i++)
{
oList.addItem ({label:"item: " , iconField:"MyClassLInkage"});
}
function clicked (e:ListEvent)
{
var list:List = List(e.target);
var item = list.getItemAt(e.index);
item.iconField ="MyClassLinkage";
}
June 30th, 2009 - 09:21
Yes, you should be able to use the index of the clicked item from the ListEvent that is passed into the “clicked” function.
November 15th, 2009 - 13:31
Hello, i am trying to display icon within a List. Icons are retrieved from an XML file as well as labels. I managed to display the label text, but the icons aren’t showing properly , only the last icon in the XML is showing when i rollover on any item.
function xmlLoaded(event:Event):void
{
//trace(MainTimeLine ——————– Fn xmlLoaded);
productsXML = XML(xmlLoader.data);
var i :int;
var j :int;
var categoryArray :Array = new Array();
var ico :UILoader = new UILoader();
ico.scaleContent=false;
for (var category:String in productsXML.category)
{
var categoryName:String = productsXML.category[category].@name;
var icoURL:String = productsXML.category[category].ico;
trace(“icoURL:”, icoURL);
ico.source = icoURL;
categoryArray.push({label:categoryName, icon:ico});
trace(categoryArray);
}
var categoryDP:DataProvider;
categoryDP = new DataProvider(categoryArray);
categoryLi.dataProvider = categoryDP;
categoryLi.iconField = “icon”;
categoryLi.rowHeight = 64;
}
//XML
asset/icons/shirt.png
Men’s Green Polo
SN10001
Standard Mens’s Polo shirt in a wide variety of colors.
polo_green
£
49.99
1
November 15th, 2009 - 13:34
XML:
–product>
–
–asset/icons/shirt.png
—
–Men’s Green Polo
– SN10001
— Standard Mens’s Polo shirt in a wide variety of colors.
–polo_green
– £
— 49.99
— 1
—
—
–