Hochschule Merseburg. Masterarbeit

Transkript

1 Hochschule Merseburg Fachbereich Informatik und Kommunikationssysteme Masterarbeit Konzeption und Entwicklung einer mobilen Web-Applikation aus dem XML-Datenexport eines Redaktionssystems von B. Eng. (FH) Thomas Hennig aus Halle (Saale) Studiengang: Technische Redaktion und Wissenskommunikation (M-TRW10) Erstbetreuer: Dr. rer. nat. Thomas Meinike Zweitbetreuer: Dipl.-Ing. (TH) Frank Udo Kimm eingereicht am: 03. Juni 2013

2 Inhaltsverzeichnis Abbildungsverzeichnis V Abkürzungsverzeichnis X 1 Einleitung Unternehmensprofil Aufgabenstellung Funktionsprinzip der Web-Applikation XML-Redaktionssystem (Schema ST4) Eigenschaften des Redaktionssystems Aufbau Software und Werkzeuge Oxygen XML-Editor XSLT-Prozessor Saxon Berücksichtigung unter Java Web-Technologien Ajax Asynchronous JavaScript and XML CSS Cascading Style Sheets DOM Document Object Model HTML Hypertext Markup Language JavaScript JSON JavaScript Object Notation jquery und jquery Mobile XML Extensible Markup Language Aufbau eines XML-Dokuments Wohlgeformtheit und Gültigkeit XPath XML Path Language Knotentypen Achsen Lokalisierungspfade Prädikate Operatoren Katalogpreisliste Seite II

3 6 Analyse der XML-Strukturen Datenexport Wurzelknoten und XML-Namensräume Verknüpfung der Knoten Aufbau des Projektknotens Kapitelknoten Bildknoten Textknoten Variablenknoten XSL-Stylesheet XSL-Stylesheet-Wurzelelement Templates Wurzelelement Anwendungsbereiche Anwendungsarten Produkt Abschnittsüberschriften Zwischenüberschriften Absätze Listenpunkte Tabellen Variablen Fragmente Datenstruktur des Zieldokuments Hauptgliederung Produkt Beschreibung Transformation der Manifest-Datei Datenaustauschformat Anwendungen HTML5 und jquery Mobile Die Web-Applikation im Überblick Seitenaufbau Anpassungen im <head>-bereich Seite III

4 9.1.4 Inhaltsbereich Kopf- und Fußleiste Manifest-Datei Aktivierung der Manifest-Datei Aufbau der Cache-Manifest-Datei Besonderheiten des Application-Cache Notierungen in der Manifest-Datei Web-Storage Standard-Themes ThemeRoller Stylesheet-Anpassungen JavaScript Anwendungsbereiche auslesen Anwendungsarten auslesen Produkte auslesen Produktdetailseite auslesen Bedienungsanleitung Auswertung Ergebnis Zusammenfassung Ausblick Quellenverzeichnis XI Anhang XVII Eidesstattliche Erklärung XVIII Seite IV

5 Abbildungsverzeichnis Abb. 1: Funktionsprinzip Abb. 2: Viewlet: Informationspool Abb. 3: Viewlet: Projektbaum Abb. 4: Viewlet: Schnellansicht Abb. 5: Viewlet: Eigenschaften Abb. 6: Viewlet: Informationsarten Abb. 7: Viewlet: Verwendungsinfo Abb. 8: Konfigurationsmenü im Oxygen XML-Editor Abb. 9: Konfigurationsmenü Transformationsszenario (Oxygen XML-Editor) Abb. 10: Zielverzeichnisstruktur Abb. 11: Fehlermeldung: OutOfMemoryError Abb. 12: Vergleich einer statischen und einer dynamischen Anwendung (Quelle:[Vollendorf und Bongers 2010], S. 218) Abb. 13: Allgemeine Auszeichnung und ein Beispiel einer CSS Abb. 14: HTML-Quelltext und seine DOM-Baumstruktur (Quelle: [Vollendorf und Bongers 2010], S.563) Abb. 15: JSON-Datenstruktur Abb. 16: Beispiel einer XML-Baumstruktur Abb. 17: Aufbau eines XML-Elements Abb. 18: XML Schema-Definition (Design-Ansicht) Abb. 19: self-achse Abb. 20: child-achse Abb. 21: descendant-achse Abb. 22: descendant-or-self-achse Abb. 23: parent-achse Abb. 24: ancestor-achse Abb. 25: ancestor-or-self-achse Abb. 26: preceding-achse Abb. 27: preceding-sibling-achse Abb. 28: following-achse Abb. 29: following-sibling-achse Abb. 30: Produktdaten: Ama-Drainer 4../5..(Quelle:[KSB Katalogpreisliste 2013], S. 32) Abb. 31: Namensraum mit Präfix n Seite V

6 Abb. 32: Namensräume Abb. 33: Verknüpfung der Knoten im XML-Exportdokument Abb. 34: Projektknoten Abb. 35: Kapitelknoten Abb. 36: Bildknoten Abb. 37: Kapitelknoten Produktüberschrift Abb. 38: Kapitelknoten mit Titel, Fragment und Textlinkknoten Abb. 39: Textknoten Abb. 40: Textknoten mit Variablenverweis Abb. 41: Variablenknoten Abb. 42: Wurzelelement Abb. 43: Template-Aufruf Abb. 44: Auslesen der Elementknoten und Erstellen des Wurzelelements <projekt> Abb. 45: Erstellen der Kindelemente <einsatzort> mit Attribut titel Abb. 46: Lokalisierungspfad der Variable $ort Abb. 47: XML-Ausgabedokument mit <einsatzort>-elementknoten Abb. 48: Aufruf des Templates Abb. 49: Erstellen der Kindelemente <pumpentyp> mit titel-attribut Abb. 50: Template-Aufruf Abb. 51: XML-Ausgabedokument mit <pumpentyp>-element Abb. 52: Ausgabe der XML-Struktur für Produktname und Bildressourcen Abb. 53: Erstellung des <produkt>-elementknotens Abb. 54: Auslesen des src-attributs und Speicherung in die Variable $bild Abb. 55: Vergleich der Nummer der Bildquelle mit der Link-ID des Linkelementknotens Abb. 56: Ausgabe der Bildressource im.jpg-format Abb. 57: Variable title Abb. 58: Variable $content Abb. 59: Definition des <beschreibung>-elementknoten Abb. 60: Abfragetest Untertitel Abb. 61: Abfragetest Absatz Abb. 62: Abfragetest Listenpunkt mit Aufruf weiterer Templates zur Ausgabe von <br />-Elementen und Wegfall von Fußnoten Abb. 63: Ausgabe des <caption>-html-elements Abb. 64: Auslesen und Ausgeben des Tabellenkopfes Abb. 65: Attribute zum Verbinden von Spalten und Zeilen Seite VI

7 Abb. 66: Ausgabe des Textknoten vom <p>-element Abb. 67: Datenbereich <tbody>-element Abb. 68: XML-Ausgabestruktur: Tabelle Abb. 69: Variablen in der Web-Applikation Abb. 70: Abfrage von Variablenwerten Abb. 71: Vergleich des Attributknotens l:id und der Variable $linkid Abb. 72: Ausgabe der Variablen Abb. 73: Gliederung des XML-Ausgabedokuments Abb. 74: Datenstruktur im Produkt Abb. 75: Konstruktiver Aufbau Abb. 76: Tabelle mit HTML-Auszeichnung Abb. 77: Angaben für nicht veränderliche Ressourcen Abb. 78: Abfragen der Bildressourcen und Erstellung der Adressen Abb. 79: Angaben für die JavaScript-Bibliotheken und Icons Abb. 80: Cache-Manifest-Datei Abb. 81: Umwandlung von XML nach JSON Abb. 82: XML-Datenstruktur Abb. 83: Ausgabe: Umwandlung XML nach JSON Abb. 84: Aufbau der Web-Applikation Abb. 85: Einbindung der jquery-mobile-bibliothek Abb. 86: jquery mit div-elementen und den strukturierenden HTML5-Elementen Abb. 87: Viewport-Einstellungen Abb. 88: Aktivierung des Full Screen Modes Abb. 89: Einstellung für Glanzeffekt Abb. 90: Icon mit Glanzeffekt Abb. 91: Icon ohne Glanzeffekt Abb. 92: Inhaltsbereich Abb. 93: HTML- und jquery-mobile-code einer verlinkten Liste Abb. 94: Screenshot einer verlinkten Liste Abb. 95: HTML- und jquery-mobile-code einer verlinkten Liste mit Vorschaubild Abb. 96: Screenshot einer verlinkten Liste mit Vorschaubild Abb. 97: Kopfzeile Abb. 98: Kopfzeile mit Logo, Titel und Info-Schaltfläche Abb. 99: Fußzeile Abb. 100: Navigation in der Fußleiste Seite VII

8 Abb. 101: Icon-Set Abb. 102: Einbindung der Manifest-Datei Abb. 103: Cache-Manifest-Datei Abb. 104: Application Cache vom Google Chrome Browser Abb. 105: Speicher des localstorage Abb. 106: Swatch a bis e Abb. 107: Attribut data-theme Abb. 108: Kombination mehrerer Swatches im Listenelement mit der Eigenschaft data-role= listview Abb. 109: ThemeRoller-Anwendung Abb. 110: Verlinkung der jquery Mobile Stylesheet- und JavaScript-Dateien Abb. 111: Firbug-Ansicht: mit jquery Mobile angereicherter HTML-Code Abb. 112: Listenteiler Abb. 113: Titeleigenschaften für header und footer Abb. 114: CSS3-Eigenschaft: mit und ohne text-overflow: ellipsis; Abb. 115: CSS-Klassen für die Positionierung des KSB-Logos Abb. 116: CSS-Klasse.logo1 und.logo Abb. 117: <h1>-überschriften Abb. 118: Vorschaubild im listview-element Abb. 119: Bildgröße Abb. 120: Überprüfung der Anzeige über die ID Abb. 121: Ajax-Konfiguration Abb. 122: Anweisungen für die HTML-Seite mit der id= seite Abb. 123: HTML-Seite mit dynamisch erzeugtem Inhalt durch JavaScript Abb. 124: Listenteiler Anwendungsbereich Pumpen: Abb. 125: Name des Anwendungsbereichs und Anzahl der Unterkategorien Abb. 126: Anweisungen für die HTML-Seite mit der id= seite1_details Abb. 127: Auslesen der Anwendungsbereiche Abb. 128: Produktname und Produktbild Abb. 129: Abschnittsüberschriften Abb. 130: Einbinden der HTML-Elemente in die Abschnitte der Produktdetailseite Abb. 131: Inhaltsbereich mit Zwischenüberschriften, Tabelle und Liste Abb. 132: Ordner Transformation Abb. 133: streams durchsuchen Abb. 134: IrfanView: Optionen Seite VIII

9 Abb. 135: IrfanView: Bildeinstellungen Abb. 136: IrfanView: Batch/Stapel-Konvertierung Abb. 137: Auswahl Anwendungsbereiche: HTC (Android), Samsung (Windows Phone 7) und Apple iphone 4 (ios 6) von links Abb. 138: Produktdetailseite: HTC (Android), Samsung (Windows Phone 7) und Apple iphone 4 (ios 6) von links Abb. 139: Aufklappbare Inhalte (Quelle: [jquery Mobile 2]) Seite IX

10 Abkürzungsverzeichnis Abkürzungsverzeichnis Ajax CSS DITA DOM DTD HTTP ID (X)HTML JSON PHP SGML UI URI W3C WYSIWYG XML XPath XSD XSL XSLT Asynchronous JavaScript and XML Cascading Style Sheets Darwin Information Typing Architecture Document Object Model Document Type Definition Hypertext Transfer Protocol Identification (Extensible) Hypertext Markup Language JavaScript Object Notation PHP Hypertext Preprocessor Standard Generalized Markup Language User Interface Uniform Resource Identifier World Wide Web Consortium What You See Is What You Get Extensible Markup Language XML Path Language XML Schema Definition Extensible Stylesheet Language Extensible Stylesheet Language Transformation Seite X

11 Einleitung 1 Einleitung Die Einführung des Apple iphone im Jahr 2007 revolutionierte den Smartphone- Markt durch seine neue innovative Multitouch-Bedienoberfläche. Eingaben mit Stift und mechanischer Tastatur gehörten nun der Vergangenheit an. Die Bedienung erfolgt nur noch über einen mechanischen Knopf den Home- Button und die Gestensteuerung mit den Fingern auf dem Bildschirm. Seit dieser Entwicklung stieg die Nachfrage nach Smartphones stark an. Andere Hersteller folgten dem gleichen Konzept und so trat die neue innovative Multitouch- Bedienoberfläche ihren Siegeszug an belebte Apple den unrentabel geglaubten Tablet-PC-Markt mit dem ipad. Auch hier stellte sich ein großer Erfolg ein. Verschiedene Betriebssysteme, wie Android von Google, ios von Apple und Windows Phone von Microsoft drängten auf den Markt und gehören heute zu den bekanntesten Vertretern. Eine Studie des Marktforschungsunternehmen IDC besagt, dass bis 2015 rund 900 Mio. Geräte im Umlauf sein werden, das heißt, knapp jeder siebte Mensch auf der Welt besitzt ein Smartphone. 1 Die Zahl der Inhalte, die über das Smartphone oder den Tablet-PC aufgerufen werden steigt stetig. Daher ist es wichtig, Anwendungen für diese Geräteklassen zur Verfügung zu stellen und Webseiten dahin gehend anzupassen. Auch in der technischen Dokumentation sind zunehmend Anwendungen und Anleitungen für mobile Geräte zu finden. Diese Arbeit nimmt sich dem Thema an und prüft die Möglichkeit, Daten aus einem Redaktionssystem in einer mobilen Web-Applikation darzustellen. Zuvor erfolgt ein kleiner Überblick zur Unternehmensgeschichte der KSB AG. 1. [Franke und Ippen 2012], S. 28 Seite 1

12 Einleitung 1.1 Unternehmensprofil Vor über 140 Jahren legte Johann Klein den Grundstein für das erfolgreiche Unternehmen KSB. Auf seine Erfindung des Kesselspeiseautomaten beantragte er 1871 ein Patent. Für die Großfertigung gründete er noch im gleichen Jahr mit seinen zwei Partnern die Firma Frankenthaler Maschinen- & Armaturen-Fabrik Klein, Schanzlin & Becker in Frankenthal. Seit 1872 erfolgt die Produktion von Armaturen und seit 1873 die Produktion von Pumpen. Schließlich wird KSB 1887 zur Aktiengesellschaft. 2 Heute ist KSB mit seinen 30 Produktionsstätten in 19 Ländern sowie 100 Servicestellen auf der Welt vertreten. 3 Das Angebot der Pumpen von KSB reicht von der privaten Regenwassernutzung über verfahrenstechnische Pumpen bis hin zu Großkraftwerken. Armaturen von KSB gibt es für viele Anwendungen in unterschiedlichen Ausführungen, Größen und Werkstoffen. 4 Mit mehr als Mitarbeitern erwirtschaftete KSB 2012 einem Umsatz von über zwei Milliarden Euro durch Pumpen, Armaturen und Systemlösungen in den Bereichen 5 : Industrietechnik Gebäudetechnik Energietechnik Wassertechnik Abwassertechnik Mining Service 2. Vgl.: [KSB 1] 3. Vgl.: [KSB 2] 4. [KSB 3] 5. Vgl: [KSB 4] Seite 2

13 Einleitung 1.2 Aufgabenstellung Jährlich erscheint eine gedruckte Variante der Katalogpreisliste. Sie enthält Produktdaten zu Pumpen und Armaturen. Die Aktualisierung und Wartung des Datenbestandes erfolgt durch die Redakteure im XML-Redaktionssystem Schema ST4 DocuManager in der Abteilung Dokumentationsservice der KSB AG. Schema ST4 verfügt über eine Schnittstelle, welche sich jedoch nicht dafür eignet einer mobilen Anwendung permanenten Zugriff auf den Datenbestand, zu geben. Der Grund für das Fehlen einer zusätzlichen Schnittstelle liegt in der Vermeidung von Sicherheitsrisiken und der Minimierung der Serverlast. Es besteht jedoch die Möglichkeit des Zugriffs über einen Datenexport, welcher später auf einem Web-Server abgelegt wird. Die Analyse der XML-Datenstrukturen soll zeigen, ob die Verwendung in einer mobilen Web-Applikation möglich ist. Voraussetzung ist das Single-Source- Publishing-Prinzip keine manuellen Eingriffe in die Daten. Stellt sich die Analyse als erfolgreich für die Umsetzung einer Web-Applikation heraus, so folgt in einem zweiten Schritt die Entwicklung eines Prototypen. Er soll veranschaulichen, wie eine mobile Anwendung aussehen und funktioneren kann. Weiterhin ist zu untersuchen, welche Produktdaten für die Abbildung in der Web-Applikation geeignet sind. 1.3 Funktionsprinzip der Web-Applikation Das Funktionsprinzip beschreibt den sequenziellen Ablauf des gesamten Arbeitsprozesses. Aus dem Redaktionssystem erfolgt ein XML-Datenexport. Der Export enthält außerdem Unterordner für die Bilddateien und XML-Schema-Definitionen (XSD). Die Verarbeitungsanweisungen im XSL-Stylesheet erzeugen ein Ausgabedokument mit neu definierter Baumstruktur. Die Umwandlung findet als XMLzu-XML-Transformation statt. Im XML-Ausgabedokument sind Metadaten, Fremdsprachen und alte Versionsstände nicht relevant. Das Ausgabedokument Seite 3

14 Einleitung fungiert als Datenaustauschformat zwischen Web-Server und Web-Applikation. HTML5 legt das Grundgerüst der Webseite fest und erhält durch jquery Mobile den Charakter einer mobilen Anwendung. Über die Ajax-Anwendung werden die XML-Daten eingelesen und verarbeitet, um sie anschließend in die Web- Applikation einzubinden. Der gesamte Arbeitsablauf ist in der folgenden Abbildung grafisch dargestellt. Abb. 1: Funktionsprinzip Schritt 1: Datenexport aus dem Redaktionssystem Schritt 2: Überführen der Daten in eine neue XML-Baumstruktur (XML-zu-XML- Transformation) Schritt 3: Ablage des XML-Ausgabedokuments in den entsprechenden Ordner der Web-Applikation Schritt 4: Automatisierte Verarbeitung der Daten in der Web-Applikation Seite 4

15 2 XML-Redaktionssystem (Schema ST4) XML-Redaktionssystem (Schema ST4) Im Jahr 1995 wurde die Schema GmbH in Nürnberg gegründet. Zu den Hauptgebieten gehören XML-Redaktions- und Content-Management-Systeme (CMS) für den Mittelstand und Großunternehmen. Das aktuelle Produkt Schema ST4 findet in vielen Bereichen der Dokumentation Anwendung. Der Funktionsumfang lässt sich branchenbezogen anpassen. Weit verbreitet ist es in den Bereichen 6 : Maschinen- und Anlagenbau Pharmazeutische Industrie Medizintechnik Informationstechnologie Elektronik Automotive Verlage Luftfahrt- und Verteidigungsindustrie 2.1 Eigenschaften des Redaktionssystems Komplexität Der Schema ST4 DocuManger ist speziell für die Erfassung, Strukturierung, Verwaltung großer Datenmengen und komplexer Dokumente konfiguriert. Die Informationsbausteine kann es in mehreren Versionen geben, wovon gleichzeitig auch alle genutzt werden können. Redakteure können allein oder auch teamübergreifend an Dokumenten arbeiten. Die Dokumente kann es in unterschiedlichen Sprachen geben. Die Sicherung der Qualität sowie die Einhaltung der Freigabeprozesse spielen eine weitere wichtige Rolle Vgl.: [Schema 1] 7. Vgl.: [Schema 2] Seite 5

