Tuesday, May 24, 2011

HTML in AIR: Part 13

Today we continue making our custom HTMLHost class.

We already created a custom method that responds to the update of Javascript's window.document.title property. Today let's do the same with the window.open() JS function.

The corresponding HTMLHost function to window.open() is createWindow().

The window.open() method has 4 parameters that we can fill, all of them are optional. The first one is the URL of the page that's going to be in the new window. The second is the name of the window. The third parameter contains multiple settings and their values. The fourth parameter specifies whether the URL creates a new entry or replaces the current entry in the history list. Read more about the function here.

Now our updated HTML code looks like this:

<html>
<body>
<input type="button" value="Change title!" onclick="window.document.title='hello'">
<input type="button" value="Open window!" onclick="window.open('http://www.kirill-
poletaev.blogspot.com/', 'mywindow', 'width=1200,height=800,scrollbars=1,resizable=0')">
</body>
</html>

You might be thinking now, how to handle all those parameters in AS3, especially the third parameter which has so many possible settings?

Just for the third parameter of window.close(), there is a class in AIR called HTMLWindowCreateOptions. This object corresponds the settings that we enter as the third parameter of the said function. Here are the possible window.open() attributes and their corresponding HTMLWindowCreateOptions properties:

Window.open() attributeCorresponding HTMLWindowCreateOptions property
WidthWidth
HeightHeight
screenX, leftX
screenY, topY
LocationlocationBarVisible
MenumenuBarVisible
ScrollbarsscrollBarsVisible
StatusstatusBarVisible
ToolbartoolBarVisible
resizableresizable
fullscreenfullscreen

The createWindow() method in HTMLHost class needs to return a HTMLLoader. We can read all the parameters that were passed through JS, so we can set whatever we can - things like position, size, etc. We are going to use createRootWindow() to create this new NativeWindow object with HTMLLoader in it. There are some parameters that can't be applied here, for example, the location parameter. We don't have a location bar by default - what should we make visible/invisible then? Thus, there's no need to handle stuff like the location parameter. However, if you are making and AIR application which is a browser and has a location bar in it, you can read and use the location parameter. In our example, we don't do that.

In the end, your custom HTMLHost class will look like this:

package 
{
import flash.html.HTMLHost;
import flash.desktop.NativeApplication;
import flash.html.HTMLWindowCreateOptions;
import flash.geom.Rectangle;
import flash.html.HTMLLoader;
import flash.display.NativeWindowInitOptions;

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;
}

override public function createWindow(options:HTMLWindowCreateOptions):HTMLLoader
{
var boundRect:Rectangle = new Rectangle(options.x,options.y,options.width,options.height);
var myoptions:NativeWindowInitOptions = new NativeWindowInitOptions();
myoptions.resizable = options.resizable;
var newloader:HTMLLoader = HTMLLoader.createRootWindow(true,myoptions,options.scrollBarsVisible,boundRect);
return newloader;
}
}
}

Now, if you try the AIR code, the results will be pretty similar to the ones that the Javascript code in a browser has.

That's all for now! Next time we'll do more of this!

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

No comments:

Post a Comment