Touch Screen Desktop Applications

Presented by Denard Springle@NVCFUG - March 2013

Technologies

Adobe AIR

HTML5

CSS3

Javascript/jQuery

Your favorite back-end technology (CF, right?!)

Adobe AIR

Converts Flash/Flex/AS3 or HTML/JS to Desktop Applications

Webkit browser based for HTML/JS apps

Supports HTML5, CSS3 and jQuery*

Windows, OS X, Linux

SDK and compiler (Currently v1.6.x)

Adobe AIR Features

Security Sandboxes SQLite embedded database Local storage (encrypted) AS/JS proxies (AIRAliases.js) PDF, clipboard, drag & drop, file system

integration Native menu’s and taskbars/docks Service monitoring (check service

availability) Application updater (update from within) Browser distribution (distribute AIR and app)

Adobe AIR Drawbacks

Security Sandboxes

More difficult to debug (Introspection)

Requires clients to DL and install Adobe AIR runtime

Applications must be digitally signed to be installed

‘Odd’ issues – colors, script behavior, etc.

Web, Desktop & Mobile

Same code base can be used across multiple platforms and devices

Web Exceptions: SQLite, Local Storage, File System, PhoneGap

Some exceptions can be handled in AS/JS

Some exceptions require code branching*

HTML/JS Based Apps

Application Sandboxed

Uses AJAX to communicate with server(s)

AIRAliases.js (Javascript aliases to AS3 calls) (air.<function> not window.runtime.flash.<function>)

Single page (v1.0+) or multi-page capable (v1.5+) HTML applications

Local Storage

EncryptedLocalStore.setItem(key,<UTFByteArray>)

Value = EncryptedLocalStore.getItem(key)

jStorage is a cross-browser local storage system

$.jStorage.set(key,value) Value = $.jStorage.get(key)

Use if/else with feature discovery to determine if running in AIR or in the browser

Point Of Sale (POS)

E-Commerce Apps are POS systems

Best Practice = use local db and app server, app server central server (e.g. web site)

Return as little data as required, or as possible (e.g. pagination)

Not all POS printers are created equal (OPOS, JavaPOS, OS drivers)

Card Swiping

Gather credit card data and split into card number, expiration, card holder

XX1234123412341234^CARD HOLDER^1604(^)<random data>

ccNum = Right(ListGetAt(<swipedata>,1,'^'),Len(ListGetAt(<swipeData>,1,'^'))-2)cardHolder = ListGetAt(<swipedata>,2,'^')expDate = Mid(ListGetAt(<swipedata>,3,'^'),3,2) & Left(ListGetAt(<swipedata>,3,'^'),2)

Touch Screen Differences

Screen resolution is usually limited (for POS systems – typical is 1024 x 768)

Inputs, buttons, selects, and even text have to be much larger than a web application

On-Screen keyboard will be required for textual input (OS or javascript, typically)

Demo

MissionTix Event Kiosk

MissionTix Conference Kiosk

Resources

http://get.adobe.com/air/ (AIR Distributable)

http://www.adobe.com/devnet/air/air-sdk-download.html (AIR SDK)

http://www.sqlite.org/ (SQLite)

https://github.com/andris9/jStorage (jStorage)

O’Reilly Adobe AIR 1.5 Cookbook (Flex and HTML)