Sie möchten dynamische Zeichnungen, Diagramme oder Geschäftsgrafiken erstellen und die vorhandenen Möglichkeiten (SVG-Diagramme)  von Application Express reichen Ihnen nicht aus? Kein Problem!

Mit Application Express können Sie auch eigene SVG-Vektorgrafiken erstellen und in Ihre Anwendungen einbinden. In diesem und dem nächsten Tipp erfahren Sie, wie das geht - und wie Sie Diagramme wie in Abbildung 1 (basierend auf einer Tabelle mit Umfrageergebnissen) erstellen können ...

Abb.1: Das Ziel: Eigene SVG-Grafiken 

SVG (Scalable Vector Graphics) ist eine in XML formulierte Auszeichnungssprache für Vektorgrafiken. Der vom W3C gepflegte SVG-Standard hat sich für die Darstellung von Vektorgrafiken im Web mittlerweile weitgehend durchgesetzt. Abbildung 2 zeigt den Quelltext des Diagramms in Abbildung 1:

Abb.2: SVG-Quelltext des Diagramms in Abbildung 1

Die SVG-Diagramme, welche Application Express bereitstellt, sind ähnlich aufgebaut. Das Diagramm wird in XML beschrieben, an den Browser ausgeliefert und von diesem schließlich mit Hilfe des SVG-Plugins dargestellt. Der Vorteil der eingebauten Application Express-Diagramme ist, dass Sie nur die SQL-Abfrage bereitstellen und sich um die XML-Beschreibung der Grafik keine Gedanken mehr machen müssen. 

Wenn Sie eigene SVG-Vektorgrafiken erzeugen möchten, sind Sie selbst dafür verantwortlich, dass das "richtige" XML an den Browser gesendet wird. In dieser Ausgabe erfahren Sie zunächst, wie Sie eine einfache, dynamische SVG-Grafik erzeugen und diese in Ihre Application Express-Anwendung einbinden. Wie Sie eine SVG-Grafik für bestehende Tabellendaten (wie in Abbildung 1) erzeugen, erfahren Sie in der folgenden Ausgabe.

Zunächst sei das "Grundgerüst" einer SVG-Grafik vorgestellt:

<?xml version="1.0" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
                     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500px" height="400px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <!-- Hier erfolgt dann die SVG-Definition -->
</svg

Dieses XML-Dokument repräsentiert einen leeren SVG-Bereich mit 500 Pixeln Breite (width) und 400 Pixeln Höhe (height). Das XML-Tag svg wird später alle Definitionen der SVG-Grafik enthalten.  Der Ursprung des Koordinatensystems befindet sich stets links oben.

