Der HTML Layout Painter ist Bestandteil der Developer Workbench. Mit diesem sehr ­mächtigen Tool können eigene Webseiten erstellt werden, die Formulare, Reports, ­Diagramme und Webobjekte enthalten. Für die Bearbeitung der Webseiten können Javascript und Cascading Style Sheets (CSS) eingesetzt werden.

Voraussetzungen

Für meine Beispiele verwende ich die Bibliothek QWQCENT von IBM. Diese enthält vier Tabellen:

  • ORDERS – Bestellungen, 32.283 Zeilen bzw. Sätze
  • INVENTORY – Artikelbestand, 75 Zeilen bzw. Sätze   
  • STORES – Kaufhäuser/Geschäfte, 116 Zeilen bzw. Sätze
  • PLANT – Regionale Niederlassungen, 6 Zeilen bzw. Sätze

Der HTML Layout Painter ist Bestandteil der Developer Workbench. Daher muss diese zuvor installiert sein.

Die Developer Workbench ist eine optionale Erweiterung von DB2 Web Query. Sie wird als Option 3 von 5733-QU2 installiert. Zurzeit ist diese Version nur in englischer Sprache verfügbar. Daher werden im vorliegenden Artikel auch die original englischen Ausdrücke verwendet. 

Übersicht HTML Layout Painter

Mit dem HTML Layout Painter ist es möglich,

  • eine HTML-Startseite zu erstellen. Dieser Startseite können Pushbuttons, Hyperlinks und andere Objekte hinzugefügt werden, die wiederum andere DB2-Webabfrage-Berichte aufrufen.
  • eine Startseite für einen oder mehrere Reports zu erstellen, die Parameter enthalten.
  • einen vollständigen Report zu erstellen, der mehrere Berichte und Diagramme in einem HTML-formatierten Report kombiniert.
  • Bilddateien, Rahmen und andere Webelemente einer Reportseite hinzuzufügen und dadurch die Gestaltung der Seite beliebig zu realisieren. Position, Größe und Eigenschaften aller Objekte können nach Wunsch angepasst werden.
  • die HTML-Seite mit dem integrierten HTML-Editor oder einem externen Editor zu bearbeiten.
  • den Hintergrund, die Schriftart und andere Eigenschaften im Style-Composer-Tool darzustellen.

Hinweis: OLAP-aktivierte  Berichte werden vom HTML Layout Painter nicht unterstützt (OLAP = Online Analytical Processing; OLAP-Reports wurden in einem früheren Artikel dieser Reihe ausführlich dargestellt). Wird ein OLAP-Report mit dem HTML Layout Painter verwendet, so zeigt dieser die OLAP-Steuerungen nicht an. Stattdessen wird eine Scripting-Fehlermeldung angezeigt. Durch einen Trick – nämlich die Verwendung eines Rahmens (Frame) – ist es dennoch möglich, die OLAP-Steuerungen angezeigt zu bekommen. Wie das realisiert werden kann, beschreibe ich in einem der nächsten Artikel.

Der Einstieg zur Erstellung einer HTML-Seite kann auf zwei Arten erfolgen:

  • Markieren Sie den Ordner, in dem die neue HTML-Seite erstellt werden soll (in unserem Beispiel ist dies der Ordner ‚TKL‘). Aus dem Menü ‚File‘ wählen Sie ‚New‘ und ‚HTML File‘.

Bild 1

  • Oder klicken Sie mit der rechten Maustaste auf den Ordner ‚TKL‘ und wählen Sie aus dem Kontext-Menü ‚New‘ und ‚HTML File‘.

In der sich nun öffnenden Dialogbox ‚New HTML file‘ geben Sie den Namen der zu erstellenden HTML-Seite ein.

Bild 2

Der nun folgende Bildschirm zeigt die Workbench des HTML Layout Painters und deren Hauptelemente:

Bild 3

Die Hauptelemente des HTML Layout Painters sind:

  • Menüleiste – zeigt Pulldown-Menüs für den HTML Layout Painter an.
  • Developer Workbench – zeigt Tool-Buttons wie „Öffnen“ und „Ausführen“ an.
  • Toolbar Components – enthält Buttons, die dem Layout Objekte und Formularsteuerungen hinzufügen.
  • Toolbar Standard – zeigt Buttons wie „Cut“ und „Paste“ an, mit denen Sie das Layout  bearbeiten können.
  • Toolbar Positioning – enthält Buttons, die das Aussehen des Layouts steuern.
  • Fenstereigenschaften (Properties) – zeigt die Eigenschaften und Ereignisse von Objekten im Layout an.
  • Tab Events – zeigt die Ereignisse von Objekten im Layout an.
  • Parameter-Tab – zeigt Informationen über die Parameter in einem Report oder in einem Diagramm an.
  • Tab Thumbnails – enthält Bilder für jedes bereits erstellte Objekt. Durch Anklicken eines Bildes kann zu dem entsprechenden Objekt gesprungen werden.
  • Tab Design / HTML – hier kann zwischen dem Entwurfsmodus und der HTML-Darstellung gewechselt werden.

Die Toolbar Standard  enthält die folgenden Buttons (siehe auch die integrierte Bedienhilfe):

