XML und Datenbanken. Web Services Transaktionen. Native oder Relationale XML-Datenspeicher? Komplexe Dienste orchestrieren. mit CD! 2.

Transkript

1 XML magazin & WEB SERVICES Deutschland 9,80 Österreich 10,20 Luxemburg 11,25 Schweiz SFr 19,20 >> Interview: Cocoon-Erfinder Stefano Mazzocchi 2.02 XML und Datenbanken Native oder Relationale XML-Datenspeicher? Web Services Transaktionen Komplexe Dienste orchestrieren REST oder SOAP? Streit der Web Services- Architekturen XSLT 2.0 und XPath 2.0 Neue W3C-Entwürfe im Detail Enterprise Code-Generatoren XSLT Stylesheets und objektorientierte Patterns im Team EDI und XML Technologien und Produkte mit CD!

2 Massenspektren mit SVG <xmlpraxis> Technologie-Mix MSpec::SVG Generierung von Massenspektren im SVG-Format In diesem Artikel soll eine Anwendung vorgestellt werden, die die Generierung von Massenspektrengrafiken ausgehend von in einer Datenbank abgelegten Informationen ermöglicht, und dabei verschiedene frei verfügbare Standards und Technologien zusammenführt. Der Weg zu SVG wird durch das Zusammenspiel von PHP, MySQL, XML und XSLT geebnet und auch HTML, CSS und JavaScript tragen zu einem echten Technologie-Mix bei. von Thomas Meinike Die genannte Mixtur aus client- und serverseitigen Technologien spiegelt einen Teil des Spektrums der Ausbildung von Technischen Redakteurinnen und Redakteuren an der Fachhochschule Merseburg wider. Dabei sind obligatorische Themen (HTML/CSS, XML/XSLT) und in Form von Wahlpflichtfächern angebotene Inhalte (JavaScript, PHP, MySQL) vertreten. Da die genannten Standards und Technologien einerseits eher selten zusammengeführt werden und es andererseits an anschaulichen Anwendungen mangelt, entstand die Anwendung MSpec::SVG. Die inhaltliche Grundidee stammt aus früheren Aktivitäten des Autors im naturwissenschaftlichen Bereich. Den technischen Hintergrund bildet ein so genannter LAMP-Server (Linux, Apache Webserver, MySQL-Datenbank, PHP) mit XSLT- Unterstützung (Apache-Modul mod_xslt bzw. XSLT-Prozessor Sablotron). PHP wird in einer Version ab 4.1 erwartet, alle anderen Komponenten müssen funktionieren, aber nicht unbedingt auf dem jeweils letzten Versionsstand sein. Was sind Massenspektren? Die Massenspektrometrie ist eine Methode der chemischen Analytik. Im Vakuum werden die Proben mittels Elektronenstößen ionisiert und die daraus resultierenden Quellcode Den Quellcode zum Artikel finden Sie auf der beiliegenden CD. Bruchstücke hinsichtlich Massenzahl und relativer Intensität vermessen. Es entstehen typische Linienspektren, die letztlich Rückschlüsse auf die vorhandenen Substanzen ermöglichen. Massenspektren von reinen Stoffen werden in umfangreichen Datensammlungen dokumentiert und auch in Form von Softwarebibliotheken eingesetzt. Ein mehrbändiges Werk wird vom Mass Spectrometry Data Center in Cambridge herausgegeben [1]. Tabelliert werden darin die Massenzahlen und die jeweiligen Intensitäten. Daraus lassen sich relativ leicht grafische Darstellungen erzeugen. XML ist der Weg und das Ziel Als Zielformat bieten sich die in XML formulierten Scalable Vector Graphics (SVG) geradezu an [2-4]. Auf dem Weg dorthin werden in einer MySQL-Datenbank vorliegende Datensätze in einer temporären XML-Struktur gespeichert und mittels XSLT wahlweise in Grafiken oder eine tabellarische Ausgabe (HTML) überführt (siehe Abb. 1). In der mitgelieferten MySQL-Beispieltabelle msdata sind neun Datensätze zu den Verbindungen mit der Summenformel C4H8 (6 Einträge) bzw. C6H5ClO (3 Einträge) enthalten. Die Tabellenstruktur wird durch die Felder id (SMALLINT, AUTO_ INCREMENT), formel (VARCHAR(50)), verbindung (VARCHAR (255)) und daten (TEXT) gebildet. Abbildung 2 (siehe Seite 70) zeigt einen Ausschnitt der Beispieldaten. Die eigentlichen Datensätze sind in der Form Massenzahl_1 Intensität_1... Massenzahl_n Intensität_n eingetragen, was sich bei der späteren Verarbeitung als vorteilhaft erweist. Nachdem man auf der Startseite des Projekts eine Summenformel eingegeben und den Button SUCHEN betätigt hat, wird das PHP-Skript verbind.php aufgerufen, welches mit einer SQL-Abfrage alle zugehörigen Verbindungen ermittelt und in einer Auswahlliste präsentiert (siehe Abb. 3 auf Seite 70): <?php $abfrage= SELECT verbindung FROM msdata WHERE formel= $suchtext ;?> Nun können eine konkrete Verbindung ausgewählt und über den Button SPEKTRUM der jeweilige Datensatz ermittelt werden. Diese SQL-Abfrage und weitere Aktionen werden durch daten.php gesteuert: <?php $abfrage= SELECT daten FROM msdata WHERE verbindung= $verbindung ; $ergebnis=mysql_query($abfrage,$dbref); $zeile=mysql_fetch_array($ergebnis); $daten=$zeile[ daten ]; $datensatz=explode(,$daten);?> Die PHP-Funktion explode() trennt die Daten anhand des Trennzeichens und gibt ein Datenfeld (Array) zurück. Es folgt die Speicherung des aktuellen Datensatzes in 68

