Joey Rivera » AIR

How to build an Adobe AIR Badge

Joey — Wed, 04 Aug 2010 14:52:07 +0000

NOTE: This article was written with AIR 1.5 in mind. I can’t say if the following information will work as intended on AIR 2. If you already know how to build you own Adobe AIR badge, you won’t find much new information here. This post is more to inform users that you can in fact create your own AIR badge if you didn’t already know. When I first started working with AIR, I learned about the badge but as far as I was concerned, the badge was a black box who’s functionality was designed to remain mysterious. The badge I used was the one Grant Skinner created and you can get more information from Adobe on how to use it. For a long time this badge worked well but finally the time has come where I need to make it behave a bit differently so I decided to do a bit of research.

After doing a few Google searches, I found a link to Adobe’s site with all the technical information on how to create your own AIR badge! I was completely surprised that I never even thought about the possibility that I could write my own badge… not sure what I was thinking. Nothing is more fun that reinventing the wheel right? After looking at the specifications, I realized it wasn’t too bad and started to plan out a logical flow on how my badge was supposed to work.

Requirements

My current badge has the following issue: a user installs my app through the badge, every time after that point that the user comes back to the badge, they have to ‘install’ the app again even thought it was already installed. Instead, I want the badge to sense if the application is installed and if so, launch it (I haven’t spend much time looking into Grants Badger app but I think it’ll let you do this as well if used correctly… I think). The logic for the new badge should be:

Check if AIR is installed (If not, install)
Check if my app is installed (If not install)
Launch my app

Setup

I’ll be using Flash CS3 since that’s what I have available to me for this tutorial and I am making the assumption you already know how to use Flash, understand ActionScript 3, and have an AIR app to test. Open Flash and create a new AS3 file and save it in some folder. Now attach a class called ‘Badge’ to your file that extends MovieClip. Your class should look like the following:

package
{
import flash.display.MovieClip;

public class Badge extends MovieClip
{
public function Badge():void
{
trace(‘hi’);
}
}
}

I added a trace in the constructor so I can make sure my class is working. When you test your badge you should see ‘hi’ in your output window. Now we are ready to continue.

air.swf

Adobe created a file called air.swf that resides on their server at http://airdownload.adobe.com/air/browserapi/air.swf. This file contains all the functionality required to interact with AIR files through your badge. It can check to see if you have air installed on the local machine and install it, it can check to see if an air app is installed on the local machine and install it or launch. It does it all so the first step in creating a badge is to load this file so you can call it’s methods.

All we need to do is create a Loader instance, add an event listener to alert us when it’s done loading the air.swf file and call the load method passing in the url as a URLRequest. The code is below with all the required imports:

package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.display.Loader;
import flash.net.URLRequest;

public class Badge extends MovieClip
{
private var _air:Object;

public function Badge():void
{
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, airSwfLoaded);
loader.load(new URLRequest(‘http://airdownload.adobe.com/air/browserapi/air.swf’));
}

private function airSwfLoaded(e:Event):void
{
this._air = e.target.content;

trace(this._air.getStatus());
}
}
}

Test the above code and in your output you should see one of the following status responses (taken from Adobe’s site):

String value	Description
`“available”`	The runtime can be installed on this computer but currently it is not installed.
`“unavailable”`	The runtime cannot be installed on this computer.
`“installed”`	The runtime is installed on this computer.

Handling the response

Now that we have a status, we can tell the badge to handle it in the appropriate manner. The first status we need to handle is ‘available’. This means AIR is not installed on the machine but can be. By default, AIR needs to be installed before installing an AIR app so in this scenario, all we need to call is install on our app and AIR will be installed first automatically. Here is the tricky part, we can’t automatically call install on an AIR app, it is not allowed. You can only call install via a user initiated event such as a button click.

If the status is unavailable, then we can’t do much other than let the user know they can’t install AIR on their machine. If the status is installed, then the user already has AIR installed and we need to check if they have our app installed. If they do not, we install it and let them launch it. If they do have it installed, we let them launch it. Below is the complete code that does all the above:

