1. Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering ( Tim Walling, Software Architect ( Allurent, Inc ( Presentation at Flex Camp Boston 2007

2. 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

3. 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

4. Demo

5. ADB Client Architecture
ADB Client Application
Allurent
Display,
Cart,
Checkout
Local File Storage
Shopper
Personal Data
Media
Catalog
Metadata
Notes, tags, saved orders
Store content
Markup
Content Integration
Shopper
Behavior
Order Integration
Update Manager
On-demand
media
Auto-update
customer behavior
order population
Analytics
Commerce Server
Web Server

6. 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

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

8. Application Overview SystemTray Alert Splash Screen Window
SystemTrayIcon
animate alert with Fade and Move effect
Splash Screen
displayed while Strip is assembled

9. Search Tool Free text search Color search
using a quick and dirty “like” DB query
Color search
pick a color via color wheel or image

10. Search Tool Color search code highlights custom cursor
CursorManager.setCursor()
native drag/drop
NativeDragManager
ClipboardFormats
selected color
BitmapData.getPixel(x, y)

11. 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

12. Navigation Strip Scroller
Strip is dynamic, so thumbnail representation needs to be dynamic
use Bitmap API to capture Strip in chunks
BitmapData.draw()

13. 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

14. 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

15. 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

16. 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

17. Color Analysis and Indexing
HSV color space, courtesy of Wikimedia Commons

18. 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

19. 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

20. Goal Based Animation Early Prototypes of Strip Motion [demo]
Limitations of Tween approach
General-purpose “Goalkeeper” engine
[demo prototype]

21. Goal Based Animation in ADC
Easy integration to final ADC navigation model
Velocity output coupled to Blur filter for motion effect

22. What’s Next? Download catalog and images after install
Update mechanism for getting new editions
Enable offline cart
Personalization