16 XML-Redaktionssystem (Schema ST4) Funktion Der XML-Editor XMetal ist das Werkzeug für die Erstellung und Bearbeitung. Die Daten werden im medienneutralen XML-Format abgespeichert, um verschiedene Zielformate aus einer Datenquelle generieren zu können Single Source Publishing. Zu den Ausgabeformaten gehören zum Beispiel RDF, PDF, HTML für das Internet, HTML-Onlinehilfen, Adobe InDesign, FrameMaker und Word. 8 Modularisierung Informationen, wie Texte, Grafiken oder andere Medienobjekte, werden in Knoten unterteilt. Jeder dieser Knoten repräsentiert einen Informationsbaustein. Einzelne Informationsbausteine sind über Links miteinander verbunden und setzen sich zu komplexen Informationseinheiten und letztendlich zu Dokumenten zusammen. Ein Informationsbaustein kann mehrere Versionen und verschiedene Sprachen enthalten. Die einzelnen Knoten sind wiederverwendbar und lassen sich zu neuen Dokumenten zusammensetzen. 9, Aufbau Die Arbeitsoberfläche setzt sich aus sogenannten Viewlets zusammen und kann individuell angepasst werden. Für den produktiven Einsatz werden mindestens folgende Viewlets benötigt 11 : Informationspool Projektbaum Strukturnetz Schnellansicht Eigenschaften 8. Vgl.: [Schema 3] 9. Vgl.: [Schema 4], S.13, Vgl: [Wikipedia 1] 11. Vgl.: [Schema 4], S. 23, 24 Seite 6

17 XML-Redaktionssystem (Schema ST4) Die einzelnen Informationsbausteine werden im Informationspool angelegt und unterschiedlichen Kategorien zugeordnet. Abb. 2: Viewlet: Informationspool Im Projektbaum werden unterschiedliche Informationsbausteine zu einem Dokument zusammengeführt. Dieser Schritt ist für die Erzeugung von Inhaltsverknüpfungen notwendig und ermöglicht die Zuordnung der Informationseinheiten. Abb. 3: Viewlet: Projektbaum Seite 7

18 XML-Redaktionssystem (Schema ST4) Die Schnellansicht gibt den Titel und den Inhalt des gewählten Knotens wieder. Abb. 4: Viewlet: Schnellansicht Das Eigenschaftsfenster zeigt Informationen des gewählten Knotens beispielsweise den Titel des Knotens, Autor, Versionsnummer, Knotenklasse und weitere Informationen. Abb. 5: Viewlet: Eigenschaften Seite 8

19 XML-Redaktionssystem (Schema ST4) Zusätzliche Viewlets 12 : Informationsarten Aspektleiste Navigator Verwendungsinfo Suche Trefferliste Workflow Zur Identifikation der Inhalte erfolgt die Klassifizierung der Informationen nach 16 festgelegten Informationsarten. Gleichzeitig spiegeln sich diese Informationsarten in der XML-Struktur wieder. Abb. 6: Viewlet: Informationsarten 12. Vgl.: [Schema 4], S. 23, 24 Seite 9

20 XML-Redaktionssystem (Schema ST4) Die Verwendungsinfo zeigt die Informationen des gewählten Knoten sowie die Wiederverwendung in anderen Knoten an. Abb. 7: Viewlet: Verwendungsinfo Seite 10

21 Software und Werkzeuge 3 Software und Werkzeuge 3.1 Oxygen XML-Editor Für die Analyse des Datenexportes und die Entwicklung der Web-Applikation wurde der Oxygen XML-Editor in der Version 14.1 von der Firma Syncro Soft Ltd verwendet. Es kann zwischen drei verschiedenen Ansichten gewählt werden. Der Textmodus zeigt den Quellcode, der Rastermodus eine Tabellenansicht und der Autoren-Modus eine mit CSS formatierte What You See Is What You Get (WYSIWYG)-Ansicht. 13 Der Editor beinhaltet und unterstützt eine Vielzahl von Dokumenttypen. Zum Beispiel, die in der Dokumentation zum Standard gehörenden Formate DITA und DocBook. Für die Entwicklungsumgebung wurden die Formate XML, XSL, XHTML5 und CSS verwendet. Der XML-Editor wurde für die Analyse- und Entwicklungsarbeiten verwendet. Die spätere Transformation erfolgt ohne Hilfe eines Editors. Der Transformationsprozess wird dann über das Ausführen einer Batch-Datei realisiert. Für erste Testausgaben wurde auf die eingebaute Funktion zur Verknüpfung von XML-Quelldokument und XSL-Stylesheet zurückgegriffen. Im Konfigurationsmenü können dafür die nötigen Einstellungen für das Transformationsszenario festgelegt werden. Die Ausgabe des Zieldokuments erfolgt einfach auf Knopfdruck. 13. Vgl.: [Oxygen] Seite 11

22 Software und Werkzeuge Abb. 8: Konfigurationsmenü im Oxygen XML-Editor 3.2 XSLT-Prozessor Saxon Der Saxon-Prozessor wird von der Firma Saxonica unter Michael Kay für die Plattformen Java und.net entwickelt. Mit Hilfe des XSLT-Prozessors kann das XML-Dokument mit den Verarbeitungsanweisungen im XSL-Stylesheet in ein neues Ausgabedokument transformiert werden. Saxon (zusammengesetzt aus SAX und on) ist ein XSLT- und XQuery-Prozessor zur Transformation von XML-Dokumenten. Er transformiert XML-Dateien mithilfe von XSLT-Stylesheets (z. B. in XHTML oder Text). 14 Es gibt verschiedene Ausführungen, welche sich im Funktionsumfang und Lizenzmodell unterscheiden 15 : Saxon-HE (Home Edition) Saxon-PE (Professional Edition) Saxon-EE (Enterprise Edition) Saxon-CE (Client Edition) Saxon [Wikipedia 2] 15. Vgl.: [Saxonica] Seite 12

