XML für alle ?

Alle genannten Marken- und Produktbezeichnungen sind Warenzeichen der entsprechenden Inhaber. Keine Haftung für hier vorgestellte Verfahren. Hier wiedergegebene Verfahren und Methoden werden ohne Rücksicht auf die Patentlage dargestellt. Trotz sorgfältiger Arbeit können Fehler nicht ausgeschlossen werden. Scripte sind teilweise verkürzt. Es gilt ausschließlich deutsches Recht. Copyright © 11/2002 Kristof Lipfert, Lipfert & Malik GbR Düsseldorf webdesign@lipfert-malik.de, Alle Rechte vorbehalten einschließlich Vervielfältigung, Übersetzung, elektronische Speicherung und Verabeitung. Veröffentlichung, auch auszugsweise, nur mit schriftlicher Genehmigung des Autors Kontakt. (Arbeitsumgebung:) Scripte und Methoden wurden i.d.R., um übliche Browser zu berücksichtigen, u.a. mit dem Microsoft Internet Explorer 6 und Mozilla 1.2 getestet.

Einführung

Bereits 1998 ist vom W3C die XML-Spezifikation verabschiedet worden. Trotzdem sind XML-Dokumente im Internet eher unüblich. Sicher, es gibt auch WML-Seiten, offenbar werden auch andere Sprachen als HTML, dazu mit XML-basierter Struktur, im Web genutzt, aber wie steht es um die Möglichkeiten XML in Verbindung mit üblichen Browsern sinnvoll clientseitig zu nutzen?

Ziel

Gegen eine clientseitige Nutzung spricht bekanntlich die schlechte Performance und die ungenügende Unterstützung durch die gebräuchlichen Browser. Gerade diese beiden Punkte aber gilt es zu überprüfen. Ein für mich wichtiger Vorteil von XML-Dokumenten ist, und soll bleiben, die flexible Nutzung, z.B. die vielseitige Auswertung einer Datenquelle. Denkbar auch die Verbindung mehrerer Datenquellen in bzw. durch eine dynamisch erstellte Auswertung. Daraus ergibt sich als Sollanforderung, dass die Trennung von Datenbank und Auswertung sowie Formatierung möglich sein muss. Auch die serverseitige Aufbereitung oder Konvertierung in HTML ist, trotz der schon genannten möglichen Vorteile in den Bereichen Zugänglichkeit und Performance, erstmal nicht beabsichtigt, weil eine Änderung der Abfrage und das Nutzen oder Darstellen in anderer Struktur aller Informationen des ursprünglichen Dokumentes nicht mehr möglich wäre.

Situation

Was aber können die üblichen Browser, und was ist möglichst bei allen Browsern gleich realisierbar? Und ist es möglich, proprietäre XHTML-ähnliche Verfahren aussen vor zu lassen, und möglichst zukunftssicher vorzugehen?

Data Islands

Zwar auf den ersten Blick einfach anwendbar, aber nicht konform. Der Vollständigkeit halber hier noch eine andere Methode, sog. Entities, um XML-Dateien zusammenzuführen:

Bei der weiteren Analyse der Fähigkeiten üblicher Browser sind, gewissermassen als Mainstream, die Internet-Explorer 5, 5.5 und 6 von Microsoft, sowie die Netscape 7, evtl. 6, bzw. Mozilla zu berücksichtigen. Mozilla ist kostenlos, gilt als leistungsfähig, und ist für viele Plattformen verfügbar.

Gemeinsamkeiten

Als Zugriffs auf die XML-Dokumente bietet sich bei den weitest verbereiteten Browsern das XSL-Stylescheet als valider Weg an. Mit Hilfe von XSL/XSLT können XML-Daten in HTML transformiert werden, und zwar bei entsprechender Ausstattung, z.B. MSXML4 XML-Parser und Transformation Engine, natürlich auch serverseitig um Browserprobleme zu vermeiden, die Anweisungen könnten per PHP oder ASP erfolgen.

