Logo Oracle Deutschland   Application Express Community
HTML5 in APEX nutzen: Bildvorschau vor dem Upload

Erscheinungsmonat APEX-Version Datenbankversion
Dezember 2013 alle ab 10.2

HTML5 ist nicht umsonst eines der meistdiskutierten Themen in der Anwendungsentwicklung: Es eröffnet dem Entwickler völlig neue Möglichkeiten zur Gestaltung von Benutzeroberflächen einer Webanwendung. Das gilt natürlich auch für APEX: Die aktuelle Version 4.2 bringt bereits die eine oder andere HTML5-Funktion out-of-the-box mit - vor allem für die Unterstützung mobiler Endgeräte sind diese wichtig. So sind die Wertplatzhalter, die in einem APEX-Formularelement angezeigt werden, wenn es leer ist, keine besondere APEX-Funktion, sondern eine des HTML5-Standards. Auch die HTML5-Diagramme sind, der Name sagt es ja schon, mit HTML5-Mitteln realisiert.

HTML5 Funktion "Value Placeholder" in APEX
Abbildung 1: HTML5 Funktion "Value Placeholder" in APEX

Wenn Sie mit HTML5 arbeiten möchten, sollten Sie nochmals prüfen, welche Browser in Ihrem Unternehmen im Einsatz sind. HTML5 wird von den aktuellen Firefox, Chrome und Safari-Versionen gut unterstützt. Der Microsoft Internet Explorer unterstützt HTML5 erst ab Version 9 - Endanwender, die mit Internet Explorer 8 oder älter arbeiten, werden also nicht in den Genuß der hier beschriebenen Möglichkeiten kommen.

In diesem Community Tipp erfahren Sie etwas über das HTML5 Canvas-Element - dieses erlaubt, mit JavaScript-Kommandos, frei auf der Webseite zu zeichnen. So lassen sich bspw. Diagramme oder Zeichnungen direkt im Browser generieren. Porbieren Sie dies gleich einmal aus.

  1. Erzeugen Sie eine neue Seite in Ihrer APEX-Anwendung
  2. Erzeugen Sie darin eine neue Region vom Typ HTML
  3. Hinterlegen Sie folgende HTML-Tags als Regionsquelle
    <canvas id="leinwand" width="500" height="400"></canvas>
    
  4. Fügen Sie eine weitere Region vom Typ HTML ohne Inhalt hinzu; diese wird jedoch mit einer Schaltfläche ausgestattet. Bei Klick auf die Schaltfläche soll eine dynamische Aktion ausgelöst werden.

Die APEX-Seite sollte dann wie in Abbildung 2 aussehen.

APEX-Seite mit HTML5 Canvas Objekt
Abbildung 2: APEX-Seite mit HTML5 Canvas Objekt

An dieser Seite ist bis jetzt noch nichts besonderes zu erkennen. Das kommt aber jetzt: Fügen Sie der Seite eine neue Dynamic Action hinzu. Diese soll bei Klick auf die Schaltfläche ausgelöst werden (Abbildung 3) ...

Neue dynamische Aktion hinzufügen
Abbildung 3: Neue dynamische Aktion hinzufügen

... und dann JavaScript-Code ausführen, der etwas in das Canvas Objekt zeichnet. Achten Sie darauf, dass das Häkchen Beim Seitenladen auslösen nicht gesetzt ist.

var lCanvas = $x("leinwand");
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);
Bei Klick soll "JavaScript Code" ausgeführt werden
Abbildung 4: Bei Klick soll "JavaScript Code" ausgeführt werden

Speichern Sie alles ab und starten Sie die Seite. Nach Klick auf die Schaltfläche sollten Sie das in Abbildung 5 dargestellte Ergebnis sehen können.

Mit JavaScript wurde "ins Canvas" gezeichnet
Abbildung 5: Mit JavaScript wurde "ins Canvas" gezeichnet

Denkt man dieses einfache Beispiel weiter, so ergibt sich ein enormes Potenzial - kann man doch, per JavaScript und AJAX-Request, beliebige Daten aus den Tabellen der Datenbank holen und diese dann mit JavaScript frei visualisieren. Grenzen werden allenfalls durch den entstehenden Aufwand und die zur Verfügung stehende Zeit gesetzt.