23 Software und Werkzeuge Für den Transformationsprozess kommt die frei verfügbare Home-Edition in der Version ( zum Einsatz. Saxon-HE, -PE und -EE setzen auf XSLT 2.0, sind aber weiterhin abwärtskompatibel zum XSLT-1.0-Standard. Für den Prozess ist auch eine serverseitige Transformation über ein PHP-Skript möglich. Zu beachten ist hierbei, dass PHP eine Unterstützung bis zum XSLT-1.0- Standard vorsieht. Dieser wird im XSL-Stylesheet angewendet. Der Oxygen XML-Editor stellt die direkte Verarbeitung vom XML-Quelldokument und XSL-Stylesheet zur Verfügung. Für die Konfiguration des Transformationsszenarios sind folgende Einstellungen vorzunehmen: Die Angabe der Pfade vom XML-Quelldokument, XSL-Stylesheet und XML-Ausgabedokument. Zudem kann der Entwickler zwischen verschiedenen Transformern bzw. XSLT-Prozessoren wählen. Abb. 9: Konfigurationsmenü Transformationsszenario (Oxygen XML-Editor) Das Verarbeiten sehr großer XML-Dokumente kann in XML-Editoren hohe Last und Performance-Probleme erzeugen und bis zum Absturz führen. Zur automatisierten Verarbeitung bietet sich die Konsole oder ein Batch-Skript an. Bei Letzterem werden die Befehle in eine Textdatei mit dem Dateiformat.bat ge- Seite 13

24 Software und Werkzeuge schrieben. Ein einfacher Doppelklick auf die Batch-Datei führt den Transformationsprozess aus. Die Angaben in der Batch-Datei setzen sich aus Java-Anwendung, XSLT- Prozessor, XML-Quelldokument, XSL-Stylesheet und XML-Ausgabedokument zusammen. java -jar saxon9he.jar -s:quelldokument.xml -xsl:xsl-stylesheet.xsl -o:ausgabedokument.xml Zur besseren Übersicht befinden sich die Dateien in einer selbst erstellten Zielverzeichnisstruktur. Der XSLT-Prozessor und die Batch-Datei befinden sich im Unterverzeichnis saxon. Die quelldokument.xml und stylesheet.xsl befinden sich im Hauptverzeichnis transformation. Ein Doppelklick auf die Datei transformation.bat führt die Transformation aus. Nach Fertigstellung des Arbeitsprozesses folgt die Ausgabe des Zieldokuments ausgabedokument.xml. Abb. 10: Zielverzeichnisstruktur Seite 14

25 Software und Werkzeuge 3.3 Berücksichtigung unter Java Bei der Transformation großer XML-Dokumente kann es zu Problemen mit der Java-Anwendung kommen. Nach dem Starten der Batch-Datei werden die Daten als Objekte in den Arbeitsspeicher geladen. In der Konsole kann das Einladen mit einer Fehlermeldung, wie im folgenden Screenshot, enden: Abb. 11: Fehlermeldung: OutOfMemoryError Die Zeile java.lang.outofmemoryerror: Java heap space (Zeile 7 von oben) deutet auf ein Speicherproblem in der Java-Anwendung hin. Der Java-Heap ist auf eine bestimmte Speichermenge festgesetzt. Er dient der Erzeugung und Verwaltung von Java-Objekten. Die Standardeinstellung ist zudem vom verwendeten Betriebssystem abhängig. Benötigt die Anwendung mehr Arbeitsspeicher als erlaubt, kommt es unweigerlich zu einer Fehlermeldung. Abhilfe schafft ein zusätzlicher Eintrag in der Konsole beziehungs- Seite 15

26 Software und Werkzeuge weise der Batch-Datei. Das Argument -Xmx gibt die maximale Speichermenge für den Heap-Bereich an. Hinter dem Argument -Xmx erfolgt die Angabe der Speichermenge mit der Einheit M für Megabytes. java -Xmx4096M -jar saxon9he.jar -s:quelldokument.xml -xsl:xslstylesheet.xsl -o:ausgabedokument.xml Während des Transformationsprozesses mit dem XML-Komplettexport belegt die Java-Anwendung eine Speichermenge zwischen und MB. Das Problem von zu wenig Speicher ist somit beseitigt und die Anwendung läuft ohne Fehler durch Vgl.: [Cummonardo] Seite 16

27 Web-Technologien 4 Web-Technologien 4.1 Ajax Asynchronous JavaScript and XML Ajax bezeichnet eine Technologie für die Datenübertragung zwischen einem Client (Browser) und einem Web-Server. Die Übertragung der Daten kann dabei synchron oder asynchron erfolgen. Zur Übertragung dient das Format XML, aber auch HTML, Text und JSON lassen sich verwenden. Ohne den Ajax-Webstandard würden Webseiten bei Änderungen erneut geladen werden auch bereits vorhandene Inhalte. Dies wirkt sich nachteilig auf die Belastung der Bandbreite als auch der Serverressourcen aus. Es gab zwar Wege mit JavaScript damalige Nachteile zu umgehen, die Implementierungen waren jedoch sehr aufwändig und wurden mehr als Behelfsmittel angesehen. 17 Benötigt der Client (Browser) neue Informationen, weil sich die Webseite verändert hat, so startet der Client eine zusätzliche HTTP-Anfrage an den Web- Server. Dieser schickt eine Antwort an den Client, welche im Hintergrund abläuft. Bereits vorhandende Daten bleiben erhalten und müssen nicht nachgeladen werden. Zu unterscheiden ist zwischen einer synchronen und asynchronen Übertragung. Bei der synchronen Übertragung können die Daten erst verarbeitet werden, wenn die Anwendung sie benötigt. Durch die asynchrone Übertragung der Daten kann die Verarbeitung durch JavaScript bereits im Vorfeld erfolgen, weil die Informationen schon vorliegen. Neue Informationen werden anschließend durch Ajax in die Webseite eingebunden. Der Nutzer bemerkt kaum etwas davon Vgl.: [Wenz 2006], S Vgl.: [Vollendorf und Bongers 2010], S. 218 Seite 17

28 Web-Technologien Datenübertragungen zwischen Client (Browser) und Web-Server: Abb. 12: Vergleich einer statischen und einer dynamischen Anwendung (Quelle:[Vollendorf und Bongers 2010], S. 218) Ein bekanntes Beispiel ist der Kartendienst Google Maps. Im Browser werden nur die Kacheln per Ajax nachgeladen, welche sich im sichtbaren Bereich befinden. Das spart vor allem Bandbreite. Seite 18

29 Web-Technologien 4.2 CSS Cascading Style Sheets Cascading Style Sheets ermöglichen die strikte Trennung von Inhalt und Gestaltung einer HTML-Webseite. Einstellungen sind beispielsweise Farben, Layout und Schriftgestaltung. Web-Browser besitzen eine sogenannte Basis-CSS mit Standard-Style-Parametern. Die Verwendung eigener Formatierungsregeln überschreibt die Basis- CSS. Eigenschaftszuweisungen können durch den Selektor, stellvertretend für das Element, durch eine Element-Klasse oder eine ID im Element erfolgen. Abb. 13: Allgemeine Auszeichnung und ein Beispiel einer CSS Seit 2000 arbeitet das W3C an der CSS3-Spezifikation und erweitert diese ständig um neue Funktionen. 19 Viele Web-Browser unterstützen bereits heute eine Vielzahl von neuen CSS3-Eigenschaften, obwohl sie noch nicht offiziell vom W3C verabschiedet worden sind. Bekannte Neuerungen sind zum Beispiel abgerundete Ecken, Farbverläufe, automatische Silbentrennung und Schattierungen. Auch das Responsive Web-Design gehört dazu und beschreibt die dynamische Anpassungsfähigkeit der Inhalte an verschiedene Geräteauflösungen (Desktop, Tablet und Smartphone). Sogenannte Media Queries (Medienabfragen) ermöglichen zudem die Festlegung von Definitionen für verschiedene Bildschirmauflösungen. Dies ermöglicht die Bereitstellung unterschiedlicher Varianten in der Darstellung von Inhalten auf Smartphone und Tablet-PC. 19. Vgl.: [W3C 1] Seite 19

30 Web-Technologien 4.3 DOM Document Object Model Das Document Object Model ist eine vom W3C spezifizierte Schnittstellendefinition. Sie beschreibt den Zugriff auf die Elemente. Die Schnittstelle stellt das Objektmodel beziehungsweise die Baumstruktur dar (siehe Abbildung 14). 20 Abb. 14: HTML-Quelltext und seine DOM-Baumstruktur(Quelle: [Vollendorf und Bongers 2010], S.563) 4.4 HTML Hypertext Markup Language HTML ist eine Auszeichnungssprache und dient der Strukturierung von Texten, Grafiken und Hyperlinks. Erst das HTML-Grundgerüst macht es möglich, Inhalte im Web-Browser darzustellen. HTML baut auf der Standard Generalized Markup Language (SGML) auf. Das W3C ist die Institution, welche die Arbeitsentwürfe und Empfehlungen für Web-Technologien herausgibt. Die letzte Empfehlung heißt HTML In Webseiten sind häufig Fehler zu finden, weil die Gültigkeit von HTML- Dokumenten nicht zwingend erforderlich ist. Einige Browser ignorieren überschneidende Tags, fehlende Anführungszeichen und fehlende Endtags. Fehler werden einfach ignoriert und durch eine browsereigene Korrektur behoben. In älteren Browsern kann es jedoch zu Fehlern oder zur Verweigerung der Darstellung kommen. Deshalb wurde HTML auf der Grundlage der XML-Regeln überarbeitet. Heraus kam die XHTML-1.0-Spezifikation. XHTML ist somit xmlkonformes HTML. Die Abwärtskompatibilität zu HTML 4.01 ist durch die Ver- 20. Vgl.: [Wikipedia 3] 21. Vgl.: [Wikipedia 4] Seite 20

31 Web-Technologien wendung der gleichen Elemente weiterhin gegeben. Die letzte Empfehlung des W3C für XHTML ist die Version 1.1. Die XHTML-2.0-Spezifikation wurde zu Gunsten von HTML5 im Jahr 2009 eingestellt. 22 Im Jahr 2004 stellte die Arbeitsgruppe WHATWG unter Leitung von Ian Hickson die Web Applications 1.0 vor. Nach Einstellung der Arbeiten an XHTML 2.0 widmete sich die Arbeitsgruppe des W3C ebenfalls den Web Applications 1.0. Der Standard wurde in HTML5 umbenannt. Zu den Spezifikationen gehören neue strukturierende Elemente, welche die Lesbarkeit und Verarbeitung durch Suchmaschinen verbessern sollen. Das Video- und Audio-Element erleichtert die Einbindung von Medieninhalten im HTML-Dokument. Über das Canvas-Element kann mit Hilfe von JavaScript-Objekten in eine Fläche gezeichnet werden. Für die Speicherung von Name-Wert-Paaren im Browser gibt es das DOM-Storage. Die Funktionsweise ähnelt der von Cookies, allerdings ist der DOM-Storage langlebiger und stellt mehr Speicherplatz zur Verfügung. Zur Nutzung von Web- Applikationen im Offlinemodus gibt es in HTML5 den Application Cache. Komplexe Eingaben, wie Farben, Datum oder Schieberegler mit Prüfung der Angaben, können mit neuen type-attributwerten in Formulareingaben festgelegt werden. <form>farbe: <input name= bg type= color /></form> Auf die angewendeten Techniken von HTML5 wird im Kapitel Anwendungen (Seite 82) näher eingegangen. Auch heute sind noch Nutzer mit älteren Browsern wie dem Internet Explorer 6, im Internet unterwegs. Der Grund sind Arbeitsplätze mit begrenzten Administrationsrechten in Firmen oder die Unwissenheit zur Aktualisierung von Browsern. Webentwickler müssen deshalb Webseiten für mehrere Browser testen und gegebenenfalls anpassen. All diese Eventualitäten müssen bei der Entwicklung von Webseiten berücksichtigt werden. Auf mobilen Geräten sieht dies zum Glück etwas anders aus: Die Browser in ios und Android basieren auf derselben Technologie, der WebKit Rendering Engine. 22. Vgl.: [Wikipedia 5] Seite 21

32 Web-Technologien Damit ergibt sich für Entwickler und Designer die vorteilhafte Situation, dass etwa 97 % aller Geräte denselben Browser besitzen überflüssiges Testen und Optimieren fällt somit weg. 23 Der Update-Vorgang der Software läuft auf mobilen Geräten einfacher und offener als auf Desktopsystemen ab. Bereits beim Synchronisieren erhalten mobile Geräte neue Betriebssystem- und Browserversionen. Somit verfügen heute fast alle Geräte über einen aktuellen Browser. 24 Auch wenn sich HTML5 noch in der Entwicklung befindet, so unterstützen die Browser mobiler Geräte schon jetzt aktuelle Arbeitsentwürfe. 4.5 JavaScript Die clientseitige Skriptsprache wurde 1995 unter der Leitung von Brendan Eich entwickelt. In den Anfängen nannte sich die Sprache noch LiveScript. Später wurde sie durch die Kooperation der beiden Unternehmen Netscape und Sun Microsystems in den auch heute gültigen Namen JavaScript umbenannt. 25 Die Aufgabe von JavaScript ist es, Webseiten interaktiv und komfortabel für den Nutzer zu gestalten. Bisher statische Webseiten erhalten durch Rollover-Effekte, Animationen und dynamische Generierung von Inhalten eine deutliche Aufwertung. JavaScript hat seit der Einführung der Ajax-Anwendung einen weiteren Schub an Aufmerksamkeit erhalten und ist aus dem Internet nicht mehr wegzudenken JSON JavaScript Object Notation JSON ist ein objektorientiertes Format für den Datenaustausch zwischen Client und Web-Server. Während sich das XML-Format an der Struktur orientiert, erfolgt die Speicherung mit JSON datenorientiert und somit kompakt. 23. [Franke und Ippen, 2012], S. 30, Vgl.: [Franke und Ippen 2012], S. 30, Vgl.: [Wikipedia 6] 26. Vgl.: [Hauser 2007], S. 29, 30 Seite 22

33 Web-Technologien Ein Objekt steht in Anführungszeichen, geschweiften Klammern und enthält mindestens ein Wertepaar. Das Wertepaar besteht dabei aus einem Schlüssel, Doppelpunkt und Wert ebenfalls in Anführungszeichen gesetzt. Arrays sind anhand ihrer eckigen Klammern zu erkennen. Sie fassen mehrere Wertepaare getrennt durch ein Komma zusammen. 27 Abb. 15: JSON-Datenstruktur 4.7 jquery und jquery Mobile Mit jquery Mobile lassen sich Web-Applikationen für mobile Endgeräte entwickeln, die unabhängig vom Betriebssystem und Web-Browser arbeiten. Dabei bieten sie durchaus das Gefühl der Bedienung einer nativen Applikation. Durch den rasant wachsenden Markt im Bereich der mobilen Endgeräte, wie Smartphone und Tablet-PC wurde jquery Mobile (Version 1.3.0, Stand: 11. März 2013) entwickelt. Es setzt auf jquery auf und bietet zusätzlich die vom Smartphone bekannte Bedienoberfläche, welche auf die Eingabeaktionen, wie Berührungen und Gesten optimiert ist. Die jquery-javascript-bibliothek (Version 1.9.1, Stand: 11. März 2013) wurde von John Resig entwickelt. Aufgrund der hohen Performance und der vielen Möglichkeiten für Webentwickler gehört jquery zur meistverwendeten JavaScript- Bibliothek Vgl.: [Franke und Ippen 2012], S Vgl.: [Wikipedia 7] Seite 23

34 Web-Technologien Durch die von jquery zur Verfügung gestellten Funktionen zur Manipulation und Navigation des DOMs wird die Durchsuchung und Manipulation, die Behandlung von Events, die Interaktion mit Ajax und die Animation von HTML-Seiten erheblich vereinfacht. 29 Vorgefertigte Funktionen und Effekte nehmen dem Entwickler bereits viel Arbeit ab. Daraus ergeben sich zeitliche und finanzielle Einsparungen bezüglich der Programmierleistung. Außerdem entfällt die Entwicklung mehrerer Applikationen für verschiedene Gerätehersteller, da die Web-Applikation im Browser läuft und nicht auf dem Gerät installiert werden muss. Weiterhin stellt eine sehr große Community nützliche und frei verfügbare Plugins bereit. Das Framework erfährt eine stetige Weiterentwicklung. Zu den Vorteilen gehören: Erweiterbarkeit durch viele frei verfügbare Plugins Sehr leistungsfähiger Code Kontinuierliche Weiterentwicklung Unterstützung einer Vielzahl von Plattformen 4.8 XML Extensible Markup Language XML ist eine erweiterbare Auszeichnungssprache. Sie basiert auf der Standard Generalized Markup Language (SGML). Das W3C spezifizierte den XML-Standard 1.0 im Jahr Im Gegensatz zu HTML besitzt XML keine feste Anzahl von Elementen. Durch die Definition eigener Elementnamen lassen sich XML- Dokumentstrukturen für verschiedene Anwendungszwecke erstellen. Häufig dient es auch als Datenaustauschformat zwischen Anwendungen im Internet Aufbau eines XML-Dokuments Das XML-Dokument besteht aus der XML-Deklaration und der XML-Baumstruktur. Die XML-Deklaration leitet eine Processing Instruction (PI) beziehungs- 29. [ITWissen] 30. Vgl.: [W3C 2] Seite 24

35 Web-Technologien weise eine Verarbeitungsanweisung ein. Sie enthält die Attribute version zur Versionendeklaration und encoding für die verwendete Zeichenkodierung. Danach folgt die eigentliche Baumstruktur mit selbst definierten Elementnamen. Auch Nutzer ohne Kenntnisse verstehen die selbsterklärende Datenstruktur. Abb. 16: Beispiel einer XML-Baumstruktur Wohlgeformtheit und Gültigkeit Die XML-Spezifikation definiert Regeln zur Auszeichnung semantischer Elemente und Attribute. Bei Missachtung der Regeln wirft der XML-Parser eine Fehlermeldung aus und verweigert die Ausgabe des XML-Dokuments. Unterschieden wird dabei in zwei Kategorien von Parsern. Validierende Parser überprüfen ein XML-Dokument nach den Regeln einer Document Type Definition (DTD) oder XML Schema Definition (XSD). Nicht validierende Parser überprüfen ein XML-Dokument nach den Regeln der Wohlgeformtheit. Ein XML-Dokument ist wohlgeformt, wenn es genau ein Wurzelelement besitzt. Elemente dürfen sich nicht überschneiden (<maschine><pumpe></maschine> </pumpe>). Die Mischung von Groß- und Kleinschreibung ist nicht zulässig (<pumpe>amarex N</Pumpe). Ein Element besteht jeweils aus einem Start- und einem End-Tag. Das Start-Tag kann mehrere unterschiedliche Attribute enthalten. Die Attributwerte stehen in Anführungszeichen. Zwischen Start- und End-Tag befindet sich der Elementinhalt. Ein Elementname muss mit einem Buchstaben oder Unterstrich anfangen, ausgenommen die Zeichenfolge xml Vgl.: [Harold 2004], S Seite 25

36 Web-Technologien Aufbau eines Elements: Abb. 17: Aufbau eines XML-Elements Die Gültigkeit eines XML-Dokuments ist erfüllt, wenn die Regeln einer DTD oder einer XSD erfüllt sind. Beide definieren Regeln zur Benennung, Anzahl und Verschachtelung von Elementen. Die XSD oder kurz Schema bietet einen größeren Funktionsumfang gegenüber einer DTD. Geschrieben ist sie selbst in XML. Element- und Attributinhalte können durch die Datentypen (int, string,...) genauer bestimmt werden. Das Anlegen und Bearbeiten erfolgt über den XML-Code oder über eine grafische Oberfläche. Abb. 18: XML Schema-Definition (Design-Ansicht) Seite 26

37 Web-Technologien 4.9 XPath XML Path Language Die XML Path Language ist eine Abfragesprache zur Adressierung von Teilen in einem XML-Dokument. Das W3C gab am 16. November 1999 eine Empfehlung für XPath in der Version 1.0 ( heraus. Am 23. Januar 2007 folgte die nächste Empfehlung für XPath 2.0 ( xpath20/) mit erweitertem Funktionsumfang Knotentypen XPath verfügt zum Ansprechen der verschiedenen Knoten über eine Reihe von Knotentypen. Sie bilden die Verzweigungen in der Baumstruktur eines XML- Dokuments ab. Insgesamt ist zwischen sieben Knotentypen zu unterscheiden 33 : Wurzelknoten Elementknoten Attributknoten Textknoten Namensraumknoten Verarbeitungsanweisungsknoten Kommentarknoten Achsen Für die Navigation in einem XML-Dokument verfügt XPath über verschiedene Achsenausdrücke. Sie beziehen sich auf die Abhängigkeiten der Knoten untereinander oder auf solche Knoten, die auf der gleichen Ebene liegen. Sie bestimmen die Laufrichtung des Auslesens von Knoten. Die Navigation erfolgt ausgehend vom Kontextknoten. Der Kontextknoten bezieht sich dabei auf die self-achse beziehungsweise den aktuellen Standpunkt in der XML-Baumstruktur. Nach dem Achsennamen folgt immer ein doppelter Doppelpunkt (Beispiel: self::). Insgesamt gibt es 13 verschiedene Achsen. Die folgenden Abbildungen stellen die Navigation der einzelnen XPath-Ausdrücke grafisch dar. 32. Vgl.: [Wikipedia 8] 33. Vgl.: [data2type 1] Seite 27

38 Web-Technologien Der Kontextknoten ist mit einer blauen Umrandung gekennzeichnet. Die Markierung mit einer grauen Füllfarbe zeigt den Zugriff auf den Knoten an. self Abb. 19: self-achse Die self-achse nimmt Bezug auf den Kontextknoten selbst. child Abb. 20: child-achse Die child-achse erlaubt den Zugriff auf alle Kindknoten vom Kontextknoten. Kindknoten können Kommentar-, Element-, Verarbeitungsanweisungs- und Textknoten sein. Seite 28

39 Web-Technologien descendant Abb. 21: descendant-achse Die descendant-achse erlaubt den Zugriff auf alle Kindknoten und deren Kindeskinder, ausgehend vom Kontextknoten. descendant-or-self Abb. 22: descendant-or-self-achse Die descendant-or-self-achse erlaubt den Zugriff auf den Kontextknoten selbst, deren Kinder, Kindeskinder und so weiter. parent Abb. 23: parent-achse Die parent-achse bezieht sich auf den Ursprungsknoten des Kontextknotens. Seite 29

40 Web-Technologien ancestor Abb. 24: ancestor-achse Die ancestor-achse erlaubt den Zugriff auf alle Vorfahren des Kontextknotens. ancestor-or-self Abb. 25: ancestor-or-self-achse Die ancestor-or-self-achse erlaubt den Zugriff auf den Kontextknoten und alle seine Vorfahren. preceding Abb. 26: preceding-achse Die preceding-achse erlaubt den Zugriff aller Geschwisterknoten vor dem Kontextknoten, deren Kinder, Kindeskinder und so weiter. Seite 30

41 Web-Technologien preceding-sibling Abb. 27: preceding-sibling-achse Die preceding-sibling-achse erlaubt den Zugriff aller Geschwisterknoten vor dem Kontextknoten. following Abb. 28: following-achse Die following-achse erlaubt den Zugriff aller Geschwisterknoten nach dem Kontextknoten, deren Kinder, Kindeskinder und so weiter. following-sibling Abb. 29: following-sibling-achse Die following-sibling-achse erlaubt den Zugriff aller Geschwisterknoten nach dem Kontextknoten. Seite 31

42 Web-Technologien attribute-achse Die attribute-achse kann Attribute vom Kontextknoten enthalten, wenn es ein Elementknoten ist. namespace-achse Die namespace-achse enthält den Namensraum vom Kontextknoten, wenn es 34, 35 ein Elementknoten ist Lokalisierungspfade Der XPath-Ausdruck, auch Lokalisierungspfad genannt, kann sich aus mehreren Lokalisierungsschritten zusammensetzen. Jeder Lokalisierungsschritt besteht dabei aus bis zu drei Bestandteilen. Sie bestimmen den Richtungslauf der Achse, legen Auswahlkriterien fest und filtern durch Prädikate. Prädikate sind als einziger Bestandteil optional und untersuchen den Knoten auf weitere Eigenschaften. Die Aneinanderreihung einzelner Lokalisierungsschritte zu einem Lokalisierungspfad erfolgt mit Hilfe des Schrittoperators (/) in der kurzen Schreibweise. In der ausführlichen Schreibweise erfolgt die Nennung des Achsennamens und seinem doppelten Doppelpunkt ::. 36 Das Codebeispiel child::p[position() = 2] (verkürzte Schreibweise: p[2]) zeigt einen Lokalisierungsschritt bestehend aus Achsennamen child::, p-element und Prädikat [ ] mit Vergleichsoperator. In der Abfrage werden alle Kindknoten mit einem p-element von der zweiten Position ausgewählt Prädikate Lokalisierungsschritte können ein oder mehrere Prädikate besitzen. Sie stehen in eckigen Klammern [ ] und grenzen die Suche durch weitere Eigenschaften vom Element ein Vgl.: [Kay 2008], S Vgl.: [SELFHTML 1] 36. Vgl.: [TEIA] 37. Vgl.: [Harold 2004], S. 639 Seite 32

43 Web-Technologien Das folgende Codebeispiel n:entry[position() = last()] zeigt die Auswahl des letzten Elementknotens <n:entry>. Im Prädikat [position() = last()] wird verglichen, welches Element an letzter Stelle steht. Der Eintrag mit der letzten Position erfüllt die Bedingung. Ein passendes Anwendungsbeispiel ist das Auslesen von Versionsständen in der Reihenfolge von alt bis aktuell. Der letzte Knoten stellt den aktuellen Eintrag dar. Im nächsten Beispiel werden alle nachfolgenden Knoten vom XSLT-Prozessor ausgelesen, deren Elementname eine 0 oder 1 (<n:infotype00> bis <n:infotype15>) beinhaltet. Das Ergebnis ist zugleich die Ausgangsmenge für das zweite Prädikat, welches dessen Attributwert n:id mit den gespeicherten Werten aus der Variable $r vergleicht. following::node()[substring-before(name(), '0') or substringbefore(name(), '1')][@n:Id = $r] Operatoren Im XSL-Stylesheet werden verschiedene Operatoren in XPath-Ausdrücken verwendet. Die folgenden Tabellen listen alle möglichen Operatoren auf. 38 Mathematische Operatoren Operator Erklärung + addiert eine Zahl - subtrahiert eine Zahl * multipliziert eine Zahl div dividiert eine Zahl 38. Vgl.: [Tidwell 2002], S Seite 33

44 Web-Technologien Boolesche Operatoren Operator Erklärung = Prüft, ob beide Ausdrücke übereinstimmen. < Vergleicht, ob der erste Ausdruck kleiner als der zweite Ausdruck ist. <= Vergleicht, ob der erste Ausdruck kleiner oder gleich dem zweiten Ausdruck ist. > Vergleicht, ob der erste Ausdruck größer als der zweite Ausdruck ist. >= Vergleicht, ob der erste Ausdruck größer oder gleich dem zweiten Ausdruck ist.!= Prüft zwei Ausdrücke auf Ungleichheit. and Prüft, ob der erste und der zweite Ausdruck das boolesche Argument true zurückgeben. Wenn einer der beiden Ausdrücke false zurückliefert, erfolgt keine Auswertung von beiden Ausdrücken. or Prüft, ob der erste oder der zweite Ausdruck das boolesche Argument true zurückgibt. Ist der erste Ausdruck true, dann wird der zweite Ausdruck nicht ausgewertet. not() Prüft, ob der Ausdruck nicht vorhanden ist. Seite 34

45 Web-Technologien Ausdruck-Operatoren Operator Erklärung / Beginnt ein XPath-Ausdruck mit /, dann kennzeichnet der Operator den Wurzelknoten vom Dokument. Der Schrittoperator trennt die Lokalisierungsschritte voneinander. // Abgekürzte Schreibweise für die descendant-or-self- Achse.. Abgekürzte Schreibweise für die self-achse... Abgekürzte Schreibweise für die Abgekürzte Schreibweise für die attribute-achse. Vereinigt zwei Ausdrücke miteinander. * Der Platzhalter repräsentiert alle Knoten vom Kontextknoten. [] Innerhalb des Prädikatoperators filtern ein oder mehrere Ausdrücke eine Gruppe von Knoten. $ Kennzeichnet den Namen einer Variable oder eines Parameters. Seite 35

46 Katalogpreisliste 5 Katalogpreisliste Eine der Hauptanwendungsbereiche des Datenbestandes bei KSB ist die Produktion einer Katalogpreisliste in gedruckter Form. Der Datenbestand der Katalogpreisliste ist in drei Stufen gegliedert: Anwendungsbereich --> Anwendungsart --> Produkt Entwässerung / Schmutzwasser --> Schmutzwasser-Tauchmotorpumpen --> Ama- Drainer N 301/302/303/358 Der Punkt Produkt listet ein Produktbild, Merkmale, Eigenschaften und technische Daten in festgelegter Reihenfolge auf: 1. Produktbild 2. QR-Code (deutscher und niederländischer Katalog) 3. Produktvorteile 4. Zertifizierungen 5. Fördermedien 6. Hautanwendungen 7. Betriebsdaten 8. Benennung 9. Konstruktiver Aufbau 10. Werkstoffe 11. Preise 12. Kennlinien 13. Technische Daten 14. Zubehör Die Web-Applikation verwendet die Punkte 1 bis 8. Sie enthalten die wesentlichen Informationen der Produkte und bestehen zudem aus einfachen Listen, Absätzen und Tabellen. Die Punkte 9 bis 13 enthalten Informationen in Form von großen und komplexen Tabellen, Kennlinienbildern und Preisen. Sie eignen sich weniger für die Darstellung auf dem Smartphone. Diese Informationen müssen auch nicht unbedingt in der Web-Applikation abgebildet werden. Seite 36

47 Katalogpreisliste Abb. 30: Produktdaten: Ama-Drainer 4../5..(Quelle:[KSB Katalogpreisliste 2013], S. 32) Seite 37

48 Analyse der XML-Strukturen 6 Analyse der XML-Strukturen Der erste Schritt ist die Analyse der Strukturen aus dem XML-Datenexport. Welche Daten sind im Dokument enthalten und wie sind sie aufgebaut? Anhand ausgewählter Abschnitte aus dem XML-Quelldokument werden Strukturen und Zusammenhänge näher erklärt. 6.1 Datenexport Der Datenexport enthält folgende Dateien: XML-Quelldokument XML-Schema-Definitionen (XSD) Grafiken im.st4stream-format Das XML-Quelldokument muss einen Projektknoten für die Inhaltsverknüpfungen der Elementknoten enthalten. Sie verbinden Informationsbausteine miteinander und erlauben das Zusammensetzen zu komplexen Informationseinheiten. Das Exportformat der Grafikdateien ist das.st4stream-format. Hinter dem.st4stream-format stehen jedoch bekannte Formate wie.gif,.jpg,.png,.psd und.svg. Um die Dateien nutzen zu können, müssen sie in das entsprechende Format umbenannt werden. Mit einer weiteren Batch-Datei kann das Format.st4stream automatisch in.jpg umbenannt werden. 6.2 Wurzelknoten und XML-Namensräume Bei der Verwendung verschiedener XML-Anwendungen können Elemente mit gleichen Elementnamen und unterschiedlicher Bedeutung aufeinandertreffen. Namensräume vermeiden Konflikte durch Mehrdeutigkeiten. Die XML-Anwendung verweist auf einen Uniform Resource Identifier (URI). Der URI muss keine DTD oder XSD enthalten. Er dient lediglich zur Unterscheidung verschiedener XML-Anwendungen. Der URI ist mit einem Präfix verknüpft, welcher meist in abgekürzter Form die XML-Anwendung beschreibt. 39 Seite 38

49 Analyse der XML-Strukturen Der Ausdruck besteht aus dem Attribut xmlns, dem Präfix n und der URI- Adresse. Der Doppelpunkt dient der Trennung von Präfix und Elementnamen. xmlns n URI XML-Namespace node Abb. 31: Namensraum mit Präfix n Das Wurzelelement <d:xie> enthält die Namensräume zur Validierung gegen die Spezifikationen der XML-Schema-Definition (XSD) und zur Erweiterung der Elementnamen mit Präfixen für Knoten (n=node), Daten (d=data), Links (l=link) und Metadaten (m=meta). Der Namensraum xsi:schemalocation enthält den URI und den lokalen Verweis auf die XSD-Datei, welche durch ein Leerzeichen getrennt sind. Das XML-Dokument ist valide, wenn es den Regeln der XML-Schema-Definition entspricht. 40 Abb. 32: Namensräume 6.3 Verknüpfung der Knoten Ein Knoten, als in sich abgeschlossenes Element, wird einmalig angelegt und kann beliebig oft verwendet werden. Mit Hilfe einer Identifikationsnummer (ID) wird er in die verschiedensten Projekte referenziert und bildet dort Kapitel. Zur besseren Strukturierung können Knoten nach verschiedenen Informationsarten, wie beispielsweise Beschreibung, Technische Daten, Preislisten usw., 39. Vgl.: [Harold 2004], S Vgl.: [Horn] Seite 39

50 Analyse der XML-Strukturen klassifiziert werden. Die Informationsart gibt dabei Aufschluss über den Inhalt des Knotens. Inhalt und Umfang von Knoten können stark variieren. Im einfachsten Fall besitzen sie keinen weiteren Inhalt. Der Kapitelknoten <n:infotype> schließt die Elemente <n:data-title>, <n:data-content> und <n:link> ein. Weitere nicht erwähnte Elemente geben Informationen über Veröffentlichung, Freigabe und Übersetzung eines Knotens, die jedoch nicht relevant sind. <n:data-title> <n:data-content> <n:link> benennt die Information enthält Fragmente und einmalig angelegte Informationen verlinkt auf weitere Knoten des Typs Kapitel, Text, Grafik und Variable Eine spezielle Form der Inhalte bilden sogenannte Fragmente, Grafiken und Variablen. Fragmente werden genutzt, um eine höhere Wiederverwendungsrate zu erreichen und können selbst Inhalte wie Überschriften, Absätze, Listen und Tabellen enthalten. Zum besseren Verständnis stellt die folgende Abbildung die Inhaltsverknüpfungen der Knoten grafisch dar. Abb. 33: Verknüpfung der Knoten im XML-Exportdokument Seite 40

51 Analyse der XML-Strukturen 6.4 Aufbau des Projektknotens Der Projektknoten bildet das Herzstück und ist für die Zusammensetzung der Inhalte unerlässlich. Er enthält eine verschachtelte Knotenstruktur <n:infotype> für die Hierarchien Anwendungsbereich, Anwendungsart und Produkt. Die Kapitelknoten referenzieren auf außerhalb vom Projektknoten liegende Kapitelknoten mit übereinstimmender Identifikationsnummer (Knoten-ID). In den folgenden Abbildungen kennzeichnen Nummern und Umrandungen die Zusammengehörigkeit von Referenznummer und Identifikationsnummer. Abb. 34: Projektknoten Die Kennzeichnung mit der Nummer 1 beinhaltet die Referenz auf den Kapitelknoten im nächsten Abschnitt (Abbildung 35) Kapitelknoten Die Referenznummer des Kapitelknotens im Projektbaum führt zur passenden Knoten-ID im außerhalb liegenden Kapitelknoten. Er untergliedert sich in die Bereiche Titel <n:data-title>, Inhalt <n:data-content> und Link <n:link- ResourceLink-GraficResource>. Der Titel benennt die Produktüberschrift Ama-Drainer N 301/302/303/358. Danach folgt der Inhaltsbereich <n:data- Content> mit der Unterteilung in die Sprachebenen <n:value n:aspect= de >, welche sich wieder in Versionsebenen <n:entry n:key= 1 > aufspalten. Die verwendeten Informationen beschränken sich auf die in der Arbeit verwendeten Linktypen, die den Inhalt anhand ihres Elementnamens beschreiben. Seite 41

52 Analyse der XML-Strukturen Elementknoten <n:link-resourcelink-graficresource> <n:link-textmodulelink-textmodule2> <n:link-variablelink-variablenode> Bedeutung Linkelement für Bildknoten Linkelement für Textknoten Linkelement für Variablenknoten Der eigentliche Inhalt befindet sich im <content>-element in Form von Fragmenten, Bildlinks, Variablenlinks und für das Produkt eigenständige Informationen. Letztere befinden sich direkt in diesem Bereich und sind nicht verlinkt. In der Abbildung referenziert der Bildlink <img src= /> auf die Identifikationsnummer im Linkelement l:id= #1--. Das Attribut l:label könnte zum Vergleich zwischen den Nummern auch verwendet werden, ist aber nicht in jedem Linkelement aufgeführt. Abb. 35: Kapitelknoten Seite 42

53 Analyse der XML-Strukturen Bildknoten Eine weiterführende Identifikationsnummer l:targetid= #0 im selben Linkelement verweist auf einen Bildknoten mit gleicher Knoten-ID (siehe Abbildung 36, Nummer 3). Danach folgen die Pfadangaben, die zu den Grafiken der Bildvorschau <n:data-thumbnail>, Bilder für den Druck <n:data-print> und auf das Web optimierte Grafiken <n:data-web> im Ordner streams führen. Abb. 36: Bildknoten Damit ist der Abschnitt für die Produktüberschrift und das Produktbild fertig verknüpft. Die anderen Kapitelknoten folgen dem gleichem Schema und setzen weitere Produktmerkmale zusammen Textknoten Weiterführend wird ein Kapitelknoten mit Fragmenten betrachtet. Wieder referenziert das Attribut n:ref= #3 auf den Kapitelknoten mit dazu passender Knoten-ID (siehe Abbildung 37, Nummer 1). Abb. 37: Kapitelknoten Produktüberschrift Seite 43

54 Analyse der XML-Strukturen Im Titel wird die Überschrift für den Abschnitt Produktvorteile festgelegt. Der Inhaltsbereich enthält Fragmente, die wiederum auf den unteren Linkbereich im gleichen Knoten zeigen. Jedes Fragment verweist mit seiner weiterführenden Identifikationsnummer l:targetid, in dem Fall auf einen Textknoten mit übereinstimmender Knoten-ID (siehe Abbildung 38, Nummer 3). Die Attribute l:sort geben die Zusammensetzung der Listenpunkte in aufsteigender Reihenfolge an. Abb. 38: Kapitelknoten mit Titel, Fragment und Textlinkknoten Alle Knoten außerhalb des Projekts besitzen einen Titel zur Benennung der Informationen, so auch der Textknoten. Zu sehen sind die Veränderungen der Einträge zwischen den Versionsständen im Titel. Der letzte Eintrag <n:entry n:key= 3 > zeigt jeweils die aktuell verwendete Version an. Die Information wird ausschließlich aus dem Bereich <n:data-content> ausgelesen, wie die Vergleiche in der Katalogpreisliste zeigten. Bei dem Inhalt handelt es sich um ungeordnete Listen. Seite 44

55 Analyse der XML-Strukturen Abb. 39: Textknoten Seite 45

56 Analyse der XML-Strukturen Variablenknoten Im Inhaltsbereich des Textknotens setzt sich ein Untertitel aus mehreren Variablen zusammen. Das Attribut linkid (siehe Abbildung 40, Nummer 1) referenziert auf den Linkbereich. Selbiges Linkelement weist mit der weiterführenden ID l:targetid auf den Variablenknoten mit gleicher Knoten-ID. Abb. 40: Textknoten mit Variablenverweis Im Variablenknoten befindet sich wieder der Titel zur Benennung des Inhalts. Die Verknüpfung des entsprechenden Variablennamens geschieht durch das Attribut name= 1023 und der id= 1023 zwischen Text- und Variablenknoten. Seite 46

57 Analyse der XML-Strukturen Abb. 41: Variablenknoten Seite 47

58 XSL-Stylesheet 7 XSL-Stylesheet Dieser Abschnitt beschreibt die Anweisungen für das Auslesen und Verarbeiten der Informationen aus dem XML-Datenexport sowie der Ausgabe einer neuen XML-Baumstruktur im Ausgabedokument. 7.1 XSL-Stylesheet-Wurzelelement Die erste Codezeile deklariert die XML-Sprachspezifikation in der Version 1.0 und die Zeichenkodierung UTF Das Wurzelelement <xsl:stylesheet> enthält zunächst den xsl-namensraum und die verwendete XSLT-1.0-Spezifikation. Danach folgen Namensräume zur Validierung der Elemente und Attribute mit Präfixerweiterung gegen XML-Schema-Definitionen. Danach folgen Namensräume zur Abfrage der Regeln für Elemente und Attribute in der XML-Schema-Definition (XSD). Sie enthalten zum Beispiel Festlegungen zur Darstellung der Elementnamen mit Präfixen für Knoten (n=node), Daten (d=data), Links (l=link) und Metadaten (m=meta). Der Namensraum xsi:schemalocation enthält die URI und die lokalen Verweise auf die XSD- Dateien, welche durch ein Leerzeichen getrennt sind. Die Namensräume werden im XML-Ausgabedokument nicht mehr benötigt und mit dem Attribut exclude-result-prefixes entfernt. Mehrere Präfixe sind durch Leerzeichen voneinander getrennt. 42 aus Abb. 42: Wurzelelement 41. Vgl.: [SELFHTML 2] 42. Vgl.: [Becker] Seite 48

59 XSL-Stylesheet Innerhalb des Wurzelelements befinden sich Templates, die wiederum Abfragen in Form von XPath-Ausdrücken enthalten. Die Ausgabemethode wird im <xsl:output>-element mit dem method-attribut für die Ausgabe im Format XML eingestellt. Für die Einrückung der Codezeilen wird der Wert des indent-attributs auf yes gesetzt. <xsl:output method="xml" indent="yes" encoding= utf-8 /> 7.2 Templates Ein Template, auch Vorlage genannt, ist eine in sich abgeschlossene Einheit, welche wiederum Verarbeitungsanweisungen enthält. Im ersten Template wird auf das Wurzelelement vom XML-Quelldokument zugegriffen. Aus diesem Template heraus, wird ein weiteres Template mit dem <xsl:applytemplates>-element aufgerufen. Das Ausgabeergebnis erscheint genau an der Stelle im XML-Ausgabedokument, an der auch der Aufruf im Template steht. Die Ausgabeergebnisse der Templates setzen sich in der Reihenfolge zusammen, in der sie aufgerufen werden (siehe Abbildung 43) Vgl.: [data2type 2] Seite 49

60 XSL-Stylesheet Abb. 43: Template-Aufruf Wurzelelement Mit dem ersten Template wird auf das Wurzelelement <d:xie> vom XML-Quelldokument zugegriffen. Innerhalb des Templates wird der Wurzelknoten <projekt> für das XML-Ausgabedokument definiert. Das Element <xsl:apply-templates select= n:project/n:infotype > verweist mit seinem select-attribut auf ein Template, dessen match-attribut auf den Kindknoten vom aktuellen Kontextknoten <n:infotype14> passt. Im XSL- Stylesheet gibt es mehrere Templates, deren Kindknoten auf das match-attribut passen, deshalb wird über ein mode-attribut das Template mit übereinstimmendem Wert herausgefiltert. 44 Die Sortierung der <einsatzort>-elementknoten wird über das <xsl:sort>- Element zur Verfügung gestellt. Mit dem select-attribut wird der Wert des Attributknotens l:sort ausgewählt. Um die Zahlen sortieren zu können, ist der 44. Vgl.: [data2type 2] Seite 50

61 XSL-Stylesheet numerische Datentyp number notwendig. Die Sortierung wird durch das Attribut order= ascending in aufsteigender Reihenfolge festgelegt und auf das aufgerufene Template angewendet. 45 Abb. 44: Auslesen der Elementknoten und Erstellen des Wurzelelements <projekt> Anwendungsbereiche Im zweiten Template wird das Element <einsatzort> definiert, welches an der Stelle des Aufrufs vom ersten Template, also innerhalb vom <projekt>- Elementknoten eingefügt wird. Danach erfolgt der Aufruf eines weiteren Templates über das <xsl:apply-templates>-element. Vom match-attribut werden die Preislistenknoten (<n:infotype14) aufgerufen. Anschließend werden die Kindelemente <n:data-title> mit einem <xsl:for-each>-konstrukt durchlaufen. Sie enthalten wiederum die Attributknoten mit der Referenznummer. In der Variable mit dem Namen $eo_r werden die Referenznummern ausgewählt und gespeichert. Abb. 45: Erstellen der Kindelemente <einsatzort> mit Attribut titel 45. Vgl.: [Tidwell 2002], S Seite 51

62 XSL-Stylesheet Mit der nächsten Variable $ort wird auf die Elementknoten der Anwendungsbereiche zugegriffen und deren Elementinhalte ausgelesen und gespeichert. Die Lokalisierungsschritte im select-attribut werden nach der Beschreibung genauer erklärt. Abb. 46: Lokalisierungspfad der Variable $ort Die following-achse ermöglicht den Zugriff auf die Nachfolger vom Kontextknoten <n:infotype>, die außerhalb vom Projektknoten liegen. Innerhalb des Preislistenknotens (<n:infotype14>) befinden sich unterschiedliche Informationstypen, welche für die Abfrage berücksichtigt werden müssen. Um nicht jeden Elementknoten einzeln in eine Abfrage einbauen zu müssen, wird ein Knotentest durchgeführt, der den Elementnamen nach den Zeichen 0 und 1 prüft. Ein Durchsuchen nach Elementknoten im XML-Quelldokument erfolgt über den Knotentest node(). Die Elemente <n:infotype00> bis <n:infotype15> werden durch ein Prädikat mit zwei substring-before()-funktionen gefiltert. Es wird geprüft, ob das Teilzeichen 0 oder 1 in der Zeichenfolge des Elementnamens enthalten ist, die durch die name()-funktion abgerufen wird. Zurückgegeben wird die Zeichenfolge n:infotype vor dem Teilzeichen 0 oder 1. Wenn eine der beiden Bedingungen erfüllt ist, dann wird der Elementknoten ausgewählt. Die Filterung findet in weiteren Verarbeitungsanweisungen Anwendung und wird nur noch kurz erwähnt. node()[substring-before(name(), '0') or substring-before(name(), '1')] Im danach folgenden Lokalisierungsschritt wird die Identifikationsnummer des Attributs n:id und die Referenznummer (vom Projektknoten) aus der Variablen $eo_r verglichen. Stimmen beide Nummern überein, erfolgt die weitere Abarbeitung des Datentitels. [@n:id = $eo_r]/n:data-title/ Seite 52

63 XSL-Stylesheet Nach dem <n:data-title>-elementknoten werden die <n:value>-elementknoten mit der Kennzeichnung für die deutsche Sprachvariante ausgegeben. Dafür beschränkt ein Prädikat die Auswahl durch das Kürzel de. = 'de']/ Danach wird jeweils das letzte <n:entry>-element ausgewählt. Der Eintrag an der letzten Position entspricht dem aktuellen Versionsstand. n:entry[position() = last()] Die gespeicherten Werte der Variablen $ort werden dann dem Attribut titel übergeben. Mehrere Elemente <einsatzort titel=... > listen die Anwendungsbereiche für das XML-Ausgabedokument auf. Die folgende Abbildung zeigt die XML-Ausgabe. Abb. 47: XML-Ausgabedokument mit <einsatzort>-elementknoten Innerhalb des <einsatzort>-elementknoten erfolgt der Aufruf des nächsten Templates mit der Zuordnung durch das Attribut mode= einsatz. Über die parent-achse wird zum übergeordneten Elementknoten <n:project> navigiert (ausgehend vom Kontextknoten <n:infotype14>). Dies ist notwendig, damit alle Elementknoten der Anwendungsbereiche und Anwendungsarten ausgelesen werden können. Es erfolgt die Navigation vom <n:project>- Elementknoten bis hin zum Knoten für die Anwendungsarten, welcher sich in der dritten Hierarchieebene (n:project/n:infotype14/n:infotype04) befindet. Mit der Funktion <xsl:sort> werden die Anwendungsarten in aufsteigender Reihenfolge geordnet. Abb. 48: Aufruf des Templates Seite 53

64 XSL-Stylesheet Anwendungsarten Das dritte Template enthält Anweisungen für die Erstellung der Elementknoten Anwendungsarten. Die Benennung des Titels für die Anwendungsarten funktioniert genauso, wie im Abschnitt zuvor beschrieben. Daher werden an dieser Stelle nur die Verarbeitungsanweisungen anhand von Abbildungen gezeigt. Abb. 49: Erstellen der Kindelemente <pumpentyp> mit titel-attribut Innerhalb des <pumpentyp>-elementknotens wird ein weiteres Template für die Einbindung der Produkte aufgerufen. Mit der parent-achse wird dazu auf den übergeordneten Elementknoten <n:infotype14>, ausgehend vom Kontextknoten <n:infotype04>, zugegriffen. Es erfolgt die Navigation vom Elementknoten <n:infotype14> eine Knotenebene tiefer bis zum <n:infotype>- Elementknoten, welche den Produktnamen und die Bildressourcen enthalten. Auch die <n:infotype>-elementknoten (Produkte) werden in aufsteigender Reihenfolge geordnet. Abb. 50: Template-Aufruf In der Abbildung 51 auf der nächsten Seite ist das XML-Ausgabedokument mit den in diesem Abschnitt beschriebenen Verarbeitungsanweisungen zu sehen. Seite 54

65 XSL-Stylesheet Abb. 51: XML-Ausgabedokument mit <pumpentyp>-element Produkt In diesem Template erfolgt die Ausgabe von Produktname und unterschiedlichen Bildressourcen. Um Produktbilder in der Web-Applikation anzeigen zu können, werden die Adresspfade zur Verlinkung in der Produktdetailseite benötigt. Zur Verfügung stehen hierbei die Qualitätsstufen <vorschau>, <druck> und <web>. Die Abbildung zeigt das Ergebnis im XML-Ausgabedokument. Bilddateien sind für das Webformat jedoch noch nicht im Redaktionssystem hinterlegt. Abb. 52: Ausgabe der XML-Struktur für Produktname und Bildressourcen Es folgt die Erklärung zur Erstellung der XML-Ausgabestruktur (siehe Abbildung 52). Im <xsl:if>-verzweigungselement erfolgt die Auswertung der Anweisungen vom test-attribut. Wenn die Funktion true zurückliefert, werden die Anweisungen innerhalb des <xsl:if>-elements verarbeitet. Die stringlength()-funktion gibt die Anzahl der Zeichen des zurück. Überschreitet die Anzahl den Wert 0, erfolgt die Ausgabe des <produkt>-elementknotens. Mit dem Verzweigungselement <xsl:for-each> werden alle Elementknoten <n:data-title> abgefragt und deren Referenznummer in der Variable $r Seite 55

66 XSL-Stylesheet gespeichert. Jedem <produkt>-elementknoten wird ein titel-attribut durch das <xsl:attribute>-element hinzugefügt, um die Produkte benennen zu können. Über ein <xsl:value-of>-element werden die gespeicherten Werte der Variable $pumpenname ausgewählt und dem titel-attribut hinzugefügt. Abb. 53: Erstellung des <produkt>-elementknotens Auslesen von Bildressourcen In der Variablen $bild werden die Nummern der <img src=... />- Elemente gespeichert. Mit der following-achse wird auf die Nachfolger vom Kontextknoten zugegriffen, um die <n:infotype>-elementknoten außerhalb vom Projektknoten auslesen zu können. Die descendant-achse erlaubt den Zugriff auf alle Nachkommen vom Kontextknoten <n:entry> bis Attributknoten. Abb. 54: Auslesen des src-attributs und Speicherung in die Variable $bild Anhand eines Beispiels aus dem XML-Quelldokument soll gezeigt werden, wie der Vergleich der Identifikationsnummer vom Bildlink (Inhaltsbereich) mit der Identifikationsnummer der Link-ID (l:id) aus dem Linkelementknoten erfolgt (siehe Abbildung 55). Seite 56

67 XSL-Stylesheet Abb. 55: Vergleich der Nummer der Bildquelle mit der Link-ID des Linkelementknotens Mit einem weiteren <xsl:for-each>-verzweigungselement werden alle Bildressourcen abgefragt, indem die Variable $bild mit der l:id des Elementknotens <n:link-resourcelink-graficresource> verglichen wird. Die beiden Zeichenketten der Attributknoten src und l:id sind nahezu identisch. Nur vier Zeichen #1-- am Ende der Link-ID (l:id) unterscheiden sie voneinander. Beim Vergleich der Zeichenketten kann also nur der Teil vor dem Rautezeichen der Link-ID (l:id) verwendet werden. Dazu wird mit der # )-Funktion die Zeichenkette vor dem Rautezeichen des Attributknotens l:id ( #1--) zurückgegeben. Der Vergleich der zugehörigen Zeichenkette aus der Variablen $bild ergibt nun true. '#') = $bild] Eine weitere Möglichkeit wäre das Auslesen über den Attributknoten l:label im gleichen Linkelementknoten ohne eine substring-before()-funktion verwenden zu müssen. Analysen im XML-Quelldokument haben jedoch ergeben, dass dieser Attributknoten nicht immer vorhanden ist, womit eine Nutzung ausgeschlossen ist. Innerhalb der Schleife wird die Identifikationsnummer (l:targetid) vom gleichen Linkelementknoten ausgelesen und in der Variablen $targetid gespeichert. Mit Hilfe der targetid wird der passende Elementknoten <n:graficresource> ausgelesen. <xsl:variable name="targetid" select="@l:targetid" /> Anhand der Bildvorschau wird das Auslesen des Adresspfades aus einer Grafikressource genauer erklärt. In der Variablen $bildlink werden die Adresspfade der Bildvorschau gespeichert. Es erfolgt die Auswahl nachfolgender Seite 57

68 XSL-Stylesheet <n:graficresource>-elementknoten ausgehend vom <n:infotype>- Kontextknoten. Der passende Elementknoten wird durch den Vergleich von Knoten-ID (n:id) und der Variablen $targetid ausgefiltert. Stimmen beide Identifikationsnummern überein, wird der Elementinhalt von <n:data- Thumbnail> ausgegeben. <xsl:variable name="bildlink" = $targetid]/n:data- Thumbnail"/> Die Ausgabe der Variable $bildlink dann folgendermaßen aus: streams/ st4stream. Das Format.st4stream wird im nächsten Schritt gegen das Bildformat.jpg ausgetauscht. Die Zeichen.st4stream müssen dazu von der gesamten Zeichenkette abgezogen werden. Mit Hilfe der substring(zeichenkette, Nummer)- Funktion werden die Zeichenketten ab einer vorgegebenen Position ausgegeben. Die Nummer in der Funktion zeigt die Position in der Zeichenkette an, ab der die Zeichenkette zurückgegeben werden soll. Über eine string-length()-funktion wird die Anzahl der Zeichen.st4stream von der Gesamtzahl der Zeichenkette streams/ st4stream abgezogen. Übrig bleibt die Zeichenkette streams/ , welche durch die Funktion als ganze Zahl mit dem Wert 18 ausgegeben wird. Dieser Wert bezieht sich dann auf die Position in der Zeichenkette, ab der die Zeichen ausgegeben werden sollen. Das Resultat der Variablen $st4_format lautet.st4stream. <xsl:variable name="st4_format" select="substring($bildlink, string-length($bildlink)-9)"/> Mit der Funktion substring-before($bildlink,$st4_format) wird die Zeichenkette streams/ (Variable $bildlink) vor der Teilzeichenkette.st4stream (Variable $st4_format) zurückgegeben und in die Variable $ergebnis gespeichert. Seite 58

