HTML 5 – based frameworks

2

Recapitulation

● Platform fragmentation is getting worse and worse

● Many applications may not need to access special functions

● But some other do – access camera, accelerometer, geocoder, etc.

● Ideal framework would work on any and all devices

● Almost every current device contains HTML browser with JavaScript and CSS support

3

Typical solution

● HTML5 for its features and defining the structure and using it's built-in features

● CSS3 for defining visual styles of the application

● JavaScript for the actual code

4

Additional parts● Use of AJAX (Asynchronous JavaScript and

XML) for interactive web applications– HTML, JavaScript

– XMLHttpRequest for asynchronous web transfers

● We do not start from scratch writing all the required JavaScript code, but use a library instead

– jQuery Mobile (with paid Codiqa designer)

– Backbone.js (RESTful, JSON, MVC)

– Bootstrap components from Twitter

– {less} – less.js – mainly dynamic CSS

5

Still a browser based application… ● We have mobile web, but it is still not fully

optimized for mobile platforms (gestures, external APIs)

● Additional frameworks may solve this:– Sencha Touch – mobile components (50+) to

make the applications more user friendly and make use of phone features

– Phone Gap (Apache Cordova) – bridge existing common phone APIs and make them accessible from JavaScript and package applications for individual platforms (permission models apply). Debuging possible with weinre (WEb INspector REmote)

6

Or we can use other frameworks...● Appcelerator Titanium – iOS, Android, Win, BB● Motorola: Rhodes + RhoMobile (programming in

Ruby, JS API/some Ruby APIs require licence) ● MoSync – many platforms, support for C/C++ NDK● AppMobi{!} ● mobl (HTML5, own language – mobl, iOS & Adroid)● NEXT● QuickConnectFamily – Android & iOS only● iUI – iPhone-like User interface on more platforms● …

7

Before we start with the platforms...

● How much HTML editing did you do?● Are you familiar with JavaScript?● Did you use CSS3 when editing web pages?

● Do you know jQuery framework?

8

HTML5 Extra Features*(*may not be available in all browsers)

9

HTML5 improvements

● Canvas element● SVG support & DOM

access● (Multi)media

elements● Drag & Drop support● Form and form items

improvements

● Geolocation● Web storage● App cache● Web workers● Server-side events● Document semantics

support

10

HTML5 Canvas

Basic drawing– rectangles, arcs, lines (+width, joins & caps)

– fill/stroke object (i.e. fill/draw), clear rectangle

– clipping support, scaling, rotating, translating and other transformations

– support for images, pixel operations and fonts

– suport for color, multicolor & gradient fills, shadows

– Bezier and quadratic curves

– paths with the possibility of closing & filling

– saving and restoring contexts

11

HTML5 Canvas Examplevar c=document.getElementById("myCanvas");var ctx=c.getContext("2d");

var grd=ctx.createRadialGradient(75,50,5,90,60,100);grd.addColorStop(0,"yellow");grd.addColorStop(1,"#7f7f7f");

ctx.strokeStyle="red"; ctx.strokeRect(0,0,250,100);

ctx.transform(1,0.5,-0.5,1,30,10);

ctx.fillStyle=grd; ctx.fillRect(0,0,250,100);

ctx.fillStyle="blue"; ctx.beginPath(); ctx.moveTo(20,20);ctx.quadraticCurveTo(20,100,200,20);ctx.lineTo(20,20);

ctx.fill(); ctx.stroke();

ctx.moveTo(10,10); ctx.arc(10,10,20,Math.PI/2, Math.PI);ctx.closePath(); ctx.stroke();

12

SVG support● SVG is XML based – we can use DOM, on the

other hand, Canvas is a pixel buffer (once drawn, we can't change some of the primitives)

● Shape in SVG is represented as an object – if something changes, we re-render it when changed

● SVG is resolution-independent vector graphics● Event handlers are supported

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,0 0,100 100,100 0,0" style="fill:yellow;stroke:red;stroke-width:5;fill-rule:evenodd;"> </svg>

13

(Multi)media elements

● Tags for audio, video (different browsers support different formats – MP4/VP8/OGG)

– audio, video, embed, source, track

● Methods/properties for playback control– width, height, controls, mute, autoplay, loop

preload,...

– load(), play(), pause(), …

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Unsupported video tag</video>

14

Drag & DropSupport for draggable elements and destinations with their corresponding events.

Example taken from: http://www.w3schools.com/html/html5_draganddrop.asp

<script> function allowDrop(ev) { ev.preventDefault(); }

function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }

function drop(ev) {ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));

}</script>

…

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" width="336" height="69" ondragstart="drag(event)" />

15

Form improvements● New elements:

– <datalist> element with pre-defined options for an input

