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:

1. Check if AIR is installed (If not, install)
2. Check if my app is installed (If not install)
3. 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:

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:

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

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:

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

I’ll be using Zend_Db_Table_Abstract to communicate with the db tables from my project and I’ll be creating a model for each table as well to store and manipulate data. I’ll be working with lots of tables in the database and many have lots of fields.

I start by opening up Zend Studio on one monitor and SQL Query Analyzer on the other and get to work. The first table I want to work with is the ‘Student’ table. I create a new file in my project called Student.php. Place it on my models/DbTable folder and inside I simply have to declare ‘_name’ as a protected property with the value ‘Student’ and extend ‘Zend_Db_Table_Abstract’. Easy enough but now I want to create the model I will be using to convert the database data into workable objects through my mapper class.

Problem

I create a new file called ‘Student.php’ and save it to my models folder. I open the file up and now I have to create a property (it’s actually an array _data with all properties defined as keys inside) for each field in the Student table… all 50 of them! I have to be careful to name each correctly as well as to not accidentally miss some field. It ends up being a time consuming process and inefficient so I start looking for a better way to accomplish this.

Solution

This is where Zend_CodeGenerator_Php_Class comes in. This component of Zend allows you to create php code on the fly. My theory was, instead of manually creating all these files and typing all the field names (very time consuming with lots of room for error), I could use Zend_CodeGenerator_Php to create all the content of my classes and echo it on the screen so I could copy/paste. Once I had this working, I took it to the next step and included the process of saving that content to files on my project folder. After working on this last night, everything worked like a charm and my classes are easily and quickly created, mapped directly to my database structure, by simply calling one method. No room for error either and I can run this at any time!

Code

I’ll explain the code below. You can download the file if you like.

I start out by getting some needed variables such as my $db adapter and paths that I will use to store my files in. For this example I am using MySQL (5.1.x) database and Zend Framework 1.9.5. If you are not familiar on how to setup your database adapter here is the documentation.

The next step is to call listTables on the db adapter to get an array of all the tables in the database. We want to loop through the array and create two files for each table: an object model and a db table abstract. Each file has a corresponding instance of Zend_CodeGenerator_Php_Class. The first one we create in the code is for the object model. The docblock is the optional comments for the class if you want them. setName is the name you want for the class. In this case I’m using ‘Ct_Model_$name’ where name is the name of the table without any underscores and with the first letter of each word in uppercase. For example, if the table name is: ‘user_info’, name is ‘UserInfo’.

The next information I need is all the fields for that table so I can add them to my data array for each model. Calling describeTable(‘tableName’) returns that. Now that I have my array with all the fields information for this first table, so I loop through to:

• assign names and default value(s) of 0 for an int field type or null for anything else into the columns array.
• track the primary key(s) for each table. Some tables can have more than one.

setProperty is where we create the protected data property array for this class. The name of the property is ‘_data’ and the default value is the array we just created ‘columns’. You can also add a docblock to the property which I did here. Since there is no Zend_CodeGenerator_Php_Docblock_Tag_Property I just used the default Tag class passing it name ‘var’. Had I used Zend_CodeGenerator_Php_Docblock_Tag_Param, my comments would have shown ‘@param’ when it is really ‘@var’. Try it and you’ll see what I mean.

Our first class for the model is now complete! I’m echoing it to the screen so I can see it when I view-source or just use Zend_Debug::dump() instead to see it formatted. The next line saves the newly generated code to a file at a temp_path location. It’s important to add ‘<?php’ before class->generate() so your file have the php tag in them.

The next part of the code creates the second class that extends Zend_Db_Table_Abstract. I won’t go into detail with what is happening there since it’s very similar to the above. If you have any questions do feel free to ask. That’s pretty much it. Run this code, make sure you have your directories created and after executing you should now have two files for each table in your database.

Here is an example of what you should see after running the page:

This is a work in progress since I’m still trying different things. After I finished writing this code I went back to the zend docs and noticed there is Zend_CodeGenerator_Php_File. Seems to do the same thing I did above with file_put_contents. Feel free to try that instead.