69 XSL-Stylesheet <xsl:variable name="ergebnis" select="substring-before($bildlink, $st4_format)" /> Im letzten Schritt erfolgen die Definition der XML-Ausgabestruktur und das Hinzufügen des.jpg-formats zum Adresspfad, welcher zuvor aus der Variablen $ergebnis eingeladen wird. Die Ausgaben <druck> und <web> werden nach dem gleichen Prinzip verarbeitet. Abb. 56: Ausgabe der Bildressource im.jpg-format Innerhalb des <produkt>-elementknotens wird ein weiteres Template mit der Zuordnung mode= beschreibung aufgerufen. Die Ordnung der Elementknoten erfolgt in aufsteigender Reihenfolge Abschnittsüberschriften Die XML-Ausgabestruktur für die Produkte setzt sich aus mehreren Elementknoten <beschreibung titel=... > zusammen, welche die Abschnittsüberschriften (Beispiel Produktvorteile und Hauptanwendungen) repräsentieren. Die Abschnitte beinhalten weitere Unterelemente <untertitel>, <absatz>, <listenpunkt> und <table>, welche die Art des Inhalts beschreiben. Diese Informationen befinden sich direkt im Inhaltsbereich des <n:infotype>- Elementknotens oder müssen über weitere Inhaltsverknüpfungen (Fragmente) ausgelesen werden. In der Variable $title werden die Abschnittsüberschriften ausgelesen und gespeichert, um sie später dem Attributknoten der <beschreibung titel=... >-Elemente hinzuzufügen. Abb. 57: Variable title Seite 59

