1 PUG Challenge Americas 2012 Click to edit Master title style PUG Challenge Americas 2012 – Westford, MA Interfacing OpenEdge with HTML5 for WebApps and

1 PUG Challenge Americas 2012

Click to edit Master title style

PUG Challenge Americas

2012 – Westford, MA

Interfacing OpenEdge with HTML5for WebApps and Mobile Devices

Presented by: Dustin Grau

1


About the Presenter

• Senior consultant at BravePoint, Inc.• Began utilizing web technologies in 1996– HTML & JavaScript (referred to as DHTML)

• Developing applications with WebSpeed since 1999• Working with RIA frameworks since 2008• Lead UI architect for many of BravePoint’s RIA products• Embraced HTML5 and WebApps in 2010

2


Presentation History

• Building upon past experiences• Implementing RIA and OpenEdge– 2009 BravePoint VI1– 2009 Progress Exchange Online– Provides background on AJAX data calls– Same techniques apply for this presentation

• RIA Performance Tuning– 2010 BravePoint VI2– 2011 PUG Challenge Americas– Best practices for AJAX web applications– Minimize your data for mobile use

3


Welcome

•Review of where HTML has been

•Explanation of current mobile landscape

•Overview of where HTML5 will take us

4


Full Agenda

• A Quick Disclaimer• OE & Server Configuration• Interface Layers• Making a Mobile Presence• Desktop vs. Device Demo• Web Technology Timeline• HTML5 Primer• WebApp Demo• HTML5 to Native App Demo• Additional Sessions• Question and Answer

5


My Disclaimer

• I am a Mac– Device are iOS-centric (iPad, iPhone, iPod Touch)– Demos follow Apple’s UI guidelines when possible– Mobile Safari has 60%+ of market - netmarketshare.com

• Some consideration for Android and other devices– I have not developed any examples for these

• This is not a 100% OpenEdge topic– You probably know enough about that already– We will keep WebSpeed in context (AJAX)– This is an integration discussion/demonstration

6


Server Configuration

• All data is accessed via WebSpeed broker– Data supplied by Sports2000 DB– Only JSON is used for data packet format

• Using our in-house “RPC Engine” to handle data– Started as SUPER_PROC in WebSpeed– Plays “traffic cop” for HTML vs Data (JSON/XML)– Provides external API’s (procedures) for business logic– JSON parsing/writing done via new OE11 features!• New JSON parser/error classes and object model• Data type mapping support (JSON types to ABL)• Ability to parse specific elements (not just entire records)• Writing and assembling of arbitrary objects/arrays• Compatible with READ-JSON/WRITE-JSON in OE 10.2B

7


Interface Layer

• Still using HTTP over TCP/IP• Separation of logic from UI is necessary• HTML5 is mostly just new markup• JavaScript is your unifying language

– How you access new features in browsers

• Pages are no longer pre-built using ESS– HTML/JS provide the UI framework– Content is sent as data structures only

• With great power comes great responsibility– Flexibility == More Complexity– Modularity == Abstraction Layers

8


Interface Layer – Client

9


Interface Layer - Server

See also “Implementing RIA and OpenEdge” from Progress Exchange 200910


Making a Mobile Presence

• Growing market for mobile devices and related content• Users expect a level of compatibility with their devices

• Go Native– App Store Guidelines– Mercy of Reviewers– Turnaround

• Online Web Apps– Keep Your Money!– Control, Irrevocable, Immediate– Modify Existing Site – “Compatible with Safari on iPhone”– Build from Scratch – “Optimized for Safari on iPhone”– Open Technologies: HTML5, CSS3, and JavaScript

11


Web vs. Touch Differences

• Limited or Augmented Controls– No onmouseover, no hovers, no tooltips

– Clicks replaced with tap/touch events

– Some controls reserved for mobile UI (multi-touch)

– “Targets” must be larger for touch interface (20x20 px)

• Unpredictable Network Access– Wi-Fi or cellular, spontaneous switching

– No connection or sudden disconnects

– Airplane mode and offline support

12


Differences (Continued)

Traditional Web Mobile Web

click tap/touch

onmousedown ontouchstart

onmouseup ontouchend

onmousemove ontouchmove

Other Features

drag-and-drop Framework-Dependent

right-click Tap and Hold

selection field Framework or Native

13


Desktop vs. Device Demonstration

14


Web Technology Timeline

• Interactive history of web technology– http://evolutionofweb.appspot.com– No major features between 2000 (AJAX) and 2004 (Canvas)– W3C was preoccupied with XHTML specifications

15


Say WHAT?

• June 2004 - WHAT is formed - http://www.whatwg.org– Web Hypertext Applications Technology Working Group– Believed in using open standards to advance the web– Included Apple, Mozilla Foundation, & Opera Software

• October 2006 - W3C to work with WHAT on HTML 5.0• March 2007 - W3C announces XHTML 2.0 Working Group• October 2009 - W3C disbands XHTML 2.0 Working Group• January 2011 – HTML5 = last versioned specification– Will continue as a “living specification”– Shipping code wins, which means…– Get ready for the Browser Wars 3.0!

16


Key HTML5 Features

• Tag Simplification• Feature Detection• Form Improvements• Special Device Tags• DOM Storage• Database Storage• Offline Application Support• Geolocation• Canvas and Media Element Tags

http://en.wikipedia.org/wiki/HTML5

17


Tag Simplifications

• Simplified Doctype <!DOCTYPE html>– No more “quirks mode” or “standards mode”– Instantly enables HTML5 features in supporting browsers– Only works if the browser supports it!– Be aware of RIA framework compatibility with doctypes

