Daniel R.

j r conlin gave a talk about What can Yahoo! Do For You?

Yahoo Developer Network provides lots of tools, largely free to use, with Flash/Flex specific content. These include: Maps, Search, YUI, Flickr, del.icio.us, Upcoming, Pipes, MyBlogLog, BBAuth, YSlow, Astra, etc.

YUI: Lots of widgets that you don't have to build. Calender, grid, etc.

Pipes: RSS type mashup capabilities for non programmers.

AirMail: Drag and drop mail application written in AIR (not public yet).

Astra: YUI for Flex developers, BSD style license.

Tags: air flex onair2007boston yahoo

Posted by Daniel Rinehart at 2:10 PM | Permalink | Comments (1)

Thierry Curis from Akami gave a talk about using Flash Video in AIR.

Akami is creating an open source connection class (main site) that is robust, lightweight, and flexible, with credits to Will Law. Pure AS3 code. Setup to handle on demand content and protocol detection.

He gave a demo using the AkamaiConnection class to show streaming content. Some sample code is below. The complete source is available.

public function init():void {
    var ak:AkamaiConnection = new AkamaiConnection();

    // Some of the setup properties
    ak.createStream = true;
    ak.maxBufferLength = 5;
    ak.useFastStartBuffer = true;

    // Some of the events

    // handle connecting to the content
    ak.addEventListener(AkamaiNotificationEvent.CONNECTED, connectedHandler);
    // handle network connection going online/offline
    ak.addEventListener(AkamaiStatusEvent.NETCONNECTION, netStatusHandler);
    // know when the length of the stream becomes available
    // read it through the ak.streamLength property
    ak.addEventListener(AkamaiNotificationEvent.STREAM_LENGTH, streamLengthHandler);

    // where the stream is located
    ak.connect("hostname");
}

public function connectedHandler(event:AkamaiNotificationEvent):void
{
    var video:Video = new Video();
    video.attachNetStream(ak.netStream);
    ak.requestStreamLength("filename");
}

// once enough content has streamed
ak.play("filename");