70 XSL-Stylesheet Wiederverwendbare Inhalte sind durch das <modref src=... />-Element gekennzeichnet und befinden sich im Inhaltsbereich des <n:infotype>- Elementknotens. In der Variablen $content wird die Nummer aus den Attributknoten der Elemente <modref src=... /> ausgelesen und gespeichert. Abb. 58: Variable $content Die Abschnittsüberschriften werden von der Variablen $title dem entsprechenden Attribut der <beschreibung titel=... >-Elementknoten hinzugefügt. Das Entfernen von Leerzeichen am Anfang und am Ende einer Abschnittsüberschrift erfolgt über die normalize-space()-funktion 46. Sonst kann es zu Problemen bei der Abfrage von Elementknoten durch JavaScript kommen. Abb. 59: Definition des <beschreibung>-elementknoten Innerhalb des Elementknotens <beschreibung titel=... > befindet sich eine <xsl:for-each>-schleife zur Abarbeitung des Inhaltsbereiches des Elementknotens <n:infotype>. Die Abarbeitung erfolgt bis zum Element <content>. Das <content>-element umschließt die Informationen Zwischenüberschriften, Absätze, Listenpunkte und Tabellen. Die Reihenfolge der Informationen in der XML-Ausgabestruktur muss der Reihenfolge in der gedruckten Katalogpreisliste entsprechen. Nach dem <content>-element wird deshalb eine Wildcard eingesetzt, welche es ermöglicht alle Elementknoten vom aktuellen Kontextknoten auszuwählen und in der gleichen Reihenfolge des XML- Quelldokuments auszugeben Vgl.: [Tidwell 2002], S Vgl.: [Tidwell 2002], S. 53 Seite 60

71 XSL-Stylesheet <xsl:for-each select="following::node()[substring-before(name(), '0') or substring-before(name(), = $rb]/n:data-content/ = 'de']/n:entry[position() = last()]/content/*"> </xsl:for-each> Innerhalb des <xsl:for-each>-verzweigungselements werden die Unterelemente für die verschiedenen Informationstypen definiert und ausgegeben (siehe folgende Unterabschnitte) Zwischenüberschriften Es wird geprüft, ob der Kontextknoten <subheading> existiert. Ist die Bedingung erfüllt, dann wird das <untertitel>-element ausgegeben. Als Inhalt wird der Textknoten des <subheading>-elementknotens ausgewählt. Damit entfällt die Ausgabe von Fußnoten in Zwischenüberschriften. Sie würden sonst direkt hinter der Überschrift ausgegeben werden. Abb. 60: Abfragetest Untertitel Absätze Durch einen weiteren Abfragetest wird der Kontextknoten auf <p>-absatzelemente geprüft. Innerhalb des <absatz>-elements wird der Elementinhalt vom Kontextknoten durch einen Punkt (.) ausgegeben. Abb. 61: Abfragetest Absatz Listenpunkte Ungeordnete Listen werden auf den Kontextknoten <ul> geprüft. Mit einer <xsl:for-each>-schleife werden alle <li>-unterelemente abgearbeitet. Jeder Listenpunkt enthält mindestens ein <p>-absatzelement und muss zur Seite 61

72 XSL-Stylesheet Erfassung aller Absatzelemente wiederum mit einer Schleife abgearbeitet werden. Innerhalb des definierten <listenpunkt>-elements wird ein Template aufgerufen, welche das Auftreten von Zeilenumbrüchen (<br/>) berücksichtigt (siehe Abbildung 62 rechte Seite). Listenpunkte können selbst Listen enthalten. Im XML-Ausgabedokument werden sie als <listenpunkt2>-elemente ausgegeben. In der Web- Applikation erhalten Listenpunkte der zweiten Hierarchieebene eine andere Formatierung, um sich von normalen Listenpunkten zu unterscheiden. Abb. 62: Abfragetest Listenpunkt mit Aufruf weiterer Templates zur Ausgabe von <br />-Elementen und Wegfall von Fußnoten Tabellen Tabellenstrukturen werden in der XML-Ausgabe mit HTML-Elementen realisiert, um die Tabelle später mit JavaScript in die Webseite kopieren zu können. Zunächst testet eine <xsl:if>-abfrage, ob ein <table-container>-element vorhanden ist. Wenn das der Fall ist, erfolgen weitere Verarbeitungsanweisungen für den Zusammenbau der Tabelle. Seite 62

73 XSL-Stylesheet Mit dem <xsl:for-each>-konstrukt wird auf das <table-title>-element zugegriffen, welches den Tabellentitel enthält. Das HTML-Element <caption> umschließt die Ausgabe des Kontextknotens. Abb. 63: Ausgabe des <caption>-html-elements Kopfbereich Im XML-Quelldokument besitzt nicht jede Tabelle einen Tabellenkopf. Damit kein leerer Tabellenkopf ausgegeben wird, wird mit einer <xsl:if>-abfrage geprüft, ob die Anzahl der Zeichen des Elementinhalts vom <thead>-element größer als 0 ist. Bei Erfüllung der Bedingung wird das <thead>-element ausgegeben. Danach werden die Tabellenzeilen (<tr>) und Tabellenspalten (<th>) mit <xsl:for-each>-technik abgefragt und über die entsprechenden HTML- Elemente ausgegeben. Innerhalb des definierten <th>-elements erfolgen weitere Abfragen für die Attribute colspan (Spalten verbinden) und rowspan (Zeilen verbinden). Abb. 64: Auslesen und Ausgeben des Tabellenkopfes Es gibt zwei Abfragetests, welche das Vorkommen von Attributknoten colspan und rowspan prüfen. Liefert die Auswertung eine Anzahl größer 0 zurück, dann wird dem <th>-element das entsprechende Attribut angefügt. Über ein <xsl:attribute>-element wird der Attributname erzeugt und der Inhalt eingelesen. Seite 63

74 XSL-Stylesheet Abb. 65: Attribute zum Verbinden von Spalten und Zeilen Der Inhalt des Tabellenkopfes kann Text oder Variablen enthalten. Der nächste Zwischenabschnitt geht näher auf Variablen ein. Zunächst soll aber die Ausgabe von normalen Texten im Kopf der Tabelle erklärt werden. Die folgende Abbildung 66 zeigt den Codeausschnitt. Mit einer <xsl:if>-abfrage wird der <p>-elementknoten auf ein <variable>-kindelement getestet. Ist das Ergebnis true folgt die Auswahl des Textknotens vom <p>-elementknoten. Andernfalls erfolgt keine Ausgabe und der Abfragezweig zur Ausgabe von Variablen wird geprüft. Abb. 66: Ausgabe des Textknoten vom <p>-element Datenbereich Der Datenbereich baut sich wie der Kopfbereich auf. Weitere abzuarbeitende Elementinhalte können Bildressourcen und Variablen sein. In der Abbildung 67 ist der Codeauschnitt für die Abfrage des Datenbereichs von einer Tabelle zu sehen. Seite 64

75 XSL-Stylesheet Abb. 67: Datenbereich <tbody>-element Die XML-Ausgabestruktur einer einfachen Tabelle zeigt die folgende Abbildung. Abb. 68: XML-Ausgabestruktur: Tabelle Seite 65

76 XSL-Stylesheet Variablen Variablen sind veränderliche Werte, die in einer Wertetabelle abgelegt sind. Bei der Auswahl eines anderen Herstellers (DP anstatt KSB) verändern sich die Inhalte. Die Variable bleibt jedoch gleich. Sie können zum Beispiel in Tabellen und in Zwischenüberschriften auftreten. Die Abbildung 69 zeigt Variablen in einer Zwischenüberschrift (rot gekennzeichnet). Abb. 69: Variablen in der Web-Applikation Mit einem Abfragetest wird überprüft, ob ein <p>-element ein <variable>- Kindelement enthält. Nach der erfolgreichen Auswertung werden alle <variable>-elementknoten mit einer Schleife durchlaufen. Jedes <variable>-element enthält zwei Attributknoten linkid und name. Abb. 70: Abfrage von Variablenwerten Die linkid wird mit der l:id vom <n:link-variablelink- VariableNode>-Linkelementknoten verglichen. Dafür werden die Zeichen vor dem Rautezeichen zurückgegeben und mit dem Inhalt der Variablen $linkid verglichen. Nach der Übereinstimmung wird die weiterführende Identifikationsnummer des selben Linkelementknotens ausgelesen und in die Variable $variable_targetid gespeichert. Die Knoten-ID des <n:variablenode>- Elementknotens wird mit der weiterführenden ID der $variable_targetid verglichen. Abb. 71: Vergleich des Attributknotens l:id und der Variable $linkid Seite 66

77 XSL-Stylesheet Zunächst wird geprüft, ob ein vorhergehender (preceding-achse) oder nachfolgender (following-achse) Elementknoten <n:variablenode> existiert. Die string-length()-funktion gibt für jeweils eine der beiden Variablen $variablenknoten_p oder $variablenknoten_f den Wert true aus, wenn die Anzahl der Zeichen den Wert 0 übersteigt und somit ein Elementknoten vorhanden ist. Das Verzweigungselement <xsl:choose> enthält für jede Variable ein <xsl:when>-element, welche den Wert auf die Vorgabe true überprüft. Mit Hilfe der preceding-achse wird die Laufrichtung auf die Vorgänger vom Kontextknoten ausgehend festgelegt. Die Auswahl des passenden Elementknotens <n:variablenode> erfolgt durch den Vergleich der Knoten-ID (n:id) dieses Variablenknotens und der weiterführenden ID ($variable_targetid). Der Inhaltsbereich eines Variablenknotens ist durch das Element <n:data- Variables.XML> gekennzeichnet. Mit Hilfe des Prädikats werden die Elemente <n:value> mit dem Attributwert de ausgegeben. Durch ein weiteres Prädikat werden die Elemente <n:entry> von der letzten Position (aktuelle Version) ausgegeben. Die Variablen unterscheiden sich nur von ihrem name-attribut. Im nachfolgenden Prädikat wird die Zugehörigkeit durch die ID des <r>-elements mit der Variablen $name verglichen. Abb. 72: Ausgabe der Variablen Seite 67

78 XSL-Stylesheet Zwischen den <variable>-elementknoten können Kommata und Wörter vorkommen. Mit der following-sibling-achse werden die nachfolgenden Geschwister (Textknoten) vom Kontextknoten ausgewählt. <xsl:value-of select="following-sibling::text()"/> Fragmente Fragmente müssen ähnlich, wie Bildressourcen ausgelesenen werden. Sie sind durch eine Quellnummer gekennzeichnet, die auf einen Textlinkelementknoten verweist und von dort zum eigentlichen Inhalt im Textmodulknoten (<n:textmodule2>) führt. Das Auslesen und Verarbeiten von Fragmenten funktioniert sonst wie in den bereits vorhergehenden Abschnitten beschrieben. In der Variablen $content werden die Quellnummern der Elemente <modref src=... /> gespeichert. Ist ein Fragment, also eine Quellnummer vorhanden, so folgt die Abarbeitung. Listen können sich aus produktspezifischen Listenpunkten und Fragmenten zusammensetzen. Deshalb war es nicht möglich, Listenpunkte in einer Liste zusammenzufassen. 7.3 Datenstruktur des Zieldokuments Ziel des XML-Ausgabedokuments sind die Reduzierung der Datengröße und die Erstellung einer neuen Datenstruktur zur besseren Verarbeitung in der Web- Applikation. Die Transformation reduziert die Datengröße von 370 MB (XML- Komplettexport) auf 2,8 MB (XML-Ausgabedokument). Erreicht wird dies durch die Eliminierung der: komplexen Verlinkungen Metadaten (Datum für Übersetzungen und Ausspielungen) Fremdsprachen alten Versionsstände Seite 68

79 XSL-Stylesheet Hauptgliederung Die Strukturierung der Daten orientiert sich an der Gliederung der Katalogpreisliste. Das Wurzelelement <projekt> umschließt den gesamten Inhalt. Danach erfolgt die Unterteilung in die Elemente <einsatzort>, <pumpentyp> und <produkt>, welche mit dem Anwendungsbereich, der Anwendungsart und dem Produkt gleichzusetzen sind. Das Attribut titel benennt die Elemente. In der Abbildung 73 ist der XML-Code in einem XML-fähigen Browser zu sehen. Plus- und Minus-Zeichen erlauben das Auf-/Einklappen der Baumstruktur beziehungsweise der Teilbäume: Abb. 73: Gliederung des XML-Ausgabedokuments Produkt Das Element <produkt> setzt sich aus weiteren Verzweigungen zusammen. Der Name des Produkts befindet sich im Attribut titel. Danach folgt das Element <produktbild>, welches weitere Elemente mit Pfadangabe für ein Vorschaubild, einer Druckvariante und einer Web-Grafik enthält. Das Element <beschreibung titel= Produktvorteile > legt die einzelnen Abschnitte, wie sie auch in der Katalogpreisliste zu finden sind, fest. Der Name der Überschrift wird dem titel-attribut entnommen. Seite 69

80 XSL-Stylesheet Abb. 74: Datenstruktur im Produkt Die Struktur verzweigt sich unterhalb des Elements <beschreibung titel=... > und enthält Merkmale und Eigenschaften zum Produkt. Nähere Erklärungen dazu im folgenden Abschnitt Beschreibung Das Element <beschreibung> enthält Kindelemente, welche gar nicht oder mehrfach auftreten können: <untertitel>...</untertitel> <absatz>...</absatz> <listenpunkt>...</listenpunkt> <listenpunkt2>...</listenpunkt2> <table>...</table> Durch das <untertitel>-element werden die Abschnitte in weitere Zwischenüberschriften aufgeteilt. Die beiden Listenpunktelemente unterscheiden sich nur in der Hierarchieebene. Seite 70

81 XSL-Stylesheet Abb. 75: Konstruktiver Aufbau Die Tabelle entspricht der HTML-Auszeichnung, womit sie ohne Änderungen in die Web-Applikation übernommen werden kann. Abb. 76: Tabelle mit HTML-Auszeichnung Seite 71

