I’m on a roll!
[kml_flashembed publishmethod=”static” fversion=”10.0.0″ movie=”http://www.bit-101.com/blog/wp-content/uploads/2010/03/List.swf” width=”120″ height=”220″ targetclass=”flashmovie”]
[/kml_flashembed]
Now that we have a scroll bar, making a List was not all that hard. Here you can see a generic list with 1000 items. The default item color, rollover color and selected color are all customizable, as is the list item height. I improved a bunch of stuff about the scroll bar and a lot of the time this took was going back and forth between the text area and list and making sure the scroll bar worked perfectly in both of them.
You can pass in an array of items in the constructor. Or you can add items manually through addItem or addItemAt. Items can be strings or any object. If the item is an object, it will look for a label property on the object and use that as the item label. You also have removeItem, removeItemAt, and removeAll as well as selectedIndex and selectedItem. I just realized that there is a bug in the downloadable SWC/zipped source versions that will cause an error if you do not pass an array in the constructor. Workaround is to just pass an empty array. This is fixed in the SVN repository.
Eventually, I want to add a listItemClass that will allow you to set a custom class for your list items. Next build for sure. Then you can extend the existing ListItem class and make your own item renderers.
Note that this List does NOT use any smart item creation and swap scrolling. Each item you add is created and put in a container that is scrolled. Even so, at 1000 items, it seems to perform perfectly fine. If you get up into the multiple thousands though, it’s going to start to break down and perform like crap. Also, every time the list is redrawn, all items are removed and recreated. So yes, there’s lots of room for optimization, but for the purposes of “minimal” components, this works fairly well. If you need lists with thousands of items that are updating redrawing all the time with complex item renderers, you have the wrong component set. (I LOVE having that crutch to fall back on!)
Anyway, hope this is useful. I think a Combo Box / Dropdown is on the horizon for the next week or so.
Also, I updated the version numbering. I started out at 0.90 or something and was going 0.91, 0.92, 0.93, etc. then up to 0.100, 0.101, 0.102. But realized this was all wrong. So I’m going with a major.minor.revision system. Thus we have 0.9.0 for the current build. Next will be 0.9.1. Once I add a combo box I’m going to address any remaining bugs, clean up the code even more, solicit any more bugs and enhancements, and when all is nice and stable, call it 1.0.0!
You’ve been adding some nice components recently. Thanks for your time and effort. I enjoyed reading your post on skinning. I did some basic skinning by just using a background bitmap.
One more thing I’d like to know: What would be the best way to handle a component resize ? Like, for example, resizing the complete accordion and everything inside does too ? Or resize a Window with an accordion inside…. ?
Any ideas would be helpfull.
Best regards, Christian Lehmann
I can see a ComboBox in the near future 😉
Very near. 🙂
wow, this is great … you rock my socks !!!
I generate hx headers from MinimalComps_0_9_1.swc file,but skip ScrollSlider
public class ScrollBar extends Component
{
protected var _upButton:PushButton;
protected var _downButton:PushButton;
protected var _scrollSlider:ScrollSlider; //—– ScrollSlider class missing
protected var _orientation:String;
protected var _lineSize:int = 1;
I have found ScrollSlider,it is internal class.
Haxe can’t generate correct hx headers for internal class.
package com.bit101.components;
extern class ScrollBar extends Component {
var lineSize : Int;
var pageSize : Int;
var value : Float;
function new(orientation : String, ?parent : flash.display.DisplayObjectContainer, ?xpos : Float, ?ypos : Float, ?defaultHandler : Dynamic) : Void;
function setSliderParams(min : Float, max : Float, value : Float) : Void;
function setThumbPercent(value : Float) : Void;
private var _downButton : PushButton;
private var _lineSize : Int;
private var _orientation : String;
private var _scrollSlider : ScrollBar.as$32.ScrollSlider;
private var _upButton : PushButton;
private function onChange(event : flash.events.Event) : Void;
private function onDownClick(event : flash.events.MouseEvent) : Void;
private function onUpClick(event : flash.events.MouseEvent) : Void;
}