Interfacing OpenEdge with HTML5 for WebApps and Mobile Devices

tearfuloilΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 4 χρόνια και 22 μέρες)

101 εμφανίσεις

1

PUG Challenge Americas 2012

Click to edit Master title style

PUG Challenge Americas

2012


Westford, MA

Interfacing OpenEdge with HTML5

for WebApps and Mobile Devices

Presented by: Dustin Grau

1

2

PUG Challenge Americas 2012

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

3

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


2010 BravePoint VI2


2011 PUG Challenge Americas


Best practices for AJAX web applications


Minimize your data for mobile use

3

4

PUG Challenge Americas 2012

Welcome



Review of where HTML has been



Explanation of current mobile landscape



Overview of where HTML5 will take us

4

5

PUG Challenge Americas 2012

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

6

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

7

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!


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

8

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

9

PUG Challenge Americas 2012

Interface Layer


Client

9

10

PUG Challenge Americas 2012

Interface Layer
-

Server

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

10

11

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


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

12

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

13

PUG Challenge Americas 2012

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

14

PUG Challenge Americas 2012

Desktop vs. Device Demonstration

14

15

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

16

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

17

PUG Challenge Americas 2012

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

18

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

19

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

20

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

21

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

22

PUG Challenge Americas 2012

WebApp Demonstration

22

23

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

24

PUG Challenge Americas 2012

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

25

PUG Challenge Americas 2012

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

26

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


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

27

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

28

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

29

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

30

PUG Challenge Americas 2012

Native App Demonstration

30

31

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

32

PUG Challenge Americas 2012

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

33

PUG Challenge Americas 2012

Thank You!

Questions?



dgrau@bravepoint.com



http://apevolution.com

33