Monday, May 23, 2011

HTML in AIR: Part 12

Today we will start learning about handling standard JavaScript commands.

A lot of standard JS commands are supposed to interact with the application it is, which is, in most of cases, a web browser. For example, there's a JS property called window.status, which, when changed, updates the value of a status bar in the browser.

But in our case, we aren't using a web browser, but an AIR application, which doesn't have any default responses to stuff like window.status. We can, however, create our own handling system for these commands. In the next few tutorials, we will learn how.

We can tell AIR to handle Javascript methods and property updates that are listed below using a HTMLHost object. This object has methods and properties that correspond to Javascript methods and properties.

Hereare the JS methods and the corresponding functions of HTMLHost:

Javascript methodsCorresponding HTMLHost methods
Window.open()createWindow()
Window.close()windowClose()
Window.blur()windowBlur()
Window.focus()windowFocus()
Window.moveBy()windowRect()
Window.moveTo()windowRect()
Window.resizeBy()windowRect()
Window.resizeTo()windowRect()

And here are the JS parameters and HTMLHost methods that are called once the corresponding property's value is updated:

Javascript propertiesCorresponding HTMLHost methods
Window.statusupdateStatus()
Window.locationupdateLocation()
Window.document.titleupdateTitle()

To take advantage and edit these functions, we can create a new class which extends HTMLHost, then override any methods that we want to use. Then, when that is done, we can apply this HTMLHost object to the HTMLLoader object as htmlHost property.

In the next tutorials, we will do that with most of the functions and properties that are listed above. In this tutorial, let's try to do one as an example.

I would write about handling the window.status property update for a start as an example, but, this property changes text in the status bar that is not support by most browsers nowadays, so I'm not going to do that. Instead, let's handle the window.document.title property.

First of all, let's create the HTML file. This will be a simple page with a button on it, that changes the title of the page when it is clicked. I called the HTML file example.html.

<html>
<body>
<input type="button" value="Change title!" onclick="window.document.title='hello'">
</body>
</html>

Now we need to create a new .as class file. We'll call it myHTMLHost.

The first thing we do is create the base for the class, which extends HTMLHost, has one boolean parameter and calls super() in the constructor:

package 
{
import flash.html.HTMLHost;
public class myHTMLHost extends HTMLHost
{
public function myHTMLHost(defaultBehavior:Boolean=true)
{
super(defaultBehavior);
}
}
}

Now we can start overriding methods. As stated in the table above, window.document.title corresponds to updateTitle() method of the HTMLHost class. Let's override it. We will take the value that the JS code is trying to pass to us, and then set it to the title property of the main nativeWindow object.

package 
{
import flash.html.HTMLHost;
import flash.desktop.NativeApplication;
public class myHTMLHost extends HTMLHost
{
public function myHTMLHost(defaultBehavior:Boolean=true)
{
super(defaultBehavior);
}

override public function updateTitle(titlestr:String):void{
NativeApplication.nativeApplication.openedWindows[0].title = titlestr;
}
}
}

Now let's create a new AIR project in the same directory as the myHTMLHost.as file and example.html.

Here's the code for it:

import flash.html.HTMLLoader;
import myHTMLHost;
import flash.net.URLRequest;

var myHtml:HTMLLoader = new HTMLLoader();
addChild(myHtml);
myHtml.width = stage.stageWidth;
myHtml.height = stage.stageHeight;
myHtml.htmlHost = new myHTMLHost();
myHtml.load(new URLRequest("example.html"));

Now if you did everything right and try to test the code, your AIR application will load the HTML content of the page. Click on the "Change title!" button, and the title of the AIR application window will change.

Next time we will override more methods!

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 13
HTML in AIR: Part 14
HTML in AIR: Part 15
HTML in AIR: Part 16
HTML in AIR: Part 17

No comments:

Post a Comment