Die aber beabsichtigte vielseitigere clientseitige Nutzung von XSL unterstützt der Internet Explorer, und auch der XML-fähige Mozilla kommt damit klar. Somit ist erstmal eine hinreichend große Basis an Ausgabemöglichkeiten gegeben, Unterschiede der XML-Unterstützung zwischen den verschiedenen Versionen des IE werden erstmal nicht als Hindernis betrachtet. So hat der IE 5 ein MSXML Version 2 Modul, der IE 5.5 Version 2.5, und IE 6 Version 3 als XML-Parser, dabei ist die Arbeitsweise zunehmend standardkonformer geworden.

XSLT

Nun sind bereits zwei, eigentlich drei Dateien nötig, XML, XSL und DTD, die "document type definition", deren Angaben zwar als redundant betrachtet werden können, aber als Informations- und Kontrollwerkzeug sinnvoll sind.

Die Verbindung von XSL und XML erfolgt über eine Einbindung der Styleangaben in die XML-Datei:

Realisation Datenbank

Nun ist aber meine anfangs gestellte Forderung der Trennung von Daten und Formatierung bzw. Abfrage nicht richtig erfüllt. Es soll ja nicht für eine andere Abfrage eine Kopie der Datenbank erstellt, und mit einer neuen Styleeinbindung versehen werden, sondern es soll ggf. mehrfach von verschiedenen Selektionen oder Sichten auf einen geschützten Datensatz zugegriffen werden.

Den Weg das Konzept mit einer Art Datenimport doch durchzusetzen ermöglicht die bei select bzw. apply-templates select verwendbare Funktion document.(). Mit dieser Methode lässt sich aus der Styledatei, die ja die spezifische Struktur der jeweiligen Abfrage oder Sicht beschreiben soll, eine XML-Datei einbinden.

Einbindung

Somit benötigen wir zu jeder Abfrage eine Style und eine XML-Datei. Die kurze zuerst aufgerufenen XML-Datei bindet die XSL ein, die wiederum die eigentliche XML mit den Daten einbindet. Der Inhalt der vom Browser zuerst geöffneten auswertung.xml:

Bsp XSL

Die XSL-Datei, hier geht es um XSLT-Elemente, XPath-Operatoren, XPath-Funktionen usw:

externe Daten

Die getrennte Datenbank, auf die so per verschiedener Auswertungen zugeriffen werden kann:

Beispiel Katalog

Wie gefordert werden bei diesem Beispiel mehrere, zunächst zwei, Datenquellen verbunden.

<?xml version="1.0" encoding="ISO-8859-1"?>

<KATALOG name="Koepfe">

	<STUECK>
		<NAME>Kopf Blau</NAME>
		<FUNKTION>Brosche</FUNKTION>
                <MATERIAL>925er Silber / Acryl / Safir</MATERIAL>
		<DESIGNER>Kristof Lipfert</DESIGNER>
		<JAHR>1990</JAHR>
                <AUFLAGE>47</AUFLAGE>
                <PREIS>98</PREIS>
        </STUECK>

	<STUECK>
		<NAME>Kopf Rot</NAME>
		<FUNKTION>Brosche</FUNKTION>
                <MATERIAL>925er Silber / Acryl / Rubin</MATERIAL>
		<DESIGNER>Kristof Lipfert</DESIGNER>
		<JAHR>1990</JAHR>
                <AUFLAGE>47</AUFLAGE>
                <PREIS>98</PREIS>
        </STUECK>

</KATALOG>
©

<?xml version="1.0" encoding="ISO-8859-1"?>

<KATALOG name="Vogelmotive">
	<STUECK>
		<NAME>Amadeus</NAME>
		<FUNKTION>Brosche</FUNKTION>
                <MATERIAL>925er Silber / MES / Andalusith</MATERIAL>
		<DESIGNER>Kristof Lipfert</DESIGNER>
		<JAHR>1992</JAHR>
                <AUFLAGE>49</AUFLAGE>
                <PREIS>138</PREIS>
        </STUECK>

	<STUECK>
		<NAME>Rudi</NAME>
		<FUNKTION>Brosche</FUNKTION>
                <MATERIAL>925er Silber / Bronze / Rhodolith</MATERIAL>
		<DESIGNER>Kristof Lipfert</DESIGNER>
		<JAHR>1993</JAHR>
                <AUFLAGE>49</AUFLAGE>
                <PREIS>138</PREIS>
        </STUECK>

	<STUECK>
		<NAME>Sindbad</NAME>
		<FUNKTION>Brosche</FUNKTION>
                <MATERIAL>925er Silber / Bronze / Iolith</MATERIAL>
		<DESIGNER>Kristof Lipfert</DESIGNER>
		<JAHR>1994</JAHR>
                <AUFLAGE>49</AUFLAGE>
                <PREIS>138</PREIS>
        </STUECK>

       <STUECK>
		<NAME>Agathe</NAME>
		<FUNKTION>Brosche</FUNKTION>
                <MATERIAL>925er Silber / Bronze / Rhodolith</MATERIAL>
		<DESIGNER>Kristof Lipfert</DESIGNER>
		<JAHR>1995</JAHR>
                <AUFLAGE>49</AUFLAGE>
                <PREIS>138</PREIS>
        </STUECK>
