Experimenting with Adobe AIR and jQuery – Part 4

For the next step in my Top100-application, I wanted to introduce some animation. In step 3, the information on the slide and the background color changed when I pressed the UP or DOWN key, but that happened immediately. I wanted to use some PowerPoint-like animation.

The jQuery UI library extends jQuery with interaction and animation options.

The first thing I tried was to make the new number pulsate a few times after it changed. I downloaded the library, added it to the code and added a pulsate effect:

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.ui.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $(document).keyup(function(e) {
    switch ( e.keyCode ) {
      case 38: // up
        $("body").css("background-color","#00AA00");
        $("#number").text("48");
        $("#artist").text("VENGABOYS");
        $("#title").text("WE LIKE TO PARTY");
        $("#number").effect("pulsate", { times:3 }, 1000);
        break;

That worked fine.

I then wanted to have the number, artist and title disappear by sliding to the right, then changing the background color and information, and then have the new information appear from the left. So I tried this:

   case 40: // down
        $("#number").hide("slide", { direction: "right" }, 2000);
        $("#artist").hide("slide", { direction: "right" }, 2000);
        $("#title").hide("slide", { direction: "right" }, 2000);
        $("body").css("background-color","#FF0000");
        $("#number").text("46");
        $("#artist").text("SASH");
        $("#title").text("ECUADOR");
        $("#number").show("slide", { direction: "left" }, 2000);
        $("#artist").show("slide", { direction: "left" }, 2000);
        $("#title").show("slide", { direction: "left" }, 2000);
        break;

And that didn’t work, or at least, not as expected. The background color and in the information changed immediately, at the same time the sliding to the right started. So for a second or so, you could already see the next number, artist and title, on a red background, while it was sliding to the right. It looked like all events happened simultaneously.

It took a while before I understood that that was exactly what was happening. When pressing the DOWN key, all events are happening at the same time. Well, almost all. The .show effect needs to wait for the .hide effect to complete, but the background color and changing of the text is happening at the same time as the .hide effect. We need a way for jQuery operations to wait until a previous event is finished.

This is probably an area that could have get a bit more attention on the jQuery documentation pages. Finally I found the solution at the detached designs website. There I learned how to “queue” animations. You need to use the callback features of jQuery. A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. To make the background and text only change after the .hide effect, I needed to add this as a new function:

     $("#number").hide("slide", { direction: "right" }, 2000);
     $("#artist").hide("slide", { direction: "right" }, 2000);
     $("#title").hide("slide", { direction: "right" }, 2000, function() {
       $("body").css("background-color","#FF0000");
       $("#number").text("46");
       $("#artist").text("SASH");
       $("#title").text("ECUADOR");
     });

This did what I wanted: the text was first sliding to the right, then the background color changed (and the text changed as well, but that was not visible).

I finally added the .show effect and made the number pulsate, again only after the .show effect was finished:

 case 40: // down
    $("#number").hide("slide", { direction: "right" }, 2000);
    $("#artist").hide("slide", { direction: "right" }, 2000);
    $("#title").hide("slide", { direction: "right" }, 2000, function() {
      $("body").css("background-color","#FF0000");
      $("#number").text("46");
      $("#artist").text("SASH");
      $("#title").text("ECUADOR");
      $("#number").show("slide", { direction: "left" }, 2000) ;
      $("#artist").show("slide", { direction: "left" }, 2000);
      $("#title").show("slide", { direction: "left" }, 2000, function(){
      $("#number").effect("pulsate", { times:3 }, 1000);
    });
  });

♦ Related files: step4.html

Experimenting with Adobe AIR and jQuery – Part 3

This is step 3 for my Top100-application. If you haven’t read step 1 and step 2, you probably want to do that first.

In the current state, the application looked like this:

I now wanted to change the number, artist and title when I pressed a key. The idea was to show the next song in the list, when pressing the DOWN arrow.

I first focused on just changing some text in the application, without worrying about acting on a keypress. I could have played around with plain javascript, but I was intrigued by the jQuery library, which seemed to make things a lot easier. To make it simple, I just wanted to change the number from 47 to 46 when I clicked on it.

To start using jQuery, you need to download it and include it in the header of your html-document

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

Then you to insert the actual code, but that code should only run when the DOM of the document has been loaded. jQuery has a simple statement that checks the document and waits until it’s ready to be manipulated, known as the ready event. Inside that event, I needed to define what was suppose to happen when I clicked the number. The code was pretty simple:

$(document).ready(function() {
	$("#number").click(function() {
		$("#number").text("46");
		});
	});

I first previewed this in FireFox (using F12 in Dreamweaver) and it worked just fine. Clicking on the number 47 changed it into 46. Pretty cool! I then previewed it in AIR (using CRTL+SHIFT+F12 in Dreamweaver) and that worked as well. Super!

But then I created the .air file itself, and tried to run it in AIR. It failed! I could click 47 as much as I wanted, it did not get changed in 46 🙁

I spend a lot of time trying to find out what was wrong… until I realized it was something very simple. The Adobe AIR extension for Dreamweaver is not smart enough to realize that the jQuery library is an external file that needs to be loaded. So the .air file does not contain that library, and thus the code doesn’t work. There’s no error message, so it’s not obvious what’s wrong, but the solution was simple: I needed to add jquery-1.2.6.min.js to the Included files section:

Once I did that, recreated the .air file and installed it, it worked like a charm! 🙂

jQuery also includes event handlers for keypresses, so expanding this to react on the DOWN key instead of clicking on the number, was not that difficult. I extended it to also react on the UP key, and to change the background color, all using jQuery functions. The final code looked like this:

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(document).keyup(function(e) {
        switch ( e.keyCode ) {
            case 38: // up
                $("body").css("background-color","#00AA00");
                $("#number").text("48");
                $("#artist").text("VENGABOYS");
                $("#title").text("WE LIKE TO PARTY");
                break;
            case 40: // down
                $("body").css("background-color","#FF0000");
                $("#number").text("46");
                $("#artist").text("SASH");
                $("#title").text("ECUADOR");
                break;
            }
        });
    });
</script>

Pressing the UP or DOWN key resulted in the changes I wanted:


♦ Related files: step3.html

Experimenting with Adobe AIR and jQuery – Part 2

The next step for my Top100-application was to make the same screen appear in an Adobe AIR application.

When you install the Adobe AIR extension for Dreamweaver, the Site menu in Dreamweaver has an additional option, called Air Application Settings. I selected that option and got the following screen:

I entered 0.1 as Version, browsed for step1.html as Initial content, and clicked the Set button for Digital Signature. That gave me the following dialog box:

Every AIR package needs to have a digital certificate. Luckily, you can create one yourself, by clicking the Create button. (Go to the Adobe AIR Developer Center for more details on signing an AIR package)

Clicking the Create AIR file gave me an error message about timestamp issues, but I could dismiss that dialog box by clicking Disable (which disables the timestamp check, but I trust myself, so I don’t need that type of security). This finally resulted in a top100.air file.

Double-clicking that file in Windows Explorer resulted in the following warning dialog box:
which did not come as a surprise, because I signed the package myself. I clicked Install, and the application showed on my desktop:

So it kinda worked… although I did not want the window border, the title, the buttons or the scrollbar.

So I needed some tweaking, which was easy enough in the Air Application Setting dialog box:

I selected Custom Chrome (opaque) for Window style and 1024×768 for Window size, changed Version to 0.1.1, created a new AIR file, double-clicked to install it, and clicked Replace to install the new version:

This finally resulted in what I wanted:

The next step was to have the application show the next song, when pressing a key. That’s for part 3 :-).