• Tweet
• Share
• Email

• Tweet
• Share
• Email

Kevin Hoyt wrote:

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?

Read more here.

Brgds,
CP

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• share via Reddit
• Share with Stumblers
• Tweet about it
• Subscribe to the comments on this post