Das Canvas-Objekt hat aber noch eine weitere Eigenschaft, die als nächstes genutzt werden soll. HTML5 erlaubt es, auf Dateien, die mit dem Formularelement Datei durchsuchen ausgewählt wurden, direkt und ohne Umweg über den Server zuzugreifen. Ist die Datei ein Bild, so kann es direkt ins Canvas kopiert und damit vom Endanwender betrachtet werden. Gerade wenn die Bilder etwas größer und die Netzwerkverbindung schlechter ist, kann es für den Endanwender sehr hilfreich sein, vorher sehen zu können, was er da gleich hochladen wird.

Erstellen Sie also, in der Region, in der schon die Schaltfläche ist, ein neues APEX-Element vom Typ Datei durchsuchen (File browse) mit Namen PX_DATEI. Wenn das getan ist, erzeugen Sie nochmals eine dynamische Aktion; diese soll ausgelöst werden, wenn eine Datei ausgewählt wurde, also auf dem onChange- Ereignis des Elements PX_DATEI (Abbildung 6).

Dynamische Aktion zur Bildvorschau: "onChange"-Ereignis auf PX_DATEI
Abbildung 6: Dynamische Aktion zur Bildvorschau: "onChange"-Ereignis auf PX_DATEI

Als Aktion soll wiederum JavaScript-Code ausgeführt werden (achten Sie nochmals darauf, dass das Häkchen bei Beim Seitenladen auslösen nicht gesetzt ist). Hinterlegen Sie den folgenden JavaScript-Code.

var canvas = $x('leinwand');
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 > 500) {
    canvas.style.width = 500 + "px";
  } else {
    canvas.style.width = img.width + "px";
  }
  ctx.drawImage(img, 0, 0);
}
JavaScript Code ausführen - Bild im Canvas darstellen
Abbildung 7: JavaScript Code ausführen - Bild im Canvas darstellen

Diese kleine JavaScript-Funktion stellt zunächst fest, welche Datei in dem Element, das die dynamische Aktion gefeuert hat (Datei durchsuchen), ausgewählt wurde. Damit wird JavaScript-Objekt vom Typ Image aufgebaut - sprich: Das Bild wird in den Hauptspeicher des Browsers geladen. Mit den darauf folgenden Kommandos wird das Canvas-Objekt zunächst so groß gemacht, dass das Bild ganz hineinpasst; danach wird die Anzeigebreite (mit CSS-Attributen) wieder auf 500 Pixel zurückgesetzt. Damit wird das Bild skaliert. Im Ergebnis sehen Sie eine maximal 500 Pixel breite Vorschau auf das ausgewählte Bild - und das, bevor es hochgeladen wird.

Wichtig zu wissen ist, dass Sie mit HTML5 nur auf die Dateien zugreifen können, die der Anwender mit einem Element Datei durchsuchen ausgewählt hat - freien Zugriff auf die Festplatte und das Lesen beliebiger Dateien erlaubt auch HTML5 nicht.

Speichern Sie danach alles ab und starten Sie die APEX-Seite. Wählen Sie mit dem Dateiauswahlfeld ein Bild aus Ihrer Festplatte aus. Noch bevor Sie irgendeinen Button geklickt haben, wird Ihr Bild im Canvas-Objekt dargestellt.

Bild aus Dateiauswahlfeld im Canvas darstellen
Abbildung 8: Bild aus Dateiauswahlfeld im Canvas darstellen

Natürlich können Sie nun - ganz klassisch - eine Schaltfläche zum Upload des Bildes und einen PL/SQL-Prozess zum Speichern in eine Tabelle hinzufügen; eine APEX-Seite zum Hochladen eines Bildes funktioniert dann ganz normal - nur dass der Anwender das Bild nun vorher sehen kann.

In diesem Community-Tipp haben Sie einige erste Schritte mit dem HTML5 Canvas-Objekt gemacht. Im Canvas kann mit JavaScript frei gezeichnet werden; außerdem können in Dateiauswahlfeldern ausgesuchte Bilder direkt hineinkopiert werden. Allein damit können APEX-Anwendungen erheblich aufgewertet werden. Ist, zum Beispiel, eine sehr spezielle Visualisierung gefordert, die als APEX-Diagramm nicht bereitsteht, so kann man darüber nachdenken, diese mit HTML5 Canvas selbst zu implementieren - man sollte den Aufwand, der dabei enstehen kann, aber nicht unterschätzen.

Zum Thema HTML5 und Application Express fand im November 2013 ein Webseminar für die deutschsprachige APEX Community statt. Darin wurden noch einige weitere Möglichkeiten von HTML5 betrachtet. Die Unterlagen dazu stehen zum Download bereit.

https://apex.oracle.com/folien

Schlüsselwort: apex-html5

Zurück zur Community-Seite