Thursday, May 26, 2011

HTML in AIR: Part 15

Today we'll learn how to refer to Actionscript elements from Javascript.

All the time in the previous tutorials we've been referring to/controlling Javascript elements using Actionscript, but it is also possible to do it vice-versa.

When a HTML page is loaded into AIR, all AIR features (including standard Flash Player API features) get accessible from Javascript. We can get access to classes and functions of the runtime environment using window.runtime.

For example, if we wanted to trace something, we could simply write window.runtime.trace("hi"); in JS. It's that simple!

If we want to refer to classes that are located in packages, we can refer to them using the full class name after window.runtime.

For example, we can draw a red square like this:

<html>
<script>
function drawsquare(){
var myshape = new window.runtime.flash.display.Shape();
myshape.graphics.lineStyle(1, 0, 1);
myshape.graphics.beginFill(0xff0000, 1);
myshape.graphics.drawRect(0, 0, 100, 100);
myshape.graphics.endFill();
var mainwindow = window.runtime.flash.desktop.NativeApplication.nativeApplication.openedWindows[0];
mainwindow.stage.addChild(myshape);
}
</script>
<body onload="drawsquare()">
</body>
</html>

As you can see, when we created the Shape object we referred to the class by its full path - window.runtime.flash.display.Shape(). After that's done, we can refer to all the standard properties and methods just like in AS. Also we refered to the main NativeWindow object using window.runtime.flash.desktop.NativeApplication.nativeApplication.openedWindows[0].

We can refer to standard classes this way, but we can also refer to custom classes. To make custom classes available to use from Javascript, we need to load the HTML page into the same application domain where the AS classes are. We can do that using ApplicationDomain. Basically, this is the directory where the code is stored. Usually, when HTML or swf is loaded into an AIR application, it loads into a new ApplicationDomain, which is different from the ApplicationDomain that the main AIR application uses.

As a result, the loaded content doesn't have access to the code that is stored in this main ApplicationDomain. If you want to let Javascript load custom AS classes, you can load the HTML content into the main ApplicationDomain by setting your HTMLLoader object's runtimeApplicationDomain property to flash.system.ApplicationDomain.currentDomain.

myHTML.runtimeApplicationDomain = ApplicationDomain.currentDomain;

And then refer to custom classes the same way we did the the Shape class before.

For example, if we have a class com.awesomeclass.Example, we would refer to it as window.runtime.com.awesomeclass.Example in Javascript.

That's all for now!

Thanks for reading!

Related:

HTML in AIR: Part 1
HTML in AIR: Part 2
HTML in AIR: Part 3
HTML in AIR: Part 4
HTML in AIR: Part 5
HTML in AIR: Part 6
HTML in AIR: Part 7
HTML in AIR: Part 8
HTML in AIR: Part 9
HTML in AIR: Part 10
HTML in AIR: Part 11
HTML in AIR: Part 12
HTML in AIR: Part 13
HTML in AIR: Part 14
HTML in AIR: Part 16
HTML in AIR: Part 17

No comments:

Post a Comment