Daniel R.

Kevin Hoyt gave a talk about how to use the AIR SDK to develop an AIR application using HTML and JavaScript.

The AIR SDK includes:
Binaries:
adl: Launcher for AIR applications
adt: Packager for AIR applications

Frameworks:
AIR Aliases: shortcuts for HTML development
Service Monitor: ability to detect if you are online or offline

Application descriptor template, code samples, and badge packager and source are also included. Currently 4 clicks to install and launch an application from a website using the badge process.

HTML Main Application:
He created a standard HTML file and saved it as index.html (not a requirement to be named index.html).

From a terminal running the adl command with -help will give you information on the command line syntax. Besides launching your application, adl can also pass command line arguments into your application.

He created an application descriptor from the template. Import difference from the Flex example was to set the rootContent to index.html. Descriptor also supports fileTypes which lets you associate a file extension with your application.

WebKit will include CSS3 support.

DreamWeaver has extensions that suppy AIR capabilities. Can launch applications and edit descriptors from within DreamWeaver.

He added an HTML text form field and button. Created an event listener which is registered as part of a body onLoad function. The first version of the event listener function popped up an alert to test that everything was working. Next he pulled the text form value out and saved it to disk.

In JavaScript, the rough code is:

var file = window.runtime.flash.filesystem.File.desktopDirectory.resolve('boston.txt');

// If you include AIRAliases.js this can be shortened to
var file = air.File.desktopDirectory.resolve('boston.txt');

// Now that we have a file reference:
var stream = new air.FileStream();
stream.open(file, air.FileMode.WRITE);
stream.writeMultiByte("text", air.File.systemCharset);
stream.close();

The AIR API also has support to read and write in an asynchronous mode using events.

Aptana: Open Source Eclipse IDE for JavaScript/HTML development and debugging. Includes built in support to run and package AIR applications. Best part is the sample applications that come bundled with it. Meebo directory includes custom HTML chrome application example.

Tags: air html javascript onair2007boston

Posted by Daniel Rinehart at 11:10 AM | Permalink | Comments (0)

Kevin Hoyt is back with a second talk about how to integrate ActionScript with JavaScript within a single AIR application. Currently on the web you have an HTML page and throw in an embed to display some video, but it is a black box. Likewise a Flash application is mostly not interacting with HTML at all. Script bridging is the magic that makes it all possible.

He showed a simple Flex application with a location field that loads and displays an HTML page within AIR. Currently AIR can't display Flash embedded in an HTML page that it is rendering. That should be supported in a later beta.

AIR has a Flex tag called which can render HTML content. Primary use is to set the location property, which will load and display the URL given. He showed an AIR HTML "Browser" in 5 lines of MXML code:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:TextInput id="input" enter="web.location = input.text;"/>
<mx:HTML id="web" width="100%" height="100%"/>
</mx:WindowedApplication>

In ActionScript you have full access to the HTML object and through it access to all JavaScript like functions such as getElementById. To read an HTML value in ActionScript:

// Read an HTML text field
var name:Object = web.javaScriptDocument.getElementById('txtName').value;
// Update an HTML text field
web.javaScriptDocument.getElementById('txtName').value = "text";

Data comes back as a JavaScript String, which doesn't map directly to an ActionScript String. The returned value should be stored as an Object. He didn't mention about gotchas when going in the other direction.

Next he showed how to use native drag and drop. The example took a desktop image and droped it on the Flex application. NativeDragEvent and friends let you handle the drag and drop. Once the Flex application got the image, it introspected the HTML and replaced all images in the rendered web page with the dropped in image.

The next example showed how JavaScript can leverage and manipulate ActionScript. JavaScript developers should consult the Flex 3 SDK documentation to know what is available and what packages the classes are in.

The application's back story is about wanting to display the user's version of an icon for a specific file extension. Showing a sample from the core in the Aptana (source available) that knows how to determine and show the custom icons. OS returns an Array of different icons. The example uses PNGEncoder in ActionScript to render the information. HTML can include ActionScript libraries by specifying the SWF as the script source.

<script src="library.swf"></script>

The last example was showing that HTML rendered in AIR can be manipulated by Flash. It loaded a simple HTML page and then applied Flash filters to various divs. Really cool capability. No source shown.

Tags: air flex html javascript onair2007boston

Posted by Daniel Rinehart at 12:04 PM | Permalink | Comments (0)

The last session was a collection of quick demos from the speakers and audience members. My apologies in advance if I missed your contact information.

Todd Prekaski (audience): Demoed a photo album builder application. Allows pulling in pictures from the local file system. Has some integration with Flickr and zoomr (wasn't completely clear on what that functionality was). Has random photo placement mode for viewing a collection of pictures. Has ability to email collection to contacts. Hopes to add online synchronization to pull down additional image presentation components (stylized borders, filters, etc.). Tool also supports photo resizing, rotation, and other simple effects.

---

Daniel Dura: TwitterAIRCamp is a way to do a nice public presentation of Twitter data. If you want to get in on the fun onairbustour is the Twitter name.

Salsa created by Christian Cantrell. Application that does drag and drop file uploading/downloading to Amazon S3.

---

Johnny Boursiquot (audience) from Pier: Business value calculator being used by companies like HP. Goal is to make sales people mobile and allow offline ROI value calculations. It uses Flex charts, graphs, and HTML output (will switch to PDF when supported). Took approach of what is the business value of AIR. Primary reasons for going with the platform included: way to extend backend service onto the desktop, easy to update, and online integration allows robust security model.

---

Kevin Hoyt demoed some more applications from Adobe labs. He created an AIR version of MapCache. Allows saving maps, copy to clipboard, and drag and drop. Rendering an HTML version. Mentioned source is on his site.

Geocode allowing geo tagging an image by dragging it onto the map. Still working on this application. Again an HTML/JavaScript application. It handles such activities as copying images, extracting thumbnails, and displaying the images in the UI. Makes heavy use of asynchronous events to do it on the fly without hanging the UI.

Kevin also ported a version of Ted Patrick's AIR Chat to HTML/JavaScript. The application uses Amazon EC2, running Python socket server, to provide simple chat services. The port uses the Ext JS Framework. HTML version is not posted yet.

---

Mike Chambers: Is a World of Warcraft player and uses Wowhead to track game information. Wrote an AIR wrapper around Wowhead. It is an always on top window that allows typing in a search term and launching the results in a browser window.

Hubble: Geo tagging image uploader for Flickr. Shows where images are located on the map. Nice UI to geo tag and upload. Can drag image onto map to tag it with drop location. He mentioned that the application is fairly buggy right now.

GeoPlotter: Show a Yahoo map and you can plot any latitude longitude pair on the map. Supports ability to drag a data file of way points and plot them all on the map. Most of his code is on Google code.

Ascension: One of the first AIR applications. It is an MP3 player and way to explore your music. Supports importing your music from iTunes, grabbing album art of Amazon, and displaying lyrics from lyricwiki. Has ability to display a slide show of images from Flickr that match the artist's name.

Tags: air flex html javascript onair2007boston

Posted by Daniel Rinehart at 5:58 PM | Permalink | Comments (1)