3 <xmlpraxis> Massenspektren mit SVG Listing 1 <?php // XML-Daten erzeugen $xmlfile= mspec.xml ; $xmlout=fopen($xmlfile, w ); flock($xmlout,2); $info=date( d.m.y H:i:s,time()); $out= <?xml version=\ 1.0\ encoding=\ ISO \?> <!DOCTYPE mass-spectrum SYSTEM \ mspec.dtd\ > <mass-spectrum>\n\n ; $out= <dataset compound-name=\.$verbindung. \ sum-formula=\.$formel. \ info=\.$info. \ scale=\.$scale. \ trans=\.$trans. \ >\n\n ; for($i=0;$i<count($datensatz);$i+=2) { $out= <data>\n ; $out=$out. <mass>.$datensatz[$i]. </mass>\n ; $intensity=$datensatz[$i+1]/10; $out=$out. <intensity>.$intensity. </intensity>\n ; $out=$out. </data>\n\n ; } $out= </dataset> </mass-spectrum>\n ; flock($xmlout,3); fclose($xmlout);?> Abb. 1: Prinzip der Verarbeitung in MSpec::SVG. einer temporären XML-Struktur. Der in Listing 1 gezeigte PHP-Code speichert diese in der Datei mspec.xml. Die Struktur dieser XML-Dokumente wird durch die Document Type Definition mspec.dtd vorgegeben (Listing 2). Die Nutzdaten wurden den Elementen mass und intensity zugeordnet, die ihrerseits Kindelemente von data sind. Das Element dataset umschließt die vorhandenen Datensätze und besitzt einige Attribute, die zur späteren Erzeugung der Ausgabedaten benötigt werden. Die Attribute compoundname und sum-formula korrespondieren mit den VARCHAR-Einträgen der Datenbanktabelle, während info Datum und Uhrzeit der Verarbeitung enthält. Zusätzlich sind die Attribute scale und trans vorhanden, mit denen Einfluss auf die SVG- Darstellung genommen werden kann. Jedes temporäre XML-Dokument hat also den in Listing 3 gezeigten Aufbau. Weiterverarbeitung mittels XSLT Die beschriebene XML-Struktur bildet die Grundlage zur Ausgabe des gewünschten Listing 2 <?xml version= 1.0 encoding= ISO ?> <!-- DTD zu mspec.xml --> <!ELEMENT mass-spectrum (dataset)> <!ELEMENT dataset (data+)> <!ELEMENT data (mass,intensity)> <!ELEMENT mass (#PCDATA)> <!ELEMENT intensity (#PCDATA)> <!ATTLIST dataset compound-name CDATA #REQUIRED sum-formula CDATA #REQUIRED info CDATA #IMPLIED scale CDATA #IMPLIED trans CDATA #IMPLIED > Listing 3 <?xml version= 1.0 encoding= ISO ?> <!DOCTYPE mass-spectrum SYSTEM mspec.dtd > <mass-spectrum> <dataset compound-name=... sum-formula=... info=... scale=... trans=... > <data> <mass>...</mass> <intensity>...</intensity> </data> <!-- weitere Datensaetze --> </dataset> </mass-spectrum> Endformats, wobei per Radio Button SVG oder HTML zur Wahl stehen. Im bereits auszugsweise zitierten PHP-Skript daten. php ist weiterer Code zur Ansteuerung des auf dem Webserver installierten XSLT-Prozessors enthalten (Listing 4). Die Umformung der XML-Quelldaten aus mspec.xml erfolgt durch die XSL-Stylesheets mspec_svg.xsl bzw. mspec_html. xsl. Da die auf der Heft-CD vorliegende HTML-Vorlage an dieser Stelle wohl keiner besonderen Erläuterung bedarf, soll nur auf die SVG produzierende Vorlage eingegangen werden. Listing 5 enthält nur den für die Transformation relevanten Code. Das vollständige Stylesheet enthält darüber hinaus eine Reihe von xsl:comment-aufrufen, die das jeweilige Ausgabedokument um Kommentare ergänzen. Wichtig ist hier zunächst die Angabe der Ausgabemethode xml bei xsl:output sowie weiterer SVG-spezifischer Deklarationen. Im sich anschließenden xsl: template-block werden nach dem Festlegen von externen JavaScript- und CSS- Referenzen für das SVG-Ergebnisdokument die Koordinatenachsen und deren Beschriftung definiert. Die Erzeugung der Spektrallinien über das SVG-Element line bildet neben der Ausgabe der beschreibenden Texte den Kern dieses Stylesheets. Innerhalb einer xsl:for-each- Kontrollstruktur werden nacheinander alle Linien abgearbeitet und die nötigen Attribute x1, x2 und y2 mit xsl:attribute eingebaut und mit Werten belegt (y1 bleibt auf dem festen Wert 550). Die zur maximalen Intensität gehörende Linie (100%- Peak) ist rot hervorgehoben, während alle anderen Linien blau dargestellt werden. Dazu dienen entsprechende CSS-Definitionen (Klassen). Die aus dem temporären XML-Dokument generierte SVG-Struktur wird ebenfalls im lokalen Dateisystem des Webservers als mspec.svg abgespeichert und über das object-element in ein HTML- Dokument eingebunden und an den Browser ausgeliefert. Zur Vermeidung von Pro- 69

