HTML5-Highlights in APEX verwenden. Andreas Wismann WHEN OTHERS Beratung Projektmanagement Coaching rund um Oracle Application Express

Größe: px

Ab Seite anzeigen:

Download "HTML5-Highlights in APEX verwenden. Andreas Wismann WHEN OTHERS Beratung Projektmanagement Coaching rund um Oracle Application Express"

Hildegard Fürst
vor 8 Jahren
Abrufe

1 HTML5-Highlights in APEX verwenden Andreas Wismann WHEN OTHERS Beratung Projektmanagement Coaching rund um Oracle Application Express

2 rund um Application Express Beratung Projektmanagement Coaching Andreas Wismann

3 APEX Themes

4 DOCTYPE früher beispielsweise: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " für HTML5: <!doctype html> Schreibweise beliebig: <!DOCTYPE HTML> <!DOCTYPE html> <!doctype HTML>

01 Transitional//EN" "http://www.w3.org/tr/html4/loose.

5 Minimaldokument HTML5 <!doctype html> <html lang=de> <head> <meta charset=utf-8> <title>html5</title> </head> <body> Hallo Welt </body> </html>

6 Minimaldokument HTML5 <!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>html5</title> </head> <body> Hallo Welt </body> </html>

7 Welcher Browser unterstützt was? Demo 1

8 Welcher Browser unterstützt was?

9 HTML5-Features zur Laufzeit prüfen Modernizr (2.5.3 eingebaut in Theme 25) Demo 2

10 Welcher Browser unterstützt was? Empfehlung: caniuse.com ("can I use")

11 Graceful Degradation 1. Mindestfunktionen bereitstellen 2. Beherrscht der Browser HTML5? 3. dann Zusatzfunktionen anbieten Textfelder und Buttons Prüfroutine in JavaScript JavaScript ändert Textfelder zu Dragand-Drop-Flächen

12 So nicht

13 nur kurz erwähnt Web SQL Database Spezifikation und Entwicklung werden offenbar z. Zt. nicht fortgeführt Drag and Drop jquery & Co. haben längst bessere Implementierungen File API Lesen von Dateien vor dem Upload (kein geskripteter Vollzugriff auf das Dateisystem, sondern gekoppelt an Button)

haben längst bessere Implementierungen File API Lesen von Dateien vor dem

14 Fortschrittsbalken Progress-Bar Konfigurierbare Skala und Animation Sehr ausführliche Anleitung unter

ausführliche Anleitung unter http://www.

15 <audio>, <video> Nativer Player für Multimedia-Dateien Abspielen von Audio in den Formaten WAV, MP3, Ogg Abspielen von Videos mit geeigneten Codecs H.264, webm, V8, Ogg kein DRM unterstützt

16 Neue Dokumentgliederung <article> <aside> <footer> <header> <hgroup> <nav> <section> <small> Eigenständiger Inhaltsabschnitt Seitenbereich Fußbereich Kopfbereich Überschriftengruppierung Navigation, Menü Unterabschnitt "Kleingedrucktes" (Disclaimer)

Inhaltsabschnitt Seitenbereich Fußbereich Kopfbereich

17 Navigation ein- und ausblenden $('nav').toggle(); APEX-Demo

18 Exkurs: JavaScript in Navigation Bar Entry vom Typ "URL" erzeugen URL Target: #" onclick="$('nav').toggle();return false Ergebnis: <a href="#" onclick="$('nav').toggle();return false">nav</a>

19 HTML5-Elemente in "alten" Browsern <p>dies ist ein Absatz</p> Demo 3 <section> <p>dies ist ein Absatz</p> </section>

