Embed Size (px)
Citation preview
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head> <title>Conforming HTML 4.01 Strict Template</title></head>
<body>
<h1>Article Name</h1><p>Article content</p>
</body></html>
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 implementation 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 <html /> element, <html manifest="location.appcache"> .. </html>
● File must be served as mimetype text/cache-manifest
Offline support II
Example appcache file
CACHE MANIFEST# version: 1# this is a commentfile1.htmlfile1.cssfile1.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.htmlhttp://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 ?
![4 - Mobile Application Management [Compatibiliteitsmodus]20-%20Mobile%20Application%20Manageme… · −Apache Cordova (previously PhoneGap) −Dojo Mobile −jQuery −Sencha Supported](https://img.pdfslide.net/doc/110x75/5e0cd7ce16703823e9050184/4-mobile-application-management-compatibiliteitsmodus-20-20mobile20application20manageme.jpg)
![[Sencha 엔터프라이즈 웹애플리케이션 세미나] BYOD - Sencha space](https://img.pdfslide.net/doc/110x75/53fe27e98d7f72d92d8b4604/sencha-byod-sencha-space.jpg)
