Apollo Beta Sneak: Transparent HTML Windows
Native windowing is an Apollo feature I personally find very exciting because it makes Apollo more than just a way to offer offline web applications. Native windows and custom chrome won’t be new in the Apollo Beta for Flash developers, but it will be new for HTML developers! While JavaScript can spawn new browser windows today, those windows still fundamentally belong to the browser. With Apollo, those windows belong to your application and you can control the size, position, z-index, transparency and much more. It’s that last one, transparency, that even enables custom chrome.
Before I go much further, I should preface this content by openly admitting that I’m a huge meebo fan. I’ve tried other IM clients, but meebo just works. It works on my home machine, it works on my work machine, it works behind a firewall, it works on a conference workstation; it just works. If you are sending me an instant message, I am reading it in meebo. When it came time to put the new transparency for HTML-based applications to the test then, it’s no wonder that my inspiration came from meebo.
A special thanks here to Danny, Seth and the most excellent team over at meebo for allowing me to use their chrome in this example!
Transparent native windows are created in Apollo through settings in the application’s manifest file. This XML file has a “rootContent” node that generally points to the “main” application file. That rootContent node also has two attributes: systemChrome and transparent. The systemChrome attribute is generally set to “standard” by default, but we can set it to “none” to eliminate the operating system provided chrome. The transparent attribute gets a boolean value that indicates if the viewable content area of the application itself should have a background. If we set transparent to “true” then we now have a completely blank area onto which we can display anything we want.
<rootContent
systemChrome="none"
transparent="true"
visible="true"
width="640"
height="480">
index.html
</rootContent>
This can be tricky in development because if you run an application with no system chrome, that is also set to transparent, then you’ll see exactly nothing at all on the screen. You might be inclined to think that the application isn’t running. They you’ll try it again, and again, and each time you’ll run a new instance of the application. My advice then is to put something in the main HTML page of your application so you can see it. A good baseline is an HTML BUTTON labeled “Close”. When you click on it, you can close the application. This of course begs the question, how do you close an application?
When you’re running an HTML-based Apollo application, the output of WebKit is rendered to the viewable space of the application - what I like to call the viewport. When you use the JavaScript window object, you are referring to what’s called the HTMLHost. That HTMLHost is contained within an HTMLControl that has been placed on the viewport, and set to fill the entire viewable area (it doesn’t have to, by the way). A reference to the viewport itself, called the “stage” can then be obtained, and further a reference to the NativeWindow instance itself. Confused? No worries, closing a window looks like this in JavaScript.
window.htmlControl.stage.window.close();
Congratulations, you now know how to create your own window with custom chrome in HTML! Really that’s it! The window at this point only has a close button in it (and that’s all you’ll see on the screen), and the rest from there is up to you. Additional operating system hooks, just like the NativeWindow.close() method, are also available for the other types of windowing behaviors you might generally expect. These methods (all on the NativeWindow class) include minimize(), maximize(), restore(), startResize() and startMove(). As you start fleshing out the UI of your application, you design the entire window with HTML. This means that you can make it look and behave any way you want!
When you use images as chrome, any transparent areas of those images will also be transparent. If you get tricky and set an alpha level on a PNG, that too will be respected. In this fashion, you can even have partly opaque windows. Remember that the viewport itself will be transparent, so you may potentially want to put something in the center of your window chrome. Custom chrome for HTML-based Apollo applications, is an exciting improvement, but don’t forget to explore the other native window features too when you get a chance. You can tell a native window to not have certain buttons, to always be on top, and more…