package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.display.Loader;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import fl.controls.Button;

public class Badge extends MovieClip
{
private var _air:Object;
private var _myButton:Button;

private const APPID:String = ‘YOUAPPID’; // replace with your app id
private const PUBID:String = ‘123123123123123123123123.1′; // replace with your publisher id
private const APPURL:String = ‘http://www.yourdomain.com/YOUAIRAPP.air’; // replace with your app url
private const APPRUNTIME:String = ‘1.5′; // I’m using 1.5 as a minimum requirement for this example
private const AIRSWF:String = ‘http://airdownload.adobe.com/air/browserapi/air.swf’; // adobe’s file

public function Badge():void
{
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, airSwfLoaded);
loader.load(new URLRequest(this.AIRSWF));

this._myButton = new Button();
this.addChild(this._myButton);
}

private function airSwfLoaded(e:Event):void
{
this._air = e.target.content;

switch(this._air.getStatus())
{
case ‘available’:
// install app
this.installApp();
break;
case ‘unavailable’:
// AIR not supported on this system
break;
case ‘installed’:
// check if app is installed
this.checkApp();
break;
}
}

private function checkApp():void
{
this._air.getApplicationVersion(this.APPID, this.PUBID, checkAppCallback);
}

private function checkAppCallback(version:String):void
{
if (version == null) // app is not installed
{
this._myButton.label = "Install";
this._myButton.addEventListener(MouseEvent.CLICK, installApp);

return;
}

this._myButton.label = "Launch";
this._myButton.addEventListener(MouseEvent.CLICK, launchApp);
}

private function installApp(e:Event = null):void
{
this._air.installApplication(this.APPURL, this.APPRUNTIME, new Array());
}

private function launchApp(e:Event):void
{
this._air.launchApplication(this.APPID, this.PUBID, new Array());
}
}
}

I added a button that depending on the status will display the appropriate label and call the corresponding method. If the status is available we know that my app is probably not installed (since AIR is not installed) so I tell my button to call the install app method. The install app method calls the installApplication method from the air.swf file and passes the following 3 paramets: the url of the app you are trying to install, the AIR runtime required for this app, and an array of parameters required for this app if any (make sure to modify those variables to match your needs). When a user clicks on the button, they will be asked to install AIR, install the AIR application, and allowed to start it.

If the status is installed, we call the check app method to see if our app is already installed on the users machine by seeing what version of the app is installed. A null version means that the app is not installed. If installed, our button will launch the application and if not, we call the install app method that I just described above. The launch application method takes in three parameters: the application id, the publisher id and a array of parameters if the application requires it. NOTE: Your AIR application MUST have allowBrowserInvocation set to true in it’s AIR application descriptor xml file for the badge to be able to launch your AIR application.

Finding your application id

Simply go to your AIR application’s folder and open the descriptor xml file. Look for the id node and that’s the id you want to use.

Finding your publisher id

This one was a bit trickier. First you need to install your AIR application on your system. Once installed, go to the folder where your application was installed and inside there will be a META-INF folder. Inside that folder there is a AIR folder with a publisherid file. Open that file and the string inside is your publisher id. For example: c:\program files\myairapp\META-INF\AIR\publisherid

That should do it. At this point you should have a basic working AIR badge. Now you can customize it any ways you like. Hope you all find this helpful! Feel free to leave any questions or comments.

Resources:

http://help.adobe.com/en_US/AIR/1.5/devappsflex/WS5b3ccc516d4fbf351e63e3d118666ade46-7e15.html

http://help.adobe.com/en_US/AIR/1.5/devappsflex/WS5b3ccc516d4fbf351e63e3d118666ade46-7ff1.html#WS5b3ccc516d4fbf351e63e3d118666ade46-7c9c

http://help.adobe.com/en_US/AIR/1.5/devappsflex/WS5b3ccc516d4fbf351e63e3d118666ade46-7ff0.html#WS5b3ccc516d4fbf351e63e3d118666ade46-7cca

Uploader Phase 2 complete!