4 Massenspektren mit SVG <xmlpraxis> Abb. 2: Ansicht des Inhaltes der Datenbanktabelle msdata mit phpmyadmin Abb. 3: Summenformel-Suchmaske und gefundene Verbindungen blemen durch lokales Caching der SVG- Grafiken wurden HTTP-Header im PHP- Skript sowie META-Tags im Ausgabe- HTML-Dokument eingesetzt. Allerdings war dennoch zu beobachten, dass der Internet Explorer im Gegensatz zu Opera, Netscape 6.x/Mozilla neu generierte Grafiken nicht darstellte und stattdessen ältere Dateiversionen aus dem Cache holte. Dieses Verhalten konnte schließlich durch Anhängen des aktuellen Zeitstempels als Parameter an den Dateinamen im data-attribut des <object>-tags verhindert werden. Abbildungen 4 und 5 (siehe Seite 72) zeigen die visuellen Ergebnisse der Transformation nach SVG sowie HTML. Zur SVG-Anzeige wird auf der Client-Plattform der Adobe SVG Viewer 3.0 vorausgesetzt [5]. Zu beachten ist noch, dass die hier verwendete Vorlage nur die Massenzahlenskala bis 150 abdeckt, was jedoch für die Beispiele ausreicht. In der Online-Version der Anwendung [6] werden bei Bedarf alternative XSL-Vorlagen für höhere Massenzahlenbereiche verwendet. An dieser Stelle sollte angemerkt werden, dass Mozilla-Browser zurzeit leider nur bis zur Preview-Version mit dem aktuellen Adobe-Plugin zusammenarbeiten, da in den 1.0 Release Candidates und in der finalen Version 1.0 ein noch unfertiges, aber dennoch von Adobe verwendetes API geändert wurde. Reproduzierbare Abstürze beim SVG-Zugriff sind die traurige Folge. Ein Workaround besteht in der Verwendung von <iframe src=... > statt <object data=... > zur SVG-Einbettung nach einer geeigneten Browserabfrage [7]: $ua=$http_server_vars[ HTTP_USER_AGENT ]; if(strstr($ua, Gecko ) &&!strstr($ua, rv:0. )) { // Ausgabe von HTML-Code fuer iframe } else { // Ausgabe von HTML-Code fuer object } Zusatzfunktionen Etwas Komfort wird durch zusätzliche JavaScript-Funktionen erzielt. Innerhalb der SVG-Dokumente arbeiten die Funktionen ShowTooltip() und HideTooltip(), die beim Berühren der Linien mit dem Mauszeiger so genannte Tooltips mit dem jeweiligen Wertepaar in der Form [m/z=..., I=...%] ein- bzw. ausblenden (siehe auch Abb. 4). Damit lassen sich vor allem kleinere Peaks schnell erfassen. Details zu Aufbau und Anwendung dieser Funktionen werden unter [8] behandelt. Clientseitig wird ebenfalls JavaScript eingesetzt. Zur optimalen Ausgabe der Grafiken werden die Maße des Ausgabefensters (= unterer Teil des Framesets) ausgelesen und an das PHP-Skript daten.php über hidden-formularfelder weiter gereicht. Aus diesen Daten werden Parameter für die Skalierung bzw. Verschiebung der SVG-Inhalte berechnet und über die bereits genannten Attribute scale und trans in den XSLT-Prozess einbezogen und letztlich auf das gesamte Koordinatensystem als Gruppierung angewendet: <g transform= scale(...) translate(...,...) > <!-- Inhalt der Grafik --> </g> Listing 5 <?xml version= 1.0 encoding= ISO ?> <xsl:stylesheet version= 1.0 xmlns:xsl= > <!-- mspec_svg.xsl --> indent= yes /> <xsl:template match= / > <xsl:output method= xml doctype-public= -//W3C//DTD SVG 1.0//EN doctype-system= encoding= ISO version= 1.0 media-type= image/svg+xml <!-- HTTP-Basispfad fuer die externen CSS- und JavaScript-Dateien --> <!-- lokal z. B. --> <xsl:variable name= basepath > </xsl:variable> <!-- PI fuer externes Stylesheet erzeugen --> <xsl:processing-instruction name= xml-stylesheet >href= <xsl:value-of select= 70

5 <xmlpraxis> Massenspektren mit SVG Fortsetzung Listing 5 $basepath />mspecsvg.css type= text/css </xsl:processing-instruction> <svg xmlns= xmlns:xlink= > <title>massenspektrum in SVG</title> <desc>darstellung der Spektrallinien auf der Basis von XML-Daten</desc> <defs> <!-- Referenzierung der externen JavaScript-Funktionen --> <script xlink:href= {$basepath}mspecsvg.js type= text/javascript /> </defs> <g> <xsl:attribute name= transform > <xsl:text>scale(</xsl:text><xsl:value-of select= mass-spectrum/dataset/@scale /> <xsl:text>) </xsl:text><xsl:text>translate(</xsl:text><xsl:value-of select= massspectrum/dataset/@trans /><xsl:text>,0)</xsl:text> <!-- Achsen zeichnen --> <polyline points= 100,50 100, ,550 /> <!-- x-achsenteilung --> <line x1= 100 y1= 550 x2= 100 y2= 560 /> <!... > <line x1= 850 y1= 550 x2= 850 y2= 560 /> <!-- x-achsenbeschriftung --> <text x= 420 y= 600 class= achsen >Massenzahl [m/z]</text> <text x= 97 y= 575 >0</text> <! > <text x= 840 y= 575 >150</text> <!-- y-achsenteilung --> <line x1= 90 y1= 550 x2= 100 y2= 550 /> <!... > <line x1= 90 y1= 50 x2= 100 y2= 50 /> <!-- y-achsenbeschriftung --> <text x= 70 y= 300 class= achsen transform= translate(-250, 410) rotate(-90) > Intensität [%]</text> <text x= 77 y= 555 >0</text> <! > <text x= 64 y= 55 >100</text> <!-- Ueberschrift --> <text x= 100 y= 30 class= titel > Massenspektrum von <xsl:value-of select= mass-spectrum/dataset/@compound-name /> <xsl:if test= mass-spectrum/dataset[@sum-formula!= ] > (<xsl:value-of select= massspectrum/dataset/@sum-formula />)</xsl:if> </text> <!-- Spektrum generieren --> <g onmouseout= HideTooltip() > <xsl:for-each select= mass-spectrum/dataset/data > <line y1= 550 > <xsl:attribute name= x1 > <xsl:value-of select= 100+5*number(mass) /> <xsl:attribute name= x2 > <xsl:value-of select= 100+5*number(mass) /> <xsl:attribute name= y2 > <xsl:value-of select= 550-5*number(intensity) /> <xsl:choose> <xsl:when test= number(intensity) = 100 > <xsl:attribute name= class >rot </xsl:when> <xsl:otherwise> <xsl:attribute name= class >normal </xsl:otherwise> </xsl:choose> <xsl:attribute name= onmouseover >ShowTooltip(evt, m/z=<xsl:value-of select= mass />, I=<xsl:value-of select= intensity />% ) </line> </xsl:for-each> <a xlink:href= {$basepath} target= _top > <text id= textlink x= 100 y= 600 class= achsen style= font-size: 10px; fill: #00C onmouseover= TextHover( textlink, #FF0000, underline ) onmouseout= TextHover( textlink, #0000CC, none ) >MSpec::SVG</text> </a> <text x= 162 y= 600 class= achsen style= font-size: 10px; fill: #00C > <xsl:text> </xsl:text><xsl:value-of select= mass-spectrum/dataset/@info /> </text> </g> </g> <!-- Rechteck und Textfeld fuer Tooltips --> <rect id= ttr x= 0 y= 0 rx= 5 ry= 5 width= 100 height= 18 style= visibility: hidden /> <text id= ttt x= 0 y= 0 style= visibility: hidden >dyn. Text</text> </svg> </xsl:template> </xsl:stylesheet> 71

6 Massenspektren mit SVG <xmlpraxis> Abb. 4: Ansicht der SVG-Ausgabe im Browser Abb. 5: Ansicht der HTML-Ausgabe im Browser Ausblick Mit der Anwendung MSpec::SVG kann auf der Basis der mitgelieferten Quellcodes über einen lokalen Webserver und den Aufruf von oder direkt online unter [6] experimentiert werden. Externe Nutzer können wie im mitgelieferten Beispielprojekt nur auf Module von MSpec::SVG +/- Dateiname Funktion [+] ausgabe.htm Ausgabeteil des Framesets (unten). [+] daten.php PHP-Skript zur Steuerung der Ausgabe von SVG bzw. HTML. [-] db.php Include-Datei mit den Verbindungsinformationen zum Datenbankserver. [+] index.htm Startdokument zum Aufbau des Framesets. [-] mspec.sql SQL-Dump zum Anlegen der Datenbank mspec und der Tabelle msdata z. B. mit mysql -h localhost -u username -p < mspec.sql oder mit phpmyadmin. [+] mspec.css Stylesheet-Definitionen für die HTML-Seiten. [-] mspec.dtd Document Type Definition für die temporären XML-Dokumente. [+] mspec.gif Bild mit dem Prinzip der Verarbeitung (erscheint auf der Startseite). [+] mspec.js JavaScript-Funktionen für die HTML-Seiten. [+] mspec.svg SVG-Platzhalterdatei zur Ablage auf dem Webserver (Schreibrechte erforderlich). [-] mspec.xml XML-Platzhalterdatei zur Ablage auf dem Webserver (Schreibrechte erforderlich). [+] mspecsvg.css Stylesheet-Definitionen für die generierten SVG-Dokumente. [+] mspecsvg.js JavaScript-Funktionen für die generierten SVG-Dokumente. [-] mspec_svg.xsl XSL-Stylesheet zur Ausgabe von SVG. [-] mspec_html.xsl XSL-Stylesheet zur Ausgabe von HTML. [+] suchen.htm Suchmaske zur Eingabe der Summenformeln, Startdatei des Framesets (oben). [+] verbind.php PHP-Skript zur Verarbeitung der Suchanfragen. Hinweis: Unterhalb des DocumentRoot-Verzeichnisses des Webservers müssen die mit [+] gekennzeichneten Dateien liegen. Alle anderen Dateien können/sollten in einem nicht über HTTP zugänglichen Webserver-Pfad abgelegt werden, wobei sich die Änderung einiger Pfadangaben in den PHP-Skripts erforderlich macht. die Daten der Verbindungen mit den Summenformeln C4H8 und C6H5ClO zugreifen. Die Bedeutung der einzelnen Dateien wird im Kasten Module von MSpec::SVG näher erläutert. Im Lehrbetrieb hat sich die Arbeit an diesem Projekt bereits ausgezahlt. Studierende der Technischen Dokumentation werden zur tieferen Beschäftigung mit Webtechnologien angeregt und angehende Chemieingenieure können die Anwendung im Rahmen von Praktika zur chemischen Analytik ebenfalls nutzen. Dr. Thomas Meinike besitzt langjährige Erfahrung als Programmierer, Autor und EDV-Dozent. Seit 1997 ist er als Lehrkraft im Studiengang Kommunikation und Technische Dokumentation im Fachbereich Elektrotechnik, Informationstechnik und Medien an der FH Merseburg auf den Gebieten Online-Dokumentation und Website-Entwicklung tätig. Links & Literatur [1] Eight peak index of mass spectra, Mass Spectrometry Data Center, 4. ed., Cambridge, [2] W3C-Dokumente zu SVG: [3] M. Knobloch, XML in Farbe!, XML & Web Services Magazin 1.02, S [4] T. Meinike, Grafik-Tagwerk, Internet Professionell 7/2002, S [5] Adobe SVG Viewer: main.html [6] MSpec::SVG online: ktd.et.fh-merseburg.de/~tm/mspec/ [7] Adobe SVG-Viewer und Mozilla 1.0: [8] Tooltip-Funktionen für SVG: 72