Web client development

Outline ● Basics ○ Markup Language (content) ○ Style Language (presentation) ○ Script Language (logic) ● New features in HTML 5 ○ Overview ○ Form enhancements ○ Offline support ○ Web storage API ● JavaScript libraries ○ jQuery, jQuery UI and jQuery Mobile ○ Sencha ExtJS and Sencha Touch ● JSON

Markup Language I Hypertext Markup Language ● Defines the basic elements of a web page ● Older versions mixed content and presentation, but today HTML should only be used for content A brief history of HTML Version

Year released

HTML 2 - HTML 3.2

1995 - 1997

HTML 4.0 / 4.0.1

1997 ('98) - 1999

XHTML 1.0

2000

HTML 5

Not released yet (!) http://ishtml5readyyet.com/

Markup Language II Simple example of a 4.01 (strict) conforming HTML document Conforming HTML 4.01 Strict Template Article Name Article content

Style Language I Cascading Style Sheet (CSS) ● Language for presenting content from HTML and XML ● Uses declaration blocks to define rules for presenting elements in the DOM, general syntax is: selector(:pseudo-class) { attribute: value; }

A brief history of CSS Version

Year released

CSS Level 1 (fonts, colors, spacing, alignment, id, class, margin, padding, border)

1996

CSS Level 2 rev 1 (positioning, z-index, media types)

2011

CSS Level 3

Not released yet.

Style Language II Simple CSS example body { color: rgb(255, 0, 0); background-color: black; border: 2px solid #00ff00; } #element_with_id { color: blue; } .element_with_class { color: white; }

Script Language JavaScript (ECMAScript)

● Script language for adding logic to web pages ● Similar to C and Java, but highly dynamic ● No direct support for classes, but prototype-based inheritance can be implemented using the prototype property on JavaScript objects ● Browser support is generally good, but there are quite a few im differences (mainly in the DOM), so a good library for abstracting from these peculiarities is recommended (more on this later)

HTML 5 Overview ● Specification started in 2004 by the WHATWG (Web Hypertext Application Technology Working Group), which was founded by people from Apple, Mozilla and Opera. ● Still a W3C working draft, but most browsers today implement a subset of the standard ● Some big features of HTML 5 are: ○ New structural tags ○ Video/Audio tags ○ Offline support (application cache) ○ Enhanced forms (new input types, validation) ○ Web storage API ○ History API ○ Canvas API ○ Geolocation API

● Good site for looking at browser support http://caniuse.com/

Form enhancements ● Input types ○ search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range, color ○ Will default to text when input type not supported ○ Browser support is still not good, but is getting better (Opera support is quite OK) ○ Especially good for mobile devices, where multiple virtual inputs are available, e.g. when rendering type=" number" on Android/iOS devices, it will show a number input pad ● Validation ○ max, min, minlength, maxlength, pattern, required

Offline support I ● Support for offline resources ● A copy of all required resources will be downloaded on first visit to a page ● Files required are maintained in a application manifest, this can be named anything, but using the extension .appcache is common ● Changes to the appcache will only be downloaded if the appcache file changes (look at the example on the next page to get around this) ● Manifest is added by adding an attribute to the element, .. ● File must be served as mimetype text/cache-manifest

Offline support II Example appcache file CACHE MANIFEST # version: 1 # this is a comment file1.html file1.css file1.js

Web storage API I ● Two new APIs for storing data in the browser ● Necessary since cookies have a 4kB limit ● Both share the same interface, which supports ○ length: number of items in storage ○ key(int n): get key at index ○ getItem(string key): get value for key ○ setItem(string key, string value): set value for key ○ removeItem(string key): remove key/value ○ clear() clear all keys/values ● Since it only supports storing strings, the JSON.stringify() method is often used to store objects as strings ● Both (usually) share the same storage space, which is usually around 5mb (the specification is vague here)

Web storage API II ● Two types of storage are available ○ SessionStorage: Persisted until the browser or tab is closed (or the clear method is called) ○ LocalStorage: Persisted until the user clears the cache (or the clear method is called) ● Browser support is generally good, but the amount of storage available varies, and the only reliable way to check if there is enough storage is to check for the exception QuotaExceededError for every call to setItem. ● Opera is currently the only browser that asks the user if more storage space will be permitted

jQuery ● Cross-browser JavaScript library released in 2006, basic responsibilities include: ○ Selecting DOM elements ○ Dealing with events ○ Creating animations (element attribute transitions) ○ Ajax ● Used extensively in DHIS2 ● Examples: ○ $("#id") / $(".class") select element with ID / class ○ $.get("data.json", function(data) {}) get data.json using ajax, and the send processed data to function ○ $("#my_button").bind("click", function(e) {}) bind a method to the click event for a button with id my_button

jQuery UI ● jQuery plugin that adds browser support for adding interface elements to a web page ● Elements include ○ Accordion ○ Autocomplete ○ Button ○ Slider ○ Datepicker ○ Progressbar ○ Dialog ○ Tabs ● Also supports adding interactions to elements, e.g: dragging, dropping, resizing, sorting, etc

jQuery Mobile ● jQuery plugin for adding mobile specific web interfaces which closely resembles what users are used to in native iOS and Android applications ● Very non-intrusive, and decorates standard elements like lists and divs (for sectioning) ● Examples of supported components ○ Pages and dialogs ○ Toolbars ○ Buttons ○ Content formatting ○ Form elements ○ List views ● Since standard elements are used, it degrades quit nicely, ensuring that also older mobiles are supported

Sencha ExtJS ● JavaScript framework for rich web applications ● Different from jQuery Mobile in that it usually does not decorate static elements, but rather injects elements into the DOM when it builds the interface ● Commercially supported by Sencha, but GPL 3 version is available ● Used for GIS and Data Visualizer in DHIS2 ● Browser support is very good, everything from IE6 to the latest Chrome ● Some big components worth mentioning are: ○ Charts, Store, Model, XTemplate, Layout ● Every object in ExtJS is based on an inheritance model, every object can be extended, and new ones can be created

Sencha Touch ● Mobile edition of ExtJS ● Reuses component model, stores, and model definitions from ExtJS (which means they can be shared) ● Good supports for tablets ● Touch only, so does not degrade on older phones ● Examples of supported components ○ Buttons, Forms, List, Nested List, Icons, Toolbars, Carousel, Tabs, Bottom Tabs, Map, Overlay ● Charts are also available in the Sencha Touch Chart package (available separately)

JavaScript Object Notation (JSON) I ● A popular data format for exchanging data ● Is a subset of JavaScript, which means it can be evaluated as JavaScript code (but do not use eval!) ● In more recent browsers, a JavaScript object called JSON is available, which has methods for converting between a JSON string and JavaScript ○ JSON.parse: parses JSON from a string, returns a JavaScript object ○ JSON.stringify: reads in a JavaScript object and returns a string representation ○ If support for JSON object is not available, it can be plugged in using https://github. com/douglascrockford/JSON-js

JavaScript Object Notation (JSON) II A simple JSON example { "articles": [ { "id": 1, "content": "article content here" }, { "id": 2, "content": "article content here" } ]} var articles = JSON.parse(...); for(var article in articles) { console.log("articleId is " + article.id); console.log("article content is: " + article.content); }

Useful links http://json.org/ http://jsonlint.com/ http://caniuse.com/ http://dev.w3.org/html5/spec/spec.html http://www.w3.org/TR/CSS/ http://code.google.com/chrome/devtools/ http://getfirebug.com/ http://www.sencha.com/products/touch/ http://www.sencha.com/products/extjs/ http://jquery.com/ http://jqueryui.com/ http://jquerymobile.com/

Questions ?