fboyle.com

haXe is an amazing project.  I've been looking at it recently as an option for producing swfs that potentially perform better than ones produced with similar code written in AS3.  Even more interesting, however, is the ability to target more than one platform with the same code base.  There are several target platforms but the one that captures my attention at this moment is the Javascript target and the fact that existing Haxe libraries such as Physaxe can be used with the HTML5 Canvas element.

The Physaxe library contains a custom type called JsCanvas that acts as a wrapper for the Canvas element and it's 2d drawing context.  JsCanvas shares the same method names as the graphics property belonging to display objects in Actionscript.  Compiler conditionals are then used in another class called FlashDraw to determine whether or not a member variable will be of type flash.display.Graphics or phx.JsCanvas.

It's worth checking out.

I finally got round to checking out the Flex AJAX Bridge (FABridge) over at Adobe Labs after hearing about it at MAX from Andrei Dragomir.

It essentially provides a way of making Flex components and Actionscript accessible to Javascript and vice versa.

Trying to hook up Javascript and Flash in the past has always felt very hackish-like to me and I tended to avoid it and it's security and cross-browser compatibility headaches where possible.  (Having said that, I haven't investigated the Javascript Flash Integration Kit for AS2).  FABridge appears to offer a very clean and pleasant way to integrate both technologies.  This has been my experience so far.

An additional little gem that vastly enhances the Javascript coding experience is the JSEclipse plugin for the Eclipse environment.  It provides syntax highlighting and some debugging capabilities amongst other things - I haven't delved too deeply yet but I like what I see so far!  It is definately a plugin that I can't do without now that I know about it, especially now that I'm so cosy working in Flex Builder with Actionscript.

Adding FABridge to a project couldn't be simpler in Flex Builder 3.  It's as simple as right-mouse clicking the project name in the Navigator panel and selecting 'create AjaxBridge...'

This is a screen capture from Flex Builder Beta 3 but it is slightly different to what it looks like in the feature video on Adobe Labs.

I'm not going to go into every detail here on how to use FABridge because it is documented on Adobe Labs.  What I will mention is that several files are automatically generated and you can use these files as a starting point.

I've created a very simple demo that consists of several javascripts function that I dropped into ajax_demo.js;


ajax_demo.callback = function() {
alert("Hello to javascript from Flex!");
};
//associate fabridge_demo.callback with a Flash button's click event (cool!)
b_ajax_demo_root.getButton().addEventListener("click", ajax_demo.callback);
//using these in html tags
ajax_demo.getFlashText = function () {
alert("swf input text: "+b_ajax_demo_root.getTxt_input().getText());
};ajax_demo.alertme = function(){
b_ajax_demo_root.genAlert( "Hello Flex, just your ECMA cousin saying hello!" );
};

This integrates with the swf file that results from ajax_demo.mxml

Click here to see the demo. 

Here is ajax_demo.js.