[XML] [XSL XML] kleines XML Tutorial

undefined

Super Moderator

Posts: 4,248

Location: Germany

Sunday, March 2nd 2003, 4:37pm

[XSL XML] kleines XML Tutorial

Ihr werdet sicherlich in den letzten Wochen bemerkt haben das es öfters im Flashbattle Forum um XML Deklaration ging. Daher einmal eine kleines Beispiel was XML so Interessant macht.
Zur besseren Verdeutlichung erstellen wir ein dynamisches Menü.Es kommen sechs Scriptsprachen zum Einsatz. (HTML/DHTML/PHP/XML/XSLT/CSS-Stylsheet) .
Im Gegensatz zu HTML ist bei XML die Dokument Deklaration sehr wichtig. Zu beginn noch ein wichtiger hinweiß "XML unterscheidet in seiner Sprache in Gross und Kleinschreibung" was sich schon bei der Deklaration bemerkbar macht.

	PHP Source code
1	<?xml version="1.0" encoding="ISO-8859-1" standalone="yes" ?>

Solltet ihr jetzt z.B. xml Groß schreiben wahr es das auch schon und ihr seit in die erste Syntax falle gestolpert. Der nächste Abschnitt beinhaltet den Dokumenttypen in dem ihr die einzelnen ELEMENTE definiert. Dieser kann auch in einer externen Datei (*.dtd) stehen ist aber in diesem Tutorial nicht von Nöten. Daher auch in der Deklaration die Direktive standalone!

Source code

