HTML5 für APEX Entwickler: Anwendungen der nächsten

<Insert Picture Here>
HTML5 für APEX Entwickler
APEX-Anwendungen der nächsten Generation
Carsten Czarski
ORACLE Deutschland B.V. & Co KG
HTML5 für APEX-Entwickler
 HTML5: Was ist das?
 In APEX eingebaute HTML5-Features
 Einige ausgewählte HTML5-Features
–
–
–
–
Geolocation: Zugriff auf Ortungsdienste
Canvas Objekt: "Zeichnen" mit JavaScript
FileReader: Zugriff auf vom Benutzer
ausgewählte, lokale Dateien
Styling mit CSS3
 Ausblick: Was geht noch mit HTML5?
HTML5: Was ist das ..
 Nächste Generation der HyperText Markup Language
 Bessere Unterstützung für moderne Web-Anwendungen
–
–
–
–
–
Stärkere Integration von JavaScript
Native Unterstützung von Multimedia-Inhalten (ohne Plugin)
Ansätze für Offlinefähigkeit
Unterstützung für verschiedene Endgeräte
Mehr Flexibilität in der Markup Sprache
 Kompatibel zu bisherigen HTML-Versionen
 Inzwischen gute Browser-Unterstützung
+
–
Firefox, Chrome, Safari, Opera, IE ab Version 9
Internet Explorer bis einschließlich Version 8
HTML5 und mobile Engeräte
 HTML5 Grundfunktionen werden gut unterstützt
 Supportmatrix beachten (http://mobilehtml5.org)
HTML5 und APEX:
Was kann ich sofort nutzen?
Geolocation mit HTML5
 Abrufen der GPS-Position des Endgeräts
 JavaScript-Funktion
–
–
Asynchrone Ausführung
Übergabe von Callback-Funktionen
navigator.geolocation.getCurrentPosition (
{handle-location-function},
{handle-error-function}
);
Ein erster Test im Browser
Nutzung in APEX
 Schaltfläche erstellen
–
–
Bei Klick: Dynamische Aktion starten
Aktion: JavaScript-Code ausführen
navigator.geolocation.getCurrentPosition (function (pos) {
$s("PX_LAT", pos.coords.latitude);
$s("PX_LON", pos.coords.longitude);
$s("PX_ALT", pos.coords.altitude);
$s("PX_HEAD", pos.coords.heading);
});
Noch einfacher: APEX Plugin
Download-URL am Ende des Vortrags
Nutzung der Informationen ...
 Abspeichern in Tabellen als SDO_GEOMETRY
 Räumliche Funktionen der Datenbank nutzen
Umkreissuche, Nächste Nachbarn, etc
 Darstellung auf Karte
 APEX Plugins verfügbar
Diagramme und Grafiken mit HTML5
 Völlig freie Grafiken und Diagramme
 Direkt im Browser – keine Plugins nötig
–
–
Auch auf mobilen Geräten lauffähig
Effizienter als Generierung auf dem Server
 2 Ansätze
–
–
Native SVG
CANVAS Objekt
HTML5 Native SVG: Ein Beispiel
 SVG-Objekte sind Teil des DOM
–
–
Ansprechbar mit JavaScript bzw. jQuery
Manipulierbar mit DHTML-Methoden
<p>
Der erste Versuch: HTML5 Native SVG
</p>
<svg width="200" height="200" style="border: 1px solid black;">
<rect
id="r1" x="0" y="0"
width="140" height="360"
fill="#ff0000" />
<rect
id="r2" x="20" y="130" width="100" height="200"
fill="#00ff00" />
<circle id="c1" r="50" cx="70" cy="70"
fill="#0000ff" />
</svg>
SVG in einem APEX Bericht
Ein Beispiel
 Schritt 1: PL/SQL Funktion erstellen
function render_circle(
p_radius in number
default 16,
p_color in varchar2 default '#000000'
) return varchar2 is
l_svg_xml varchar2(32767):=
'<svg xmlns="http://www.w3.org/2000/svg"
width="#SVGWIDTH#" height="#SVGHEIGHT#">' ||
' <circle r="#RADIUS#" cx="#CENTERX#" cy="#CENTERY#" fill="#COLOR#" />'||
'</svg>';
begin
l_svg_xml := replace(l_svg_xml, '#SVGWIDTH#', to_char(round(p_radius*2)));
l_svg_xml := replace(l_svg_xml, '#SVGHEIGHT#', to_char(round(p_radius*2)));
l_svg_xml := replace(l_svg_xml, '#RADIUS#',
to_char(round(p_radius)));
l_svg_xml := replace(l_svg_xml, '#CENTERX#',
to_char(round(p_radius)));
l_svg_xml := replace(l_svg_xml, '#CENTERY#',
to_char(round(p_radius)));
l_svg_xml := replace(l_svg_xml, '#COLOR#',
p_color);
return l_svg_xml;
end render_circle;
SVG in einem APEX Bericht
Schritt 2: Bericht erzeugen
 Berichts-SQL
select
empno, ename, job, hiredate, sal,
render_circle(sal/300, 'red') sal_circle
from emp
 HTML-Escaping für SAL_CIRCLE abschalten
HTML5 Canvas Objekt
 HTML-Tag <canvas>
 Freie "Grafikprogrammierung" direkt im Browser
 Ansprache per JavaScript
fillRect, lineTo, arcTo, moveTo, fillStyle, ...
 Integration mit HTML-Bildelementen
–
–
–
Kopieren eines Bildes (<img>) in ein Canvas
Zeichnen – im Bild
Speichern des veränderten Bildes
HTML5 Canvas Objekt
<html>
<head>
<script>
function zeichneEtwas() {
var lCanvas = document.getElementById("zeichnen");
var lCtx = lCanvas.getContext("2d");
lCtx.beginPath();
lCtx.fillStyle = "#ff0000";
lCtx.fillRect(20,20,100,100);
lCtx.fillStyle = "#00ff00";
lCtx.fillRect(50,50,100,100);
}
</script>
</head>
<body>
<canvas id="zeichnen" width="500" height="400"></canvas><br/><br/>
<button type="button" onClick="zeichneEtwas();">Zeichne etwas</button>
</body>
</html>
HTML5 Canvas - Ergebnis
HTML5 FileReader
 Zugriff auf im Filebrowse-Item ausgewählte Dateien
 JavaScript-Funktion auf onChange-Eventhandler
–
–
Dateiinhalte als Byte-Array, String oder Blob auslesen
Dateiinhalte stückweise auslesen
 Anwendungsgebiete
–
–
–
Asynchrones Hochladen (mit Fortschrittsbalken)
Bildvorschau vor Upload
Informationen zu hochgeladenen Dateien anzeigen
HTML5 FileReader – Beispiel
Dateiinformation + 100 Bytes anzeigen
 Ausgangssituation
HTML5 FileReader – Beispiel
Dateiinformation + 100 Bytes anzeigen
 Schritt 1: HTML Region mit DIV-Container
Schritt 2: Dynamic Action
 Dynamische Aktion auf Element File Browse
 On Change – Execute JavaScript Code
var inf = $x("div-file-info");
var f = this.triggeringElement.files[0];
var r = new FileReader();
var blob = f.slice(0, 100);
// Bytes von 0 – 100 lesen
var infostr = f.name + "\n" + f.type + "\n" + f.size + "\n\n";
r.onloadend = function(evt) {
if (evt.target.readyState == FileReader.DONE) {
infostr = infostr + {getHexString}(evt.target.result);
inf.innerHTML = "<pre>" + infostr + "</pre>";
}
}
r.readAsBinaryString(blob);
HTML5 FileReader – Beispiel
Dateiinformation + 100 Bytes anzeigen
 Ergebnis
HTML5 Canvas in APEX
Direktvorschau bei Bildupload
 Ausgangssituation
Schritt 1: Neue HTML-Region
 <canvas> Element als Regionsquelle
Schritt 2: Dynamic Action
 Dynamische Aktion auf Element File Browse
 On Change – Execute JavaScript Code
var canvas = $x('bildvorschau');
var ctx
= canvas.getContext('2d');
var img
= new Image;
img.src = URL.createObjectURL(this.triggeringElement.files[0]);
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
if (img.width > 600) {
canvas.style.width = 600 + "px";
} else {
canvas.style.width = img.width + "px";
}
ctx.drawImage(img, 0, 0);
}
Ergebnis ...
Bildvorschau noch vor dem Upload
Weiter denken ...
 Vorschaubild wird per Canvas angezeigt
 In einem Canvas kann man zeichnen ...
 In Kombination ...
