Category Archives: Libraries

Added TreeList to MinimalComps

I love the MinimalComps set of components, but always thought it was missing a folder type tree component. I finally needed one the other day, and found other tree components that where too bloated, and not “in the spirit” on MinimalComps, so decided to make one myself. +1 for opensource :)

It inherits from the standard MinimalComps List component, so has basically the same interface. It also uses it’s own custom ListItem called TreeListItem. The data object you pass in is almost the same as the List, except each item object can contain and array of its children items, using the key “items”, and you can optionally set an “expanded” flag on any item. Expanded is set to true for each item by default.

[actionscript3]var treeItems:Array = [
{ label:’treelist_test_app’, items:[
{ label:’bin’, expanded:false, items:[
{ label:’js’, items:[
{ label:’swfobject.js’ }
] },
{ label:’expressInstall.swf’ },
{ label:’index.html’ },
{ label:’TreeListTestApp.swf’ }
] },
{ label:’lib’, items:[] },
{ label:’obj’ , items:[
{ label:’TreeListTestAppConfig.old’ },
{ label:’TreeListTestAppConfig.xml’ }
] },
{ label:’src’, items:[] },
{ label:’’ },
{ label:’TreeList Test App.as3proj’ },
] }

Then just create the TreeList like any other component.

[actionscript3]testTree = new TreeList(mainContainer , 0, 0, treeItems);
testTree.setSize(200, 200);
testTree.addEventListener(Event.SELECT, handleTestTreeSelect);[/actionscript3]

Once the component is setup, just handle the SELECT event just like you would with the List

[actionscript3]private function handleTestTreeSelect(e:Event):void
trace(‘TreeList select:’, TreeList(;

There are a few new methods to the TreeList, such as collapseAll(), expandAll(), collapseItem(item:Object), expandItem(item:Object), and toggleExpandItem(item:Object). They should all be pretty straight forward. To have a play and see what the TreeList is about, take a look at the quick example I made here : Adam Harte – MinimalComps TreeList test.

You can grab the TreeList and TreeListItem from my fork on GitHub for now (AdamHarte / minimalcomps – GitHub), but I am hoping it will be merged into the main repo soon. I think the TreeList will need a bit of real-world testing, but most of the functionality comes from the List anyway. Feel free to have a play and let me know if there are any bugs.


On-screen joystick with Gamepad-haxe

Only a few days after I tweeted about porting Gamepad over to haXe, I see a tweet from Philippe Elsass saying he has added an on-screen joystick to the library. This is great, because it was the next thing on my list after sorting out some issues with getting accelerometer data from my Android device with NME. Open-source is fantastic btw!

I just merged this update with my main branch on GitHub and had a good play, so thought I would give a quick run down on how to use it. Philippe has done a great job, so it’s pretty simple, but even looking at his code has taught me quite a bit about haxe.

First thing you need a Gamepad instance

[actionscript3]var gamePad:Gamepad = new Gamepad(stage, false, 0.4);[/actionscript3]

Then you need something to control with the joystick, a Car possibly:

[actionscript3]var car:Sprite = new Sprite();, 1);, -50, 50, 100);;
car.x = 300;
car.y = 200;

Before we can create the on-screen joypad, we need to get some graphics ready to use for the controls. We need a background and a thumb to touch or click on and drag around.

[actionscript3]var thumb:Sprite = new Sprite();;,25,25);
var bg:Sprite = new Shape();, 0.3);, 50, 50);[/actionscript3]

Now we can add the on-screen joypad and pass the gamepad, and the two graphic assets to it.

[actionscript3]var gamePadView:OnScreenJoystick = new OnScreenJoystick();
gamePadView.init(gamePad, 50, thumb, bg);
gamePadView.x = 440;
gamePadView.y = 330;

So now we have everything set up that we need. All we need to do is handle the update tick. The OnScreenJoystick needs its update method called to keep it in sync with the Gamepad. The OnScreenJoystick will automatically update the Gamepads properties, so we can use the Gamepad the same way we always do from this point.

[actionscript3]private function onTick():Void

car.rotation += gamePad.x * -gamePad.y * 2;

var carAngle:Float = -car.rotation * (Math.PI / 180);
car.x += Math.sin(carAngle) * gamePad.y * 5;
car.y += Math.cos(carAngle) * gamePad.y * 5;

Now when you run the app you should have a car that you can drive around with your on-screen joystick. Easy!

All this example code is either from Iain Lobb’s original Gamepad testers or from Philippe Elsass’ modifications for the on-screen joystick. You can have a play for yourself with the Gamepad example tests, or get the source, which comes with the tests.