Joey — Sat, 15 Nov 2008 03:45:52 +0000

Uploader 0.2.0

So today after work I decided it was about time to start working on phase two of my Uploader tool. Phase two consists of allowing me to drag and drop an image URL into the app so the app can then download the image to a folder in my server, create a thumbnail of this image, and update the WordPress database with information about the new image. The new image would then show up the next time a person visits my blog. If you notice, there is now a “Pics of Interest” section on the sidebar to the right of the page (similar to what people are doing with the flickr plugin). Every time I drag an image URL into the Uploader, the new image thumbnail will show in that area and if you click on the thumbnail you’ll see the full size image.

It was actually much easier than I originally thought to make this work. Technically, the Uploader already has the drag/drop functionality and already takes in a URL. The only extra AS3 code was a check to see if the URL was an image and if so call the PHP page with a code (I’m passing –@IMAGE@– to know it’s an image – it was just the first thing that came to my head) so then PHP knows this URL should be treated as an image not just a URL. If you remember, phase 1 for the Uploader allows a person to drag/drop a URL into the app so it creates a new link under the “Links of Interest”.

Most of the changes were on the PHP end. The file that handles the request from the AIR app now does a check to see if this URL is an image. If so, it has to download the original image to the local server, make a thumbnail copy of it, and finally update the wp_images table (this is a new table I created for this - MySQL script) in WordPress. I’m using two PEAR packages to do this: HTTP_Request and Image_Transform. The same can be done just as easily without them but I like using PEAR on my projects. Here’s the code that does this (file.txt):

if($name == ‘–@IMAGE@–’)
{
// later use unique names?
   $name = substr($url, strripos($url,‘/’) + 1);

require ‘HTTP/Request.php’;
   $req = new HTTP_Request($url);
   $req->sendRequest();

  $fp = fopen(‘images/’.$name, ‘w’);
   fwrite($fp, $req->getResponseBody());
   fclose($fp);

// create thumbnail
   require ‘Image/Transform.php’;

//create transform driver object
$it = Image_Transform::factory(‘GD’);

//load the original file
$it->load(‘images/’.$name);

//scale it to 100px
$it->scaleMaxLength(100);

   //save it into a different file
   $tn = substr($name,0,strripos($name,‘.’)).‘-tn.’.substr($name,strripos($name,‘.’)+1);
   $it->save(‘images/’.$tn);

   $query = ‘
   Insert Into wp_images
   Values (null, ‘.$db->quote($name, ‘text’).‘, ‘.
$db->quote($tn, ‘text’).‘, ‘.$db->quote($url, ‘text’).‘);
}

Then I had to add some code to the sidebar.php for my template in WordPress to show the new section “Pics of Interest”. As you read this keep in mind this is just a quick beta and I’ll be doing refactoring later. This is by no means a finished product but it works fine and it’s a good start for anyone who wants to try it out. This is the new code I added to my sidebar.php:

class="block poi">

Pics of Interest

   require ‘./uploader/lib/DB.php’;
   DB::conn(‘live’);
   $db = DB::getInstance();

   $query = ‘
   Select image_file, image_thumbnail, image_origin
   From wp_images
   Order By image_id desc
   Limit 6;
   ’;

   $rs = $db->query($query);
   while($row = $rs->fetchRow())
print ‘$row[‘image_file’].‘"
title="From: ‘.$row[‘image_origin’].‘"> src="/uploader/images/’.$row[‘image_thumbnail’].‘" />’;
   ?>

The last thing I had to do was to add the style for my images in the styles.css file and I was done. Make sure your images folder has the proper privileges so you can upload an image into it. The next phase will be allowing me to drag files from my local file system into the AIR app so it’ll upload it to my server. Right now the Uploader only does something when a URL is dropped on it: adds a link if it’s not a image, adds the image if it’s an image.

Question, comments, conerns are always welcome!

Edit:

Uploader Phase 1

AIR widow/app drag, minimize, and close

Joey — Thu, 30 Oct 2008 18:44:34 +0000