// methods to control the playback
ak.resume();
ak.pause();
ak.seek(#);

Tags: air flex onair2007boston video

Posted by Daniel Rinehart at 3:14 PM | Permalink | Comments (0)

Andre Charland from Nitobi gave a talk about AJAX in AIR.

Why is AJAX in Air a good thing: code reuse, skills reuse, HTML is really good at some things, and maintaining existing UI patterns.

He talked about the benefits AIR gives over browser. This was a quick rehash of the list from the AIR API overview.

He showed an AJAX Fisheye Menu Example. Demonstrated that the same AJAX code works in a browser as in an AIR application, very little code shown.

Offline Saleforce.com demo. Showing online/offline sync capabilities. No code shown.

MultiVista: Construction document management application. Showed dragging and droping pictures from desktop into application as an alternative to uploading through a browser dialog. Directory scan to keep folders in sync. No code shown.

Tags: air ajax onair2007boston

Posted by Daniel Rinehart at 3:39 PM | Permalink | Comments (0)

Charles Freedman gave a couple of demos for Saleforce.com and Ribbit.

Salesforce.com

Salesforce provides a set of AIR specific classes to ease creating RIAs which leverage the data in Salesforce. AIRConnection.as is the main class which provides a layer between Flex and the AIR database which is based on SQLite. Looks like registration is required to get access to the toolkit.

Showed an example of how to use the AIR URLMonitor class to detect online and offline status. When online the sample application pulls data from the online database and caches it locally. Can then run queries against it and queue updates while offline.

Ribbit

Fully functional Flex based phone that allows adding telephony to any web page. Online version allows you to listen and read voice mail (they do some speech recognition). The AIR application downloads your call history to allow displaying it offline. Didn't feel like a convincing use of an offline application since it didn't look like it cached voicemail (even the transcribed version). He gave a live demonstration of calling someone in the audience.

developer.ribbit.com has developer tools.

Tags: air flex onair2007boston

Posted by Daniel Rinehart at 1:22 PM | Permalink | Comments (0)

Ryan Stewart gave the keynote as part of the on AIR Bus Tour here in Boston.

Adobe has primarily become a web company. Flash penetration is happening quickly, Flex is gaining ground, and other standards like PDF are being used everywhere.

Adobe has lately been focusing on: Runtime Performance (AVM2 and AS3), Development Model (Flex and Flex Builder), and Desktop Runtime (AIR). I'd also add that the CS3 enhancements for Flash/Flex sharing are another great example of recent improvements.

AIR is focusing on existing standards. Gives the ability to create an AIR application without needing to touch Flash at all, can be entirely HTML and JavaScript. The real advantage of AIR is the tight integration, like having JavaScript call Flash and vice versa. One of the key technologies included in AIR is WebKit, the same HTML rendering engine behind Safari. Better support for PDF will be included in later AIR releases.

AIR enables desktop interaction through AIR specific APIs for accessing the file system, network detection, notifications, application updates, drag and drop (with the host OS), and local databases using SQLite. More details in the AIR API Overview.

AIR support is currently only for Mac and Windows. Linux version should exist after 1.0 release. I think not having Linux out of the gate is sad, but nice to know they do have a road map which includes intended support for it.

Next up were a bunch of demos showing AIR applications. Some of them extended an existing website down to the desktop to make interaction easier and provide capabilities not available in a browser only experience.

finetune.com: Site is a combination of AJAX and Flash. AIR application extends music capabilities onto the desktop. Able to reuse most of the code. Hook into iTunes XML file to drive what music it will play. Shared profile information between website and desktop.

pownce: Micro blogging website. AIR application allows sending data by dragging and dropping it from the host OS. Website is in AJAX but they wrote the AIR application in Flex to provide additional flexible.

simple tasks: Quick AIR application thrown together using HTML and JavaScript.

buzzword: Still in private betas. Originally build in Flex as an online word processor. Created an entire text rendering engine in AS3 (possible because of the speed of AVM2). Document sharing, comments, fully WYSIWYG editing, and online/offline synchronizing.

Adobe Media Player: New way to deliver video content to users through channels.

airapps.pbwiki.com: Registry of publicly available AIR applications. People are encouraged to add links to their application.

At the upcoming MAX conference (more information below) Adobe will release Beta 2 of AIR and announce the winners of AIR Dev Derby contest. There is still time to enter the derby, deadline September 5, 2007.

If you can only make it to one conference, the MAX conference September 30 - October 3, 2007 in Chicago is highly recommended.

Tags: air flex onair2007boston

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

Mike Chambers gave a talk about some of the technology being used on the tour bus. Using AIR applications to help track the location, what is going on, and display the information on the web.

Code for all the applications is available from Google code.

AIRTracker: Application that gets GPS info periodically and posts it to the server. The AIR application is passed the GPS coordinates via command line arguments. Uses a program called GPSBabel to get the GPS information. Command line arguments are handled through an invoke event.

Shell.shell.addEventListener(InvokeEvent.EVENT, handler);

If your application is already running, the handler will get called again with the new arguments. The application queues up GPS point data to handle server up/down and connection online/offline. Stores them in a local file using binary serialization of the AS3 array. It waits for ACK from server before removing data from the array. In order to serialize the custom class in the array you need to add metadata to the class.

[RemoteClass(alias="com.adobe.onair.geo.GeoPoint")]

He pointed out that there is no compile time checking so you could type the class name wrong. Showed an example using SocketMonitor to do a low level check for connectivity. The application demonstrates a common pattern of queuing and saving data locally and pushing the data up to server as connectivity is available. Handles both connectivity issues and application crashes. Shows a good robust application. Application and server interaction is easy since there is a single source of data which removes the need to handle conflict resolution.

He next showed pictures of the hardware on the bus. The hardware for grabbing the GPS coordinates was a Garmin GPS 18, which is a hockey puck sized device that attaches to the top of your vehicle.

AIRSnapshot: Application that every minute takes a picture (JPG format), geo encodes it, and uploads it to Flickr with appropriate tags. Application shows handling bigger data and multiple queues. It has to go to the server twice, first to upload the picture and a second time to add the geo tags.

flump: Application that downloads all of your raw Flickr images. Used this to pull all of the pictures from the bus and put them together into a movie available on The Flex Blog.

Audience asked about using AIR to broadcast a live video stream, which sounded like it was possible.

Tags: air flex onair2007boston

Posted by Daniel Rinehart at 4:22 PM | Permalink | Comments (0)

Daniel Dura gave an overview of the AIR APIs.

Air provides a rich stack of APIs that is available to both Flash/Flex and HTML and runs on multiple platforms. These APIs cover: network detection, file I/O, custom window chrome, multiple windows, native menus, drag and drop with clipboard, system tray and dock notifications, application signing, application icons, file type registration, background applications, application updates, and network support.

He next drilled into some of the above areas in more detail. AIR specific classes are included in the Flex 3 documentation available on LiveDocs.

Windowing: Multiple window support, transparent windows, different window types (lightweight, utility, and standard), z-index ordering, and always in front.

Pixel Perfect: Alpha window overlay that shows width and height with no standard window chrome.

HTML Control: Integrated into Flash rendering pipeline (can apply effects to it), script bridging, and override default behavior (navigate, history, window, resize).

File I/O: Full read/write access, native file dialogs (save, select, select multiple, directory), and Async and Sync APIs.

Database: SQLite embedded database, zero setup, single file, and based on SQL92.

Drag and Drop/Clipboard: System level drag and drop (AIR to AIR, AIR to OS, OS to AIR, etc.), multiple formats (URL, files, text, serialized AS objects), and modifiers (link, copy, move). Drag and drop is handled through TransferableData objects.

Application Icons: No feed to know about icon format, can just supply PNG images.

Service Monitoring: Monitor network interface changes, monitor services, and extensible (supports multiple service types). URLMonitor class is one example.

Flex Builder: Debugging, code hinting, packaging, and application signing.

Tags: air flex onair2007boston

Posted by Daniel Rinehart at 2:39 PM | Permalink | Comments (0)

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)

