HTML5, CSS und JavaScript als strategische
Client-Plattform

Thomas Bayer
15, Dezember 2011

www.predic8.de
bayer@predic8.de

Wunschzettel Client-Plattform

HTML5? Wird das bereits unterstützt?

Storage

Local Storage

 localStorage.setItem(document.querySelector("input.ls-name").value, 
                      document.querySelector("input.ls-wert").value);

Database

  var db = openDatabase('crm', '1.0', 'crm', 2 * 1024);
  db.transaction( function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS person (id unique, name, vorname, email)');  
    tx.executeSql('INSERT INTO person (id, name, vorname, email) VALUES (1, "Bayer", "Thomas", "thomas.bayer@oio.de")');
    tx.executeSql('INSERT INTO person (id, name, vorname, email) VALUES (2, "Mustermann", "Max", "max@mustermann.de")');
    tx.executeSql('INSERT INTO person (id, name, vorname, email) VALUES (3, "Mueller", "Petra", "petra@p-mueller.de")');
    tx.executeSql('INSERT INTO person (id, name, vorname, email) VALUES (4, "Maier", "Tina", "tina@t-maier.de")');
  } );

Database

function lesen_db() {
   var db = openDatabase('crm', '1.0', 'crm', 2 * 1024);
   db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM person', [], function (tx, results) {     
     var msg = ""; 
 
     for (i = 0; i < results.rows.length; i++){
       msg += "" + results.rows.item(i).name + "";
       ...
     }
     document.querySelector('#result').innerHTML +=  msg;
     }, null);
   });
}
NameVornameeMail




http://www.predic8.de/iphone-css-stylesheet.htm

Offline Applications

<html manifest="app.manifest">
      	
CACHE MANIFEST
index.htm
apple-touch-icon.png
back_button.png
iphone.css
jquery.js
tippen.js

Offline Applications

Drag and Drop Example

Drag and Drop

W3C FileReader API 

document.getElementById('file').onchange = function() {

	var reader = new FileReader();

	reader.onload = function(event) {
		document.getElementById('content').textContent = event.target.result;
	};

	reader.onerror = function(e) {
		alert(e);
	};

	reader.readAsText(this.files[0]);
}

File API

W3C File Writer API

  • Support ist noch dürftig
  • W3C Working Draft 19.April 2011
  • API für das Schreiben von Dateien aus lokalen Web Anwendungen.
var bb = new BlobBuilder();
bb.append("OIO HK 2011");
var saver = window.saveAs(bb.getBlob(), "agenda.txt");

Messaging und Worker Beispiel

Im Hauptdokument einen neuen Worker anlegen und starten: 

worker[i] = new Worker('worker.js');
worker[i].addEventListener('message', function(e) {
  document.getElementById('output').innerHTML += e.data;
}, false);
worker[i].postMessage({'say': 'Worker ' + (i+1) + ': Hello'});

worker.js: 

self.addEventListener('message', function(e) {
  for (var i = 0; i < 1000; i++) {
    // do some work
    var s = 0;
    for (var j = 0; j < 2000000; j++)
      s += j;

    // say hello
    self.postMessage(e.data.say + '\n');
  }
}, false);

Messaging and Worker Example

Web Workers

Web Sockets

Referenzen

Thank you!