Transcript Allurent Integration Architecture Overview

Bringing Rich Commerce
To The Desktop with AIR
Joe Berkovitz, VP of Engineering (http://joeberkovitz.com)
Tim Walling, Software Architect (http://timwalling.com)
Allurent, Inc.
(http://allurent.com)
Presentation at Flex Camp Boston 2007
Topics

Intro/Demo: Allurent Desktop Connection (ADC)

Architectural Overview

Navigation and Window Management

Search

SQLLite Database Usage

Color Analysis and Indexing

Goal Based Animation

What’s Next, Q & A
Key ADC Features


Rich, vibrant shopping experience both online and offline
Shopper customization features exploit local file
persistence, native drag-and-drop

Tool for business users to author user experience

Fast, large, local catalog DB with lightweight media


Automatic client download of metadata, markup &
“heavyweight” media
Direct conduit to online web store, including checkout
Demo
ADB Client Architecture
Shopper
Personal
Data
Notes, tags,
saved orders
Allurent
Display,
Cart,
Checkout
Store
content
Order
Integration
Shopper
Behavior
customer
behavior
Analytics
Local File Storage
Commerce
Server
order population
Content Integration
ADB Client
Application
Media
Catalog
Metadata
Markup
Update Manager
On-demand
media
Web Server
Auto-update
Prototype Constraints





Build with 2 developers in 2 months
Focus on user experience and key
implementation issues
No download of content from server:
everything is local
Minimal and fixed product catalog
Custom “cooking” of local database, no data
feeds from actual commerce DB
Application Overview

WindowedApplication

chromeless window

Admin or Boutique is added as a child


determined through parameters in shortcut (similar to
FlashVars)
hide from taskbar at startup
Application Overview


SystemTray Alert

Window

SystemTrayIcon

animate alert with Fade and Move effect
Splash Screen

Window

displayed while Strip is assembled
Search Tool

Free text search


using a quick and dirty “like” DB query
Color search

pick a color via color wheel or image
Search Tool

Color search code highlights

custom cursor



CursorManager.setCursor()
native drag/drop

NativeDragManager

ClipboardFormats
selected color

BitmapData.getPixel(x, y)
Navigation Strip

content driven navigation, focus is on
content

make the content the navigation control

uses goal based animation engine

speed sensitive motion blur

used engine’s velocity property
Navigation Strip Scroller


Strip is dynamic, so thumbnail
representation needs to be dynamic
use Bitmap API to capture Strip in chunks

BitmapData.draw()
In The Database Kitchen

Anthropologie catalog in hSQLdb XML file for our
server-side product demos

Created custom AIR import/update utility [demo]

Roughly duplicated server schema

Read existing XML file into AIR DB

Tip: batch INSERTs into transactions for >100x
performance gain
Using SQLite as an
Allurent Display Content Source


In-memory content cache already existed
Rewrote integration layer to pull product
metadata from SQLite query rather than
web service
SQLite Usage Internals

DAO object isolates entire application from
database internals:
function getProduct(uri:String, handler:Function)

Translator object creates SQL
strings/parameters, interprets SQLResults
on behalf of DAO
SQLite Usage Internals (continued)

Used asynchronous APIs to keep event loop alive

ConnectionPool object

StatementPool object manages:

SQLStatement caching for performance

param substitution

Execution

result/error handling
Color Analysis and Indexing
HSV color space, courtesy of Wikimedia Commons
Color Analysis and Indexing (cont.)


Added hue, saturation, brightness columns
to catalog DB
AIR utility loaded color swatch images,
extracted average RGB color value,
converted to HSV and stored in DB
Color Search and Presentation




Build in-memory HSV index at startup
Linear search of index based on color target
and HSV color-distance metric
Put closest match in center, arrange in
concentric rings
Incremental change animation for visual
continuity
Goal Based Animation

Early Prototypes of Strip Motion [demo]

Limitations of Tween approach

General-purpose “Goalkeeper” engine

[demo prototype]
Goal Based Animation in ADC


Easy integration to final ADC navigation
model
Velocity output coupled to Blur filter for
motion effect
What’s Next?

Download catalog and images after install

Update mechanism for getting new editions

Enable offline cart

Personalization