– <keygen> element with for public/private key pair generation

– <output> element for presenting results

● New attributes: autocomplete, novalidate<input list="browsers">

<datalist id="browsers"> <option value="MSIE">

… <option value="Opera">

</datalist>

<form action="kg.asp" method="get">UID: <input type="text" name="uid">Encryption level: <keygen name="sec"><input type="submit"></form>

<output name="z" for="x y"></output>

16

Input type improvements

New input types:● color

● date, datetime, time

● datetime-local (no timezone)

● month, week

● email

● number, range

● search

● tel, url

<input type="number" name="ex" step="2" min="1" max="10" value="3" form="form1" pattern="[0-9]+">

New input attributes:● autocomplete, autofocus

● form, formtarget

● formaction, formenctype, formmethod, formnovalidate

● height & width (only for image)

● list (datalist ID), placeholder

● min, max & step (where applicable), pattern (regexp)

● multiple (email, file), required

17

GeolocationGives the page location information (if permitted by the user), from DNS, GeoIP, GSM, GPS, … <!DOCTYPE html><html> <body onload="getLocation()"><input type="text" id="ltext" style="width: 95%;" ><script>var x=document.getElementById("ltext");function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); }}

function showPosition(pos) { x.value="" +pos.coords.latitude + " / " + pos.coords.longitude + " @ " + pos.coords.altitude +"m (+/- " + pos.coords.accuracy + "m)"; } </script></body></html>

18

Web storage● Abused nowadays for usertracking, no easy

way to show, but main idea was to persist data– localStorage – data without expiration date

– sessionStorage – data for current browser session (lost after browser restart)

● Everything stored as strings (must be converted to them and back for non-string values – esp. objects and arrays)

if (typeof(Storage)!=="undefined" && localStorage != null) {…}

localStorage.conversions = JSON.stringify(conversions);conversions = JSON.parse(localStorage.conversions);

19

Application cache

● "Offline pages" defined in application manifest– <html manifest="demo.appcache">

– Content-Type: text/cache-manifest

– Contains CACHE MANIFEST, NETWORK: and FALLBACK: sections

– Comments in manifest● start with #● may be used to change

the manifest & forcereload of pages (they stay cached otherwise)

– Cache size limit (~5MB)

# File ver. 1.2.1CACHE MANIFEST/theme.css/logo.gif/main.js

NETWORK:/login.asp

FALLBACK:/html/ /offline.html

20

Web workersRuns background operation without freezing the page (like a Thread).

– worker code in sepatate javascript file, posts messages back,

– cancelled from main page by w.terminate()var w;function startWorker(){ if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("counter.js"); } w.onmessage = function (event)

{document.getElementById("result").value=event.data; }; } else { document.getElementById("result").value= "No worker support"; }}

function stopWorker() { w.terminate(); }

counter.js

var i=0;function increase() { i=i+1; postMessage(i); setTimeout("increase()", 500);}

increase();

21

Server-side events● Allows push updates (with Content-Type: text/event-stream) from server (not in IE)

if(typeof(EventSource)!=="undefined") { var source=new EventSource("demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br>"; };} else { document.getElementById("result").innerHTML="No server-sent event support";}

Adopted from: http://www.w3schools.com/html/html5_serversentevents.asp

demo_sse.php<?phpheader('Content-Type: text/event-stream'); header('Cache-Control: no-cache');

$time = date('r');echo "data: The server time is: {$time}\n\n"; flush();?>

22

Document semantics/semantic WEB● More TeX-like document structure with clear meaning of

individual parts

– original elements: <img>, <table>, <form>

– <header>, <footer>, <nav> (navigation)

– <section>

– <article> (separate part of text, e.g. forum post, message, discussion entry, news story)

– <aside> (sidebar, things out of the page scope)

– <figure>, <figcaption>

● Backward compatibility can be ensured with CSS– header, section, footer, aside, nav, article, figure {display: block;}

