Accessibility

Table of Contents

  1. Introduction
  2. How to use the Adobe AIR
    update framework
  3. Using the framework in
    Flex apps built on AIR
  4. Using the framework in
    Ajax apps built on AIR
  5. Using the framework in
    Flash apps built on AIR

Using the Adobe AIR update framework

Using the framework in Ajax apps built on AIR

To use the update framework with Ajax, you will need the applicationupdater_ui.swf file (the SWC file is used only for the AIR projects created in Flex). Again, I am too lazy to create a UI. And again, you can create the AIR application in your favorite text editor and use the command-line tools to test and package. However, I prefer to use Aptana.

Setting up the AIR project in Aptana Studio

Note: If you don't want to go through step-by-step instructions to create the project, you can use the archive provided with this article, air_update_ajax.zip. To import it in Aptana, choose Import > General > Archive File.

To set up an AIR project in Aptana Studio:

  1. Open Aptana and choose New > Project.
  2. In the open window select Adobe AIR Project from Aptana Projects and click Next.

  3. Type air_update_ajax as the project name, and then click Next (see Figure 6).

    First page of the Adobe AIR Project Wizard; setting the project name

    Figure 6. First page of the Adobe AIR Project Wizard; setting the project name

  4. On the next page, remove the underscores from the ID value (Aptana Studio will raise an error if the ID string contains underscore characters) as shown in Figure 7.

    Second page of the Adobe AIR Project Wizard; removing the underscores from the ID value

    Figure 7. Second page of the Adobe AIR Project Wizard; removing the underscores from the ID value

  5. Click Next, and then Finish.

After creating the project, add the external folder updater, the folder that holds the new version of the application and the update descriptor file (see Figure 4 and the associated explanation on how to do this). I will reuse the same folder (c:\htdocs\updater) that I used for the Flex example.

At this point you should see something like the image shown in Figure 8 (my air_update_ajax.html file may differ from yours because I deleted the comments and some unnecessary JavaScript code).

The AIR project in Aptana

Figure 8. The AIR project in Aptana

Adding the code for update

Now you need to copy the Adobe AIR update framework library (applicationupdater_ui.swf ) to your project. To add this library to the application:

  1. Open the air_update_ajax.html file and add this tag to the head section: 

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

    The page should look like this:

    <html>
    <head>
        <title>AIR AJAX Update Example</title>
        <link href="sample.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="AIRAliases.js"></script>
        <script src="applicationupdater_ui.swf" type="application/x-shockwave-flash"/>
    </head>
 
    <body>
        
    </body>
</html>

  2. Add the following code, which instantiates an updateUI object, in the head section of the air_update_ajax.html file:

    <script>
    // instantiate an updater object
       var appUpdater = new runtime.air.update.ApplicationUpdaterUI();
       function checkUpdate() {
       // we set the URL for the update.xml file
       appUpdater.updateURL = "http://localhost/updater/update.xml";
       //we set the event handlers for INITIALIZED nad ERROR
      
       appUpdater.addEventListener(runtime.air.update.events.UpdateEvent.INITIALIZED, onUpdate);
       appUpdater.addEventListener(runtime.flash.events.ErrorEvent.ERROR, onError);
       //we can hide the dialog asking for permission for checking for a new update;
       //if you want to see it just leave the default value (or set true).
       appUpdater.isCheckForUpdateVisible = false;
       //if isFileUpdateVisible is set to true, File Update, File No Update, 
       //and File Error dialog boxes will be displayed
       appUpdater.isFileUpdateVisible = false;
       //if isInstallUpdateVisible is set to true, the dialog box for installing the update is visible
       appUpdater.isInstallUpdateVisible = false;
       //we initialize the updater
       appUpdater.initialize();
    }
    
    function onUpdate(event) {
       //starts the update process
       appUpdater.checkNow();
    }
 
    function onError(event) {
       alert(event);
    }
</script>

In the code above, the function checkUpdate() is called each time the application is started. Inside this function, you configure the updater object: set up the URL for the update descriptor file, set up the UI to be displayed, and register two listeners for initialized and error events. The last line of this function initializes the updater object.

After the updater object is initialized, the onUpdate() function gets called and the object is ready to take commands. At this point, the code calls the checkNow() method on the updater object to start the update process (if a new version is found on the server).

Lastly, you need to hook up the call to the checkUpdate() function to the onload event of the application:

<body onload="checkUpdate()">

Creating the update.xml file

Now that you've finished coding the application, you need to create the code that stays on the server. First create the update.xml file inside the updater folder from the project. Add this code to the file:

<?xml version="1.0" encoding="utf-8"?>
<update xmlns="http://ns.adobe.com/air/framework/update/description/1.0">
<version>2.9</version>
<url>http://localhost/updater/air_updater_ajax.air</url>
<description><![CDATA[
This version has fixes for the
following known issues:
*First issue
*Second issue 
]]></description>
</update>

It is important to correctly set the URL to the packaged application using the <url> tag. On my machine the URL to the updater folder is http://localhost/updater/, and because I chose to place the application in the same folder, the URL is http://localhost/updater/air_update_ajax.air.

There are more options you can set in this file; see the AIR_Update_Framework.pdf file that comes with update framework for more details.

Testing the code

With the code in place, you are ready to test it. First, you need to export the application and install it on your machine. Choose Export > Adobe AIR > Adobe AIR Package (deselect from the list updater folder).

Next, install the application on your machine.

To test the first update, you need to create a new (higher) version of the application:

  1. Open the update.xml file and application.xml files, and set the <version> tags to the same value, for example 3.0.
  2. Export the application (choose Export > Adobe AIR > Adobe AIR Package), and place the AIR file inside of the updater folder on your web server.

  3. Start the installed application. You should see a screen like the one shown in Figure 9.

    An offer to update the AIR Ajax application

    Figure 9. An offer to update the AIR Ajax application

Page 4 of 5
Previous Page
Next Page