January 31, 2010

AIR 2.0 and Presentation Nightmares

Tonight I spoke at the Boston Flex User Group about AIR 2.0 with a focus on the new Native Process API and Networking APIs. Alas the talk didn't go as planned since I forgot my bag of video output adapters at home and didn't notice until I was setting up. The meeting was only a few blocks away from the Allurent offices so I ran (more like a sprint) back to find suitable replacements. Alas in my rush to borrow an adapter (only being able to find a mini display port to HDMI) I ran afoul of the old Mac VGA/HDMI mechanical virus issue. However, it wasn't until after sprinting back to the meeting and futzing with projectors for 15 minutes that I realized this issue. Thankfully a fellow attendee loaned me his computer and using the USB drive I did have on me, I managed to gave a modified version of the talk sans running demo code. I'd like to thank those in attendance for their patience, apologize for my forgetfulness, and hope that at least a little information was conveyed. A copy of the presentation is available in PDF format. The most import code snippets are below:

Define a Native Process Startup Information instance:

// _mxmlc, _cssFile, _brandFile, and _kitDir are of type File
var nativeProcessStartupInfo:NativeProcessStartupInfo = new NativeProcessStartupInfo();
nativeProcessStartupInfo.executable = _mxmlc;
var mxmlcArguments:Vector.<String> = new Vector.<String>();
nativeProcessStartupInfo.arguments = mxmlcArguments;
nativeProcessStartupInfo.workingDirectory = _kitDir;

Create and attach listeners to a Native Process:

// _nativeProcess is of type NativeProcess
_nativeProcess = new NativeProcess();

_nativeProcess.addEventListener(Event.STANDARD_ERROR_CLOSE, handleStandardErrorClose);
_nativeProcess.addEventListener(Event.STANDARD_INPUT_CLOSE, handleStandardInputClose);
_nativeProcess.addEventListener(Event.STANDARD_OUTPUT_CLOSE, handleStandardOutputClose);

_nativeProcess.addEventListener(IOErrorEvent.STANDARD_ERROR_IO_ERROR, handleStandardErrorError);
_nativeProcess.addEventListener(IOErrorEvent.STANDARD_INPUT_IO_ERROR, handleStandardInputError);
_nativeProcess.addEventListener(IOErrorEvent.STANDARD_OUTPUT_IO_ERROR, handleStandardOutputError);

_nativeProcess.addEventListener(ProgressEvent.STANDARD_ERROR_DATA, handleStandardErrorData);
_nativeProcess.addEventListener(ProgressEvent.STANDARD_INPUT_PROGRESS, handleStandardInputProgress);
_nativeProcess.addEventListener(ProgressEvent.STANDARD_OUTPUT_DATA, handleStandardOutputData);

_nativeProcess.addEventListener(NativeProcessExitEvent.EXIT, handleNativeProcessExit);

Typical event handling code:

private function handleStandardOutputData(progressEvent:ProgressEvent):void {

private function handleNativeProcessExit(nativeProcessExitEvent:NativeProcessExitEvent):void {

Create a new server socket that listens on an OS selected available port:

// _serverSocket is of type ServerSocket
_serverSocket = new ServerSocket();
_serverSocket.addEventListener(Event.CLOSE, handleServerClose);
_serverSocket.addEventListener(Event.CONNECT, handleServerConnect);

Handle a new incoming connection:

private function handleServerConnect(serverSocketConnectEvent:ServerSocketConnectEvent):void {
    var socket:Socket = serverSocketConnectEvent.socket;
    socket.addEventListener(ProgressEvent.SOCKET_DATA, handleSocketData);
    socket.addEventListener(Event.CLOSE, handleSocketClose);
    socket.addEventListener(IOErrorEvent.IO_ERROR, handleSocketIOError);

Handling socket data:

private function handleSocketData(progressEvent:ProgressEvent):void {
    var socket:Socket = Socket(progressEvent.target);
    var byteArray:ByteArray = new ByteArray();
    socket.readBytes(byteArray, 0, socket.bytesAvailable);

    socket.writeUTFBytes("HTTP/1.1 404 Not Found" + CRLF);
    socket.writeUTFBytes("Connection: close" + CRLF);

Tags: air flex

November 22, 2009

Keynote (RIA Unleashed: Boston 2009)

Ryan Steward

Three trends being focused on right now:
Rich Internet Application which Adobe have been doing for a long time.
Cloud Computing is coming to the forefront. Have your data available anywhere. SoA is becoming the norm. Clean separation between front-end and back-end.
Desktop and Devices making the experience available everywhere.

All rolled into contextual applications. Applications where and how your users want them.

finetune.com example of contextual applications. Explore with the traditional browser, then use desktop specific application, iPhone version, and Wii specific version.

Take advantage of device specific features.
Move data and state between contexts.

New runtime support:

Flash Player 10.1 geared for smart phones. Approximate 60% memory reduction with no code changes. Better battery performance.

AIR 2.0 extending ability to leverage native code. Native installer and application support.

Code an application in Flash CS5 and run it natively on iPhone.

New tooling support:

Flash Catalyst is all about designer having more control over UI without touching Flex.

Flex 4 is all about separating logic and look. Components based on states and skinParts.

Demo of Flash Catalyst.

Adam Lehman

New IDE for ColdFusion development called ColdFusion Builder also Eclipse based. CFML support for: code assist, insight, debugging, and ORM insight. Also have code assist for: HTML, DOM, CSS, JavaScript, AJAX (jQuery, ExtJS, etc.), and SQL. Code snippets, log viewer, AIR 2.0 Support. IDE can be extended through CFML extensions. CFScript allows tag-less components. Additional ORM support for CFCs based on Hibernate with CFML languages but still have access to low level settings. Expanded access to ColdFusion services for PDF, charting, document services, etc. all exposed through a SOAP & AMF interface with granular security control.

New CF SWC that will give AS3 / MXML libraries for accessing these functions like: , , , etc. Flash Remoting is 9 times faster in the latest versions. Now has full BlazeDS integration.

ColdFusion 9 has many PDF enhancements. Headers, footers, optimize, extract text and images, and converting Word to PDF. Has support for working with spreadsheets.

Demo of ColdFusion.

Ryan Steward

New Flash Builder adds data centric design features, better refactoring, performance optimizations, network monitor, and many others.

Demo of Flash Builder.

For people at the conference you have access to AIR 2.0 bits.

Tags: air coldfusion flash flex iphone riaunleashedboston2009

December 28, 2008

An Introduction to AIR Development, Security, and Deployment (Flex Camp Boston 2008)

An Introduction to AIR Development, Security, and Deployment
J. Philip Camp, IBM Interactive - Boston

Moving from Flex to AIR isn't that big of a deal. AIR is as easy as Flex. Coding is the same, just the top level application changes, additional styling options for the chrome.

Use external style sheet to help style the application (could be done by the designer and just included by the developer with an mx:style tag).

How to get rid of the Native OS look and field. Set application chrome to none. All pieces of the Flex chrome are standard Flex components. Those can also be styled using CSS.

Using code behind can further reduce the coupling between the MXML and the ActionScript code. Programmatic setting of UI component properties.

Now we want to add data persistence. With code behind we can add in persistence as needed instead of always using HTTPService to request the data on demand. SQLiteAdmin is simple tool to look at a SQLite DB.

All apps use the same engine, one app can read another application. Possible to use encrypted database.

Need certificate to sign it (available from most certificate provides) can create temporary certificate. Bundle with AIR Badge to create a nice installer that can be run from the web.

Tags: air flex flexcampboston2008 security

December 28, 2008

Merapi (Flex Camp Boston 2008)

Andrew Powell, Universal Mind

Only a couple people have used it.

Grew out of old Apollo project. Named after volcano on Java. What AIR to talk to Java.

AIR does what it does well, but we want it to do more. How do you extend AIR? Have it talk to GPS. Make mashups that just aren't components but also bring hardware into the mix. Anything that has Java library or JNI will work. Main component is called a Bridge because it is all about moving data back and forth between AIR and Java.

Need to create a connection, could be local or remote. AIR/Flex runs on OS. Bridge runs on OS. Hardware and applications also running on OS. AIR and Bridge are connected via AMF using BlazeDS serialization/deserialization techniques. Bridge then talks to applications and hardware.

var message:Message = new Message();
message.data = "Hello World";
message.type= " Reply";

BridgeInstance has result event that you can handle.

Bridge API is easy, complexity is all in external APIs Merapi talks to.

It's alpha so security, reliability, installer, etc. are still being worked on.

merapiproject.net (where to get)
infoaccelerator.net (Andrew's site)

All applications have a Java piece and a Flex piece.

Demo of AIR application controlling bluetooth connected robot. Lego Mindstorm.
Demo of Google translator and text to speech.
Demo of Growl for the Mac. This also works from the browser.

Demo showing data grid in Flex exported to Excel. Data updates in Excel when saved update the data grid. Can create and send email message, update contacts, meetings, etc. If you can do it in Java you can do it with Merapi.

If within the browser, can it be an applet or if it is an application. Right now it needs to be a Java application, possibly a service.

Remote Java objects and competing with BlazeDS. Some overlap, but Merapi is more about hardware connections.

It is all Flex based. Next beta will also include Flash support.

Excel formula values are sent back. Word formatting probably comes back over RTF.

Public beta in the next couple of months.

Is it open source? It is open source, value is in derivative work.

How would the browser and desktop piece work? Still TBD.

Only limit is your imagination. Anything Java can do you can send it back and forth.

Data access size and transfer rate limits are not known, probably limited to hardware.

Tags: air flex flexcampboston2008 java merapi

December 28, 2008

Building Mashups with Flex and AIR (Flex Camp Boston 2008)

Building Mashups with Flex and AIR
Oscar Cortes, BrightCove

What is a mashup? Borrowed from music. Could be a dish (with potatoes). Web application that defines data from different sources. Not only about pulling together APIs, the sum should be better than the parts. Like the love song from Moulin Rouge, it combines many to make a more interesting whole.

Mashup sources: database, web services, media, xml, are some of the key ones.

Protocols: REST (64%), Soap (22%), JavaScript (7%), XML-RPC (3%), Atom (2%).

Who: Used to be only flickr, now also enterprises like Google, salesforce.com, and Yahoo. But developers are key player.

Flex maps strongly to APIs and models these services supply. Advantage of web services are that other people are providing data and maintaing it. The barrier to entry is low so you can experiment quickly. Build your own portfolio and try out new stuff.

Typical REST call: URL, API Key, API version, method to call, parameters, maybe digest or checksum. Can also use Web Libraries, JavaScript, and SWC libraries.

Typical result: XML or JSON, CVS or Text, Docs or PDFs, media (growing trend).

Can use native flex classes for REST (HttpService) and Web Services (WebService).

Demo using NYTimes community API (comments by URL). http://developer.nytimes.com/, Ribbit API http://developer.ribbit.com/, Google Maps (http://code.google.com/apis/maps), Google translator (http://code.google.com/apis/ajax/language/), Proxy (simple JSP Proxy)

Translates comment to Spanish. Visualizes locations of where people making the comments are from.

Tools and Techniques: Cairngorm (organized codes and ideas), AS3CoreLib (JSON parsing), E4X (XML parsing).

Durango: Mashup creator available from Adobe Labs.

Tags: air flex flexcampboston2008 mashup

November 17, 2008

Architecting a Shared Codebase from Browser and Desktop

Architecting a Shared Codebase from Browser and Desktop
By David Coletta

Maybe more hacking than Architecting. First time giving the talk so all feedback is welcome.

Goal: Build a browser application and an AIR application from a single shared codebase.

Four areas of concern: UI design (People have different expectations for a desktop based word processor versus a web based word processor), shared code packaging (giant pile of code delivered in two different forms, downloaded modules versus bundled with application), abstracting the AIR APIs (clipboard access is different in the two models), many other things including Singletons.

Primary UI differences: Browser version surrounded by browser chrome with AIR the application looks cleaner. Demo of Buzzword in browser and the AIR desktop version. Native menus in desktop menus versus flex based menus.

UI issues: Installation, automatic updates (Much improved in 1.5), menu bars (browser to native menu translation, native menu model is different between Mac and Windows, AIR APIs insulate from menu accelerators), multiple windows (on Mac you need to manually switch which menu is active based on the window, versus on Windows it is attached to the window), transition between the two (link to Buzzword opening in browser versus desktop if you have it installed, do runtime detection if AIR application is installed, if Application is running can use local connection), opening hyper-links, remember me (skipped talking about this), URL display (command that copies URL of document into clipboard), going to sleep and waking up, modal dialogs (in browser best you can be is window modal in AIR you can block the entire application), language preference.

Shared Code

Two modes: Browser SWFs loaded by AIR version, mostly SWCs linked in by two level application.
Went with loaded SWFs as browser version was already doing that, looser coupling meant faster builds, did require Ant to package it all together for development and production
In browser downloading latest version always happens. AIR application captures static version of modules. AIR does version checking at startup to see if it running the latest.

How much updating of an installed application will a user tolerate? Will things still work after the update? Old code running against new version of the server was already handled since people maybe using Buzzword in a browser during an upgrade, but its still an issue.

Abstract AIR APIs

Writing code like "if (isAIR) {} else {}" just won't work. Easy to forget its shared code. Errors when code is loaded and trying to run.
Common approach is to create an interface with two implementations. PlatformBroker with AIRPlatformBroker and FlexPlatformBroker as subclasses. As it for an interface and get that back. IPersistenceSecureToken is the interface with BrowserCookie (using ExternalInterface) and EncryptedLocalStorageCookie (using AIR facilities) implementations. Flex version is okay to live in AIR application, but not vice versa.


Convenient but breaks when a single application is running with multiple windows on the desktop versus separate VM instance per window in browser. Solving the singleton issue for AIR required rewriting the browser version since the majority of the code was shared. Singleton was easier to get going but had issues when adding multiple window support.

Rich text support

Major problem for Buzzword. Needed to support copy and paste of rich text. Had to have hacks for browser support with hidden div. Very fragile. AIR has it's own issues since you only get raw HTML, not formatted, normalized, or parsed for validity. Ran it through HTMLLoader.

Other issues

Relaunching (browser errors just reload the page, no real way to do it in AIR, but can hack it with relaunch via air.swf but you have to be online), AIR update framework (much improved with AIR 1.5), Flex menus versus native menus from single model (created XML reader with factory methods), internationalization and localization (Buzzword currently has multiple versions, localized in SWF and loaded based on preference at runtime), Runtime CSS versus compiled CSS, idle tracking (rolled own for browser, AIR has API for idle tracking, used for autosaving and turning off server session).

99% of the code is shared between the browser and desktop applications.

Session is primarily serving XML, co-authoring shared batton is server based, does long polling (server holds client request until it has data to send to it).

Tags: air architecture flex

March 31, 2008

User experience considerations with SQLite operations

An article I wrote for the Adobe Developer Connection entitled "User experience considerations with SQLite operations" has been published. Its focus is on issues Allurent uncovered while working with a SQLite database on the Allurent Desktop Connection application for Anthropologie that was demoed at Adobe MAX 2007 in Chicago.

Tags: adc air article flex

March 31, 2008

Adobe AIR Linux Alpha

Adobe has dropped the first public bits in their effort to port Adobe AIR to the Linux platform. You can download them from Adobe Labs. Keep in mind this is an alpha release and everything definitely isn't there, yet.

Tags: air linux

February 25, 2008

Flex 3, AIR 1, and OpenSource

Wow, it's amazing to think about all of the wonderful work that Adobe put into getting Flex 3 and AIR 1 out the door. My congratulations to everyone involved. Lastly the source for the Flex compilers is open source, I've already thought of some things I want to try with that. Download, play, enjoy.

As a side note, I've updated my simple Window Explorer application to run on the released version of AIR.

Tags: air flex oss

December 31, 2007

Window Explorer Updated for Beta 3

I've updated Window Explorer to work with AIR beta 3. I think I've also got the new badge install for 9.0.115 working. I don't have my PC with Flash Switcher handy so I'm not 100% sure, will have to double check tomorrow. A quick recap of what Window Explorer is: Utility designed to allow easy exploration of the various Flex Window and Native Window options available in AIR. Code generation for selected options is included.

Updating to beta 3 was mostly painless, primarily I just had to remove stuff from the UI which Adobe took out.

Tags: air flex

December 31, 2007

Error creating AIR file: 103: ERROR, application.name

Last night I started playing with the public beta 3 drops for Flex 3 and AIR. Using the project creation wizard I created a new Flex based AIR application. After looking at the new application descriptor format which has changed a lot since beta 2 I started to customize it so that I could use it as a template for sample applications I was updating to beta 3. When running the Export Release Build... wizard it got through most of the .air creation process but then erred out at the end with the following message:

Error creating AIR file: 103: ERROR, application.name

A 0 byte .air file existed and a randomly named .tmp file was created.

Turns out the default application descriptor created by the project wizard has a small bug in it. It inserts a commented out <name> element below <filename> at the top of the file. Right before the closing <application> element it inserts an uncommented <name> element. When I uncommented the <name> at the top of the file I was accidentally defining <name> twice and hence causing an error. I would have liked the error message to be more descriptive, but now that I know what it was trying to say (error with <name> in the application descriptor) I should be able to deduce other issues.

Tags: air error flex

December 31, 2007

Flex Camp Boston 2007: Rich Commerce on the Desktop with AIR

Rough draft notes

Joe Berkovitz and Tim Walling are speaking about Bringing Rich Commerce to the Desktop with AIR.

Case study and development notebook presentation.

Wanted to provide rich vibrant shopping experience online and/or offline. Utilize local persistence mechanisms for shopper customization. Business users can author experience. Fast local database. Online conduit for checkout.

Showing a demo of the demo application developed with Anthropologie, a canned demo online. System tray notification, scrolling of primary view, continuity of experience with zooming into product details, ability to locally tag items, search by color, with drag and drop image support, and the ability to have the merchant modify the content shown in the application.

Architecture for final product: web server provides updates and AIR application with an existing commerce server and analytics engine. Update manager supplies catalog meta data, media and markup. Content integration merges local files with web server supplied content to provide a uniform interface to the rest of the client. Personalized data persisted locally in the SQLite data.

Demo made everything local, minimal fixed product catalog, and tweaks to make the data work for the demo.

WindowedApplication is the primary application instead of Application. Chromeless window to get complete control over the look and feel. Different application modes are accomplished by command line arguments. These alternative modes much be manually created. Able to have application startup in system tray only mode.

The AIR application descriptor defines how the application startups. Key values are systemChrome, visible, and transparency are used to control the look and feel. Controlling window is through simple calls like minimize() and startMove().

System tray notifications are custom coded. Need to make sure you take into account screen size and multiple monitors.

Able to use "like" query against SQLite for simple text based searches.

Color search requires custom cursor management to provide custom color widget overlay. Color wheel itself was an image versus dragged in image handled the same way. When using drag managers in AIR there is a NativeDragManager that gives you access to the Clipboard format. Different applications supply drag data differently, such as IE giving a URL for an image versus Firefox giving the raw bitmap data. BitmapData.getPixel(x,y) can be used to color sample images.

The navigation strip navigation is about content. Uses goal based animation to provide smooth scrolling to handle rapid changes in what the user wants to see. Setup want you want to change and how it should change over time. Just supply the value you want and the engine maps to that goal.

Database populated for SQLite by using existing database file. Custom AIR application was created that could read in and populate the SQLite database. Some SQLite tools are available on labs to make working with the files easier (run queries, create tables). Rewrote integration to pull form SQLite database instead of a web service.

SQLite usage internals. DAO to isolate database gunk from the rest of the application getProduct(uri:String, handler:Function). Translator handles SQLResult translation into ActionScript objects.

Asynchronous API to keep event loop alive. ConnectoinPool and StatementPool to manage connections and statements to improve performance. Caching statements saves the need to reparse the statement.

Color match requires looking at color wheel. A given RGB value wasn't matched exactly by anything in the database. How to get close. Instead used HSV (hue, saturation, luminescent). See wikipedia for more details. Used color swatches to extract data for every product. Extract all HSV values and then do a linear search. Not that much data to pull into memory. Animate product results by looking at intersection of two result sets. Fade out what went away, fade in what is new, and move anything to its new position.

Goal based animation is about providing seamless animation experience. All about getting to some state. Doesn't use easing or tweans to apply real-time updating of what the goal is. Can work on multiple properties at once (alpha, position, size). Takes the most direct path to get to the target goal.

To get to the pilot: need to have the application download more content, update mechanism to see the new edition, enable offline cart, and additional personalization capabilities.

Tags: air flex flexcampboston2007

October 24, 2007

MAX 2007: On AIR Security

Rough Draft Notes

Lucas Adamski

AIR Threat Model
Runtime managed dialog, application signed by CA, self-signed = unsigned
Line between guaranteed harmless/automatic execution to full privilege/explicit install.
Only time user makes a decision is on the security dialog
AIR updates must be signed by the same publisher

Elevation Attacks
Remote content should not be able to discover anything about local system.
Should not be able to cross sandboxes.

Injection Attacks
JSON isn't a problem, JSON by eval() is the issue.
Smallest sandbox is a frame.
Injection Vectors: Code importing, DOM manipulation, URI schemes, Code generating functions.
Focused on protecting the user, not the developer.
Mitigations: Escaping or stripping (requires diligence). Clearly separate code and data (SQL prepared statements are a good example).

Typical Desktop Application Threats
Writable files
Credentials stored insecurely
Default passwords
Buffer and stack overflow
Upgrade/downgrade attacks (manually uninstall to downgrade)
Applications should not update without explicit user permission, no runtime importing to application content from remote servers.

AIR Security Model
Scripting languages have greater access than browser
Dynamically loading shouldn't have access
Provide loading mechanism that puts loaded data in its own sandbox
Explicit communication mechanisms
Safer cross domain data

AIR Does Not
Can't run untrustworthy applications
Prevents security mistakes
Has sandbox to guarantees security

AIR Does Provide
Full system access
Explicit installation
Signed applications

Guiding Principles
Local and remote data is like running in a browser
AIR shouldn't be natively more dangerous than other platforms
AIR shouldn't be a vehicle for attacking machines
AIR shouldn't require security guru
Develop paradigm during beta process

Flash in AIR
app-resource vs. app-storage
Application content: no asfunction, loader.loadbytes(),
Non-application content: no direct AIR API
No one: no write to app-resource, sandboxBridge

HTML Security Model
Application (desktop model) vs. Classic Sandbox (Browser like)
Application: direct air access, set innerHTML but script ignored, dynamic allowed only during load
Classic: dynamic always permitted, script for JSON are fine, no direct AIR API

Have to wait for parent Sandbox bridge before you can do anything

Cookies can be turned on/off.
SSL supported
Secure local store API, generic secure key storage (app ID and user Key)

Q: If I download a SWF into application-storage will that have fewer privileges than a SWF loaded from application-resource? Yes. Looking in the long term to provide plug-in API (not 1.0). Bridging will get you there. In general it's not prevented just discouraged.

Tags: air flex max2007chicago security

October 24, 2007

AIR Window Explorer

I spent most of today putting the finishing touches on a utility AIR application. The application is geared towards making it easy to explore what kind of custom Flex Window and Native Window objects you can create and how they look. It includes some debugging features and the ability to generate AS3 and MXML (Window only) code that matches the selected options.

I played around with the latest SWFObject and the badge install so that grabbing the application should be painless. Window Explorer Download Information.

Let me know if you run into any issues or have ideas for improvement :)

Tags: air flex

September 26, 2007

Flashforward Boston: Keynote

Rough draft of notes

Flickr tag with flashforward

Kevin Lynch from Adobe

Pushing Flash forward with AS3. Complimentary copies of Essential ActionScript 3.0.

With FP9 and AS3: E4X, regular expressions, strong and lose typing.

Inside Tamarin is the Virtual Machine within FP9. Core of VM has been opened sourced to Mozilla. 10 times speedup in FP9. Also have this is as the scripting language for the web. FireFox and Flash Player 9. ECMAScript standard. Includes Just-in-Time compiler.

Showing RSS XML data and E4X possibilities:

feed..item.(@id =="82").title.text()

Power of regular expression.

Showing comparison of AS3 and JavaScript 1.7. In general 10 times faster.

Flash Player adoption. Fp7 70% in 1 year, FP 8, almost 90% in one year, FP 9 90% in one year.

Picnik. Online photo editing. Zoom, rotate, alignment, color editing (saturation, temperature), sharpness, real-time editing.

Joshua Hirsch from Big Shapeship (Digital Creative Agency) talking about HBO.

8 apartments single building, like no walls. Projected onto side of building. Watch on-demand on digital cable. Also put the web.

HBO Voyeur. Using papervision for 3d effects. Full video.

Kevin: Adobe is focusing on digital technologies. Video workflow from creation to distribution. Adobe media player to view video on desktop.

H.264, multi-core cpu, full screen hardware scaling, bitmap downscaling, secured delivery of streaming video. IPv6, ISO video standard video camera, personal media players, set-top boxes, tvs. FP9 being updated to include H.264 code named Moviestar.

HD Video Demo. Releasing soon, new component for CS3 to use H.264 right in Flash. CSI HD video example. 70% of web video is in Flash.

Papervision example with multi-core speedup.

Adrian Ludwig talking about Flex. Already two versions of Flex. Currently working on Moxie. Language intelligence, profiler, visualization, workflow.

Flex is moving to be open source. bugs.adobe.com. Profiler demonstration. Memory usage. Object creations. Snapshot of application. Application is running faster than he expected (had to muck code). Zoom in on method that is taking a long time. Who was calling.

Showing refactoring example. Method rename. Workflow speedup.Sample application is using charting controls. Advanced data grid, has per column formatting.

Flex perceived as too big. Flex framework cache. Download framework code only once.

Kevin back talking about AIR. Flash, PDF, and HTML. AIR platform overview.

AIR sample applications. AIR Samples.
Showing badge install process. One click to install AIR and your application. PixelPerfect example.

artMusheen. Paint with shapes example. Native chrome.

digimix, mixing audio.

Finetune. Streaming music on your desktop.

Buzzword. Word processor. Edit locally or shared thorugh a cloud. Lists, tables, pictures, graphic editing. No drag'n'drop support out of the box yet.

Flickair searches Flickr for photos, nice chromeless application.


CS3 extension for Flash to just package application as AIR, should just work.

Tags: air flash flashforward2007boston flex

August 31, 2007

on AIR Bus Tour Boston: Business Class AIR

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


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.


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

August 31, 2007

on AIR Bus Tour Boston: Yahoo and Adobe AIR

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

August 31, 2007

on AIR Bus Tour Boston: ActionScript and JavaScript Integration

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%"/>

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

August 31, 2007

on AIR Bus Tour Boston: Introduction to Adobe AIR with Flex

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

August 31, 2007

on AIR Bus Tour Boston: Native Windows

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

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">

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

August 31, 2007

on AIR Bus Tour Boston: Quick Demos

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

August 31, 2007

on AIR Bus Tour Boston: Summary

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:

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

August 31, 2007

on AIR Bus Tour Boston: Taking apart the bus

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.


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

August 31, 2007

on AIR Bus Tour Boston: Building AIR with HTML and JavaScript

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:
adl: Launcher for AIR applications
adt: Packager for AIR applications

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

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

August 31, 2007

on AIR Bus Tour Boston: AIR API Overview

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

August 31, 2007

on AIR Bus Tour Boston: Keynote

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

August 31, 2007

on AIR Bus Tour Boston: AJAX in AIR

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

August 31, 2007

on AIR Bus Tour Boston: AIR and Flash Video in 20 minutes

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

public function connectedHandler(event:AkamaiNotificationEvent):void
    var video:Video = new Video();

// once enough content has streamed

// methods to control the playback

Tags: air flex onair2007boston video