In working on my Uploader tool, I had to do a bit of research on how to drag, minimize, and close an AIR app. Below is the summarized code in case anyone else is wondering how to do this.

import flash.display.Sprite;
import flash.display.MovieClip;
import flash.text.TextField;
import flash.desktop.NativeApplication;
import flash.events.MouseEvent;

public class Main extends Sprite
{
public function Main():void
{
// button events
mc_exit.addEventListener(MouseEvent.CLICK, exitApp);
mc_minimize.addEventListener(MouseEvent.CLICK, minimizeApp);
mc_drag.addEventListener(MouseEvent.MOUSE_DOWN, dragApp);
}

private function exitApp(event:MouseEvent):void
{
NativeApplication.nativeApplication.activeWindow.close();
}

private function minimizeApp(event:MouseEvent):void
{
NativeApplication.nativeApplication.activeWindow.minimize();
}

private function dragApp(event:MouseEvent):void
{
NativeApplication.nativeApplication.activeWindow.startMove();
}
}

Three buttons on the root of the flash file each with a listener that handles an action when the mouse is clicked on it. The drag button has to use ‘MOUSE_DOWN’ instead of ‘CLICK’ to work. NativeApplication is the AIR app and it looks to see which window is currently active to send the commands for.

Uploader Phase 1

Joey — Thu, 30 Oct 2008 15:49:47 +0000

Uploader 0.1.0

If you missed the previous post explaining what Uploader is go check it out.

So after having some fun with code I think I’m close to being done with phase 1. I currently have a working beta (0.1.0) that I’m going to share with you all and explain what I’ve done in case anyone else wants to do something similar. For the most part this was pretty straight forward. There were a few hiccups here and there that I’ll try to address in this post. The link to the code will be at the end.

First I looked online for some info on Drag/Drop in AIR and I found these two posts that I used for reference:

I should have read the comments in those post since they answer the question of using ‘NativeDragManager’ instead of ‘DragManager’. I had that issue and had to figure out why it wasn’t working.

This is an AIR app made in Flash. So far I only have one ‘Main’ class taking care of most of the action. I’ll clean the code up later and comment it but here’s the class so far. Using the ‘NativeDragEvent’, Uploader waits for something to be dragged over it. When it does, ‘dragEnter’ is called. Usually you can do some validation here to see if this is a file type you want to accept but I just do that later. Before a file/URL can be dropped you need to call ‘NativeDragManager.acceptDragDrop(object)’. By doing this, you let AIR know that the object is ready to accept the drop.

