This is an alternative to the bulky list component that comes standard with CS3 and CS4 . The bulky component is 30KB!
The XList Component is only 5.5KB! and supports the main list component methods like data provider, addItem and removeItemAt.
This component DOES use the mouse wheel. It is disabled on activeden previews
It is created using ONLY the drawing API so their is no movie clips you have to copy to your current project. This is the code I am using for the preview above. All the properties listed below are OPTIONAL and are NOT required to create a list.
//--- Import the required classes
import com.ronnieswietek.components.XList;
import com.ronnieswietek.components.events.XListEvent;
//--- I will use this array to populate the list.
//--- This array can be generated through XML or typed as static text like I did below
var myData:Array = [
{label:"row1",option1:"A",option2:"a",icon:"icons/icon1.png"},
{label:"row2",option1:"B",option2:"b"},
{label:"row3",option1:"C",option2:"c",icon:"icons/icon3.png"},
{label:"row4",option1:"D",option2:"d"},
{label:"row5",option1:"E",option2:"e",icon:"icons/icon5.png"},
{label:"row6",option1:"F",option2:"f",icon:"icons/icon6.png"},
{label:"row7",option1:"G",option2:"g",icon:"icons/icon2.png"},
{label:"row8",option1:"H",option2:"h",icon:"icons/icon4.png"},
{label:"row9",option1:"I",option2:"i",icon:"icons/icon7.png"}
];
//--- Make a new instance of XList. I pass myData to the constructor.
//--- If I leave the constructor empty, I can use the addItem() method
var xList:XList = new XList(myData);
//--- All the public properties available to you to change
xList.x = 35;
xList.y = 50;
xList.iconHeight = 16;
xList.iconWidth = 20;
xList.font = "Verdana";
xList.fontSize = 9;
xList.fontColor = 0x000000;
xList.rowColor1 = 0xEEEEEE;
xList.rowColor2 = 0xFFFFFF;
xList.rollOverColor = 0xB5D66f;
xList.trackColor = 0xCCCCCC;
xList.handleColor = 0x333333;
xList.trackPadding = 1;
xList.rowPadding = 1;
xList.rowCurvature = 7;
xList.scrollCurvature = 7;
xList.rowHeight = 30;
xList.rowWidth = 500;
xList.visibleRows = 5;
//--- Add a XListEvent for when a user selects a row
xList.addEventListener(XListEvent.ROW_SELECT, onSelection);
//--- This function gets called when a user selects a row.
//--- If you add aditional properties you can access them by e.data.***;
//--- For example, you have a property on every row called 'firstName', you would access that property by e.data.firstName
function onSelection(e:XListEvent):void
{
if (e.data.icon)
{
trace("Label: " + e.data.label + "\noption1: " + e.data.option1 + "\noption2: " + e.data.option2 + ", icon: " + e.data.icon);
}
else
{
trace("Label: " + e.data.label + "\noption1: " + e.data.option1 + "\noption2: " + e.data.option2);
}
}
//--- Finally, add xList to the display list
addChild(xList);

26 Purchases
15 Comments