LookingGlass is an idea that I've been thinking about for a long time, but it's never quite come to fruition before. The concept is to, through the use of proxies, provide a nearly seamless integration of javascript and actionscript. For phase 1, I concentrated on getting javascript objects into actionscript.

The demo is not terribly impressive visually, but the code is what shines.

Have a look at the demo and then come back. Or open it in a new tab or something.

LookingGlass consists of an actionscript side and a javascript side. The javascript side is the LookingGlass.js file. I wanted to inject that content dynamically, but could not due to some constraints around eval. Anyway, you've got to include it:

       <script type="text/javascript" src="js/LookingGlass.js"></script>
   

That's it for the javascript side, though you can do more. LookingGlass provides a hook to the console debug functionality of firebug and firebug lite (as I've shown in the demo).

I strongly suggest including a cross-browser javascript library such as jquery to make it easier to do things with the javascript objects which will work in all browsers. On a side note, how do people develop anything in IE? It's just plain awful.

On the actionscript side, you must include the LookingGlass class

       import me.cosmodro.lookingglass.LookingGlass;
   

And then there are two methods of LookingGlass that let you grab javascript objects from the page:

• LookingGlass.$ will pass through to any already defined $ function (such as prototype or jquery), or if there isn't one, it just uses document.getElementById.
• LookingGlass.eval will pass through to eval.

Both of these methods return transparently proxied javascript objects. Once you have one, you can call methods on it, get and set attributes, whatever. You can even get functions as values, pass them around, and call them.

Here's the relevant code from the demo. Note the use of jquery methods without having to do anything special.

               var a:Object = LookingGlass.$('#mainText');
               LookingGlass.debug("got ", a);
               a.html('This came from actionscript');

        var htmlDoc:Object = LookingGlass.eval('document');
        LookingGlass.debug("htmlDoc", htmlDoc);

        var c:Object = LookingGlass.eval('makeAnElement');
        //IE is retarded, and errors when trying to use apply with document methods.  
        //I recommend using jquery or other browser neutral 3rd party lib.
        var notherdiv:Object = c("DIV"); //htmlDoc.createElement("DIV"); 
        notherdiv.id = 'notherdiv';
        LookingGlass.debug("notherdiv", notherdiv);
        notherdiv.innerHTML = "So did this (click me)";
        a.append(notherdiv);

        var nd:Object = LookingGlass.$('#notherdiv'); //same as notherdiv above.
        var clickFunc:Object = LookingGlass.eval('logClick');
        LookingGlass.debug("clickFunc", clickFunc);
        nd.click(clickFunc);

        var ynd:Object = LookingGlass.$('<div id="yetAnotherDiv">howdy</div>');
        a.append(ynd);

        var anarray:Object = LookingGlass.eval('anarray');
        LookingGlass.debug("anarray: ", anarray);
        LookingGlass.debug("anarray[0]", anarray[0]);

Here's the source

Send feedback to steve@cosmodro.me