82 XSL-Stylesheet 7.4 Transformation der Manifest-Datei Für die Web-Applikation wird später eine Manifest-Datei benötigt, um die Daten in den Gerätespeicher ablegen zu können. Eine Nutzung der Anwendung ist somit im Offline-Modus möglich. Durch eine weitere Transformation (XML-zu-Text) werden die Bildressourcen vom XML-Ausgabedokument (pumpe.xml) ausgelesen, um sie in der Manifest- Datei automatisiert einzufügen. Das XSL-Stylesheet enthält Verarbeitungsanweisungen für die Erstellung der Manifest-Datei-Struktur. Durch Ausführen einer weiteren Batch-Datei, wird eine Transformation von XML-Quelldokument und XSL-Stylesheet durchgeführt. Nach Fertigstellung befindet sich die Datei cache.manifest im Zielverzeichnis. Es folgen Erklärungen einzelner Codezeilen aus dem XSL-Stylesheet. Die Verarbeitungsanweisung enthält die XML 1.0-Spezifikation und das Zeichenformat UTF-8. <?xml version="1.0" encoding="utf-8"?> Das Wurzelelement <xsl:stylesheet> beinhaltet die Auszeichnung des XSL- Namensraumes und der XSL-1.0-Spezifikation. <xsl:stylesheet xmlns:xsl=" version="1.0">... </xsl:stylesheet> In der Ausgabemethode folgt die Auszeichnung für das Zieldokument in Form einer Textausgabe (text). Die Einstellung des Attributs indent= yes rückt die Elemente im Ausgabedokument ein. <xsl:output method="text" indent="yes"/> Der Zugriff auf das Wurzelelement vom XML-Ausgabedokument erfolgt mit dem Attribut match= projekt. An der Stelle des Wurzelelementnamens projekt könnte auch der XPath-Ausdruck / stehen. Seite 72

83 XSL-Stylesheet <xsl:template match="projekt">... </xsl:template> Die Auszeichnung der statischen Inhalte, wie der Manifest-Datenstruktur (CACHE:, NETWORK:, FALLBACK:) und der Adressressourcen (HTML-, CSS-, JavaScript- und.jpg-datei) erfolgen durch das Element <xsl:text>. Es erlaubt die direkte Auszeichnung von Text im Ausgabedokument. Die beiden Steuerzeichen Zeilenvorschub ( ) und Wagenrücklauf ( ) erzeugen gemeinsam einen Zeilenumbruch 48. Abb. 77: Angaben für nicht veränderliche Ressourcen Die Produktbilder unterliegen den Änderungen des Redaktionssystems. Um die Vielzahl der Adressdaten nicht händisch eintragen zu müssen, erfolgt das Auslesen der Pfade aus dem XML-Ausgabedokument. Das Durchlaufen der Elementknoten wird durch vier <xsl:for-each>-schleifen durchgeführt. Jede Schleife arbeitet einen Elementknoten <einsatzort>, <pumpentyp>, <produkt> und <produktbild> ab. Über ein <xsl:text>-element wird vor der Bildressource der statische Pfad../webapp erzeugt. Anschließend wird der Elementinhalt der Kindelemente <druck> durch das <xsl:value-of>-element in Form von Pfad und Bildnamen ausgegeben. Danach folgt ein Zeilenumbruch für die Anordnung der Bildlinks untereinander. 48. Vgl.: [SELFHTML 3] Seite 73

84 XSL-Stylesheet Abb. 78: Abfragen der Bildressourcen und Erstellung der Adressen Der gesamte Pfad für die Produktbilder in der Manifest-Datei lautet:../webapp/streams/bildname.jpg Zuletzt folgen die statischen Angaben der JavaScript-Bibliotheken (jquery und jquery Mobile), Icons und einer Ladegrafik. Abb. 79: Angaben für die JavaScript-Bibliotheken und Icons Ausgabe der cache.manifest-datei: Abb. 80: Cache-Manifest-Datei Seite 74

85 Datenaustauschformat 8 Datenaustauschformat Für den Austausch von Daten zwischen Client und Web-Server stehen alternativ die Datenformate XML und JSON zur Verfügung. XML ist ein strukturorientiertes Format, während JSON ein datenorientiertes Format ist. Aufgrund der circa 1/3 geringeren Datengröße eignet sich das JSON-Format in Ajax-Anwendungen. Eigentlich ist das ein Argument für die Verwendung in der Web-Applikation. Im Vorfeld wurde untersucht, ob es möglich ist die bereits vorhandene XML- Datenstruktur in eine JSON-Datenstruktur zu überführen. Der Oxygen XML-Editor verfügt über eine interne Funktion zur Umwandlung von XML nach JSON. Abb. 81: Umwandlung von XML nach JSON Der Konverter reduziert nach den JSON-Regeln gleichnamige Elemente derselben Hierarchieebene zu einem Objekt. Die Zugehörigkeiten von Informationen und Tabellenstrukturen gehen verloren. Der Vergleich zeigt, dass gleichnamige Elemente aufgrund der schwach verschachtelten XML-Strukturen zusammengefasst werden (siehe Abbildung 82 und Abbildung 83). Die Reihenfolge von Überschrifts- und Listenelementen geht somit verloren. Diese Nachteile beruhen auf den Regeln von JSON. Die Lösung wäre eine stärker verschachtelte Struktur. Aufgrund des hohen Aufwands und des daraus folgenden geringen Nutzens wurde JSON als Datenaustauschformat nicht eingesetzt. Für Projekte mit stark verschachtelten Strukturen (Hierarchietiefe) mag JSON durchaus eine Alternative sein. Seite 75

86 Datenaustauschformat Abb. 82: XML-Datenstruktur Abb. 83: Ausgabe: Umwandlung XML nach JSON Seite 76

87 Anwendungen 9 Anwendungen Anwendungen für das Smartphone und den Tablet-PC unterteilen sich in drei Kategorien: Native Applikation Web-Applikation Hybride Applikation Native Applikation Native Applikationen sind plattformabhängig und müssen deshalb für jedes Betriebssystem entwickelt werden. Sie haben jedoch den kompletten Zugriff auf die Hardware-Funktionen wie Kamera, Mikrofon und Beschleunigungssensor. Nachteile sind jedoch der hohe Kosten- und Zeitaufwand für die Entwicklung und Wartung einer Applikation auf mehreren Plattformen. Native Applikationen sind im App-Markt des Herstellers zu beziehen und müssen erst auf dem Gerät installiert werden, um sie nutzen zu können. Web-Applikation Web-Applikationen werden im Browser aufgerufen und erhalten durch das Framework das Aussehen und die Bedienoberfläche einer nativen Applikation. Die Anwendung ist plattformunabhängig. Die Entwicklung für mehrere Betriebssysteme entfällt, was viel Zeit und Kosten einspart. Der Webentwickler kann auf vorhandene Kenntnisse in HTML, CSS und JavaScript zurückgreifen das Erlernen einer neuen Programmiersprache entfällt. Allerdings können Web- Applikationen nicht auf Hardware-Funktionen, wie Kamera, Mikrofon und Beschleunigungssensor zurückgreifen. Besonders in 3D-Animationen fällt die Performance gegenüber nativen Anwendungen zurück, weil der Zugriff und somit die Berechnung über die integrierte Grafikeinheit entfällt. Hybride Applikation Hybride Applikationen vereinen die Vorteile und Funktionen einer nativen Applikation und einer Web-Applikation. Der native Teil der Anwendung stellt Seite 77

88 Anwendungen den Zugriff auf die Hardwarefunktionen wie Kamera und Mikrofon sicher, während die Inhalte in der mobilen Webseite vorliegen. 9.1 HTML5 und jquery Mobile Die Web-Applikation im Überblick Die Web-Applikation besteht aus drei Hauptbereichen Start, Kategorie und Baureihe. Sie sind durch die Navigation in der Fußleiste von jeder Seite aus erreichbar. Im Kopf der Startseite befindet sich eine mit i gekennzeichnete Schaltfläche, welche zu einer Informationsseite führt. Der Bereich Kategorie untergliedert sich nach Anwendungsbereichen, Anwendungsarten, Produkten und Produktdetails. Die letzte Seite zeigt das Produkt mit seinen Merkmalen und Eigenschaften. Im Bereich Baureihe ist eine Auflistung aller Produkte mit Vorschaubild zu finden. Nach der Auswahl eines Produktes erhält der Nutzer weitere Details. Abb. 84: Aufbau der Web-Applikation Seite 78