Beginnen Sie mit einem einfachen Beispiel. Erstellen Sie eine Application Express-Anwendung mit zunächst einer Seite. Diese erhält eine HTML-Region mit vier Text-Elementen (P1_X, P1_Y, P1_WIDTH und P1_HEIGHT und einer Schaltfläche zum Absenden der Eingaben:

Abb.3: Application Express-Anwendung: Formular 

Erzeugen Sie nun rechts neben dem Formular eine weitere HTML-Region. Geben Sie als HTML-Quelltext folgendes ein:

<OBJECT 
  width="500" 
  height="400" 
  type="image/svg+xml" 
  data="f?p=&APP_ID.:&APP_PAGE_ID.:&SESSION.:APPLICATION_PROCESS=zeigeSVG" >
</OBJECT>

Das HTML-Tag OBJECT bindet Multimedia-Inhalte in eine Web-Seite ein - Wenn es sich (wie in diesem Fall) um SVG handelt, wird das SVG-Plugin (sofern vorhanden) gestartet. Die SVG-Grafik wird von einem bedarfsgesteuerten Anwendungsprozeß (welcher noch erstellt wird) erzeugt und bereitgestellt. Sie erkennen dies am HTML-Attribut data. Der Inhalt ist eine Application Express-URL. Mit APPLICATION_PROCESS=zeigeSVG wird der Anwendungsprozeß aufgerufen. Versehen Sie die Region zum Abschluß noch mit einer Bedingung: SIe soll nur dargestellt werden, wenn alle vier Eingabefelder ausgefüllt wurden. 

Die SVG-Grafik soll ein Rechteck enthalten, welches mit den vier Eingabefeldern X, Y, Höhe und Breite beschrieben wird. Als Basis dient das weiter oben vorgestellte SVG-Grundgerüst. Fügt man diesem die SVG-Anweisung für ein Rechteck hinzu, so sieht das XML-Dokument wie folgt aus:

<?xml version="1.0" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
                     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500px" height="400px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="20" width="100" height="200"/>
</svg>

Um dieses XML dynamisch mit den jeweils eingegebenen Werten erzeugen und ausliefern zu können, benötigen Sie den Anwendungsprozeß.Navigieren Sie also zu den Gemeinsamen Komponenten und von dort zu den Anwendungsprozessen. Wichtig ist, dass der Anwendungsprozeß Bedarfsgesteuert angelegt wird.

Abb.4: Neuer Bedarfsgesteuerter Anwendungsprozeß

Hinterlegen Sie folgenden PL/SQL-Code:

begin
  owa_util.mime_header('image/svg+xml', false);
  owa_util.http_header_close;
  htp.prn('<?xml version="1.0" standalone="yes"?>');
  htp.prn('<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ');
  htp.prn('"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">');
  htp.prn('<svg width="500px" height="400px" version="1.1" xmlns="http://www.w3.org/2000/svg">');
 
  htp.prn('<rect x="'||:P1_X||'" ');
  htp.prn('      y="'||:P1_Y||'" ');
  htp.prn('      width="'||:P1_WIDTH||'" ');
  htp.prn('      height="'||:P1_HEIGHT||'"/>');

  htp.prn('</svg>');
end;

Die Prozedur setzt zunächst den Mime-Typ der Ausgabe auf SVG (image/svg+xml) fest - damit ist sichergestellt, dass der Browser die Daten richtig interpretiert und das SVG-Plugin startet. Die nachfolgenden htp.prn-Kommandos erzeugen das SVG-XML und liefern es an den Browser aus. Wenn das SVG-Tag rect generiert wird, werden dessen Attribute x, y, width und height mit den Werten der Application Express-Eingabefelder belegt. 

Testen Sie Ihre Seite nun und probieren Sie ein paar Werte aus ...

Abb.5: Ergebnis des 1. SVG-Tests ...

Die Möglichkeiten, welche SVG dem Entwickler bei der Darstellung der Objekte bietet, sind sehr vielfältig. Hier können nicht alle SVG-Elemente und -Attribute vorgestellt werden - dies würde den Rahmen dieser Webseite sprengen. Unser Beispiel soll aber noch ein wenig ausgebaut werden. Fügen Sie dem Formular noch Eingabefelder für die Farbe des Rechtecks (P1_RECT_COL) und für zusätzlichen Text (P1_TEXTX, P1_TEXTY, P1_TEXT und P1_TEXTSIZE) hinzu:

Abb.6: SVG-Test: Das Formular wird erweitert.

Diese zusätzlichen Eingaben müssen im  Anwendungsprozeß berücksichtigt werden:

begin
  owa_util.mime_header('image/svg+xml', false);
  owa_util.http_header_close;

  htp.prn('<?xml version="1.0" standalone="yes"?>');
  htp.prn('<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ');
  htp.prn('"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">');
  htp.prn('<svg width="500px" height="400px" version="1.1" xmlns="http://www.w3.org/2000/svg">');

  htp.prn('<rect x="'||:P1_X||'" ');
  htp.prn('      y="'||:P1_Y||'" ');
  htp.prn('      width="'||:P1_WIDTH||'" ');
  htp.prn('      height="'||:P1_HEIGHT||'" ');
  htp.prn('      fill="'||:P1_RECT_COL||'"/>');

  htp.prn('<text x="'||:P1_TEXTX||'" ');
  htp.prn('      y="'||:P1_TEXTY||'" ');
  htp.prn('      font-size="'||:P1_TEXTSIZE||'">');
  htp.prn(:P1_TEXT);
  htp.prn('</text>'); 

  htp.prn('</svg>');
end;

Abb.7: SVG-Test: Endergebnis

Wie Sie sehen, ist das Zusammenstellen einer SVG-Grafik recht einfach. Sie können soviele rect, text, line oder circle-Elemente verwenden und damit die Grafik so komplex machen, wie Sie möchten. Wenn Sie genau wissen möchten, welche XML-Tags und -Attribute sie für SVG-Grafiken nutzen können, dann finden Sie in der W3C-Spezifikation zu SVG eine umfassende Dokumentation. 

Wenn Sie noch ein wenig mit diesem ersten SVG-Beispiel "spielen" möchten, probieren Sie mal die folgenden SVG-Tags aus ...

<line    x1="..." y1="..." x2="..." y2="..."/>
<circle  cx="..." cy="..." r="..."/>
<ellipse cx="..." cy="..." rx="..." ry="..."/>
<polyline points="[x1,y1] [x2,y2] [x3,y3] ..."/>
<polygon  points="[x1,y1] [x2,y2] [x3,y3] ..."/>

Wenn es um das Aussehen Ihrer Elemente geht, dürften folgende Attribute interessant sein ...

fill="[füllfarbe]"
stroke="[rahmenfarbe]"
stroke-width="[breite]"
fill-opacity="[transparenz]"
font-size="[schriftgröße]"
font-family="[schriftart]"

Zurück zur Community-Seite