<!DOCTYPE kopf [
  <!ELEMENT haupttabelle (#PCDATA)>
  <!ELEMENT text (#PCDATA)>
  <!ELEMENT zeigewert (#PCDATA)>
  <!ELEMENT ausgabe (#PCDATA)>
  <!ATTLIST haupttabelle
     refid IDREF #REQUIRED
  >
]>

Die Dokumenttype Deklaration ist dann notwendig wenn es sich um ein Gültiges XML Dokument handelt. Gültig bedeutet in diesem Sinne das daß XML Dokument Validierbar zur DTD Datei oder dem Doctype sein soll. Dies ist nicht Notwendig wenn ihr z.B. nur Daten in Flash laden Möchtet die keine HTML ausgabe enthalten werden oder Daten übermitteln. Wenn ihr aber einen Stylesheet in dieser Seite verwendet ist es ein muß. Mit Element werden die Notationen deklariert. Im Gegensatz zu HTML kann ein p Tag nicht ein p tag sein sondern kann auch etwas ganz anderes bedeuten. Um euch jetzt nicht komplett zu verwirren habe ich in diesem Tutorial auf solche Gegensätze verzichtet und die einzelnen tags wie folgt benannt.

kopf = Für das normale Dokument. In diesem Falle (html/head/body)
haupttabelle = Für die Tabelle in der For Schleife.(table/tr/td) idref überträgt den Wert von refid !
text = Für den Beschriftung der Tabellenzelle. (acronym)
ausgabe = Zeigt dis Tabelle für die Ausgabe
zeigewert = Formatierung für die Ausgabe

Im nächsten Abschnitt ist die Einbindung zur XSL Datei. (Extensible Stylesheet Language, in Klartext: Erweiterbare Formatierungs-sprache)

	PHP Source code
1	<?xml-stylesheet type="text/xsl" href="test.xsl" ?>

Der XSLT-Teil von XSL hat die Aufgabe, Elemente einer XML-basierten Sprache in eine andere XML-gerechte Sprache zu transformieren. So können also beispielsweise Elemente aus einer eigenen XML-Datei, wie kopf und haupttabelle, in Auszeichnungs-Konstrukte einer anderen Sprache transformiert werden, um damit eine formatierte Ausgabe der Elemente zu erzeugen.
Hört sich etwas kompliziert an ist aber wenn ihr euch den Quelltext der index.php und der test.xsl anseht ein geniale Sache.

PHP Source code

<?xml version="1.0" encoding="iso-8859-1" ?  >
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="kopf">
 <html>
  <head>
   <meta http-equiv="pragma" content="no-cache" />
  </head>
 <body>
 <xsl:apply-templates />
  </body>
 </html>
</xsl:template>

<xsl:template match="text">
 <acronym style="font-family:Tahoma; font-size:10pt;">
  <xsl:value-of select="." />
 </acronym>
</xsl:template>

<xsl:template match="haupttabelle">
 <table width="150" border="0" cellspacing="0" cellpadding="1" align="center" style="border: 1px outset;" 
  onMouseOver="this.style.border='1px inset';"  onMouseOut="this.style.border='1px outset';">
  <tr>
   <td align="center" width="150" height="25" bgcolor="#3399cc" 
    onClick="document.location.href='index.php?zeige={@refid}'" 
    onMouseOver="this.style.backgroundColor='#6699ff';this.style.cursor='hand';this.style.color='#CCFF66';" 
    onMouseOut="this.style.backgroundColor='#3399cc';this.style.color='#000000';">
    <xsl:apply-templates />
   </td>
  </tr>
 </table>
</xsl:template>

<xsl:template match="ausgabe">
 <table width="100" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
   <td width="100%" height="100" align="center" valign="middle">
      <xsl:apply-templates />
   </td>
  </tr>
 </table>
</xsl:template>

<xsl:template match="zeigewert">
   <strong style="font-size: 20pt; color:#cc0000;">
      <xsl:value-of select="." />
   </strong>
</xsl:template>

</xsl:stylesheet>

Bemerkung: Um die Foren-Darstellung nicht zu verändern habe ich die tag-Definitionen der Tabelle mit Zeilenumbrüchen versehen.
Und hier der ganze Aufbau der index.php

PHP Source code

<?php
echo "
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<!DOCTYPE kopf [
  <!ELEMENT haupttabelle (#PCDATA)>
  <!ELEMENT text (#PCDATA)>
  <!ELEMENT zeigewert (#PCDATA)>
  <!ELEMENT ausgabe (#PCDATA)>
  <!ATTLIST haupttabelle
     refid IDREF #REQUIRED
  >
]>
<?xml-stylesheet type="text/xsl" href="test.xsl" ?>
<kopf>";

 for($i=1;$i<10;$i++) {
echo "
 <haupttabelle refid="".$i."">
   <text>Hallo Welt zum $i.</text>
 </haupttabelle>";
}

echo "
 <ausgabe>
   <zeigewert>".$_GET['zeige']."</zeigewert>
 </ausgabe>
</kopf>";
//END
?>

Wie das ganze aussieht könnt ihr >>>hier<<< sehen.
Viel Spaß beim Testen Gruß Jürgen

undefined has attached the following file:

xsl-tut.zip (1.43 kB - 115 times downloaded - Last download: Jan 26th 2009, 8:46pm)

Sven G.

Administrator

Posts: 3,343

Location: NRW / Bochum

Sunday, March 2nd 2003, 4:49pm

Wow, sieht schon recht interessant aus!
Wenn ich heute noch zeit hätte, würde ich es mir gerne mal genauer durchlesen und ein bissel testen *sabber*
Hmmm.....werde wohl leider erst Morgen abend dafür Zeit finden...

Werde das Tutorial hier aber laufe der Woche noch erweitern, dann bastel ich mal was mit XML & Flash. Mal abwarten was es wird...

Gruss & Daumen hoch !

Mit freundlichen Grüßen
Sven Gasser @ BountyKiller.de
Flashbattle.deGründer
webmaster@flashbattle.de
Flashbattle.de ActionScript Referenz
DELTA Agentur - Agentur für Werbung & Kommunikation
News aus der Medienwelt & mehr @ Delta Agentur twittert

(Kein Support per eMail, PN oder ICQ)
Irren ist menschlich, aber für das totale Chaos braucht man einen Computer

http://twitter.com/deltaagentur

undefined

Super Moderator

Posts: 4,248

Location: Germany

Sunday, March 2nd 2003, 4:59pm

Danke für die Blumen

Seit Mittag ist es bei uns am Regnen und um die Langeweile zu verdrängen dachte ich mir das mal wieder ein Tut fällig währe. Wie du erkennen kannst wird durch XSLT der Der Code in der PHP datei sehr klein gehalten. Dadurch wird es sehr übersichtlich und durchschaubar.
Gruß Jürgen