Once an item is dropped, ‘dragDrop’ is called to see if this is a file or a URL. If URL, ‘urlDropped’ is called which creates a listener for the loader var and sends the request to the URL that was dropped on the app. When the request is complete, ‘urlLoaded’ is called. The reason we are loading the dropped URL is so we can grab the title of that page in between the tag of the html. This is going to be used as the display name when we insert the new link in WordPress. ‘grabTitle’ does a quick substr and when all is done we do one last request. I had to make sure to remove the listener on ‘loader’ for ‘urlLoaded’ since later when I make a new listener and request, both the new and old listeners were triggering (so make sure to remove a listener from a loader if you are going to reuse that var with a different event call back). ‘SERVER’ is the constant that needs to by modified to point to the correct PHP page that will insert the link to the WordPress DB. ’urlLoaded’ finishes by sending two variables to the SERVER page, ‘name’ and ‘url’. After the request is loaded, the ’serverUpdated’ function will display if the process was successful or not based on what is returned by the PHP page. That’s pretty much it for the AS3 code. The PHP file is much more light weight. At first I had PHP request the HTML for the URL and strip out the title but after thinking about it, it makes more sense to put that burden on the client and not the server so I moved the code to Flash. The <a title="PHP Code file" href="http://www.joeyrivera.com/blog_files/96/file.html" target="_blank">PHP code</a> starts out by checking for the two needed variables ‘url’ and ‘name’. There’s a tiny bit of validation going on, definitely more to come as well as implementing some security features since at the moment anyone can submit variables to this page if they know the URL. (Before posting this, I decided to add a quick security check for now which will see if the remote IP address matches a couple different valid IP address – such as my home or work PC – and if it does, it will continue executing ) Then we make a DB connection to the WordPress DB. I have a standard DB class I use, just use regular <a title="php.net mysql_connect info" href="http://us2.php.net/mysql_connect" target="_blank">mysql_connect</a> instead (ask if you need help with this). Next is the query to insert the data into the ‘wp_links’ table. I kept the name default during my WordPress install, so the table name might be different for others. And at last, the query is executed and true is returned. The assumption is if we make it down that far everything worked correctly. Like I said, I need to add more validation and security but that will be later… maybe phase 2 or 3. The only issue I’m having now that I can’t seem to figure out is where the WordPress DB tracks what category a link is attached to? When I log into the WordPress admin area and go to manage links, all the links I’m inserting using this method don’t show anything under ‘Categories’. I’m assuming this information isn’t in the ‘wp_links’ table? If anyone has an answer to this, please let me know. Here is a <a title="FLA, Main.as, PHP file, and AIR xml file" href="http://www.joeyrivera.com/blog_files/96/Uploader_0.1.0.zip">zip</a> of all the files (FLA, PHP file, Main class, and AIR xml). Make sure to edit the ActionScript ‘SERVER’ const and DB info in the PHP file. * Quick side note, I need to give credit to my fiance Ashley who created a quick graphic for me to use last night. Visit her <a title="Ashley Fleishel" href="http://www.ashleyfleishel.com" target="_blank">site</a> to see some of her work. EDIT: I forgot to mention I made some edits to the Uploader-app.xml file. These settings were to remove the system chrome and make the app window transparent. More information about these settings can be found at <a title="Information about AIR" href="http://help.adobe.com/en_US/AIR/1.5/devappsflash/WS5b3ccc516d4fbf351e63e3d118666ade46-7ff1.html" target="_blank">help.adobe.com</a>. <a title="Uploader Phase 2 done!" href="http://www.joeyrivera.com/2008/uploader-phase-2-complete/" target="_self">Uploader Phase 2 complete</a> </article> <article> <h1>Uploader: Automating WordPress Links and File Uploads</h1> Joey — Thu, 30 Oct 2008 01:12:41 +0000 So now that I’m starting to get my WordPress and new hosting server settled in I’m trying to think of what I can create to help me automate some tasks. One of the things I know I’ll be doing quite often is adding new links to the ‘Links of Interest’ on the front page. I’ll also be uploading files/images to use on posts or to share with others but I’m too lazy to be ftping files constantly. So… time for a new tool! The Uploader (yeah I know, I’m very creative) is going to do all the above for me. This will be a app I can keep running on my desktop somewhere and when I need to upload a file or link I can just drag it over and drop it in. The tool will then figure out what kind of item was dropped in and what to do with it. Phase 1 will handle the links. The way the tool should work for links is the following. I visit a page that I find interesting and want to add to the ‘Links of Interest’. Instead of logging into WordPress to create it, I highlight the link from the address bar of the browser, drag it over to the app, and drop it. Now the app needs to figure out the <title> of that page to use as the name since we need a name and url to create a link. Once it has that, the tool will send the information to a PHP page which will do an insert to the links table in the WordPress DB. Phase 2 will deal with images and files. I may break phase 2 into two since I may do some stuff differently with images versus other files. I’m thinking I may want to upload images, create a thumbnail, and insert to a DB to display in the front page the same way some people do with their flickr images. Other files I would just upload and store somewhere else. I’ll give this more thought when I get to it. I’m going to be writing the tool in Flash CS3/AIR with PHP in the backend using the current WordPress MySQL DB. Stay tuned for updates! EDIT: <a title="Uploader Phase 1 done" href="http://www.joeyrivera.com/2008/uploader-phase-1/" target="_self">Uploader Phase 1 completed</a> <a title="Uploader Phase 2 done" href="http://www.joeyrivera.com/2008/uploader-phase-2-complete/" target="_self"> Uploader Phase 2 completed</a> </article> </main></body></html>