Use Adobe Air to build a mobile APP for your Blog

With Adobe Air, you can easily create a mobile APP for your Blogger powered blog site. What you need is the StageWebView class, which can load and show any html/javascript based web site on the stage within your APP.

But firstly, go to your Blogger dashboard, in the Template tab, enable the Mobile template. (See this post for more details: http://blogger-hints-and-tips.blogspot.com/2012/05/mobile-templates-for-blogger-and-why.html) After this, when visit your Blogger site from mobile device (via mobile browser or APP), your blog will be displayed in a mobile friendly way.

Next, all we need to do is to load your blog url and display it on the stage using the StageWebView class. Here are some code:

var webBrowser:StageWebView = new StageWebView();
webBrowser.stage = this.stage;
webBrowser.viewPort = new Rectangle(0, 0, this.stage.stageWidth, this.stage.stageHeight);
webBrowser.loadURL("http://yourblogurl.blogspot.com");

With these code, the Air APP can load and display your blog by itself. Sometimes, you want to call the device's browser for opening the external links - links not belong to your blog, so the APP behaves more like a blog APP other than a simple browser for viewing any url. To do this, you can use the LOCATION_CHANGING event of the StageWebView class. Whenever a user clicked a link, check if it is an external link, then decide whether to display it within the APP using StageWebView class or use the navigateToURL method to open the link by external web browsers. The code:

webBrowser.addEventListener(LocationChangeEvent.LOCATION_CHANGING, onLocationChanging);
function onLocationChanging(event:LocationChangeEvent):void
         {
                   var newURL:String = event.location;
                   if (newURL.search('blogspot.') == -1)
                   {
                   event.preventDefault();
                   navigateToURL(new URLRequest(newURL));
                   }
          }

Besides, we may also interested in the "historyBack()" and "historyForward()" methods. With these two methods, you can navigate to the previous/next page in the browsing history. Actually, you can even create a fake mobile browser using the API provided by StageWebView class after adding UIs.

Finally, if you want, you can publish your Blogger site with the mobile app to Google Play or the App Store.

The Demo of my Blog (APK for Android):
https://drive.google.com/file/d/0B5V2PrQ8xX_EbzA4TzdBNUwzZXc/edit?usp=sharing

Full FlashDevelop project with source code:
https://flaswf.googlecode.com/svn/trunk/flaswfblog/Tutorials/BloggerApp/

Links:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/media/StageWebView.html
http://help.adobe.com/en_US/as3/dev/WS901d38e593cd1bac3ef1d28412ac57b094b-8000.html
http://www.adobe.com/inspire-archive/february2010/articles/article5/index.html
http://www.adobe.com/devnet/air/quick_start_as/quickstarts/qs_using_stage_web_view.html
http://www.flashandmath.com/mobile/swv/
http://www.yeahbutisitflash.com/?p=3996
http://thatsthaway.blogspot.com/2012/07/display-and-remove-documents-in-air.html
http://sjespers.com/blog/2011/05/17/displaying-ads-in-your-mobile-air-application/
http://soenkerohde.com/2010/11/air-mobile-stagewebview-uicomponent/
http://www.lucentminds.com/archives/adobe-air-web-browser.html
http://sean.voisen.org/blog/2010/10/making-the-most-of-stagewebview/
http://www.as3gamegears.com/misc/stagewebviewbridge/