Adobe AIR is such a great technology from Adobe for developers who wish to use their existing web development knowledge to create Desktop application. If you would like to learn more on using jQuery with AIR please do keep an eye on Andy Mathews and Jason Dean blogs.
In my previous post about AIR for Web Developers where I have explained about Installing AIR SDK and creating, testing and running your AIR Application using command prompt in Windows OS and for using Aptana with AIR follow this blog post by Andy Mathews. So now let's starts with a simple example of creating windows in AIR Application. Apart from the initial main window, we can also creates other windows in HTML based AIR application. We can create two types of window and they are called as standard HTML windows which look similar as windows in web browsers and Native windows which look similar to the windows of native Operating system (Windows, Mac, or Linux).
The Standard HTML type window in AIR can be created using window.open() method with the following parameters.
In the above code I passed three values the url parameter, name and features (height, width, toolbar, scroll bar etc,). The value for the url parameter (myWindow.html) can be either within the AIR application sandbox or outside of the application sandbox scope like external pages or website url. The new window will load the content of the page once user clicks the button in AIR Application.
To create a native window in AIR application first thing we have to do is to create an instance of NativeWindowInitOptions class of flash.display package. This class defines the necessary options for to create native window instance. It has the following 6 properties systemChrome (standard, none), transparent, type (normal, lightweight, utility), maximizable, minmizable and resiazable. Other then systemChrome and type all the other properties will take Boolean values either true or false. In the below code we just created an object of type NativeWindowInitOptions class.
Next we are creating a Rectangle object which aligns as 200 pixels from left and bottom with 300 pixels as height and width.
Using HTMLLoader.createRootWindow method we can create window with more options. It has the following 4 properties, visible to set whether the window is visible or not, windowInitOptions for to specify the object which holds the initialization options, scrollBarsVisible for display scroll bars and bounds for setting the window boundaries.
Now we need to load the actual page with content to do that we need to use the load() method of HTMLLoader object. Before using load() method lets fetch the actual file and assign it to a variable nativeWindowPage.
To summarize the above code create a new function createNativeWindow() and call it in the onclick event of an button. I have added AIRAliases.js file at the top of which helps to provide alias definition for to access the runtime class with lesser amount typing in AIR applications.
We have created the Native window in AIR Application with just 5 lines of code. Adobe AIR Rocks!
Well written Akbarsait...
I'll be bookmarking this one. I did notice you have a type in this line:
Other than that it's a good post.
Thanks for the comments. :-) Looking forward for your jQuery and AIR series blog post.
I should be publishing another one today, probably in the next few hours.
Nice tutorial, thank you..
Visit my blog and find more adobe air apps..
How do you move this new created window. I want to say if you dragg with the mouse, what's the code?
CFML/Web/Mobile/Salesforce/Agile Enthusiast, Husband & Dad, an avid Technology, Android fan and creator of GetCFMLJobs.com. Currently working as a Sr.Consultant & TPM in Phoenix, Arizona.