Saturday, June 20, 2009

musings on haXe and Flex

Right, so I come from a php background, but I have been playing around with a language called haXe

for a couple of years now. I was getting into making flash movies with haXe version 1.17 and updated
to haXe 2.0 in the begining of 2009.

So haXe is pretty cool and you can check it out at haXe.org.

Its creator Nicolas Cannasse has done a lot of work to make a language which is also a compiler and a
framework of classes that targets multiple platforms on multiple operating systems. You can use it to
program Flash, JavaScript, and it has libraries that you can use to extend haXe's functionality.

haXe comes with libraries like socket support, XML, regular expressions, database connections, etc., etc.
But there are also external libraries that can be used to expand the functionality of haXe.

One of these is the flex library which contains the header files so that haXe can be used with Flex.

Unfortunately, I have not been able to get haXe and Flex to work together using the flex library since
there may still be some work that needs to be done with the haXe compiler for it to be able to use the
flex header files.

Sigghhhh.

But that is not going to throw me off. I started playing around with Flex in preparation for the day
that I will be able to use haXe with Flex. This posting is a summary of those things I have learned
about Flex and is basically a repository for my own musings, but hey - if it helps someone else, great.

So, the flash movie above is based on Adobe Flex 3.2 Language Reference's example under Sprite (see the
Language Reference and look for the SpriteExample.as example).

It works great as a standalone actionscript app, but if you try to incorporate it into a mxml file,
you get problems. Mainly because you can't addchild(sprite) with mxml. You have to use a UIComponent
to act as the container for the sprite.

To quote from the Adobe's Language Reference under the heading "Using examples in the ActionScript 3.0":
"Note: If you test ActionScript examples that use the addChild() ActionScript
method with Flash Player display objects (like a text field) within an MXML
application, you will need to attach the code to a Flex UIComponent instead
of adding the Flash Player display object.
"

So here is the modified SpriteExample.as and an mxml file which produces the above flash movie.

// ApplicationCanvas.as
package {
import flash.display.Sprite;
import flash.events.*;
import mx.containers.Canvas;
import mx.core.UIComponent;

public class ApplicationCanvas extends Canvas {
private var size:uint = 100;
private var bgColor:uint = 0xFFCC00;

public function ApplicationCanvas() {
super();
var uiComponent:UIComponent = new UIComponent();
var child:Sprite = new Sprite();
child.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
child.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
draw(child);
uiComponent.addChild(child);
this.addChild(uiComponent);
// you can't just add the child like SpriteExample.as does
//addChild(child);
}

private function mouseDownHandler(event:MouseEvent):void {
trace("mouseDownHandler");
var sprite:Sprite = Sprite(event.target);
sprite.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
sprite.startDrag();
}

private function mouseUpHandler(event:MouseEvent):void {
trace("mouseUpHandler");
var sprite:Sprite = Sprite(event.target);
sprite.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
sprite.stopDrag();
}

private function mouseMoveHandler(event:MouseEvent):void {
trace("mouseMoveHandler");
event.updateAfterEvent();
}

private function draw(sprite:Sprite):void {
sprite.graphics.beginFill(bgColor);
sprite.graphics.drawRect(0, 0, size, size);
sprite.graphics.endFill();
}
}
}

// mxml file to run the application canvas. Notice its using a custom componenet called foo which calls the .as file
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:foo="*">
<foo:ApplicationCanvas/>
</mx:Application>