Building a Single Site Browser/RSS Reader with Adobe AIR

Originally published: 11/2007 by J Wynia

Lots of the web applications I build or work on are replacements for desktop (often terminal-based). A few years ago, one of my clients asked if it would be possible to wrap their suite of intranet applications in something other than the standard browser.

They wanted a regular Windows menu with links to the individual pieces, like: Time Entry, Address Book, Order Queue, etc.  Many of those apps were written at different times and that approach gave them an integrated application that had its own place in the Windows menu. For them, we built a C# application that wrapped Internet Explorer to accomplish it and they were pretty happy.

I re-used that wrapper several times, including as a way to give clients a way to test sites that were in progress without having to deliver URL's that were likely to change as well as a custom sidebar to help them go through the site.

Fast forward to more recent days and you'll find me frustrated with how long it was taking Firefox to launch a new tab or switch between them. Shortly after killing the tab containing Google Reader everything became snappy again. The next time Firefox was sluggish, I checked the memory during the problem and killed Google Reader again with the same results.

That's when I flashed back to my browser wrapper as well as several articles I'd bookmarked over the last year or so regarding "single site browsers". Since my RSS reading is usually just a background activity, but is nearly always open, I don't really like taking a performance hit during things like web testing as a result of a background activity.

While I could have resurrected the old application to make a Google Reader-specific app, I have no idea where the code is at this point. I thought this might be a perfect task for trying out Adobe AIR. I'd installed the tools and tried a basic test run back in August. I figured this could also serve as an example of how to build a quick and easy single site browser that runs on Windows and Mac (at this point, with Linux in the works).



Basically, once you install AIR itself, Aptana and the Aptana/AIR project type, the absolute basic project (with no extra Javascript stuff) provides the framework to build the single-site browser. I called this application "Greeder" and replaced the entire base HTML file with the following contents. It's mostly an empty page with an <iframe> that pulls in the actual Google Reader URL and a couple of links below it.

 1: <html>

 2:  <head>

 3:  <title>Greeder</title>

 4:  <script type="text/javascript" src="AIRAliases.js">

 5:  </script>

 6:  <script type="text/javascript">

 7:  function Reload () {

 8:  var f = document.getElementById('UI');

 9:  f.src = "http://reader.google.com";

 10:  } 

 11:  </script>

 12:  </head>

 13:  <body style="background-color: #333333;color: #eeeeee;">

 14:  <iframe id="UI" 

 15:  src="http://reader.google.com"

 16:  sandboxRoot="http://reader.google.com/"

 17:  documentRoot="/"

 18:  width="100%" 

 19:  height="95%"

 20:  style="border: none;background-color:white;"

 21:  >

 22:  </iframe>

 23:  <div style="width:100%;

 24:  font-family: sans-serif;

 25:  font-size: smaller;

 26:  text-align: right;

 27:  padding-top:3px;"

>

 28:  Demonstration of a simple, single-site browser using Adobe AIR. 

 29:  More info at <a href="http://www.wynia.org/greeder/" 

 30:  target="_blank" 

 31:  style="color: #eeeeee;">http://wynia.org</a>. 

 32:  <a href="#" 

 33:  onclick="Reload()" 

 34:  style="color: #eeeeee;">Reload</a>

 35:  </div>

 36:  </body>

 37: </html>



Other than that, you just need to change the application.xml to suit your application. The Aptana supplied file is pretty well commented for what you'll like to use. Just hit the red "AIR" button in the toolbar and Aptana will spit out the .air file for you. The result of my quick test can be downloaded if you want to see it: download Greeder. And, if you want the whole project for using in Aptana, you can have that too.


Overall, it works pretty well. Do note that it uses WebKit (the engine behind Apple's Safari browser), so any problems with a site that Safari has, your single-site browser will.  If you really need the IE engine or the Gecko/Firefox engine, this won't work (though I'll probably post how to do it that way at some point).


When you install it (or nearly any other non-commercial AIR app), you'll see warnings about it being unsigned and from an unknown publisher. That happens when the file doesn't have a digital signature of the right kind. I didn't sign this one (and probably won't be signing any in the near future) because the certificate for doing so costs $300.


Other caveats include that if you make your description in the application.xml file too long (beyond a line or 2), it will result in some of the installer's buttons disappearing off the bottom of the wizard screen. Also, for some reason, Aptana seems to *add* to the .air file when you "compile" it if there's one there already, but complains if it's missing and you generate the project. I just delete it, compile, dismiss the error and compile again and get the smallest .air I can. I'm filing the bug with the Aptana folks, but it's worth knowing. That way, if you build your .air file 25 times, you don't wonder why the heck it's somehow 17MB just to do a little app like this one.


Related links:


http://starkravingfinkle.org/blog/2006/11/site-specific-browers/


http://ajaxian.com/archives/pyro-an-example-of-a-site-specific-browser


http://wiki.mozilla.org/WebRunner


http://www.linux.com/feature/118170


http://starkravingfinkle.org/blog/2007/03/site-specific-browser-webrunner/


http://labs.mozilla.com/2007/10/prism/


http://www.wynia.org/wordpress/2007/08/13/adobe-air-and-aptana-for-javascript-desktop-applications/



Comments

.:dydimustk:. » Blog Archive » prism + google reader on 11/9/2007
[...] am now using Prism to read my feeds in google reader. My next step will be to build something in AIR. Then, we’ll see where it goes from [...]
Jared Morgan on 11/8/2007
I'm an end user that knows just a little about HTML. Our business could really use an AIR app that is site specific to Gmail, Gcal, Gapps and the iGoogle start page. Of course, we use Google Apps; the login is a little different than Gmail. If you have seen the popularity of the Google Analytics AIR app, you can imagine the response to a tab almost everyone leaves open all day - Gmail. All I need is a site specific browser based on AIR plus a sidebar with links to each of the google offerings. This AIR app will replace (when someone writes it) Outlook in our business, and may replace Office entirely with time. Please answer my prayers and write this!
MAgicrobotmonkey on 11/7/2007
You could just try mozilla's prism: http://labs.mozilla.com/2007/10/prism/
J Wynia on 11/7/2007
If you note the related links at the end, I already linked to Prism and have actually used it (though while it was called WebRunner), but liked the Aptana IDE support for building AIR apps and wanted to do this one using it. I'm pretty technology agnostic and will use whatever works and is easy to work with. Historically, Mozilla-based tools have made it hard to tap into local machine resources and the tools for building distributable files has been sorely lacking. I'd love to see a Prism development environment as easy as Aptana and an equally easy API that taps into local files, etc. as well. I didn't use those API's from AIR in this app, but they're part of why I'm trying the platform out.
Site-Specific Browsers: Turn Websites Into Desktop Applications :: Graficznie on 11/19/2009
[...] Using Adobe AIR, it is possible to create site-specific browsers (a simple example). [...]
blog comments powered by Disqus
Or, browse the archives.
© 2003- 2014 J Wynia. Very Few Rights Reserved. This article is licensed under the terms of the Creative Commons Attribution License. Quoted content or content included from others is not subject to that license and defaults to normal copyright.