« Flex Camp Boston 2007: Using ColdFusion with LCDS | Main | Flex Camp Boston 2007: Building Buzzword »

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