Conclusion

I really enjoy the flexibility of using this method instead of typing everything out myself. It’s quicker with a lot less room for error. I’m sure there are already other programs/apps out there that do this but hey, it’s more fun to reinvent the wheel! Plus I learned about another Zend Framework module that I had not used before.

EDIT:

I had to make to small edits to this post to work more efficiently. The first was to change the line where we set the default value of each field for the columns array to ” instead of null. The second was to set the primary property only if there was a primary field found on that table since not every table will always have one.

In this post, I’m going to explain how to create web services that can be accessed via AMF, XMLRPC, JSON, and REST using the Zend Framework. Hopefully these should cover most uses out there. I left SOAP out since I don’t really see myself using it any time soon. I will be communicating with a database as well to make the tutorial more informative. The db will consist of one table with information about courses such as mathematics courses.

I’m going to show you the final product first, hopefully to catch your attention so you’ll read the rest . This is what the final product will look like. If you look at the following links in Chrome, do a view source to see the formatted response.

XMLRPC

One course:  http://www.joeyrivera.com/ZendWebServices/xml-rpc/course-info/abbr/math101/
All courses:  http://www.joeyrivera.com/ZendWebServices/xml-rpc/courses-info/

JSON

One course:  http://www.joeyrivera.com/ZendWebServices/json/course-info/abbr/math101/
All courses: http://www.joeyrivera.com/ZendWebServices/json/courses-info/

REST

One course:  http://www.joeyrivera.com/ZendWebServices/rest/course-info/?method=getCourseInfo&abbr=math102
All courses:  http://www.joeyrivera.com/ZendWebServices/rest/courses-info/?method=getCoursesInfo

AMF

One course:  http://www.joeyrivera.com/ZendWebServices/amf/course-info/abbr/math101
All courses:  http://www.joeyrivera.com/ZendWebServices/amf/courses-info/

Now let me show you how to make this work. First thing is setting up the database. If you already have a database you can communicate with just use that, there’s nothing specific to the database I’ll be using that requires you to create it. But if you want to follow along here are the details. I’ll be creating a database called ‘sample’ with a table called ‘course’.

Now that you have the table created, add some sample data:

Now the code. I have one Model class called Service. This is the only class that interacts with the database. For each format such as XMLRPC, JSON, etc. I created a Controller to handle that formats needs. All these controllers initialize a Zend server class if needed, call the method needed from the Service class, and return the formatted response to the browser.

This is what the Service class looks like:

Two methods make up this class. ‘getCoursesInfo’ (plural) gets the information from all the courses in the ‘course’ table. ‘getCourseInfo’ takes in one parameter ‘abbr’ and returns the information for the course who’s abbreviation matches ‘abbr’. You can create as many methods as you like here and these are the methods your controllers will call. One thing to note, you MUST add comments to the methods for XMLRPC calls to work. It uses the variable declaration and return declaration in your comments to know what data type to expect in and out.

Now lets move on to the first format: XMLRPC.

The init function gets called for any action in the controller. I am turning off the layout and view since I won’t be using them for these examples. Then I initialize the proper zend server class, in this case the ‘Zend_XmlRpc_Server’ class. The next line ‘setClass’ tells the server what classes will be handling incoming requests. You can add several classes and/or functions. For this sample, I’m simply attaching one class ‘Service’ which I described earlier. ‘postDispatch’ gets called after the action for the controller is done executing. In my ‘postDispatch’ I tell the server instance to handle the incoming request.

‘coursesInfoAction’ creates a request object that calls the Service class ‘getCoursesInfo’ (plural) method. Likewise, ‘courseInfoAction’ does the same calling ‘getCourseInfo’ (singular) but makes sure the abbr variable is set. Which ever of these two is called, a server instance gets initialized, the request variable is populated, then the server handle method is called so the request is returned to the browser with the correct format. I’m doing request objects here so I can easily test and make sure these methods are working correctly by just loading the url.

