Remus Stratulat - On the Stre@m » JavaScript http://www.stratulat.com/blog This is my personal blog Sat, 10 Jul 2010 07:07:29 +0000 en hourly 1 http://wordpress.org/?v=3.0 Update your JavaScript AIR application with ease. http://www.stratulat.com/blog/update-your-javascript-air-application-with-ease http://www.stratulat.com/blog/update-your-javascript-air-application-with-ease#comments Fri, 27 Jun 2008 08:14:59 +0000 Remus Stratulat http://www.stratulat.com/blog/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.0″ encoding=“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.

]]> http://www.stratulat.com/blog/update-your-javascript-air-application-with-ease/feed 5 JavaScript AIR application – microlink http://www.stratulat.com/blog/javascript-air-application-microlink http://www.stratulat.com/blog/javascript-air-application-microlink#comments Tue, 24 Jun 2008 12:19:55 +0000 Remus Stratulat http://www.stratulat.com/blog/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.

]]> http://www.stratulat.com/blog/javascript-air-application-microlink/feed 0 Use Flex Builder 3 to create a JavaScript AIR application – debugging. http://www.stratulat.com/blog/use-flex-builder-3-to-create-a-javascript-air-application-debugging http://www.stratulat.com/blog/use-flex-builder-3-to-create-a-javascript-air-application-debugging#comments Thu, 12 Jun 2008 13:40:42 +0000 Remus Stratulat http://www.stratulat.com/blog/?p=123 In the first part of this article I wrote about how Flex Builder 3 can be used to create a JavaScript AIR application and how to set up the environment.

Going forward, one big part of developing an application is debugging it. The instrospector tool I am talking about does not help to debug an application in the same way the JDT debugger helps debug Java applications. Actually it works more like Firebug.

First you need to copy one file into the source folder of your project:

“c:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\libs\air\AIRIntrospector.js”

copy AIRIntrospector.js into your project

The second step is to include it into your application:

import AIRIntrospector into your project

If you run the application right now, nothing will happen. The introspector is not started unless it is used. So let’s use it to see how it works. For that I will add the following piece of code just above the <body> tag.

<script>
air.Introspector.Console.log(window);
</script>

I made it a little bit interesting by logging the window object to see the power of this introspector.

Adobe AIR Introspector

You are now able to explore the entire structure of the window object to see exactly the value for each member. This console is a very powerful tool. As you can see there are more features there and we will explore those later. More about Adobe AIR Introspector can be found on the Adobe help resource center here.

]]> http://www.stratulat.com/blog/use-flex-builder-3-to-create-a-javascript-air-application-debugging/feed 0 Use Flex Builder 3 to create a JavaScript AIR application. http://www.stratulat.com/blog/use-flex-builder-3-to-create-a-javascript-air-application http://www.stratulat.com/blog/use-flex-builder-3-to-create-a-javascript-air-application#comments Wed, 04 Jun 2008 20:38:15 +0000 Remus Stratulat http://www.stratulat.com/blog/?p=108 I have tried today to create an AIR application. My tool of choice was Flex Builder 3 as I knew you can create AIR applications using it.

So let’s see what I have done.

Of course, first I have created the AIR project:

New Flex Project - MyAirApp

From the beginning I have spotted a problem in this picture: there was no mention to HTML or JavaScript or anything. Adobe AIR has the capabilities to render HTML and one of the strongest points of this framework is that a web developer can basicaly hit the ground running and just program his way into the desktop world using HTML and JavaScript.

Going forward, I have search resources to see what is the tooling support for this and I found in Adobe’s documentation an entry about this: AIR development tools. Obviously, even if is not mentioned in that chapter of documentation, Flex Builder 3 has suppor for creating AIR applications so let’s persue this further and set up the environment.

If we run the application right now, MyAirApp window shows up as a Flex AIR application. We need to change that so MyAirApp to render html.

First let’s create index.html and set it up to be used by the AIR application. To do that the bin-degug/MyAirApp-app.xml file should be edited and change two tags: content and visible. Yes I now, is not a very elegant thing to do. Is just the first thing that helped me. I’ll try to find a less hackish way to this. If you already know one please share it with us.

Running now the application will render:

So here is my first HTML AIR application. OK, I said JavaScript AIR application into the title. This is only the first step to get there. More will come soon.

Have fun coding.

]]> http://www.stratulat.com/blog/use-flex-builder-3-to-create-a-javascript-air-application/feed 14 Adobe AIR for JavaScript Developers Pocket Guide http://www.stratulat.com/blog/adobe-air-for-javascript-developers-pocket-guide http://www.stratulat.com/blog/adobe-air-for-javascript-developers-pocket-guide#comments Wed, 07 May 2008 09:08:03 +0000 Remus Stratulat http://www.stratulat.com/blog/?p=104 The official guide to Adobe AIR, written by members of the AIR team, is out. One of the authors, Dragos Georgita is my colleague. He is the engineering manager for the Adobe AIR team here in Romania. He and his team are doing a lot of great things, especially related to AIR and JavaScript.

We are all here at the office very proud of him and we wish him many books to come. (I am still waiting for my signed copy :) )

You can buy the book from amazon: Adobe AIR for JavaScript Developers Pocket Guide.

]]> http://www.stratulat.com/blog/adobe-air-for-javascript-developers-pocket-guide/feed 1