Update your JavaScript AIR application with ease.

Web application = instant update

One of the most powerful features of a web application is instant update. Your client doesn’t need to do anything when you fix some bugs in your web application. The next time he accesses the site the user will have the latest version of your application.

Update a desktop application

Creating an AIR application means creating a desktop one. It comes with all the benefits of this type of application but also with some of the drawbacks. And one of them is the challenge of updating the application to the most recent version.

Of course this is not a new subject and a lot of applications have their own method of doing updates and upgrades. Adobe AIR has now the Update Framework, a Flex library that helps you update any AIR application non intrusively, similar to any web application.

Adobe AIR Update Framework

Now, I talked at the beginning about updating a JavaScript AIR application and just above I mentioned that the update framework is a Flex component. That is true and it is very easy to use this component even without any Flex knowledge. To demonstrate this technology I will use the microlink application that I wrote recently.

First, copy the applicationupdater_ui.swf found in the update framework into your project. (You can download the update framework from here). Because I am using Flex Builder 3 to develop this application the updater component will be placed under the src folder inside my project.

  update_swf

Next, create the update descriptor file. This is a small XML file that contains all the information needed by the updater. This includes the version number, the application location on your server and a description where details about the improvements in the new version can be written.

<?xml version=“1.0encoding=“utf-8″?>
<update xmlns=“http://ns.adobe.com/air/framework/update/description/1.0>
    <version>0.3</version>
    <url>http://localhost:8080/releases/MyAirApp.air</url>
    <description><![CDATA[
Version 0.3 of this application includes the updateing framework.
  ]]></description>
</update>

I will name this file update.xml and this will go on the web server. I placed it in the same location as my AIR application so it is reachable from http://localhost:8080/releases/update.xml.

We will want to check for updates each time the application is started. Of course we can also choose to create a menu item or a button to let the user explicitly request a check for updates. In either case, we have to write some JavaScript code to wire things together. JavaScript code in AIR applications can use classes defined in SWF files.

In the HTML file that will use the update framework (in our case index.html) we have to include a script tag that loads the framework.

<script src="ApplicationUpdater_UI.swf" type="application/x-shockwave-flash"/>

After we include the update framework in our application we have to use it. The instantiation and configuration of this is described inside the comments in the next piece of code, from index.html

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>My first AIR application</title>
        <link rel="stylesheet" href="microlink.css" type="text/css" />
        <script type="text/javascript" src="lib/AIRIntrospector.js"></script>
        <script src="applicationupdater_UI.swf" type="application/x-shockwave-flash"/>

        <script src="lib/jquery-1.2.6.js"></script>
        <script src="microlink.js"></script>
        <script>
        // instantiate an updater object
           var appUpdater = new runtime.air.update.ApplicationUpdaterUI();

        function load() {
            // ApplicationUpdaterUI can be configured via a configuration file 
            // delivered with the application or via JavaScript in the application.
            appUpdater.configurationFile =
                new runtime.flash.filesystem.File("app:/config/updateConfig.xml");

            // setting the event handler for INITIALIZED
            appUpdater.addEventListener(runtime.air.update.events.UpdateEvent.INITIALIZED,
                onUpdate);

            // It initializes the update framework, silently installing synchronously 
            // any pending updates. It is required to call this method during application
            // startup because it may restart the application when it is called.
            appUpdater.initialize();
        }

        function onUpdate(event) {
            //starts the update process
            appUpdater.checkNow();
        }

        </script>

    </head>
    <body onload="load()">

    <h1>this is my first AIR app.</h1>

    <a id="microlink_a" href="http://www.stratulat.com/blog/feed" class="button"
        onClick="onClickMicroLink(this); return false;">the microlink</a>

    </body>
</html>

The updateConfig.xml file can set up a lot of parameters for the application updater, most of them related to the behavior of the UI. Only one, however required for the updater to perform well and that is the URL to the update.xml on the server.

I configured updateConfig.xml so that at startup the application first asks if the user wants to check for updates. If so, because I have set up my application version as being 0.2 and inside the update.xml as 0.3, the application displays the update available UI, which shows all the information I’ve set up in the update.xml file on the server.

update_ui1 update_ui2