Button Beschreibung
Speichert die vorhandene Prozedur (.fex) und HTML-Dateien im aktuellen Projekt. Dieser Button wird grau, sobald das Layout gespeichert ist und keine weiteren Änderungen vorgenommen wurden. Wenn eine Änderung am Layout vorgenommen wurde, ist der Button „Save“ aktiviert, bis der Report erneut gespeichert wird.
Entfernt das markierte Objekt / die markierten Objekte und speichert sie in der Zwischenablage.
Kopiert das markierte Objekt / die markierten Objekte in die Zwischenablage.
Fügt das Objekt / die Objekte an der angegebenen Position ein.
Löscht das markierte Objekt / die markierten Objekte.
Setzt das Layout zurück, indem die zuletzt ausgeführte Aktion rückgängig gemacht wird.
Wiederholt die zuletzt ausgeführte Aktion.

Die Toolbar Components  enthält die folgenden Buttons (siehe auch die integrierte Bedienhilfe):

Button Beschreibung
Fügt in das Layout ein Reportobjekt ein.
Fügt in das Layout ein Diagrammobjekt ein.
Tipp: Sie können auf ein Diagrammobjekt rechtsklicken, um den erweiterten Diagramm-Assistenten zu öffnen.
Fügt einen Platzhalter für eine Formularsteuerung ein.
Fügt einen Platzhalter für einen IFRAME ein. Ein IFRAME kann eine eigene URL haben, HTML-Inhalte enthalten und als Platzhalter für einen Drilldown-Report dienen.
Fügt einen Platzhalter für eine Bilddatei ein.
Fügt Text ein.
Fügt eine Linie ein.
Fügt eine Gruppenbox hinzu.
Fügt eine Textbox hinzu.
Fügt eine verborgene Textbox hinzu.
Fügt eine Dropdown-Liste hinzu.
Fügt ein Listenfeld (eine Dropdown-Liste, die Mehrfachauswahl ermöglicht) hinzu.
Fügt einen Platzhalter für eine Doppellisten-Parametersteuerung ein.
Fügt einen Pushbutton hinzu.
Fügt einen Button Reset hinzu.
Fügt ein Optionsfeld hinzu.
Fügt eine Checkbox-Liste hinzu.
Fügt einen Textbereich ein.
Fügt eine Struktursteuerung ein.
Fügt einen Hyperlink ein.
Fügt einen Kalender hinzu.
Fügt eine ActiveX-Steuerung hinzu.
Speichert eine Auswahl.
Fügt ein Panel ein, um Objekte zu gruppieren. Das Panel ist während der Ausführung nicht sichtbar.
Fügt eine Schieberegler-Parametersteuerung ein.

Eine Anwendung mit dem HTML Layout Painter erstellen

Für unser 1. Beispiel verwende ich zwei Auswertungen, die mit dem Diagramm-Assistenten erstellt wurden, sowie einen Bericht, der mit dem Berichts-Assistenten erstellt wurde.

Diese drei Auswertungen sollen auf einer Webseite dargestellt werden.

Erste Auswertung, TKL_GA3_Trend:

Bild 4

Zweite Auswertung, TKL_GA1_Bar:

Bild 5

Dritte Auswertung, TKL_RA4_Advanced:

Bild 6

Als Erstes erstellen wir eine Überschrift für unsere HTML-Seite. Dazu klicken wir die Komponente ‚Text‘ an. Der Cursor wird zu einem Fadenkreuz. Klicken Sie auf das Fadenkreuz und ziehen Sie es auf, um die Größe der Komponente Text wie gewünscht anzupassen. Fügen Sie dann einen Text als Überschrift in die Textkomponente ein. Die Darstellung und Größe des Textes wird im Fenster ‚Properties‘ angepasst. Durch einen Klick auf ‚Styling Font‘ und danach auf ‚….‘ kann die gewünschte Darstellung ausgewählt werden.

Bild 7

Das Einfügen einer Grafik oder eines Fotos wird mit Hilfe des Symbols bewerkstelligt. Das einzufügende Objekt muss allerdings zuvor im Ordner ‚Other Files‘ abgelegt werden.

 

Bild 8

Nun fügen wir endlich unsere beiden Diagramme und den Bericht hinzu.

Generell erfolgt das Hinzufügen von Objekten durch Auswahl der geeigneten Toolbar-Komponente (siehe Liste der Toolbar Components). Wie bereits zuvor mit Hilfe der Textkomponente und der Bildkomponente werden für den aktuellen Fall das Reportobjekt und das Diagrammobjekt ausgewählt. Mit dem Cursor, der nun wieder als Fadenkreuz dargestellt ist, wird der Bereich für das einzubettende Objekt markiert.

Mit einem Rechtsklick auf den erstellten Rahmen wird das Kontextmenü aktiviert. Hier wählen Sie bitte aus: Reference existing procedure.

Bild 9

In der anschließend angezeigten Dialogbox wird eine Liste der bereits erstellten Berichte und Diagramme angezeigt. Für unser Beispiel wähle ich jeweils eines der oben genannten Objekte aus.

Der entsprechende Bericht bzw. das entsprechende Diagramm wird in dem vorgegebenen Rahmen dargestellt. Dieser kann nun in Position, Breite und Höhe bedarfsgerecht angepasst werden.

Bild 10

Auf die gleiche Weise werden nun die beiden Diagramme hinzugefügt.

Bild 11

Das Ergebnis könnte dann wie folgt aussehen:

Bild 12

Vorschau für die nächsten Folgen

In den nächsten Folgen werde ich Ihnen zeigen, wie die bereits erstellte HTML-Seite durch einen auswählbaren Parameter ergänzt und dadurch flexibler wird. In einem weiteren Beispiel wird gezeigt, wie ein Bericht mit zahlreichen Parametern, die teilweise voneinander abhängig sind, mit dem HTML Layout Painter auf elegante Art erstellt werden kann.

Bis dahin wünsche ich Ihnen weiterhin viel Spaß beim Vermehren Ihrer Fertigkeiten.