In this example we will show you how to use our SkinList component, which allows you to display a list of items with content laid out as you specify.  The SkinList is very customizable, and because of this it may appear a bit complicated at first, but it is not difficult to learn how to use.  As usual, first download, unzip, and link your classpath to the Component Library.  You can view an example of this component here, and download the FLA here.  Because this example relies partially on library symbols, for ease of skinning the list, you cannot simply cut and paste the code below, you must download the aforementioned FLA.

import yourminis.api.IWidget; import yourminis.components.SkinList; var this_mc = this; var widget:IWidget; var sl:SkinList; var myData:Array = [ {title:"Item 0",description:"Lorem ipsum dolor sit amet, consectetur adipisicing elit"}, {title:"Item 1",description:"sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"}, {title:"Item 2",description:"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"}, {title:"Item 3",description:"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur"}, {title:"Item 4",description:"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"}, {title:"Item 5",description:"Lorem ipsum dolor sit amet, consectetur adipisicing elit"}, {title:"Item 6",description:"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur"}, {title:"Item 7",description:"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"}, {title:"Item 8",description:"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur"}, ] addEventListener("widget-loaded",onWidgetLoaded); function onWidgetLoaded(evt:Event):void { widget.chrome.resizable = true; widget.addEventListener(widget.WIDGET_RESIZED,onWidgetResize); widget.chrome.setBounds(240,180,1000,1000); widget.chrome.editEnabled = true; widget.initWidget(240,180,0x000000); widget.chrome.setTitle("List Tutorial"); //Create the list //SkinList(_parent_mc, _w, _h, _cellHeight, _cellType:Class,_scrollType:Class,_cornerRadius:Number,_enableScroll:Boolean, _dataArray:Array) sl = new SkinList( this_mc, //_parent_mc:DispalyObject -- reference to the parent Sprite of the list 100, //_w:Number -- initial width of the list (can be changed with setSize(w,h) 100, //_h:Number -- initial height of the list (can be changed with setSize(w,h) 32, //_cellHeight:Number -- Height of each cell in the list cell, //_cellType:Class -- A link to the class used to represent a cell in the list scrollbar, //_scrollType:Class -- A link to the class used to represent the scrollbar for the list 0, //_cornerRadius:Number -- The corner radius of the list (for rounded corners) true, //_enableScroll:Boolean -- If true, shows the scrollbar, otherwise hides it myData //_dataArray:Array -- The array of data used by the list ); addChild(sl); resizeAll(); } function resizeAll() { var w = widget.width; var h = widget.height; contentBack.width = w - 8; contentBack.height = h - 42; contentBack.x = 4; contentBack.y = 30; if (sl) { sl.x = contentBack.x; sl.y = contentBack.y; sl.setSize(contentBack.width,contentBack.height); } } function onWidgetResize(evt:Event):void { resizeAll(); } function myFunction(ind:uint,desc:String) { widget.alert("You clicked on cell number: "+ind+". This cell has the following description: " + desc) }

As you can see, the parameters for the constructor have been commented out for you, but just to make a few clarifications...two of the parameters, "_cellType" and "_scrollType", are classes.  Here, we link to classes that are exported out in the Library Panel ("cell" and "scrollbar"). This allows us to edit these symbols within Flash, rather than hand-coding every aspect of their appearance as an ActionScript Class.  Also, when you construct the SkinList you pass in an array of data (the "_dataArray" parameter), just like with the YMVideoContainer.  However, this data array can be more complex than a list of strings -- in fact it can contain any kind of data in the array elements, from Objects to integers to Strings.  This is because you actually configure how each cell handles the data, which we will cover below.  Like many of the other components, there is a setSize(w,h) function that allows you to resize the list -- here the size represents the total size of the list, scrollbar included.  If you open the library item "cell" by double clicking on it, you will see the code below, as well as the various graphical elements of the cell.

//import flash.geom.*; var this_mc; var parent_mc; var index; var data; var cellHeight; var label_str:Array; var borderSize; function onInit(_par, _index, _data) { this_mc = this; this_mc.buttonMode = true; addEventListener(MouseEvent.ROLL_OVER, onOver); addEventListener(MouseEvent.ROLL_OUT, onOut); addEventListener(MouseEvent.CLICK, onClick); bg2_mc.visible = false; parent_mc = _par; //reference to the parent movie clip of the list index = _index; //the index number of this cell. The top cell is 0, the one below it 1, etc data = _data; //data passed into the cell cellHeight = 30; borderSize = 3; } function onResize(w,h) { cellHeight = 50; label_str = [ ["<font size='11' face='Verdana'><b>",0], [data.title,7], ["</b>\n",0], [data.description,7], ["</font>",0] ]; //This array gets automatically resized to fit the text. When the text can't fit, it is cut off and an elipsis (...) is appended. //Each array item is a two element array -- the first element is the string, the second is a number is the average width of a character, in pixels. 0 for no cuttoff. h = cellHeight; fg_mc.width = w; bg2_mc.width = bg_mc.width = w; bg2_mc.height = bg_mc.height = fg_mc.height = h - 1; label_txt.width = w-borderSize*2; label_txt.height = h-borderSize*2; label_txt.x = borderSize; label_txt.y = borderSize; line_mc.x = borderSize; line_mc.y = fg_mc.height-1; line_mc.width = w-borderSize*2; label_txt.htmlText = textFit(label_str); //resize the cell label } function onOver(evt:MouseEvent) { bg2_mc.visible = true; fg_mc.alpha = 0; label_txt.textColor = 0x008800; } function onOut(evt:MouseEvent) { bg2_mc.visible = false; fg_mc.alpha = 0; label_txt.textColor = 0x333333; } function onClick(evt:MouseEvent) { fg_mc.alpha = 0; parent_mc.myFunction(index,data.description); } function textFit(mytext:Array):String { var n; var total_str = ""; var i; var str; for (i = 0; i < mytext.length; i++) { n = mytext[i][1]; str = mytext[i][0]; if (n == 0) { total_str += str; } else { total_str += getTextFit(str,label_txt.width/n); } } return total_str; } function getTextFit(content:String,strLen:Number):String { if(content == "" || content == null || typeof(content) == "undefined") { return content; } var oldlen = content.length; content = content.substr(0,strLen); if (content.length != oldlen) content += "..."; return content; }

You can completely customize the contents of this cell, the only thing that is required is that you implement the five functions below (they can be empty, but the functions should at least exist).  A description of each function is included as well.

onInit(_par, _index, _data) -- This is called when the list is intialized.  It gives you an opportunity to set up the contents of the cell, as well as set up variables linking to important data.  "_par" will give you a reference to the parent of the list, or whatever you pass in to the "_parent_mc" parameter when constructing the list.  This is useful for calling functions not defined inside each cell (in this case, when a cell is clicked, "parent_mc.myFunction(index,data.description);" is called).  The "_index" parameter gives you access to the index of the cell, which corresponds to its position in the list.  The very top cell has an index of 0, the one below it 1, the one below that 2, and so forth.  The last parameter, "_data", gives you an item from the _dataArray that you pass in when constructing the SkinList. So, for example, if its the first cell in the list, it will pass in _dataArray[0] as the _data parameter here.

onResize(w,h) -- this is called whenever SkinList.setSize(w,h) is called -- it will pass in the appropriate width and height to you, based on whether or not the scroll bar is visible, and you can resize your cell contents accordingly.  Here we use a special function called textFit() to fit the text to each cell so that if it is cutoff an ellipsis appears ("...").  Text fit takes an array of String/Number pairs, each number represents the average width of a character in the string.  If the number is 0, it ensures that the string does not get cut off at all.  The textFit() function is not required, but you are welcome to use it to make your text look more well formated. 

onOver(evt:MouseEvent) --This is called whenever the user hovers over a cell with their mouse.  Here is a good place to turn on a highlight of some sort for interface/user feedback.

onOut(evt:MouseEvent) -- Likewise, this function is called whenever the user's cursor leaves a cell - this is a good place to turn off any sort of highlight you have implemented

onClick(evt:MouseEvent) -- This function is called when a user clicks on a cell.

It is easy to edit the appearance of any element inside the cell or scrollbar.  To edit the cell, open "cell" in the Library panel and double click on one of the elements -- you can then change its color by selecting the shape then using the color picker to pick a new color.  This can be done for any of the elements, you can also adjust opacity or add effects like bevels or drop shadows.  Note that the cell is completely customizable, and you can get rid of all these elements entirely and insert new ones -- however, you must update the code in this Symbol to reflect your changes.  The scrollbar is not like this, the symbols must remain named as they are, and nested in their current positions.  However, you can changed the colors and effects applied to the scrollbar.  Double click on the scrollbar symbol in the Library Panel to open it.  Inside the scrollbar, any symbol named "over" is the highlight that appears when a user hovers over that element of the scrollbar.  These symbols will be invisible until the user hovers over, and then they will disapear again when the user hovers out.

That covers it! On the surface, this class may appear a bit complicated because there is a lot of code that goes into creating a customizable list.  However, it should be fairly easy to tailor the list to your needs, just experiment a little bit if you curious what a particular item does. As usual, you can visit the yourminis Developer Network if you have any questions, and I will be happy to help you out.