20 Canvas Pixel- und Vektorgrafiken Bitmaps, Pfade, Formen, Farbverläufe, Muster Transformatoren (Rotation, Skalierung, Image-Filter, ) Export in Datei processing.js ( APEX-Demo

21 Canvas Community-Beispiel von Carsten Czarksi: CANVAS zur Visualisierung von Tablespaces

22 navigator.geolocation getcurrentposition watchposition clearwatch

23 Geolocation Beispiel var target = { latitude : 0, longitude: 0, } var options = { enablehighaccuracy: false, timeout: 5000, maximumage: 0 }; var id = navigator.geolocation.watchposition(success, error, options); function success(pos) { var crd = pos.coords; if (target.latitude === crd.latitude && target.longitude === crd.longitude) { console.log('sie haben Ihr Ziel erreicht'); navigator.geolocation.clearwatch(id); }}; function error(err) { console.warn(err.message); };

24 Neue Eingabefeld-Typen Demo 4 <input type="date"> <input type="datetime"> <input type=" "> <input type="month"> <input type="number"> <input type="range"> <input type="search"> <input type="tel"> <input type="time"> <input type="url"> <input type="url">

26 Input-Plugins für APEX

27 neue Input-Attribute Demo 5 <input type = "text" value = "" autofocus required autocomplete = "off" placeholder = "Bitte ausfüllen" pattern = "^[0-9]{5}$" min = "5" max = "9999" />

29 CSS für die Validierung Demo 6 :invalid { background-color: red; } :valid { background-color: green; } input:invalid { background-color: red; } input:valid { background-color: green; } // durch Button die Klasse "ckecked" zuweisen form.checked input:invalid { background-color: red; } form.checked input:valid { background-color: green; }

30 Selbstdefinierte Attribute <input type = "text" value = "Spülmaschine" data-partno="bx " data-price="499.00" /> Mit dem Namensprefix data- sind eigene Attributkreationen im HTML5-Standard möglich.

31 navigator.online $('form').submit(function(){ if(navigator.online) { return true; } else { alert('keine Verbindung zum Server'); // Daten lokal speichern return false; } });

32 Web Messaging Nachrichten zwischen Domänen versenden Beispiel: IFRAME-Formulare aus anderen Applikationen Kommunikation zwischen Browserfenstern

33 Sender: Web Messaging var o = document.getelementsbytagname('iframe')[0]; o.contentwindow.postmessage('hallo', ' Empfänger: window.addeventlistener('message', receiver, false); function receiver(event) { if (event.origin == ' { if (event.data == 'Hallo') { event.source.postmessage('selber hallo ', event.origin); } else { alert('kommunikation mit ' + event.origin + ' ist unzulässig'); } } }

34 Web Storage Datenbank- Server "Web Storage" lokale Disk

35 Begriffsvielfalt Web Storage ( DOM Storage ) Local Storage Session Storage

36 Web Storage vs. Cookies Web Storage Cookies Anzahl unbegrenzt 20 Cookies pro Domain Volumen 5 MB pro Domain (typ.) 4 kb pro Cookie Gültigkeitsdauer Unbegrenzt (Local Storage) Session (Session Storage) Teil des http-dialogs nein ja Session oder begrenzt Deaktivierung per Konfigurationseingriff im Browsermenü Verfügbarkeit in modernen Browsern in praktisch allen Browsern

37 Local und Session Storage API Schreiben Lesen Anzahl Einträge Key löschen alle Keys löschen Local Storage localstorage.setitem ('key','value') localstorage.key='value' value = localstorage('key') value = localstorage.key n = localstorage.length localstorage.removeitem('key') localstorage.clear() je nach Bedarf localstorage durch sessionstorage ersetzen

38 Hinweise zu Web Storage Es werden Stringwerte gespeichert, "17" + "4" ergibt "174" Objekte umwandeln und speichern: localstorage.key = JSON.stringify(object) Objekte auslesen: object = JSON.parse(localStorage.key)

39 jstorage normalisiert die lokale Speicherung bereits ab IE 6 (max. 128 kb) implementiert einen Change Listener

40 jstorage Browser Support Demo 7+a

41 Application Cache Definition von Dateien, die der Browser stets offline cachen darf Typisch: CSS, JavaScript, statisches HTML Konfiguration über Manifest-Datei

42 Web Worker Clientseitige "Threads" Langwierige Berechnungen auslagern Browser bleibt bedienbar Demo 8

43 Web Sockets Bidirektionale Verbindung zwischen Server und Browser Polling: Server kann Nachrichten senden Latenz der Anwendung minimieren Einfach zu implementieren: nodejs Live-Demo

44 Web Sockets var socket = new WebSocket('ws:// :1337'); socket.onmessage = function (event) { alert(event.data); } "Twitter"-Feeds Daten-Aktualisierungen Socket-Server muss nicht die Datenbank sein (Fremdanbieter, dedizierter Server, jsnode, )

45 Web Socket (serverseitig) CREATE OR REPLACE PACKAGE BODY websockets IS PROCEDURE push ( p_text IN VARCHAR2 ) IS l_clob CLOB; BEGIN l_clob := APEX_WEB_SERVICE.MAKE_REST_REQUEST ( p_url => ' p_http_method => 'POST', p_body => '{"message":"' p_text '"}' ); END push; END websockets;

46 Web Socket (serverseitig) BEGIN -- Daten-Änderung irgendwo in der Datenbank: UPDATE emp SET sal=sal+1 WHERE ename = 'KING'; COMMIT; -- Mitteilung an alle verbundenen -- APEX-Clients senden: websockets.push('refresh'); END;

47 APEX-Report mit Websocket updaten $(function(){ window.websocket = window.websocket window.mozwebsocket; if (!window.websocket) { console.log('browser unterstützt die Websockets-Spezifikation nicht'); } else { var connection = new WebSocket('ws:// :1337'); connection.onerror = function (error) { console.log( 'Problem bei der Websocket-Kommunikation'); }; connection.onmessage = function (message) { try { var json = JSON.parse(message.data); if (json.message=='refresh') { apex.jquery('#demoreport').trigger('apexrefresh'); // demoreport ist die statische ID des Interactive Reports } else { console.log(json.message); } } catch (e) { console.log('ungültiges JSON-Format: ' + message.data); } }; } });

48 nodejs.org

49 Tipps & Tricks zu nodejs Anleitung zur Verwendung von node.js als Websocket-Server in Verbindung mit APEX: Installation des nodejs-moduls "websockets" unter Windows 7 funktionierte nur so: npm install websocket@ force siehe

50 Websocket-Server Eine Alternative: u.a. Beaconpush (beaconpush.com) extern gehostet, kostenpflichtig, inkl. Support

51 Empfehlungen Bruce Lawson, Remy Sharp (D) Setzt HTML- und JavaScript-Kenntnisse voraus Knackige Codebeispiele Lockerer Stil nicht ganz aktuell, 2011

52 Empfehlungen "Head First"-Reihe (D) Fokus auf JavaScript- Einstieg viele Illustrationen

53 rund um Application Express Beratung Projektmanagement Coaching Andreas Wismann

Ähnliche Dokumente

XML Technologien Seminar WS 2011/2012. 01.04.12 Einführung in HTML5 1

XML Technologien Seminar WS 2011/2012 01.04.12 Einführung in HTML5 1 EINFÜHRUNG IN HTML5 Eine kurze historische Einführung HTML5 Ausblick und kritische Reflexion 01.04.12 Einführung in HTML5 2 Eine kurze