Mike Chambers gave a presentation about building your first Adobe AIR application with Flex.

A quick poll of the audience showed about 60% of the audience develops with Flex/Flash and 40% develops with HTML/ColdFusion/PHP.

For the demonstration he used the Flex Builder 3 Beta to create a sample application. This version has native support for AIR applications. You can extend the beta by using your Flex Builder 2 license key.

There is an included Flex AIR project wizard. Creates an Application.mxml (Flex Code) and Application-app.xml (metadata) file in your project.

The Metadata file is well commented, but he called out certain values:
appId: Used to distinguish each application, only used internally by the installer process. Next beta will using code signing to handle identifying applications.

name: Application name as it is displayed to the user and used by the OS to display the application in the process viewer, etc.

title and description: Name and description shown in the AIR installer.

rootContent: Most important tag. Defines what and how your application gets launched. "systemChrome" is standard or none, it toggles native window chroming. "transparent" determines if the background of the application is rendered or not (use this to create non standard chrome). "visible" determines if your application is visible when it launches. Flex Builder has special syntax for the rootContent text, but in most cases it points at your Application.mxml.

The main application code works like a standard Flex application:
Using design view he quickly threw together the application. In this case it was just a simple button. Primary change for a standard Flex application is that the root MXML tag is WindowedApplication instead of Application. WindowedApplication gives access to native window APIs. With Flex Builder you can easily run and/or debug your AIR application. The work flow is similar to a Flex application.

Packaging your application:
Badge based install process which can install both the runtime and your application all through a single website click. Flex Builder includes the ability to export your code as an AIR application. Dialog lets you select which files get included. Currently there are some cryptic errors when you don't include required files which should be fixed by the next beta.

In descriptor file you can specify application icons:
Give AIR an PNG file for your application and it will handle making it work on all the different platforms. Back in the metadata file uncomment the icon block and set just the 128x128 icon and the others are taken care of. Icons aren't required, but they add polish.

Doubling clicking exported .air file launches the installer. Still tweaking install dialogs. Under the hood it sets up everything needed to run the application. On Mac it gets installed into the user's application directory (this may change). Looks and acts like a native application.

Other Resources:
Apollo for Flex Developers Pocket Guide: Released under Creative Commons License.

Adobe Integrated Runtime (AIR) for JavaScript Developers: Released under Creative Commons License.

adobe.com/go/air/: Best link to get started.

onair.adobe.com: All of the sessions from the tour are online in video format (recorded at various stops along the tour). Code created on the bus is available on Google code including media assets. They are also publishing different data feeds that people can play with.

Tags: air flex onair2007boston

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

Chafic Kzoun gave a talk about how to use Native Windows with AIR.