All the other controller classes look very similar, each initializing a server instance if necessary and then telling the server instance to display the results correctly.

Here’s the JSON controller:

You’ll notice there is no JSON server class. All we are doing here is grabbing the data set from the Service class and calling Zend’s Zend_Json::encode to convert the data into a properly formatted JSON string and echoing it out.

Here you can see the implementation for REST:

Starting to look repetitive? Once you figure out how to make one format work, the others are very similar. Part of using REST is passing a method parameter in the query string. The method you pass is the method of the service that will be called. This is why coursesInfo and courseInfo don’t do anything but validate if necessary.

Finally if you work with Flash or Flex like I do some times, you’ll want to use AMF if you are working with complex or large data sets. Here’s the AMF example:

If you try to access the url for amf in your browser you’ll be prompted to download a file because AMF is not a text format but a binary format that Flash and Flex read. You’ll just have to take my word on that it’s working :p or create a quick Flash/Flex app that calls this service.

This is pretty much all I have for you all today. My next post will be on creating the different format clients to call these services. Thanks for reading. If you have any questions or comments feel free to post.

EDIT: Added a new post on how to use Zend_Json_Server and how to call it: http://www.joeyrivera.com/2011/zend_json_server-and-how-to-call-it-via-json-rpc-2-0/

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):

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:

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

Building Personal Brand with Social Media (Gary Vaynerchuk)
I really enjoyed this session. It was all about why personal branding is so important and various ways to get a person started. A lot of this was stuff I’ve been hearing for years (specially from my friend Moses) but I never did anything about. Gary said things that made sense and put things on a different perspective for me. As you call tell, it worked. I now have a blog and even a twitter account!

Google App Engine: An Overview (Pete Koomen)
This was a good introduction to Google App Engine for me. I first learned about Google App Engine from Aral Balkans blog but I never did much research on it to find out what it’s all about. After this session I have a better understanding on what this does and how I could use it at some point.

Beyond Web Standards: Crafting Design and Development Standards (Kimberly Blessing)
This was another good one. All about trying to create/use standards. This should be common sense but the reality is I haven’t worked anywhere yet were we had any kind of standards. I’m going to make it a personal goal to create some sort of standards to implement at my current company. We do so much and all our documentation, code, naming conventions, folder structures, everything is different. Every project seems to be completely different from the next. Things would be much more efficient at least for us (the developers) if we all followed some sort of standards.

Architecting Human Behaviour (Andy Budd)
This was one of my favorite.  Andy did a great job on making a very fun and interesting presentation. I was 100% engaged the entire time wanting to hear more on what he had to say. It was very interesting to hear the tricks being used out there in the way buildings are structured to guide customers through certain paths increasing the amount of time customers stay in the building and increasing the chances the customers will purchase more items. The coolest example was all the levels of details put on how things are laid out on a grocery store and why they are built the way they are. There was a ton of neat info that I now have to think about how I can put these ideas into practice on my own projects. Looking forward to hearing more on what Andy has to say.

Building Pyramids out of Bits: How can we build software that lasts? (Cliff Hall)
This was an interesting one too. Cliff shared his experiences on how over time, things change and the code you were so proud off can eventually fade away. Technologies change, new languages surface and old languages sometimes stop being used. It’s important to develop code in a way that will be easily transferable from one application to the next. He talked about PureMVC and I’m definately going to look more into it. The idea behind it is having a single framework that is platform independent based on MVC. If you code in AS3 using PureMVC, you should be able to transfer the same code to Java or PHP without too many problems since the structure is the same.

Now I need to look at some of the recordings for the sessions I missed. I’m sure there are a few other great ones out there.

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:

• http://www.senocular.com/air/tutorials/dragdropimageviewer/
• http://www.mikechambers.com/blog/2007/11/07/air-example-native-drag-and-drop/

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 <title> 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 PHP code 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 mysql_connect 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 zip 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 site 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 help.adobe.com.

Uploader Phase 2 complete

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:

Uploader Phase 1 completed 
Uploader Phase 2 completed