</KATALOG>

©

Gesamtkatalog

Nun wird als Beispiel ein Gesamtkatalog gebildet, die Struktur der Unterkataloge bleibt zunächst erhalten, die Daten werden auszugsweise gezeigt. Zuerst die Darstellung per XSL bzw. unter Nutzung der Browser-eigenen XSL-Parser, dabei können die Browser Internet Explorer ab 6 und Netscape ab 6.2 /Mozilla den gleichen XSL- und XML-Code verarbeiten.


<!ELEMENT KATALOG (STUECK)+>
<!ATTLIST KATALOG name CDATA #REQUIRED>
<!ELEMENT STUECK  (NAME, FUNKTION, MATERIAL, DESIGNER, JAHR, AUFLAGE, PREIS)>
<!ELEMENT NAME (#PCDATA)>
<!ELEMENT FUNKTION (#PCDATA)>
<!ELEMENT MATERIAL (#PCDATA)>
<!ELEMENT DESIGNER (#PCDATA)>
<!ELEMENT JAHR (#PCDATA)>
<!ELEMENT AUFLAGE (#PCDATA)>
<!ELEMENT PREIS (#PCDATA)>
©

Darstellung per XML / XSL

Aufgerufen wird zunächst eine XML-Datei, welche die zugehörige XSL-Datei mit den Stylenagaben nachlädt:

erfordert IE 6 oder Netscape ab 6.2 / Mozilla


 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

   <xsl:template match="/auswertung">
       <html><head>
        <title>Auswertung Katalog</title>

       </head><body style="font-family:Arial, Verdana, sans-serif">
      <h1>Katalog</h1>
<ol>
          <xsl:apply-templates select="document('katalog1.xml')"/>
 <xsl:apply-templates select="document('katalog2.xml')"/>
</ol>
       </body></html>
    </xsl:template>

    <xsl:template match="KATALOG">
     <br /><li><xsl:value-of select="@name" />:</li>
       <ul style="list-style:none"> 
 <xsl:for-each select="STUECK">
 <li style="color:blue;background-color:silver; 
                    line-height:120%;width:200px;border:1px solid white;">
<xsl:value-of select="NAME" />,<br />
 <small> <xsl:value-of select="MATERIAL" /></small></li>
 </xsl:for-each>
</ul>
  </xsl:template>

 </xsl:stylesheet>
©

Darstellung per XML / DOM

Neben der gezeigten Methode ist es auch möglich, XML-Daten per JavaScript entsprechend dem DOM einzubinden, bzw. per ActiveX bei den Microsoft Browsern. Was zunächst eine umfassende Cross-Browser-Lösung sein könnte, überzeugt aber nicht unter allen Browser, zumal die Abhängigkeit vom aktivierten Scripting nachteilig sein kann. Als präsentable Lösung für die Internet-Explorer einschliesslich IE5, muss die Variante bei der Attribut-Zuweisung noch weiter angepasst werden, um eine einheitliche Ausgabe durch die DOM-fähigen Browser NN und IE zu erhalten.

erfordert JavaScript, IE ab 5 oder Netscape ab 6.1 / Mozilla, teilweise Opera 7 per DHTML

<script type="text/javascript"><!--
var kcnt=1;
if(document.implementation&&document.implementation.createDocument)
window.onload=function(){
xml1neu=document.implementation.createDocument("", "", null);
xml2neu= document.implementation.createDocument("", "", null);
xml2neu.onload=function(){createNeu(xml2neu);}
xml1neu.onload=function(){createNeu(xml1neu);}
xml1neu.load("./katalog1.xml");
xml2neu.load("./katalog2.xml");}
else if(window.ActiveXObject&&document.getElementById)
window.onload=function(){
xml1neu= new ActiveXObject("Microsoft.XMLDOM");
xml2neu= new ActiveXObject("Microsoft.XMLDOM");
xml2neu.onreadystatechange=function (){
if(xml2neu.readyState>3&&xml2neu.parseError.errorCode==0)
createNeu('xml2neu');};
xml1neu.onreadystatechange=function (){
if(xml1neu.readyState>3&&xml2neu.parseError.errorCode==0)
createNeu('xml1neu');};
xml1neu.load("./katalog1.xml");
xml2neu.load("./katalog1.xml");}
function createNeu(xmlxneu){
var x = xmlxneu.getElementsByTagName('STUECK');
var zwp = document.createElement('DIV');
zwp.setAttribute('style','margin-left:40px;width:200px');
var neuSt = document.createElement('DIV');with(neuSt){
setAttribute('style','margin-top:20px;');
appendChild(document.createTextNode(kcnt+'. '+
xmlxneu.getElementsByTagName('KATALOG')[0].getAttribute('name')+':'));
appendChild(zwp);}
for(i=0;i<x.length;i++){
var ber = document.createElement('SPAN');
ber.setAttribute('class','ber');
for(j=0;j<x[i].childNodes.length;j++){
if(x[i].childNodes[j].nodeType>1)continue;
var conts=document.createElement('SPAN');with(conts){
setAttribute('class',x[i].childNodes[j].nodeName);
appendChild(document.createTextNode(x[i].childNodes[j].firstChild.nodeValue));}
ber.appendChild(conts);}
zwp.appendChild(ber);}
document.getElementById('dynxml').appendChild(neuSt);
kcnt++;}
//--></script>
</head>
<body>
<h1>Katalog</h1>
<div id=dynxml>
</div>
©

Für Opera 7 kann, da ja sowieso JavaScript für die hier entwickelte Lösung aktiviert sein muss, der Import der XML-Dateien z.B. über die Einbindung in Object-Tags erfolgen, hier gelingt die Umsetzung aber mit Verlust der Attribute, im konkreten Beispiel ist das name-Attribut der Kataloge dann nicht mehr verfügbar.

Immerhin ist auch so bereits eine für alle Browser ähnliche Struktur im Stylesheet möglich:

Preisliste

Das Konzept mit zwei XML-Dateien als Datenbank hier mit einer Preisliste als selektiver Auswertung. Die Startdatei katalog_preisliste.xml :

So schaut es für IE6 und Gecko-Browser per XSLT aus, wenn eine alphabetisch sortierte Preisliste aus den zwei Katalogen generiert wird:

erfordert IE6 oder Netscape ab 7 (6.2) / Mozilla

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
   <xsl:template match="/auswertung">
       <html><head>
        <title>Auswertung Katalog</title>
       </head><body style="font-family:Arial, Verdana, sans-serif">
      <h1>Preise</h1>
<ul style="list-style:none;text-align:justify"> 
<xsl:apply-templates
select="document('katalog1.xml')//KATALOG/STUECK | 
               document('katalog2.xml')//KATALOG/STUECK">
  <xsl:sort />
    </xsl:apply-templates>
</ul>
      </body></html>
    </xsl:template>
   <xsl:template match="STUECK">
  <xsl:for-each select=".">
      <li style="color:blue;background-color:silver;
      line-height:120%;width:200px;border:1px solid white;text-align:right">
   <div style="float:left;width:140px;text-align:left">
<xsl:value-of select="NAME" /> 
</div>
<xsl:value-of select="PREIS" />
</li> 
</xsl:for-each>
  </xsl:template>
</xsl:stylesheet>
©

Opera DHTML

Der Opera-Browser beinhaltet -wie übrigens auch der unter Linux anzutreffende Dateibrowser Konqueror- keinen XSLT-Parser, kann aber XML oder XHTML. Für Opera, der z.B. laut webhits [1]

unter 1% Verbreitung aufweist, ist der einfachste Weg zur Darstellung hier erstmal eine Einbindung per object oder iframe, danach sind immerhin alle Daten z.B. auch für den älteren Opera 5 als Rohtext verfügbar. .

Um Opera weiter mit den Möglichkeiten des Browsers selbst zu unterstützen, müsste statt XSL eine CSS-Datei zur Formatierung eingesetzt werden.

Opera beherrscht neben XML oder XHTML mit der Version 7 auch grundlegendes DHTML. So habe ich aus den oben gezeigten Lösungen für Opera eine DHTML-Variante weiterentwickelt, die hier sogar die Sortierung der verbundenen XML-Dateien umsetzt.


<html>
<head>
<style>
body {font-family:Arial, Verdana, sans-serif}
#dynxml{width:200px;height:auto;margin-left:50px;}
STUECK{display:block;color:blue;background-color:silver;
line-height:120%;border:1px solid white;}
NAME{width:140px;}
PREIS{width:50px;text-align:right;float:right;}
FUNKTION,MATERIAL,DESIGNER,AUFLAGE,JAHR{display:none}
</style>
<script type="text/javascript">
document.write('<style>iframe{visibility:hidden}</style>');
function xmlin(){
var dyn=document.frames[0].document.body.innerHTML+
document.frames[1].document.body.innerHTML;
document.getElementById("dynxml").innerHTML="<STUECK>"+
String(dyn).split("</STUECK>").sort().join("</STUECK>")+"</STUECK>";
}
</script>
</head>
<body onLoad="xmlin();">
<h1>Preise</h1>
<div id=dynxml>
<iframe id=kat1 src=katalog1.xml></iframe>
<iframe id=kat2 src=katalog2.xml></iframe>
</div>
</body>
</html>
©

IE 5

Der Zugriff zu den Datenbanken gelingt für den Internet Explorer 5 mittels der bereits vorgestellten proprietären Methode der Data Islands recht gut. Die alphabetische Sortierung einer Gesamtdatenbank ist hier nicht möglich, und die Performance mag auch etwa schlechter sein, trotzdem ist auch für den IE 5 eine nahezu vollständige Umsetzung der Vorgaben möglich.

<html>
<head>
<style>
.name{color:blue;background-color:silver;
                   line-height:120%;width:140px}
.preis{color:blue;background-color:silver;
    line-height:120%;width:60px;text-align:right}
table{margin-left:50px;}
td{border:1px solid white;}
td.name{border-right:0px;}
td.preis{border-left:0px;}
</style>
</head>
<body style="font-family:Arial, Verdana, sans-serif;">
      <h1>Preise</h1>
<xml id="kat1" src="katalog1.xml"></xml>
<xml id="kat2" src="katalog2.xml"></xml>
<table border="0" datasrc="#kat1" datafld="STUECK" cellpadding=0 cellspacing=0>
<tr>
<td class=name>
<span datafld="NAME"></span></td>
<td class=preis>
<span datafld="PREIS"></span></td>
</tr>
</table>
<table border="0" datasrc="#kat2" datafld="STUECK" cellpadding=0 cellspacing=0>
<tr>
<td class=name><span datafld="NAME"></span></td>
<td class=preis><span datafld="PREIS"></span></td>
</tr>
</table>
</body>
</html>
©

Auch beim Internet Explorer 5 kann per DHTML nachgeholfen werden, um die alphabetische Sortierung der aus den zwei Katalogen generierten Preisliste zu erhalten.

erfordert IE

<html>
<head>
 ....
<script type="text/javascript">

window.onload=function (){
var dynih=new Array();
for(i=0;i<document.getElementsByTagName('tr').length;i++){
dynih[i]="<TR>"+document.getElementsByTagName('tr')[i].innerHTML+"</TR>";
}
document.getElementById('dynih').innerHTML="<table cellpadding=0 cellspacing=0>"+
dynih.sort().join('')+"</table>";
}

</script>
 ....
<div id="dynih">
<table 
 ....
</table>
</div>
</body>
</html>
©

SSI / NC-IE 4

Die folgende Variante auf XML-Daten zuzugreifen benötigt minimale serverseitige Unterstützung per SSI und widerspricht insofern bereits den hier aufgestellten Vorgaben. Trotzdem eine interessante Möglichkeit solange der Netscape Communicator noch in Gebrauch ist, zumal das nötige Feature SSI bereits im Leistungsumfang einiger Proxyserver wie z.B. Sambar [10]

enthalten ist und kein serverseitiger XSLT-Parser genutzt wird.

Beispiel erfordert NC4

<html>
<head>
 ....
<script>

window.onload=function (){
var dneu=document.layers[0].document.forms[0].dyn.value;
dneu="<STUECK>"+String(dneu).split("<STUECK>").sort().join("<STUECK>")+"</STUECK>";
dneu=dneu.replace(/<\//g,"xxx").replace(/</g,"<div class=").replace(/xxx/g,"</div ");
with(document.layers[0].document){
write("<span>"+dneu+"</span>");
close();
}}

</script>
 ....
<div id=dyndiv>
<form action="">
<textarea name="dyn" cols="50" rows="10">
<!--#include file="katalog1.xml"-->
<!--#include file="katalog2.xml"-->
</textarea>
</form>
</div>
</body>
</html>
©

Solch eine Lösung kann für ältere Browser wie den Netscape Communicator 4 zur Einbindung der XML-Dateien geeignet sein, eine weitere Bearbeitung zur Darstellung mittels JavaScript ermöglicht auch hier die alphabetische Sortierung, als Übergabeort habe ich für Netscape 4 und Internet Explorer 4 oder Opera 6 hier ein Formularfeld gewählt.

window.onload=function (){
var dneu=document.all.dyn.value;
dneu="<STUECK>"+
String(dneu).split("<STUECK>").sort().join("<STUECK>")+
"</STUECK>";
dneu=dneu.replace(/<\//g,"xxx").replace(/</g,"<div
                     class=").replace(/xxx/g,"</div class=");
document.all.dyndiv.innerHTML="<span>"+dneu+"</span>";
}
©

Das entsprechende Skript für den IE4 greift per document.all auf die Seitenelemente zu. Die einfache Einbindung der XML-Dateien in den HTML-Code durch PHP ist ebenfalls möglich, hier eignet sich readfile :

Soll Opera 6 ähnlich unterstützt werden, wird mangels DHTML-Fähigkeiten einfach die ganze Seite anhand der aus der Textarea erhaltenen Daten neu erstellt.

Browserweiche / Gesamtlösung

Die gezeigten Möglichkeiten erfordern im Zusammenspiel Browserweichen. Ältere Browser wie Netscape 4 sind zunächst mit einfachen Mitteln rein clientseitig nicht zu bedienen. Denkbar wäre für solche Browser ein JavaApplet, oder doch serverseitige Unterstützung wie im vorherigen Abschnitt bereits dargelegt mit geringsten Anforderungen an den Server per SSI. Aber bei den gebräuchlichen Browsern von Microsoft, Netscape und Opera Software gelingt die clientseitige Verabeitung. Der Internet Explorer 6 und die neuen Netscape- bzw. Geckobrowser sollen die Variante mit XSL erhalten, diese Seite bietet sich als Standard an. Ergänzend soll der Internet Explorer 5 auf eine Seite mit Data Island gelangen, und auch für Opera kann wie gezeigt eine Alternative angeboten werden.

Beispiel für IE/NN ab 4, Opera ab 6, Mozilla/Firebird u.a.

Während für den Internet Explorer die Conditional Comments hier gut geeignet sind, ist für Opera zumindest bei der DHTML-Version eine Weiche per JavaScript naheliegend.

Fazit

Auch ohne die Minimallösung für ältere Opera und NN ist mit Opera 7, den Internet-Explorern 5, 5.5 und 6 sowie den Gecko-basierten Browsern Netscape 7 (u. 6.2) bzw. Mozilla usw. eine Basis von über 90% Verfügbarkeit gegeben. Der Einsatz ist bei Internet Explorer 6 oder auch Opera 7 zügig, und auch bei Mozilla reicht die Performance aus. Im Intranet mit bekannten Browsern wie den IE steht dem Einsatz der hier gezeigten Methoden also kaum etwas im Wege, im Internet müssen ggf. Alternativinhalte geboten werden, wenn eine allgemeine Zugänglichkeit gefordert ist.

XML für alle?
_{Kristof Lipfert}
^{Dipl.-Des.(FH)}