In this short demo on how to use the Update Framework I showed all the required steps in order to use it. There is one thing however that was not covered and that is error handling.

I have exported my project from Flex Builder 3 and you can download it from here: MyAirApp.zip.

Adobe AIR Update Framework - Flex

I was inspired in this article by the one written by Mihai Corlan on his blog: How to easily and seamlessly update an AIR application. The article discusses exactly the same topic but from the Flex perspective.

JavaScript AIR application - microlink

I wrote about how Flex Builder 3 can be used to create a JavaScript AIR application, how to set up the environment and how to debug a JavaScript AIR application. It is now time to actually create one that does something more than just displaying "Hello world". For that, I returned to an article written by me a about an Ajax pattern called microlink.

A microlink is a link that opens up content below it. It is a way to improve the ordinary link using Ajax.

In the original article I have used prototype.js and scriptaculous to implement this. Now I am using jquery because it is AIR-ready. That means it works off the shelf in AIR.

If we look into the Flex Navigator view we can see some new resources that are used in order to make the application. Let’s explain each of them one by one.

microlink.css is the stylesheet and is actually optional so I will not talk about this too much. I have used it in order to make the link more visible.

   1:  .button {
   2:     color: #003399;
   3:   }
   4:   
   5:  .button:hover {
   6:     text-decoration: none;
   7:       color: #66ffcc;
   8:       background-color: #003399;
   9:   }
  10:   
  11:  .button:active {
  12:     color: #ffffff;
  13:     background-color: #0099cc;
  14:   }
  15:   
  16:  .microdiv {
  17:      background-color: #ccccff;
  18:      border: 1px solid #9999cc;
  19:  }

microlink.js is the actual JavaScript piece of code that makes a regular link into a microlink. It contains just one function to handle the click event.

   1:  /**
   2:   * Function called when the microlink is called to update 
   3:   * the div with remote content.
   4:   * 
   5:   * @param {element} e the element that fired the event.
   6:   */
   7:  function onClickMicroLink(e)  {
   8:      var elID = e.id;
   9:      var divID = elID.substr(0, elID.length-2); // remove trailing '_a'
  10:      
  11:      $('#'+elID).after(' <div id="'+ divID +'" class="microdiv" ' +
  12:              'style="display:none"></div>');
  13:              
  14:      // Performs an AJAX request and updates a container's contents 
  15:      // based on the response text.
  16:      // @see http://docs.jquery.com/Ajax
  17:      $.ajax({
  18:          url: e.href,
  19:          dataType: 'text',
  20:          cache: false,
  21:          success: function(text){
  22:              $('#'+divID).append(text);
  23:              $('#'+divID).fadeIn("slow");
  24:          }
  25:      });
  26:  } 

Inside the index.html I have added just one more line (aside from including the jquery library):

   1:  <a id="microlink_a" 
   2:       href="http://www.stratulat.com/blog/feed" 
   3:       class="button" 
   4:       onClick="onClickMicroLink(this); return false;">the microlink</a>

Now running the application will show a link. When you click this link an Ajax call will be made to the feeds page of this site. The response is treated as text and it will be injected as the contend of the div created on line 11. Of course, the real use of this is to replace the href of this link with something that is indeed valuable for your application.

This small example covers more than just creating a microlink. It also shows how to make an Ajax call from an AIR application and how to use the response which is done in just the same way as in a browser.

Silverlight get’s a push

I went today on the Microsoft’s web site to get the IE7. After I have selected the download section in the site, a popup caught my attention, something like: Do you want to try the new Silverlight enable download center?

A line from a cartoon show comes to my mind: “Isn’t that nice?…”

Fluid - web on your desktop

… for Leopard users at least.

After Mozilla found a new use for their technology, the XUL platform, in the form of Prism, somebody has found this technology inspiring and developed Fluid.

That somebody is not Apple as one first thought might be, but a web enthusiast, Todd Ditchendorf.

RSS, web 2.0… barcode?

barcode.png
 
The above image represents my blog address stored as barcode. So, if you have a barcode reader, fire away. 

Mozilla Prism

I just found out about this project on the Mozilla labs site.

Mozilla Prism