– workaround for IE (see http://code.google.com/p/html5shiv/)

jQuery Mobile

24

jQuery Mobile (1.3.1)

● Works (to a degree) on almost every platform with web browser (including desktop PCs)

● 3 grades to establish the functionality:– Grade A – full support with AJAX-based page

transitions (iOS 3.2+, Android 2.1+, WP 7.5+, BlackBerry 6+, WebOS, FF Mobile 18, Opera Mobile 11.5+, MeeGo 1.2+/Tizen, Bada 2.0, Desktop: Chrome 16+, Safari 5+, FF 10+, IE 8+, Opera 10+)

– Grade B – enhanced experience without AJAX (BlackBerry 5, Opera Mini 7, Symbian^3, IE7)

– Grade C – basic HTML experience (IE < 7, IOS 3.x-, BlackBerry 4, Windows Mobile, old devices with HTML&JS support)

25

jQuery Mobile properties

● Web apps with look & feel as close to native as possible● Markup driven● Minimal code required to get up & running● Page elements defined in <div> tags

– At least one data-role="page"

– Inside a page, at least one data-role="content"

– Page content, headers and footers data-role= "content"/"header"/"footer"

● Multiple pages in single HTML file, referencing through <a href="#pageid" …>

26

jQuery Mobile example<!doctype html><html><head><title>Page Title</title>

<meta charset="utf-8"/><meta name="viewport"

content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="jquery.mobile.css" /> <script src="jquery.js"></script> <script src="jquery.mobile.js"></script></head><body><div data-role="page"> <div data-role="header"><h1>Page Header (does not change with content)</h1></div>

<div data-role="content"><p>Page Content</p></div>

<div data-role="footer"><h3>Page Footer</h3></div></div></body></html>

27

Multiple pages<div data-role="page" id="p1"> <div data-role="header"><h1>Page 1</h1></div> <div data-role="content"> <a href="#p2" data-role="button">Go to Page 2</a> </div></div>

<div data-role="page" id="p2"> <div data-role="header"><h1>Page 2</h1></div> <div data-role="content">

<a href="#p1" data-role="button">Go to Page 1</a> <!--AJAX Loading of external jQuery-compl. page--> <a href="external.html" data-role="button"> Go to External page </a> </div></div>

28

Navigation bar and dialog<div data-role="footer" data-id="ftr"

data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#f1"

class="ui-btn-active ui-state-persist">1</a></li> <li><a href="#f2">2</a></li> <li><a href="#f3">3</a></li> <li><a href="footer4.html">4</a></li> </ul> </div></div>

<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>

29

AJAX Loading

● Pages injected with a transition (where specified) on Grade A devices, otherwise loaded regularly.

– Many transition templates, specified by 'data-transition' – pop, slide, fade, flip, flow, turn, none, …

● For linking to a non-mobile page on the same domain we use rel="external".

– Links to different domains are detected automatically, and will trigger a regular load.

● On page load failure, a jQM message is displayed instead of browser error

● AJAX only works for pages in the same domain

30

Additional GUI remarks● Regular for elements are available

– TextInputs, TextBoxes, Search boxes, Sliders (& Flip Switches), Control Groups (Checkboxes, Radiobuttons), Selects (i.e. popups), Collapsibles (Menus), Buttons

– Grouping of form elements where suitable

– Submitting● Besides dialogs, we can also display popups, etc.

● You can't pass parameters between internal pages (but you can use plugins which implement this feature)

● All elements can be themed through pre-defined themes, CSS3 (manually or generated through a ThemeRoller)

31

Form element examples<form action="form.php" method="post"> <div data-role="fieldcontain"> <label for="textbox">Textbox:</label> <input type="text" name="textbox" id="textbox" value=""/> </div>

<div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-mini="true"> <legend>Who do you prefer:</legend>

<input type="radio" name="rc1" id="rc1" value="c" checked="checked" /> <label for="rc1">Cat</label> <input type="radio" name="rc1" id="rc2" value="d"/> <label for="rc2">Dog</label> </fieldset> </div></form>

32

Multi-column data, collapsibles & theming

<div class="ui-grid-a"> <!-- solo=1, a=2, b=3, …, d=5 --> <div class="ui-block-a"> <button type="button" data-theme="c">Prev</button> </div> <div class="ui-block-b"> <button type="button" data-theme="b">Next</button> </div> </div>

<div data-role="collapsible-set"> <div data-role="collapsible"> <h3>I'm a header</h3> <p>Collapsible content. By default closed, but can be opened by clicking on the header.</p> </div> … </div>

33

New mobile events

● Besides regular events, a set o specific events is created for jQM

– tap, taphold, swipe (swipeleft, swiperight)

– orientationchange, updatelayout

– scrollstart, scrollstop

– Page-centred events (beforeXXX and XXX): ● pageinit● pagebeforeshow, pageshow, page(before/)hide● page(before/)load, pageloadfailed● page(before/)change, pagechangefailed● page(before/)create, pagecreatefailed● pageremove

34

New mobile JavaScript methods

● $.mobile.changePage(), $.mobile.loadPage()

● $.fn.jqmData(), $.fn.jqmRemoveData(), and $.fn.jqmHasData()

● $.mobile.loading(x) – show (x is true) or hide loading indicator

● $.mobile.silentScroll(y) – scroll silently to position y

● $.mobile.activePage – ID of the current active page

● URL manipulation methods

● Global settings may be applied

● We can reference and change data attributes, dynamically create pages, etc.

● $.fn.listview('refresh'), $.fn.selectmenu('refresh') …

35

Code Examples

//transition to the "about us" page, pop transition$.mobile.changePage("ab/us.html",{transition: "pop"});

//transition to the "search results" page, using data from a form with an id of "search"$.mobile.changePage("searchresults.php", { type: "post", data: $("form#search").serialize()});

$(document).delegate("#aboutPage", "pageinit", function() { alert('Created "aboutPage" by jQuery Mobile!');});

//load the "about us" page into the DOM$.mobile.loadPage("ab/us.html");

36

Phone Gap (Apache Cordova)

37

Phone Gap basics● Web-oriented (HTML5+JS+CSS3)● But it's used for building embedded applications

(with installation packages instead of mobile web)● Large scope of platforms (Android, IOS, WP,

Blackberry, WebOS, Symbian, Bada, …)● Common JavaScript API over different platforms,

frameworks programming languages & IDEs● Uses features from HTML5 ● But you have to prepare the basic project for

deployment to individual platforms– It is possible to use cloud-based build at

http://build.phonegap.com instead

38

How to use PhoneGap

● You include the PhoneGap library package in your project. It contains:

– the common platform-independent core

– the platform-dependent API adaptation code

● You use the native IDE for given platform● You can sell the application using platform-

dependent store (App Store, Google Play, Windows Marketplace, …)

● It is possible to use (3rd-party) plugins

39

Libraries for individual platfroms

List for Cordova 2.7.0 (2013-05-03):

● android

● blackberry

● cordova-cli

● ios

● osx

● windows-phone-7

● windows-phone-8

● windows8

Native Application (apk, ipa, sisx, …)

Native APIs accessed through Cordova

Native in-app Web View

Developed code

PhoneGap Disadvantages

● Applications are slower than native ones– especially graphics-intensive applications

such as games

● Not fully integrated into the platform– may lack the platform-specific look&feel (but

you may develop different CSS-based skins for different platforms)

– lack of pre-built UI widgets, transitions, standard controls – but you can use something else (e.g. jQM) for this task

● For Android development you may use AppLaud plugin, for debugging Weinre or debug.phonegap.com

41

PhoneGap APIs

● Accelerometer● Camera● Capture● Compass● Connection● Contacts● Device● Events

● File● Geolocation● Globalization● InAppBrowser● Media● Notification● Splashscreen● Storage

42

API parts (A-C)

● Accelerometer – returns x,y,z acceleration● Camera – get a picture from Camera● Capture – capture audio, video or image with

external application● Compass – current compass heading or

watching the heading● Connection – access to the device's cellular

and WiFi connection information.● Contacts – access contacts in device database

(search and adding)

43

API parts (D-G)

● Device – provides information about device HW, SW, UUID, manufacturer, …

● Events – provides lifecycle (mostly system-level) events – HW buttons, online state, battery status, if device is ready, pause, resume

● File – provides W3C File API to read, write and navigate file system hierarchies.

● Geolocation – access to the device's location provider (GPS sensor).

● Globalization – information & operations specific to the user's locale and timezone.

44

API parts (I-Z)● InAppBrowser – web-browser after the use of

window.open call● Media – recording and playback of audio files● Notification – audible, visual and haptic (tactile)

device notifications.● Splashscreen – show&hide the application's

splash screen.● Storage – local storage and SQL database W3C

"Web SQL Database" & Web Store API Specif.

Additional plugins can be found at: https://github.com/phonegap/phonegap-plugins

Sencha Touch

Sencha Touch Core features● HTML5+JS+CSS, working on iOS, Android, BlackBerry,

Windows Phone, Chrome, IE, …

● Smooth Scrolling and Animations

● Adaptive Layouts, MVC, maps support

● Native packaging, themes: Sencha, BB, WP (IE10), auto

● User interface extensions (carousell, tabs, overlays, …)

● Transition animations

● Touch events including also swipe, pinch and rotate (iOS, Android 3+)

● Nested loading, AJAX, JSONP, YQL

● Audio/video playback

● Graphs (charts), drawing & vector graphics components

47

Backbone.js

Backbone.js features● minimal, popular, generic MVC framework used for

writing heavy HTML5 web & mobile applications

● provides an object model with inheritance

● REST (REpresentational State Transfer) Sync– REST maps CRUD operations to HTTP operations:

● Collection Operations (POST = Create, GET = Read) ● Model Operations (PUT = Update, DELETE = Delete)

● Can be used with jQuery/... for manipulating DOM

● MVC in Backbone.js at a glance:– Model represents a single data entity, usually bound to a

view that each time it changes, the view is updated

– Backbone.View – actually a controller

– Views can be rendered by jQuery or by using a template