89 Anwendungen Seitenaufbau Alle HTML-Dateien beginnen mit der Zeile <!DOCTYPE html> zur Verwendung des HTML5-Standards. Um der Webseite das Look and Feel einer Web-Applikation zu verleihen, müssen im <head>-bereich die jquery- und jquery-mobile-bibliotheken eingebunden werden. Die min-dateien sind auf die Komprimierung des Codes der Bibliothek optimiert. Das link-element verweist auf das jquery-mobile-stylesheet. Danach folgen die JavaScript-Referenzen von jquery und jquery Mobile. Abb. 85: Einbindung der jquery-mobile-bibliothek Seit dem 20. Februar 2013 steht die Version mit weiteren Funktionen im Responsive Webdesign ( released/#download) zur Verfügung. Neu ist die bessere Ausnutzung von mobilen Anwendungen auf größeren Displays, wie sie auf dem Tablet-PC zu finden sind. Tabellen passen sich an die Auflösung an, indem sich die Inhalte untereinander oder nebeneinander anordnen lassen. Auf Knopfdruck können Panels vom linken und rechten Seitenrand eingeblendet werden. Weiterhin arbeiten die Entwickler an der Reduzierung des Codes und der Ausweitung des Supports. 49 In der Version jquery 2.0 sollen ältere Browserversionen vom Support ausgeschlossen werden, um den Code weiter zu verschlanken 50. Das <body>-element enthält die für eine App typischen Bereiche Kopfzeile, Inhaltsbereich und Fußzeile zur Navigation. Die HTML5-Spezifikation besagt, dass alle nicht standardisierten Attribute mit einem data- beginnen müssen 51. Auftretende Fehlermeldungen in Entwicklerwerkzeugen sind daher nicht verwunderlich. 49. Vgl.: [Golem] 50. Vgl.: [Computerbase] 51. Vgl.: [Völkl 2012], S. 173 Seite 79

90 Anwendungen Das data-role-attribut definiert die Inhaltsbereiche, wie page, header, content und footer. Zur Unterteilung der Seitenbereiche können die alten <div>-elemente oder die neuen strukturierenden HTML5-Elemente verwendet werden. Die Entscheidung ist auf die Variante mit den älteren <div>-elementen gefallen, um auch ein reibungsloses Funktionieren auf Desktop-Systemen gewährleisten zu können. Abb. 86: jquery mit div-elementen und den strukturierenden HTML5-Elementen Aufgrund der Komplexität besteht jede Seite aus einer eigenen HTML-Datei, um die Übersichtlichkeit beizubehalten. Die Unterbringung aller Seiten in nur einer HTML-Datei ist zwar auch möglich, sollte jedoch nur für kleinere Projekte angewendet werden Anpassungen im <head>-bereich Durch Anreicherung zusätzlicher Metadaten im head-bereich, ist es möglich die Web-Applikation für Nutzer von Apple-Geräten, wie dem iphone und dem ipad weiter anzupassen. Angaben des Viewports erlauben Einstellungen für die Geräteauflösungen. Der Attributwert width=device-width passt die Bildschirmbreite automatisch an die Geräteauflösung an. Der Wert 1.0 setzt die Skalierung der Eigenschaften initial-scale und maximal-scale auf die Normalgröße. Das Zoomen mit zwei Fingern (pinch-to-zoom) entfällt dadurch. Zusätzlich erfolgt die Deaktivierung der Zoomfunktion durch user- 52. Vgl.: [Franke und Ippen 2012], S. 315 Seite 80

91 Anwendungen scaleable=no, um Darstellungsfehler auf unterschiedlichen Plattformen zu vermeiden. Abb. 87: Viewport-Einstellungen Ein weiteres <meta>-element deaktiviert die Statuszeile im mobilen Browser Safari auf Apple-Geräten. Die Web-Applikation nutzt jetzt den vollen Bildschirm. Ein Aufruf kann somit nur noch über ein App-Icon geschehen. Abb. 88: Aktivierung des Full Screen Modes Native Applikationen lassen sich bequem durch Auswahl des Icons vom Home- Bildschirm aus starten. Diese Funktion lässt sich auch für die Web-Applikation nutzen. Damit das Icon auf dem Home-Bildschirm erscheint, muss der Pfad im <link>-element angegeben werden. Abgerundete Ecken erhält das Icon unter ios automatisch. Abb. 89: Einstellung für Glanzeffekt Abb. 90: Icon mit Glanzeffekt Für eine Darstellung des Icons ohne Glanzeffekt wird dem Standardausdruck einfach die Erweiterung precomposed angehangen. Abb. 91: Icon ohne Glanzeffekt Seite 81

92 Anwendungen Seit dem iphone 4 können Schriften auf dem Retina-Display schärfer und mit mehr Detailreichtum dargestellt werden. Grafiken müssen deshalb höher aufgelöst sein, andernfalls wirkt die Darstellung unscharf. Die Größe der Icons beträgt hierfür 114 x 114 Pixel. Ist die Auflösung niedriger, wird das Icon einfach heruntergerechnet Inhaltsbereich Die Informationen werden überwiegend mit JavaScript in die Web-Applikation eingefügt. Es gibt auch statische Inhalte, dazu zählen Startseite, Informationsseite, Kopf- und Fußleiste. Dynamisch erzeugte Inhalte sind in den Seiten Kategorie und Baureihe zu finden, die zunächst aus Listen bestehen. Die Produktdetailseiten stellen Merkmale und Eigenschaften des Produktes in Form von Bildern, Überschriften, Absätzen, Listen und Tabellen dar. In dem rot markierten Bereich befinden sich statische, aber auch dynamisch erzeugte Inhalte. Abb. 92: Inhaltsbereich Zum besseren Verständnis erfolgt an dieser Stelle eine Erklärung der dynamisch erzeugten Inhalte in statischer Form. Die Auszeichnung der ungeordneten Liste mit dem Attribut datarole= listview gibt die Anweisung für die Gestaltung durch jquery Mobile an. Für die Benennung der folgenden Listenpunkte gibt es einen sogenannten Listenteiler. 54 Das Attribut data-role= list-divider weist die Eigenschaft 53. Vgl.: [Franke und Ippen, 2012], S Vgl.: [Franke und Ippen 2012] S. 327 Seite 82

93 Anwendungen für den Listenteiler zu 55. Die verlinkten Listenpunkte bekommen ein Icon mit einer Pfeilspitze zugewiesen, damit der Nutzer weiß, dass eine Unterseite folgt. Das <span>-element enthält die Anzahl der Unterkategorien. Die Klasse ui-licount weist Eigenschaften für die Gestaltung in Form einer Blase zu. 56 Abb. 93: HTML- und jquery-mobile-code einer verlinkten Liste Nach der Anreicherung mit jquery-mobile-code sieht der Inhaltsbereich, wie in der folgenden Abbildung 94 aus. Abb. 94: Screenshot einer verlinkten Liste Je weiter der Nutzer sich durch die Unterseiten der Kategorie bewegt, desto detaillierter werden die Informationen. Vor der Produktdetailseite befindet sich eine Liste der Produkte mit Vorschaubildern. Sie bedient sich dem gleichen Prinzip und enthält zusätzlich ein Vorschaubild, welches maximal 80 x 80 Pixel groß sein darf. 55. Vgl.: [jquery Mobile 1] 56. Vgl.: [Lobacher] S. 80, 81 Seite 83

94 Anwendungen Abb. 95: HTML- und jquery-mobile-code einer verlinkten Liste mit Vorschaubild Nach der Anreicherung mit jquery-mobile-code. Abb. 96: Screenshot einer verlinkten Liste mit Vorschaubild Die Produktdetailseite verwendet HTML-Elemente für Überschriften (<h1>, <h2>, <h3>), Bilder (<img>), Absätze (<p>), ungeordnete Listen (<ul>) und Tabellen (<table>) wie in einer Webseite üblich Kopf- und Fußleiste Die Kopfleiste trägt das KSB-Logo, den Titel und eine Schaltfläche zum Zurückkehren auf die vorhergehende Seite. Das Attribut data-position= fixed blendet die Kopf- und Fußleiste immer über den Inhalt der Seite ein. Ein Tippen oder Klicken auf eine leere Stelle in der Seite blendet Kopf- und Fußzeile aus oder ein. Ohne Fixierung würde sich die Navigation am Ende der Seite befinden. Der Seite 84

95 Anwendungen Nutzer müsste bei längeren Inhalten bis zum Ende scrollen, um die Navigation zu erreichen. 57 Eine Schaltfläche verlinkt oberhalb der Startseite auf die Unterseite Informationen (<a href= seite3.html >Informationen</a>). Weitere Attribute definieren die Art der Schaltfläche und weisen ihr ein Icon zu: data-role= header data-position= fixed data-role= button data-icon= info Festlegung als Kopfzeile Einblendung über den Inhalt Festlegung als Schaltfläche Vergabe des Icons Info Die Positionierung der Schaltfläche auf der rechten Seite wird über die CSS- Klasse ui-btn-right vorgenommen. Im <img>-element befinden sich Auszeichnungen, um das KSB-Logo mit Hilfe der CSS-Klasse logo1 oder logo2 links in der Kopfleiste zu platzieren. Die letzte Klasse positioniert das KSB-Logo versetzt nach rechts, um Platz für eine Zurück- Schaltfläche zu schaffen. Abb. 97: Kopfzeile Abb. 98: Kopfzeile mit Logo, Titel und Info-Schaltfläche Die Fußzeile beinhaltet eine Navigation in Form einer ungeordneten Liste. Sie ist von jeder Seite aus erreichbar und ermöglicht den Zugriff auf die Startseite, Kategorie und Baureihe. 57. Vgl.: [Franke und Ippen 2012] S. 320 Seite 85

96 Anwendungen Durch die CSS-Klassen ui-btn-active und ui-state-persist wird die Schaltfläche aktiv gesetzt. Somit weiß der Nutzer auf welcher Seite er sich aktuell befindet. Abb. 99: Fußzeile Abb. 100: Navigation in der Fußleiste Neben dem Farbschema lassen sich Schaltflächen auch mit Icons kombinieren. jquery Mobile liefert dazu ein Set aus 24 unterschiedlichen Icons: Abb. 101: Icon-Set Es folgt eine Auflistung der verwendeten Icons in der Web-Applikation mit Attribut und Wert: data-icon= back data-icon= info data-icon= home data-icon= search Seite 86

97 Anwendungen Durch das Attribut data-transition= fade wird eine Animation zwischen den Seiten eingeblendet. Weitere Übergangseffekte sind 58 : pop flip turn flow slide slideup slidedown 9.2 Manifest-Datei Die Nutzung der Web-Applikation soll auch im Offline-Modus funktionieren. Web-Browser besitzen zwar einen Caching-Mechanismus, dieser arbeitet jedoch nicht sehr zuverlässig. Seit HTML5 gibt es den Application-Cache ein Cache zur Speicherung von kompletten Anwendungen, welcher in der Web-Applikation zum Einsatz kommt. Das sogenannte Manifest schreibt dazu die Daten in den Cache. Durch das Vorhalten aller benötigten Dateien lässt sich die Web- Applikation offline nutzen. Eine Internetverbindung wird nur für den ersten Aufruf und spätere Aktualisierungen benötigt. Der Nutzer bekommt das Gefühl als würde er eine native Applikation bedienen. Die Vorhaltung der Dateien reduzierten außerdem die Zugriffe auf den Web-Server. Mehr Bandbreite steht zur Verfügung, was wiederum ein Nachladen von Daten beschleunigt. 59 Zusammenfassung: Web-Applikation offline verwendbar Entlastung des Web-Servers Geschwindigkeitszuwachs in der Web-Applikation 58. Vgl.: [Völkl 2012], S Vgl.: [Franke und Ippen, 2012], S. 289 Seite 87

98 Anwendungen Aktivierung der Manifest-Datei Die Manifest-Datei wird mit Hilfe des manifest-attributs im <html>-tag verlinkt. Der Verweis sollte in allen HTML-Seiten aufgeführt sein, um Probleme mit dem Caching zu vermeiden. Abb. 102: Einbindung der Manifest-Datei Damit der Browser die Manifest-Datei richtig interpretiert, muss der korrekte MIME-Type bereitgestellt werden. Die Definition für den Web-Server wird in der Konfigurationsdatei.htaccess festgelegt. Sie muss im selben Ordner gespeichert sein, indem sich auch die Web-Applikation befindet. Die folgende Zeile fügt den MIME-Type hinzu: 60 AddType text/cache-manifest.manifest Aufbau der Cache-Manifest-Datei Die Cache-Manifest-Datei ist eine einfache Textdatei und unterteilt sich in verschiedene Bereiche. 61 CACHE MANIFEST: #Kommentar Die Zeichenfolge CACHE-MANIFEST ist eine erforderliche Angabe. Unter ihr folgt eine Kommentarzeile. Die Einleitung eines Kommentars erfolgt durch ein Rautezeichen (#) und kann willkürlich bezeichnet werden. Eine Angabe von Datum und Versionsnummer ist selbsterklärend. Ändert sich ein Zeichen im Kommentar, so wird der Browser dazu aufgefordert alle Daten erneut in den Cache zu schreiben. 60. Vgl.: [Franke und Ippen 2012] S. 292, Vgl.: [Franke und Ippen 2012] S. 289 Seite 88

99 Anwendungen CACHE: Im CACHE-Bereich befinden sich die Adressen zu den Dateien, die vom Browser zu cachen sind. Das können HTML-Seiten, JavaScript-Dateien, Bilder und URL- Angaben sein. NETWORK: Alle Dateien in diesem Bereich werden nicht gecached und weiterhin vom Web- Server bezogen. FALLBACK: In diesem Bereich können Regelungen getroffen werden, wie zum Beispiel das Aufpoppen eines Fensters mit einem Hinweis: Die benötigten Dateien können wegen fehlender Internetanbindung nicht geladen werden. Auf die Richtigkeit der Pfade muss penibel geachtet werden, weil sonst das Caching fehlschlägt und die Web-Applikation nicht mehr funktioniert! Die Web-Applikation nutzt nur die CACHE-Funktion der Manifest-Datei: Abb. 103: Cache-Manifest-Datei Seite 89

100 Anwendungen Die untere Abbildung zeigt das Entwickler-Tool des Google Chrome Browsers und die Dateien im Application Cache. Abb. 104: Application Cache vom Google Chrome Browser Die maximale Größe des Application-Cache beträgt 5 MB. Darüber hinaus muss der Nutzer einwilligen, ob er der Anwendung mehr Speicher zur Verfügung stellen möchte. Dieser Hinweis erscheint auf dem Bildschirm beim Erreichen der maximalen Speichergröße. 62 Tests mit verschiedenen Smartphones (Betriebssystem: Android, ios, Windows Phone 7) lösten bei Überschreiten der Speichergröße von 5 MB keine Abfrage aus Besonderheiten des Application-Cache Stellt die Web-Applikation eine Veränderung in der Manifest-Datei fest, werden alle Dateien neu in den Cache geladen. Beim ersten Aufruf der Web-Applikation erwartet der Nutzer eine Aktualisierung. Zu beobachten war jedoch, dass neue Inhalte erst nach dem zweiten Aufruf verfügbar sind. Das folgende Zitat beschreibt die Beobachtung: Durch diesen Ablauf erhält der Browser die Information, dass er eine Prüfung auf ein neues Manifest durchführen, den aktualisierten Inhalt herunterladen und den App-Cache neu füllen soll. Eine Seite muss daher zwei Mal neu geladen werden, damit Nutzern neue Inhalte bereitgestellt werden: einmal zum Einrichten eines neuen App-Caches und einmal zum Aktualisieren des Seiteninhalts Vgl.: [Franke und Ippen 2012], S. 289, [HTML5 ROCKS 2011] Seite 90

101 Anwendungen Notierungen in der Manifest-Datei Wildcards * erlauben es, den Dateinamen nach bestimmten Mustern zu durchsuchen. In diesem Fall eignen sich die Formatendungen zur Dateiauswahl. Anstatt jede HTML-Seite einzeln mit ihrem Pfad zu notieren, reicht ein Sternchen mit folgender Kennzeichnung aus: 64 *.html Die Angabe des Ordners mit weiteren Dateien vereinfacht die Notierung in der Manifest-Datei: /bilder/ Die Angabe eines Bilderordners oder die Verwendung einer Wildcard mit dem Format *.jpg funktionierten nicht. Die Gründe konnten nicht lokalisiert werden, weshalb jede Datei einzeln in der Manifest-Datei aufgeführt ist. 9.3 Web-Storage Der Web-Storage ist im Gegensatz zu den Cookies haltbarer und stellt mehr Speicherplatz zur Verfügung. Das Vorhalten der Daten erfolgt clientseitig im Browser. Zu unterscheiden ist zwischen den Mechanismen sessionstorage und localstorage. Wird der sessionstorage verwendet, bleiben die Daten nur während der Sitzung erhalten. Nach dem Schließen des Browsers verfallen sie. Mit localstorage gespeicherte Daten sind dauerhaft verfügbar. Somit ist eine Verwendung auch im Offline-Modus möglich. Erst wenn der Nutzer die Daten löscht, sind sie verloren. 65 Das Speichern und Auslesen des localstorage geschieht über JavaScript- Funktionen. In der Web-Applikation wird durch den onclick-aufruf die Information dem lokalen Speicher übergeben und auf der nächsten Seite wieder ausgelesen, um die Kategorien anhand des zuvor gewählten Wertes weiter einzugrenzen und verarbeiten zu können. 64. Vgl.: [Franke und Ippen 2012] S Vgl.: [Kröner 2010], S. 168, 169 Seite 91

102 Anwendungen Wählt der Nutzer einen Listeneintrag aus, erfolgt die Speicherung der Variablen listeneintrag in den Web-Storage mit dem Schlüssel key. onclick="javascript:localstorage.key=\'' + listeneintrag + '\'" Der Wert mit dem Schlüssel key wird aus dem Web-Storage ausgelesen und in die Variable gespeichert. var variable = localstorage.key; Abb. 105: Speicher des localstorage 9.4 Standard-Themes Das Erscheinungsbild einer Webseite bestimmt das Theme in jquery Mobile. Fünf verschieden farbige Themes beziehungsweise sogenannte Swatches stehen bereits zur Verfügung und weisen den Bedienelementen ein entsprechendes Farbschema zu. Abb. 106: Swatch a bis e Seite 92

103 Anwendungen Das Zuweisen eines Swatches erfolgt im <div>-element mit dem Attribut data-theme und dem entsprechenden Buchstaben. Abb. 107: Attribut data-theme Es besteht die Möglichkeit verschiedene Swatches miteinander zu kombinieren. So können Seitenbereiche (header, content, footer), aber auch einzelne Elemente (Listen, Schaltflächen) farblich angepasst werden (siehe Abbildung 108). Abb. 108: Kombination mehrerer Swatches im Listenelement mit der Eigenschaft data-role= listview Design-Richtlinien (Corporate Identity CI) verlangen spezielle Anpassungen der Farben und der Positionierung von Seitenelementen, wie dem Firmenlogo. Mit der im Internet verfügbaren Anwendung ThemeRoller kann der Entwickler ganz einfach eigene Farbdesigns erstellen. Eine weitere Möglichkeit ist die Anpassung durch CSS-Stylesheets. Die Web-Applikation nutzt die Kombination aus Standard-Theme (Kombination aus Swatch a und c) und CSS-Anpassungen. Seite 93

104 Anwendungen ThemeRoller Der ThemeRoller ( ist eine eigenständige Anwendung zur Erstellung individueller Farbdesigns für jquery-mobile- Anwendungen. Durch seine grafische Benutzeroberfläche ist das Werkzeug besonders leicht zu bedienen. In der Hauptansicht sieht der Entwickler eine originalgetreue Abbildung der Swatches. Das Konfigurationsmenü befindet sich auf der linken Seite und stellt viele Möglichkeiten für die Einstellung von Farben, Farbverläufen, Schatten und abgerundeten Ecken bereit. Farben lassen sich auch einfach per Drag and Drop mit der Maus in das entsprechende Seitenelement ziehen. Möglich sind bis zu 26 Swatches unter der Bezeichnung von a bis z. Passende Farbkompositionen stellt Adobe Kuler direkt zur Verfügung. Gleichzeitig gibt das Hauptfenster immer eine Vorschau der Eigenkreationen. Abb. 109: ThemeRoller-Anwendung Nach Fertigstellung kann das Komplettpaket über den Download-Button heruntergeladen werden. Um das eigene Farbschema auf die Web-Applikation zu übertragen, müssen die CSS-Stylesheets im <head>-bereich auf allen Seiten gegen die neuen CSS- Seite 94

105 Anwendungen Stylesheets ausgetauscht werden. Die Dateien befinden sich im Unterordner jquery. Abb. 110: Verlinkung der jquery Mobile Stylesheet- und JavaScript-Dateien Stylesheet-Anpassungen Die Formatierungen splitten sich in die Dateien styles.css, kategorie.css und produkte.css auf. Allgemeingültige Einstellungen der Seiten befinden sich in der styles.css. Die letzten beiden CSS-Dateien beinhalten Eigenschaften zur Formatierung der Produktseiten. Erst beim Aufrufen wird die HTML-Seite mit jquery-mobile-code angereichert. Zusatzwerkzeuge wie der Firebug des Browsers Firefox erlauben die Einsicht in das angereicherte HTML-Dokument und zeigen durch Markierungen die Zusammengehörigkeiten von Code und Seitenelement an. Die CSS-Eigenschaften fangen alle mit der Element-Klasse.ui an stellvertretend für das User- Interface. Danach folgt der Name des Elements. Abb. 111: Firbug-Ansicht: mit jquery Mobile angereicherter HTML-Code Seite 95

106 Anwendungen Allgemeine Formatierungen Das Responsive Webdesign beschreibt die Anpassungsfähigkeit der Webseite für verschiedene Geräteauflösungen. Seitenbereiche müssen also flexibel sein, um eine gute Darstellung der Inhalte auf unterschiedlichen Geräten zu gewährleisten. Die meisten Browser verwenden eine Standardschriftgröße von 16 px, was 1.0 em oder 12 pt entspricht. Bei Änderung der Standardschriftgröße passen sich alle Schriften mit der em-auszeichnung automatisch an. 66 Die Klasse.ui-li-divider beschreibt das Seitenelement Listenteiler und enthält Einstellungen für Zeilenhöhe, Schriftfarbe, Textschatten, Hintergrundfarbe und Rahmenstärke. Abb. 112: Listenteiler Die Eigenschaft text-overflow: ellipsis legt einen elliptischen Bereich um den Titel. Bei zu langem Titel werden die überstehenden Zeichen ausgeblendet und durch Punkte ( ) ersetzt. Der folgende Code unterbindet das Ausblenden und zeigt den vollen Titel im Kopf- und Fußbereich an 67 : Abb. 113: Titeleigenschaften für header und footer Abb. 114: CSS3-Eigenschaft: mit und ohne text-overflow: ellipsis; 66. Vgl.: [Elmastudio] 67. Vgl.: [Lobacher 2012], S. 46 Seite 96

107 Anwendungen Es gibt zwei Klassen zur Positionierung des KSB-Logos in der Kopfleiste. Mit den Eigenschaften der CSS-Klasse.logo2 werden Zurück-Schaltflächen berücksichtigt. Abb. 115: CSS-Klassen für die Positionierung des KSB-Logos Abb. 116: CSS-Klasse.logo1 und.logo2 Attribute werden im Stylesheet über eckige Klammern angesprochen. Das <h1>- Element mit dem Attribut data-role= page erhält die Eigenschaften für die zentrierte Textausrichtung, Schriftgröße relativ zur Normalgröße und einen oberen Außenabstand von -5 Pixel. Die Elemente für die Überschriftenebenen <h2> und <h3> bauen sich ähnlich wie <h1> auf. Abb. 117: <h1>-überschriften Die Vorschaubilder im Listenelement mit der Auszeichnung listview nutzen eine Höhe von 100 %, was maximal einer Fläche von 80 x 80 Pixel entspricht. Die Bildbreite passt sich proportional an die Bildhöhe an. Abb. 118: Vorschaubild im listview-element Seite 97

108 Anwendungen Anpassung Produktbeschreibung Im Stylesheet produkte.css befinden sich Formatierungen für Überschriften, Aufzählungen, Absätze, Tabellen, Farben und Abstände. Die Zuweisung der Eigenschaften erfolgt über die ID #ausgabe_seite2_details1 und nachfolgenden Elementnamen (Beispiel: <img>-element für Bilder). Das Produktbild füllt 70 % der Bildschirmbreite vom Gerät aus und kann bis zu 300 Pixel breit sein. Der untere Außenabstand ist um 15 Pixel reduziert worden. Abb. 119: Bildgröße Ein vertikaler Scrollbalken ist für die gesamte HTML-Seite vorhanden. Es kann jedoch vorkommen, dass im Inhaltsbereich ein weiterer Scrollbalken in vertikaler Richtung hinzukommt. Ein Scrollen über zwei Leisten ist dann nur noch schwer möglich. Mit Hilfe der Eigenschaft overflow-y: hidden; wird das Erscheinen des Scrollbalken im Inhaltsbereich unterbunden. Auf weitere Eigenschaften soll an dieser Stelle nicht eingegangen werden. Das Stylesheet kategorie.css enthält die gleichen Einstellungen wie produkte.css und wird nur auf eine andere Unterseite angewendet. Seite 98

109 JavaScript 10 JavaScript Das Einladen und Verarbeiten der Daten wird mit JavaScript-Funktionen in der Web-Applikation ermöglicht. Der Code kann direkt in der HTML-Datei eingebunden werden oder mit Verweis auf eine externe JavaScript-Datei erfolgen. Die Auszeichnung findet am Ende, aber innerhalb des page-containers statt 68. Die Verwendung des Application-Caches und der Verlinkung auf externe JavaScript- Dateien funktionierte nicht und gab die Fehlermeldung Loading Error Page aus. Der Grund für das Verhalten ist unbekannt. Normalerweise wird der Code in jquery mit der Funktion $(document).ready(function() { //auszuführender Code }); ausgeführt. Das folgende Zitat beschreibt, weshalb in jquery Mobile ein anderer Ansatz verfolgt wird: Leider funktioniert dies innerhalb einer jquery-mobile-webapp nur bedingt. Häufig werden nur Teile von Seiten nachgeladen (oder sogar vorgeladen), weswegen Sie sich auf das ursprüngliche $(document).ready nicht verlassen können. Stellen Sie sich vor, die Startseite würde geladen werden. Im Zuge dessen würde jeder Code ausgeführt werden, der innerhalb $(document).ready definiert ist. Wenn Sie nun die Rubrik wechselten und wieder zur Startseite zurückkehrten, würde aber die Startseite nicht erneut komplett nachgeladen. Das Ergebnis wäre, dass die Funktion nicht mehr ausgeführt und damit die Seite fehlerhaft dargestellt würde. 69 In jquery Mobile kommt deshalb eine andere Funktion (siehe Abbildung 120) zum Einsatz. Über die ID wird die HTML-Seite aufgerufen und geprüft, ob sie angezeigt wird. Ist die Bedingung erfüllt, löst das Ereignis pageshow die Funktion mit den darin befindlichen Anweisungen aus. Abb. 120: Überprüfung der Anzeige über die ID 68. Vgl.: [Franke und Ippen 2012], S Vgl.: [Franke und Ippen 2012], S. 329, 330 Seite 99

110 JavaScript Das Starten des Ajax-Requests erfolgt über die Low-level-Methode $.ajax(). Sie dient zur Konfiguration der Parameter für den Abfragemechanismus. Die type-eigenschaft legt per GET-Request fest, dass die Daten von einer externen Quelle, dem Web-Server kommen. Hinter der url-eigenschaft steckt die Adresse zum XML-Dokument pumpe.xml. Die datatype-eigenschaft zeigt das festgelegte Datenformat, welches vom Web-Server zu erwarten ist. Nach erfolgreichem Einladen der Daten wird der success-handler und somit die parsexml-funktion ausgelöst. 70 Abb. 121: Ajax-Konfiguration In der parsexml-funktion befinden sich Anweisungen, welche die entsprechenden Daten verarbeiten und in die Seite einbinden. In den nachfolgenden Unterabschnitten werden die Abfragemechanismen für die Kategorien erklärt Anwendungsbereiche auslesen Wählt der Nutzer in der Fußleiste den Punkt Kategorie aus, so gelangt er auf die erste Seite, in der eine Auflistung über verschiedene Anwendungsbereiche zu finden ist. Nach dem Laden der Seite löst ein Ereignis eine Funktion mit Verarbeitungsanweisungen aus. In der Abbildung ist der JavaScript-Code von der ersten Seite zu sehen. Die Anwendungsbereiche werden aus dem XML- Dokument über Funktionen ausgelesen. 70. Vgl.: [Vollendorf und Bongers 2012], S. 226 Seite 100

111 JavaScript Abb. 122: Anweisungen für die HTML-Seite mit der id= seite1 Zum Verständnis folgt die Erklärung einzelner Codezeilen. Bei Aktualisierungen der Webseite kommt es zur erneuten Abarbeitung der JavaScript-Anweisungen. Die gleichen Informationen würden nochmals eingeladen werden, ohne die bereits vorhanden Informationen zu ersetzen. Es würde zu einer Abbildung gleicher Inhalte kommen. Die Löschung alter Inhalte erfolgt über die Methode.emtpty() und verhindert somit die mehrfache Abbildung gleicher Informationen. $("#ausgabe_seite1").empty(); Mit der.find()-methode wird auf das Wurzelelement <projekt> vom XML- Ausgabedokument zugegriffen. Durch die.each()-methode wird der Zugriff auf alle nachfolgenden Elemente gewährleistet. $(xml).find("projekt").each(function() {... }); Die Liste befindet sich im content-bereich der HTML-Seite. Mit Hilfe der id= ausgabe_seite1 können die <li>-elemente in das <ul>-element mit der Auszeichnung datarole= listview eingeladen werden. Seite 101

112 JavaScript Abb. 123: HTML-Seite mit dynamisch erzeugtem Inhalt durch JavaScript Als Erstes erfolgt die Einbindung eines Listenteiles (Anwendungsbereich Pumpen:), welcher mit der.append-methode dem <ul>-element hinzugefügt wird. $("#ausgabe_seite1").append('<li data-role="listdivider">anwendungsbereich Pumpen:</li>'); Abb. 124: Listenteiler Anwendungsbereich Pumpen: Danach erfolgt der Zugriff auf die Elemente einsatzort und deren Kindelemente. $(this).find("einsatzort").each(function() {... }); Für die Anzahl der nachfolgenden Kategorien wird mit Hilfe einer Variablen die Menge der Kindelemente pumpentyp des Elternelements einsatzort ermittelt und gespeichert. Die Anzahl der Elemente liefert die.length-methode als ganze Zahl zurück. var anzahl = $(this).find("pumpentyp").length; Seite 102

113 JavaScript Der Name der Kategorie ist im Attribut titel des Elements einsatzort hinterlegt und wird mit der.attr()-methode ausgelesen. var einsatzort = $(this).attr("titel"); Nach dem Listenteiler folgt das Einladen der Listenpunkte. Durch die.append- Methode werden dem <ul>-element weitere <li>-elemente hinzugefügt. $("#ausgabe_seite1").append('<li>... </li>'); Innerhalb der <li>-elemente befindet sich ein Link zur Weiterleitung auf die Seite seite1_details1.html. Das Attribut data-transition blendet einen Übergangseffekt beim Seitenwechsel ein. Wählt der Nutzer einen Listenpunkt aus, so muss dessen Name an die nachfolgende Seite übergeben werden, damit die passenden Unterkategorien angezeigt werden können. Durch den onclick- Aufruf werden der Name und der Schlüssel.typ in den localstorage gespeichert. Dieser Wert wird später auf der Seite seite1_details1.html ausgelesen, um die entsprechende Auswahl der Unterkategorien zu treffen. Die XML-Elemente werden dann eine Hierarchieebene tiefer verarbeitet. <a href="seite1_details1.html" data-transition="slide" onclick="javascript:localstorage.typ=\'' + einsatzort + '\'">...</a> Die gespeicherten Werte aus den Variablen einsatzort und anzahl enthalten jeweils den Namen des Anwendungsbereichs und die Anzahl der Unterkategorien. <h2>' + einsatzort + '</h2><span class="ui-li-count">' + anzahl + '</span> Abb. 125: Name des Anwendungsbereichs und Anzahl der Unterkategorien Seite 103

114 JavaScript Die Gestaltung der jquery-mobile-elemente erfolgt während des Ladens der Seite. Die Anwendungsbereiche werden erst nach dem Laden der Seite in den Inhaltsbereich eingebunden. Der Render-Prozess muss somit manuell ausgelöst werden, um die Gestaltung der Listenpunkte durch jquery Mobile nachträglich anzuwenden. 71 $("#ausgabe_seite1").listview("refresh"); 10.2 Anwendungsarten auslesen Hat der Nutzer einen Anwendungsbereich (Kapitel 10.1) ausgewählt, wechselt die Seite mit einer Animation zur nächsten Seite. Zu sehen sind dann die Unterkategorien von der vorhergehenden Kategorie. An dieser Stelle ist der Auszug des JavaScript-Codes für die Seite seite1_details1.html zu sehen. Abb. 126: Anweisungen für die HTML-Seite mit der id= seite1_details1 71. Vgl.: [Franke und Ippen 2012], S. 332 Seite 104

115 JavaScript Für das weitere Auslesen der passenden Unterkategorien wird der Wert aus dem localstorage mit dem Schlüssel.typ ausgelesen und in die Variable anwendungsbereich gespeichert. var anwendungsbereich = localstorage.typ; Es erfolgt das Auslesen der Elemente einsatzort über das Attribut titel. Wie im Abschnitt zuvor erhalten die Listenelemente ihre typische Gestaltung durch den manuellen Anstoß des Render-Prozesses mit Zuweisung über die ID ausgabe_seite1_details1. $( #ausgabe_seite1_details1 ).listview( refresh ); Abb. 127: Auslesen der Anwendungsbereiche Es sollen nur die Unterkategorien des auf der vorhergehenden Seite gewählten Anwendungsbereichs erscheinen. Dazu werden die Werte der Variablen einsatzort und anwendungsbereich mit einem Operator (==) verglichen. Die Anweisung innerhalb der if-abfrage verarbeitet nur die XML-Elemente, die zu den übereinstimmenden Variablenwerten gehören. if(einsatzort == anwendungsbereich) {... } Die Liste besteht aus einem Listenteiler und den verlinkten Listenpunkten in Form der Anwendungsarten. Der Titel des Listenteilers wird aus der Variablen anwendungsbereich ausgelesen und stellt die Hauptüberschrift für die Unterkategorien Anwendungsarten dar. Seite 105

116 JavaScript $("#ausgabe_seite1_details1").append('<li data-role="listdivider">' + anwendungsbereich + ':</li>'); Mit einer weiteren Funktion wird auf die Elementknoten pumpentyp zugegriffen. $(this).find("pumpentyp").each(function(){... } Die Namen der Anwendungsarten werden aus den Attributen titel ausgelesen und in die Variable pumpentyp gespeichert. var pumpentyp = $(this).attr("titel"); Die Anzahl der Produkte von den Anwendungsarten werden in der Variablen anzahl gespeichert. Über die.length-methode wird die Anzahl aller <druck>-kindelemente als ganze Zahl zurückgegeben. anzahl = $(this).find("produkt").find("druck").length; Über die.append-methode werden dem <ul>-element mit der Identifikation ausgabe_seite1_details1 <li>-elemente hinzugefügt. $("#ausgabe_seite1_details1").append('<li>... </li>'); Nach der Auswahl eines Listenpunkts wird der Nutzer auf die nächste Seite mit der ID seite1_details2.html weitergeleitet. Auf dieser Seite befindet sich wiederum eine Auflistung von Produkten mit Vorschaubild und Name. Über das onclick-ereignis wird der Name des ausgewählten Produkts zusammen mit dem Schlüssel.pumpe in den localstorage gespeichert, welcher auf der nachfolgenden Seite ausgelesen wird. <a href="seite1_details2.html" data-transition="slide" onclick="javascript:localstorage.pumpe=\'' + pumpentyp + '\'">... </a> Seite 106

117 JavaScript Die Variablen pumpentyp und anzahl geben jedem Listenpunkt einen Namen und eine Auskunft über die Anzahl der nachfolgenden Produkte. <h2>' + pumpentyp + '</h2><span class="ui-li-count">' + anzahl + '</span> Es erfolgt die manuelle Gestaltung der Listenelemente durch jquery Mobile. $("#ausgabe_seite1_details1").listview("refresh"); Seite 107

118 JavaScript 10.3 Produkte auslesen Auf dieser Seite sieht der Nutzer eine Auflistung der Produkte von der zuvor gewählten Anwendungsart. Innerhalb der Seite ist ein Listenteiler mit nachfolgenden Listenpunkten zu sehen. Zusätzlich verfügt jeder Listenpunkt über eine Bildvorschau vom Produkt. Der Name der Anwendungsart wird von der Variablen produkte bezogen. Hierzu wird der Wert aus dem Web-Speicher mit dem Schlüssel.pumpe abgerufen. var produkte = localstorage.pumpe; Zuvor werden noch die Elternknoten projekt und einsatzort mit der.each()-methode durchlaufen, bevor es mit einer weiteren Abfrage an die Verarbeitung der Elemente pumpentyp geht. $(this).find("pumpentyp").each(function () {... } Die Namen der Elemente werden in der Variablen pumpentyp gespeichert, um sie später mit dem Namen aus dem Web-Storage vergleichen zu können. var pumpentyp = $(this).attr("titel"); Um nur die Produkte, der zuvor gewählten Anwendungsart, anzuzeigen, werden über einen Vergleichsoperator (==) die Namen der Variablen pumpentyp und produkte miteinander verglichen. Innerhalb der if-abfrage erfolgt die weitere Verarbeitung von Informationen des gefilterten Elementknotens. if (pumpentyp == produkte) {... } Der Produktname wird aus der Variablen produkte ausgelesen und in den Listenteiler eingefügt. $("#ausgabe_seite1_details2").append('<li data-role="listdivider">' + produkte + ':</li>'); Seite 108

119 JavaScript Es erfolgt der Zugriff auf die produkt-elemente. $(this).find("produkt").each(function () {... } Der Name des Produkts steht im Attribut des Elements und wird für den letzten Vergleich von Produktwahl und Produktseite benötigt. Gespeichert ist er in der Variablen produkt. In der Variablen bilddruck sind die Bildressourcen des XML-Knotens druck gespeichert. Mit der.text()-methode wird der Adresspfad des Bildes als Textstring zurückgegeben. 72 var bilddruck = $(this).find("druck").text(); Nur Produkte mit einem Produktbild werden in der Web-Applikation ausgegeben. Über eine if-abfrage wird die Anzahl der Elemente bildvorschau erhalten. Wenn ein Bild vorhanden ist, kommt es zur Verarbeitung der Anweisungen und das Produkt wird mit Namen und Vorschaubild in der Liste angezeigt. if (bildvorschau.length > 0) {... } Die Listenpunkte werden durch die.append()-methode hinzugefügt. $("#ausgabe_seite1_details2").append('<li>... </li>'); Wählt der Nutzer ein Produkt aus, führt dies auf die Produktdetailseite. Der Produktname und Schlüssel.produkt wird dann in den localstorage übergeben. Auf der Produktseite folgt das Auslesen des Schlüssels mit entsprechendem Wert. Danach wird der Adresspfad an das Quellattribut des HTML- Elements <img src=\ + bilddruck + \ /> übergeben Vgl.: [Vollendorf und Bongers], S Vgl.: [Franke und Ippen 2012], S. 331 Seite 109

120 JavaScript <a href="seite1_details3.html" data-transition="slide" onclick="javascript:localstorage.produkt=\'' + produkt + '\'"><img src=\'' + bilddruck + '\' /><h3>' + produkt + '</h3></a> Zuletzt muss der Render-Prozess zur nachträglichen Gestaltung der Listenelemente durch jquery Mobile manuell angestoßen werden. $("#ausgabe_seite1_details2").listview("refresh"); 10.4 Produktdetailseite auslesen Die Detailseite beschreibt die produktspezifischen Merkmale und Eigenschaften. Sie besteht aus mehreren Abschnitten, die sich wieder in Zwischenabschnitte, Absätze, Listen, Tabellen und Bilder aufteilen. Die Variable details enthält den Namen des Produkts, welcher auf der vorhergehenden Seite durch den Nutzer ausgewählt wurde. var details = localstorage.produkt; Mit dem Vergleichsoperator der if-abfrage wird geprüft, ob der Inhalt der Variable details mit dem Wert der Variable produkt übereinstimmt. if (produkt == details) {... } Produktname und Produktbild werden durch die.append()-methode an das Element mit passender id= ausgabe_seite1_details3 übergeben. $("#ausgabe_seite1_details3").append('<h1>' + produkt + '</h1><img src=\'' + bilddruck + '\' />'); Abb. 128: Produktname und Produktbild Seite 110

121 JavaScript Es erfolgt der Durchlauf der Elemente <beschreibung>, welche die Überschriften der Abschnitte, Merkmale und Eigenschaften beinhalten. $(this).find("beschreibung").each(function () {... } Über die.attr()-methode werden die Namen der Elementknoten ausgelesen und in eine Variable gespeichert. var beschreibung = $(this).attr("titel"); Die Ausgabe der Abschnittsüberschriften wird mit einer if-abfrage und den vorgegebenen Inhalten begrenzt. if (beschreibung == "Produktvorteile" beschreibung == "Hauptanwendungen" beschreibung == "Fördermedien"...) {... } Die Abschnittsüberschriften werden dem Inhaltsbereich der HTML-Seite in Form von <h2>-überschriften übergeben. $("#ausgabe_seite1_details3").append('<h2>' + beschreibung + '</h2>'); Abb. 129: Abschnittsüberschriften Zwischenüberschriften, Absätze, Listenpunkte und Tabellen sind in der richtigen Reihenfolge auszugeben. Mit Hilfe des Größerzeichens und einer Wildcard ( * ) werden die Kindelemente der Reihenfolge nach ausgegeben. $(this).find("beschreibung > *").each(function () {... } Die Variablen knoteninhalt enthalten den Elementinhalt in Form eines Textstrings oder in Form von HTML-Code. var knoteninhalt = $(this).text(); var knoteninhalt2 = $(this).html(); Seite 111

122 JavaScript Eine zweite if-abfrage innerhalb der Funktion lässt nur die angegebenen Elemente zu. if ((knotenname == "absatz") (knotenname == "listenpunkt") (knotenname == "untertitel") (knotenname == "table")) {... } Innerhalb der if-abfrage befinden sich weitere if-else-konstrukte, welche wiederum.append()-methoden enthalten. Die ID dient der Zuordnung der HTML-Elemente im Inhaltsbereich der Seite. Tabellen liegen bereits als HTML- Struktur vor und können direkt über die.html()-methode auf die Seite übernommen werden. Es ist jedoch zu beachten, dass die Einbindung von HTML-Inhalten mit der.html-methode aus einem XML-Dokument nicht ganz ohne Probleme funktioniert. Die.html-Methode ist für XML-Dokumente nicht verfügbar, heißt es in der jquery API-Dokumentation 74. Bei einer Tabelle wird zum Beispiel nur der Inhalt, aber nicht die Struktur übernommen. Die Lösung des Problems ist die Einbindung des XHTML-Namensraumes xmlns= /xhtml in das Wurzelelement der Tabelle oder in das Wurzelelement des XML-Dokuments. Abb. 130: Einbinden der HTML-Elemente in die Abschnitte der Produktdetailseite 74. Vgl.: [jquery] Seite 112

123 JavaScript Dynamisch erzeugte Inhalte (siehe Abbildung 131): Abb. 131: Inhaltsbereich mit Zwischenüberschriften, Tabelle und Liste Seite 113

124 Bedienungsanleitung 11 Bedienungsanleitung Die benötigten Dateien befinden sich im Ordner Transformation und Web- Applikation (siehe Anhang). Davon ausgenommen sind die Exportdaten aus dem Redaktionssystem. 1. Gehen Sie in den Datenexport und öffnen Sie den Ordner streams. Fügen Sie die Batch-Datei datenformat_wechseln.bat in den streams-ordner ein. Ein Ausführen der Batch-Datei ersetzt das.st4stream-format gegen das.jpg-format. 2. Fügen Sie das XML-Dokument aus dem Datenexport in den Ordner export des Zielverzeichnisses Transformation ein. Das Dokument muss quelldokument.xml heißen. 3. Führen Sie die Datei transformation.bat aus. Aus dem XML-Quelldokument wird ein neues XML-Ausgabedokument mit dem Namen pumpe.xml erzeugt. Dieser Prozess kann mehrere Stunden in Anspruch nehmen. Nach der Fertigstellung kopieren Sie das XML-Ausgabedokument pumpe.xml in den Ordner daten der Web-Applikation. Abb. 132: Ordner Transformation Seite 114

125 Bedienungsanleitung 4. Führen Sie die Datei transformation_appcache.bat aus, um eine Cache-Manifest- Datei aus dem Dokument pumpe.xml zu erzeugen. Das Ergebnis ist eine cache.manifest-datei. Öffnen Sie die Cache-Manifest-Datei mit Rechtsklick auf Bearbeiten und tragen Sie das aktuelle Datum und die Versionsnummer ein. Anschließend kopieren Sie die Datei in den Ordner der Web-Applikation. Dieser Schritt ist nur notwendig für die Web-Applikation mit Cache-Funktion. 5. Führen Sie auf die Datei transformation_bilder.bat aus, um die Ressourcen der Produktbilder aus dem Ausgabedokument pumpe.xml in der Textdatei bilder.txt auszugeben. Öffnen Sie die Textdatei und den Ordner streams vom Datenexport. Kopieren Sie den Inhalt der Textdatei in das Feld streams durchsuchen (siehe Abbildung 133). Es werden nur die Bilddateien aus der Textdatei angezeigt. Kopieren Sie die Bilddateien in einen neu erstellten Ordner bilder. Abb. 133: streams durchsuchen 6. Öffnen Sie die Bildsoftware IrfanView. Wählen Sie in der Menüleiste Datei den Punkt Batch(Stapel)-Konvertierung/Umbenennung aus. Im Bereich Optionen für Batch-Konvertierung wählen Sie die Schaltfläche Optionen und nehmen folgende Einstellungen vor (siehe Abbildung 134). Seite 115

126 Bedienungsanleitung Abb. 134: IrfanView: Optionen Als Nächstes klicken Sie auf die Schaltfläche Setzen, um die Bildgröße der Ausgangsdateien für die Web-Applikation anzupassen. Nehmen Sie die Einstellungen, welche in der Abbildung 135 zu sehen sind, vor. Abb. 135: IrfanView: Bildeinstellungen Klicken Sie OK. Seite 116

127 Bedienungsanleitung Anschließend werden alle Bilddateien im Auswahlfenster ausgewählt und über die Schaltfläche Hinzufügen hinzugefügt. Legen Sie ein Zielverzeichnis bilder fest, indem die Bilder gespeichert werden können. Danach folgt die Konvertierung über die Schaltfläche Starten. Abb. 136: IrfanView: Batch/Stapel-Konvertierung 7. Kopieren Sie die konvertierten Produktbilder (vom Ordner bilder) in den Ordner streams der Web-Applikation. 8. Laden Sie die webapp auf einen Web-Server hoch. Seite 117

128 Auswertung 12 Auswertung 12.1 Ergebnis Ziel war die Entwicklung einer Web-Applikation mit dem Schwerpunkt der Abbildung von Produktdaten auf mobilen Endgeräten. Der Nutzer kann Produktinformationen von Pumpen und Armaturen über die Menüpunkte Kategorie und Baureihe abrufen. Der Punkt Kategorie erlaubt die Filterung der Produkte nach verschiedenen Anwendungsbereichen, Anwendungsarten und Produkten. Eine direkte Auflistung aller Produkte mit Suchfunktion stellt der Punkt Baureihe zur Verfügung. Anschließend werden die Produktinformationen in Form von Produktbild, Abschnittsüberschriften, Zwischenüberschriften, Absätzen, Listen und Tabellen in der Detailseite dargestellt. Die Bedienung verhält sich wie bei einer nativen Applikation. Dazu wurde auf entsprechende Funktionen vom JavaScript-Framework jquery Mobile zurückgegriffen. Nach erstmaligem Aufruf werden die Daten im Gerätespeicher vorgehalten und ermöglichen eine Nutzung der Web-Applikation ohne bestehende Internetverbindung. Tests auf verschiedenen Gerätetypen und Betriebssystemen bestätigten die Plattformunabhängigkeit der Web-Applikation (siehe Abbildung 137, Abbildung 138). Abb. 137: Auswahl Anwendungsbereiche: HTC (Android), Samsung (Windows Phone 7) und Apple iphone 4 (ios 6) von links Seite 118

129 Auswertung Abb. 138: Produktdetailseite: HTC (Android), Samsung (Windows Phone 7) und Apple iphone 4 (ios 6) von links Die folgende Auflistung zeigt die Kapitel, die nach der Erstellung durch das XSL- Stylesheet in der Web-Applikation verwendet werden können. Die nicht genannten Kapitel wurden manuell aus dem XML-Dokument entfernt. Sie müssen weiterhin untersucht werden, um fehlende Inhalte durch neue Abfragen im XSL- Stylesheet zu ergänzen und Fehler zu beheben. Aktuell stehen zehn Kapitel aus der Katalogpreisliste für die Web-Applikation zur Verfügung: Entwässerung / Schmutzwasser Hebeanlagen / Pumpschächte Hauswasserversorgung / Schwimmbad Regenwassernutzung Inline-Pumpen Überwachung Absperrventile Regel- und Messventile Rückschlagamaturen und Schmutzfänger Absperrklappen Seite 119