• Language: <html lang="en”>• Character Encoding: <meta charset="utf-8">• Stylesheet Inclusion:

<link rel="stylesheet" href="mystyle.css" />

• JavaScript:<script type=“text/javascript” src=“myscript.js”></script>

18


Feature Detection

• User-Agent testing is dead, stop using it!• If the DOM supports it, use it– if (navigator.geolocation) { … }– if (window.localStorage) { … }

• Otherwise, fall back!– Older methods– Fake it – document.createElement– Fail gracefully

• Use a wrapper utility for compatibility checking– Modernizr: http://www.modernizr.com/

• Compatibility tables for support of HTML5 and CSS3– http://caniuse.com

19


Form Improvements

• Form Validation• New Input Types– Date, Email, Number, Search, Time, URL– Can affect keyboard display in mobile devices• <input type=“number” … />• <input type=“text” pattern=“[0-9]*” … />

• Autofocus and Required Attributes• Placeholder Attribute– Alternate for use for field labels– Disappear upon value input in field– Can only hold text values (not objects, etc.)

20


Special Device Tags

• Viewport Meta Tag (iOS devices)<meta name="viewport” [OPTIONS] />content="width=device-width, initial-scale=1, maximum-scale=1”

• Enable Web Application Mode<meta name=“apple-mobile-web-app-capable” content=“yes” />–Status Bar: apple-mobile-web-app-status-bar-style

• Application Icon–Used for home screen icon as bookmark or web app<link rel=“apple-touch-icon” href=“icon.png” />

21


WebApp Demonstration

22


DOM Storage

• Many names, same features (and purposes)– “Web Storage”, “Browser Storage”, “Offline Storage”, etc.

• Local (persistent) and Session (temporary) Storage– window.localStorage/window.sessionStorage– Store as key/value pairs, retrieve by key name

• Larger storage capacity than cookies• Data is not sent back to server on each request• Only stores primitives (integers, strings, etc.)– You can store stringified JSON objects

• Can access stored values via Firebug in DOM panel– Look for “localStorage” and “sessionStorage” properties

23


Database Storage

• SQL Lite database storage within supported browsers• Originally part of the Google Gears toolkit• 5MB initial limit, 5MB increments with user approval• Throws error if quota exceeded (user denies expansion)• Has its own API, accessible via JavaScript• Create tables/indexes; insert, update, delete records• Transaction syntax allows substitutions in query phrase• Safari developer tools (in browser) allow viewing of data

24


Offline Applications

• Manifest file, attribute of HTML tag:<html manifest=“list.manifest”>

• Contains a list of objects necessary for offline use• File paths are relative to the root• All files listed are downloaded upon first loading of page• Can only update files by modifying manifest contents• Exceptions and substitutions allowed• Leverage DOM storage for optimal offline support• Check status of navigator.onLine (where supported)• window.navigator.standalone will return true if WebApp

25


Geolocation

• New object called navigator.geolocation– getCurrentPosition( successFunc, errorFunc )– Where successFunc = function(position) { … }– Where position.coords.[latitude, longitude]

• Latitude, longitude, altitude, and accuracy only– Only lat/long are guaranteed to be returned– Some browsers may support additional features

• No geocoding to addresses (req. API such as Google’s)• Uses IP triangulation, not the device’s GPS• Works on supported desktop browsers as well• You determine what to do with the coordinates• I wouldn’t navigate by this data…just sayin’

26


Canvas and Media Element Tags

• canvas – Allows for drawing of complex objects– 2D and 3D contexts available– Can identify x/y coordinates of mouse within element– Export drawings as PNG or JPG (encoded in base64)– Dynamic creation of image objects from encoded data

• Media tags, audio and video– Containers for respective media files– Only certain codecs supported– Still highly browser-dependent

27


Mobile Guidelines

• Don’t try to do too much– Focus on a specific task where possible

• Make it obvious how to use your content• Avoid clutter, unused blank space, and busy backgrounds• Provide a fingertip-sized target area for controls– 20x20 pixels minimum

• Avoid unnecessary interactivity• Consider the user’s viewport– Scale, zooming, and keyboard area

• Use a 17-pixel to 22-pixel font

28


Development Frameworks

• Mobile-Web-Capable UI Frameworks– jQuery Mobile– Sencha Touch– SmartClient (v8+)

• HTML/JavaScript IDE Plug-ins– NimbleKit – nimblekit.com– PhoneGap – phonegap.com– Appcelerator Titanium – appcelerator.com

29


Native App Demonstration

30


Further Reading

• HTML5 Up and Running– Mark Pilgrim

• The Web Designer's Guide to iOS Apps– Kristofer Layton

• iPhone Human Interface Guidelines for Web Applications– Apple, Inc.

31


Summary

• Utilize HTML5 for new UI and data features• Use feature detection, not browser/device detection• JavaScript is still the predominant binding agent• Use frameworks to update existing websites• You can utilize IDE’s with third-party plug-ins to leverage HTML5,

CSS3, and JavaScript to build native apps• Good design principles are encouraged for mobile use• Use AJAX & JSON for data transfers to browser• Use a single, RPC-based, server-side WebSpeed broker• OE11 provides enhanced support for JSON parsing/writing

32


Thank You!

Questions?

[email protected]

http://apevolution.com

33

Documents

1 PUG Challenge Americas 2012 Click to edit Master title style PUG Challenge Americas 2012 – Westford, MA Interfacing OpenEdge with HTML5 for WebApps and