He showed a bunch of simple examples which demonstrated the native window capabilities in AIR. Best was a screen size tester called PixelPerfect available from Adobe Labs.

NativeWindow is the core of what you will work with. Keep in mind Window is also just a class. Some options need to be setup before the window is created, while others are runtime properties. This is why the AIR application descriptor forces you to specify certain options.

// Create a simple utility window and display it
var options:NativeWindowInitOptions = new NativeWindowInitOptions();
options.type = NativeWindowType.UTILITY;
var nativeWindow:NativeWindow = new NativeWindow(true, options);
nativeWindow.activate();

A more complex example that uses more options.

package com.example {
    import flash.display.NativeWindow;
    import flash.display.NativeWindowInitOptions;
    import flash.display.NativeWindowSystemChrome;

    public class StandardWindow extends NativeWindow {
        public function StandardWindow() {
            var options:NativeWindowInitOptions = new NativeWindowInitOptions();
            options.systemChrome = NativeWindowSystemChrome.STANDARD;
            options.maximizable = true;
            options.minimizable = true;
            super(true, options);

            alwaysInFront = true;
            title = "Custom NativeWindow";
        }
    }
}

Many options available with the NativeWindow API, best to look at the documentation. "bounds" gives you lots of flexibility. Lots of good events (resize, move, moving, etc.)

The Window component is a wrapper around the NativeWindow. Flex provides an out of the box chrome with standard minimize, maximize, and close buttons and adds a status bar. Can be easily used in MXML. Use open() after creating the instance instead of activate() like you would with a NativeWindow. The showFlexChrome Window attribute can turn off the default Flex chrome. The Window class also provides access to the native window through its nativeWindow property.

<?xml version="1.0" encoding="utf-8"?>
<mx:Window xmlns:mx="http://www.adobe.com/2006/mxml"
systemChrome="none" showFlexChrome="true" showStatusBar="false" transparent="true">
</mx:Window>

The Screen singleton gives you access to information about the users' monitors. Has support for multiple displays along with supplying sizes and capabilities. Screen.mainScreen.visibleBounds will return visual area that is available taking into account task bar or dock (doesn't look like this is working in the current AIR beta on the Mac).

The Flash CS3 AIR update allows you to export and run your Flash application as an AIR application.

Tags: air cs3 flex onair2007boston

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

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)

On Friday I attended the on AIR bus tour in Boston. It was a free one day conference primarily sponsored by Adobe. The conference focused on getting people introduced to the AIR platform. While I was already familiar with most of AIR's capabilities I thought it would be a good opportunity to network with other Boston developers and meet a bunch of people from Adobe.

Overall Adobe did a good job with the conference. My only complaint was that the building was very warm the entire time. The building is a green facility so it doesn't have A/C. The hundred plus people that were there along with their laptops, combined with a Boston heat wave, overwhelmed what fans the building did have. Adobe did run out to grab some additional fans which helped, but it got uncomfortably hot at times. Thankfully Adobe had a full menu planned with lots of beverages. A continental breakfast, BBQ for lunch, and a beer and Mexican social hour towards the end.

During the conference I decided to blog about each session. I was posting my original rough drafts shortly after the conclusion of each session. Since then I've gone back to fix some typos, add additional links, and expand the content as needed. Below is the full list in presentation order:

• Keynote
• Introduction to Adobe AIR with Flex
• Building AIR with HTML and JavaScript
• ActionScript and JavaScript Integration
• Business Class AIR
• Native Windows
• Yahoo and Adobe AIR
• AIR API Overview
• AIR and Flash Video in 20 minutes
• AJAX in AIR
• Taking apart the bus
• Quick Demos

I felt the vendor sessions were not that valuable. I understand why they needed to happen and that without them the tour may not have happened or have been free. For people new to the platform seeing some of the vendor applications may have sparked some ideas. Alas in most cases source code for those applications isn't available which made them feel more like a sales pitches.

Unbeknownst to me, Mike Chambers plugged my blog towards the end of the event to let people know it was a resource for anyone that hadn't taken notes but wanted a summary of each session. Even more shocking was during the software raffle I received an honorary copy of CS3 for having blogged the summaries. I'm still in shock about that. Given that receiving the software was an afterthought, I hope you won't accuse me of any bias.

Tags: air flex onair2007boston

Posted by Daniel Rinehart at 2:53 PM | Permalink | Comments (1)