What is this project all about? Well it can create a desktop application from basically any web application. I just moved my Gmail onto my desktop. That’s quite something.

Their next step will be to integrate Prism with Firefox (3.0?)and then the user will be able to just go into the menu and choose “Convert into application”.

Right now this is just a demo, a project, a showcase of the XUL platform, but interesting things are foreseeable in the future.

Some good thoughts about this project can be found on Mike Chambers blog.

Technorati Profile">Technorati Profile


myFeedz API - social web">myFeedz API - social web

myFeedz opened up it’s API for the public use. I have already used this API to include the tags from my profile and the top articles for my profile (check out to the right).

But the possibilities does not end here. The tag cloud can display the tag associated with your blog if the blog is submitted to myFeedz. And you can transform the tags in links that perform searches on your blog using those tags.

The top articles are also interesting. You can choose to show:

  • myFeedz top articles
  • articles relevant for your myFeedz profile
  • articles from a specific feed
  • articles that you saved and thought they are very important and worth to be read.

A nice thing about the articles list is that the links does not point to myFeedz (so no tracking, no redirect, no marketing involved here) but instead directly to the source of the article.

Degradable Ajax?">Degradable Ajax?

Developing an Ajax application can be a little bit difficult. Creating an Ajax web application that is both useful and degradable IS difficult. However this two goals can be achieved quite easily if you are using the right tools.

Right now there is only one tool that I know of that offer both these desired features: MX Ajax Toolbox. You can look at this very impressive demo
and you can try to disable JavaScript from your browser to see how it works.

Quoting from the website: MX Ajax Toolbox consists in a set of tools that allows you to solve two main use-cases:

1. Build AJAX sites from scratch (Rich Internet Applications) - with or without using a database connection.
2. Update legacy websites with interactive AJAX controls and widgets.

The Ajax image gallery from my site is one of the widgets provided by this toolbox.

Biggest AJAX problem

Or, how I found myself in front of a 700 MB memory footprint Firefox.

AJAX is becoming the new “de facto” standard in the web application industry. Every where you look on the web there are changes and on almost all sites to approach the AJAX world. Gmail and Yahoo Mail are some of the biggest web applications implementing AJAX and the results on both are amazing.

Browser world

If you ask a JavaScript developer about what is the biggest problem of JavaScript programming it will probably tell you it’s browsers’ incompatibilities. This is a very big issue and as long as the major players will not come to an understanding (and unfortunately they won’t) and provide a common ground it will remain a big issue.

I will not mention here other problems from the CSS world for example.

Fortunately along with AJAX came a lot of frameworks and libraries that address this problem and hide the ugly details from the programmer.

The PROBLEM

In my opinion there is a worse problem then hacking your way around bugs and differences. That problem is represented by memory leaks.

JavaScript VM comes with a garbage collector and aside from some edge cases you might encounter, it does a pretty good job. Once you close a page a lot of work is done behind the scene to clear unreferenced objects. A lean, mean cleaning machine.

Well… AJAX can mess this up. The page is not closed any more.

The problem is not AJAX in itself as a programming paradigm but in what it can do for the application. With AJAX you can retrieve data from the server without closing the page and rebuilding it. And that data is placed inside the same page and manipulated by JavaScript programs. New DOM objects are created over and over, new JavaScript objects are created based on those data, new events are attached to all this objects. Few programmers destroy those object and unattache the events.

AJAX is still young and most of the people that have done some AJAX implementation for their site are just pulling some HTML parts from the server and using innerHTML to replace the content of a div element. No harm done. As the applications are becoming more and more complex the use case changes. XML or JSON is pulled from the server and DOM objects are created based on them. It is very easy to forget something.

Unfortunately most JavaScript programmers are sloppy. They were taught to be that way by the old browsing habits. There was no need to clean after you. When the page needed some more information, it was regenerated on the server and rendered again by the browser. A clean sheet to work on. Everything that was persistent were the cookies on the browser.

Taking care of your things in JavaScript is harder than you think. Very good programmers missed this. I was using an AJAX application from a well known company (not here to throw the stone) and after heavy usage for about two days without closing my browser, it reached the respected 700 MB footprint in my laptop’s memory.