PUG Challenge Americas
2012 – Westford, MA
Interfacing
OpenEdge
withstyle
HTML5
Click
to edit
Master title
for WebApps and Mobile Devices
Presented by: Dustin Grau
1
1
PUG Challenge Americas 2012
About the Presenter
• Senior consultant at BravePoint, Inc.
• Began utilizing web technologies in 1996
– HTML & JavaScript (referred to as DHTML)
•
•
•
•
2
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
PUG Challenge Americas 2012
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
–
–
–
–
3
2010 BravePoint VI2
2011 PUG Challenge Americas
Best practices for AJAX web applications
Minimize your data for mobile use
3
PUG Challenge Americas 2012
Welcome
• Review of where HTML has been
• Explanation of current mobile landscape
• Overview of where HTML5 will take us
4
4
PUG Challenge Americas 2012
Full Agenda
•
•
•
•
•
•
•
•
•
•
•
5
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
PUG Challenge Americas 2012
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
6
PUG Challenge Americas 2012
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!
•
•
•
•
•
7
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
PUG Challenge Americas 2012
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
8
PUG Challenge Americas 2012
Interface Layer – Client
9
9
PUG Challenge Americas 2012
Interface Layer - Server
See also “Implementing RIA and OpenEdge” from Progress Exchange 2009
10
10
PUG Challenge Americas 2012
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
–
–
–
–
–
11
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
PUG Challenge Americas 2012
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
12
PUG Challenge Americas 2012
Differences (Continued)
Traditional Web
Mobile Web
click
onmousedown
onmouseup
onmousemove
Other Features
drag-and-drop
right-click
selection field
13
tap/touch
ontouchstart
ontouchend
ontouchmove
Framework-Dependent
Tap and Hold
Framework or Native
13
PUG Challenge Americas 2012
Desktop vs. Device Demonstration
14
14
PUG Challenge Americas 2012
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
15
PUG Challenge Americas 2012
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
16
PUG Challenge Americas 2012
Key HTML5 Features
•
•
•
•
•
•
•
•
•
17
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
PUG Challenge Americas 2012
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
18
PUG Challenge Americas 2012
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
19
PUG Challenge Americas 2012
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
20
PUG Challenge Americas 2012
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
21
PUG Challenge Americas 2012
WebApp Demonstration
22
22
PUG Challenge Americas 2012
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
23
PUG Challenge Americas 2012
Database Storage
•
•
•
•
•
•
•
•
24
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
PUG Challenge Americas 2012
Offline Applications
• Manifest file, attribute of HTML tag:
<html manifest=“list.manifest”>
•
•
•
•
•
•
•
•
25
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
PUG Challenge Americas 2012
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
•
•
•
•
•
26
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
PUG Challenge Americas 2012
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
27
PUG Challenge Americas 2012
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
28
PUG Challenge Americas 2012
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
29
PUG Challenge Americas 2012
Native App Demonstration
30
30
PUG Challenge Americas 2012
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
31
PUG Challenge Americas 2012
Summary
•
•
•
•
•
•
•
•
•
32
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
PUG Challenge Americas 2012
Thank You!
Questions?
dgrau@bravepoint.com
http://apevolution.com
33
33
PUG Challenge Americas 2012