Bilder manipulieren – im Browser!
 APEX Image Editor Plugin
Styling in HTML5 - CSS3
 Strenggenommen eigener Standard
 Im Zusammenspiel mit HTML5 aber wichtig
 Neue Möglichkeiten zur Darstellung
–
–
–
Transformationen: Rotieren, Skalieren, 2D, 3D
Animationen
Modernes Look & Feel: Abgerundete Ecken,
Transparenz
 CSS3 Media Queries: Responsive Web Design
CSS3: Ein Beispiel
#bild01 {
border-radius:
transform:
opacity:
width:
margin-top:
margin-left:
}
10px;
// abgerundete Ecken
rotate3d(1,1,0,45deg); // 3D-Rotation: 45° um X und Y-Achse
0.5;
// Transparenz
400px;
5cm;
5cm;
CSS3: Responsive Web Design
<style>
.box {background-color: red; height: 100px;}
@media
.box
}
@media
.box
only screen and (min-width: 0px) and (max-width: 200px) {
{display:none}
only screen and (min-width: 200px) and (max-width: 480px) {
{width: 50px; background-color: blue; font-size: 10pt;
font-family: Times New Roman; color: white}
}
@media only screen and (min-width: 480px) and (max-width: 2000px) {
.box {width: 400px; background-color: red; font-size: 20pt;
font-family: Arial}
}
</style>
HTML5 – weitere Möglichkeiten
 WebSockets
–
–
Push-Nachrichten vom Server zum Browser
Aber: Komplexer Setup
 APEX alleine reicht nicht
 Websockets-fähige Serverkomponente nötig
 LocalStorage
–
–
–
Lokale Key-Value Datenhaltung im Browser
Ansprache per JavaScript
Maximale Größe typischerweise ~5MB
Application Express Community
 Deutschsprachige APEX-Community-Webpage
–
–
–
http://blogs.oracle.com/apexcommunity_deutsch
Etwa 1200 regelmäßige Leser
Neue Ausgabe alle 14 Tage
 DOAG
–
–
–
http://www.doag.org
APEX Track auf der DOAG2013
Ask the Expert Panel mit dem Development
 APEX im Oracle Technet
–
–
–
http://otn.oracle.com/apex
Statement Of Direction
Diskussionsforum
[email protected]
http://tinyurl.com/apexcommunity
http://sql-plsql-de.blogspot.com
http://oracle-text-de.blogspot.com
http://oracle-spatial.blogspot.com
http://plsqlexecoscomm.sourceforge.net
http://plsqlmailclient.sourceforge.net
Twitter: @cczarski @oraclebudb