menu
{$Head.Title}}

Übung XML Note

AGB phone picture_as_pdf SVG rss_feed print
Ausbildung XML Kurs XML Einführung JEXM Kurs XML Einführung - Ressourcen Kurs XML Einführung - Übungen Bildungsweg Frage zum Kurs navigate_next navigate_before

Übung XML Note

Visual Studio Code Editor

Wir starten den zuvor installierten Visual Studio Code Editor:

Über das Menu File -> Open Folder wählen wir den Ordner für unsere Übungen aus. Wir erstellen z.B. den Order "xmlkurs" im C-Drive:

Mit der Folder Selektion ist unser Visual Studio Code Editor nun mit dem Folder "c:\xmlkurs" verlinkt.

note.xml

Nun erstellen wir das Unterverzeichnis note und erstellen die Datei note.xml:

Kopieren Sie das XML Dokument aus dem nachfolgenden Listing in die Datei note.xml:

<?xml version="1.0"?>
<document>
  <note>
    <to>Jane</to>
    <from>Tom</from>
    <heading>Reminder</heading>
    <body>Don't forget me this weekend!</body>
  </note> 
  <note>
    <to>Tom</to>
    <from>Jane</from>
    <heading>Ack</heading>
    <body>How could I?</body>
  </note> 
  <note>
    <to>Jane</to>
    <from>Tom</from>
    <heading>Sorry</heading>
    <body>I was somewhat too fearful!</body>
  </note>
</document>

Das Dokumente sollte im Visual Studio Code Editor korrekt formatiert angezeigt werden:

Sie können die Datei auch direkt im Browser via dem Link note.xml anzeigen lassen.

note.dtd

Jetzt erstellen wir eine neue Datei note.dtd und kopieren die XML DTD aus dem nachfolgenden Listing in die neu erstellte Datei:

<!ELEMENT document (note*)>
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>

Die DTD sollte im Visual Studio Code Editor korrekt formatiert angezeigt werden:

Sie können die Datei auch direkt im Browser via dem Link note.dtd herunterladen.

note with dtd

Nun kopieren wir die Datei note.xml um nach notewithdtd.xml und ergänzen die XML Datei mit der zugeordneten Referenz auf die DTD:

<?xml version="1.0"?>
<!DOCTYPE document SYSTEM "note.dtd">
<document>
  <note>
    <to>Jane</to>
    <from>Tom</from>
    <heading>Reminder</heading>
    <body>Don't forget me this weekend!</body>
  </note> 
  <note>
    <to>Tom</to>
    <from>Jane</from>
    <heading>Ack</heading>
    <body>How could I?</body>
  </note> 
  <note>
    <to>Jane</to>
    <from>Tom</from>
    <heading>Sorry</heading>
    <body>I was somewhat too fearful!</body>
  </note>
</document>
Unsere Red Hat XML Extension validiert das XML Dokument basierend auf der DTD. Jedes fremde XML Element, welches der DTD Struktur widerspricht wird als Fehler angezeigt:

Sie können die Datei auch direkt im Browser via dem Link notewithdtd.xml herunterladen.

note.xsl

Mit der XML Transformation existiert ein weiterer W3 Standard für die Transformation von XML Dokument:

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:template match="/">
    <html><head>
        <title>XML/XSL Sample Note</title>
        <style type="text/css">
          body { background-color:#000080; color:#ffffff; 
                 font-family:arial,helvetica; font-size:12px; }
          th   { background-color:#444480; font-weight:bold; }
          td   { background-color:#888880; }
          .headline { font-weight:bold; font-size:24px; }
        </style>
      </head><body><div align="center"><span class="headline">Notes</span>
          <table border="0" cellspacing="0" cellpadding="5">
            <tr><th width="10%">to</th>
              <th width="10%">from</th>
              <th width="20%">heading</th>
              <th width="60%">body</th></tr>
            <xsl:for-each select="/document/note">
              <tr><td><xsl:value-of select="to"/></td>
                <td><xsl:value-of select="from"/></td>
                <td><xsl:value-of select="heading"/></td>
                <td><xsl:value-of select="body"/></td></tr>
            </xsl:for-each>
          </table></div></body></html>
  </xsl:template>
</xsl:stylesheet>

Das XSL Dokument sollte im Visual Studio Code Editor korrekt formatiert angezeigt werden:

Sie können die Datei auch direkt im Browser via dem Link note.xsl herunterladen.

note with xsl

Nun kopieren wir die Datei note.xml um nach notewithxsl.xml und ergänzen die XML Datei mit der zugeordneten Referenz auf das XSL Dokument:

<?xml version="1.0"?>
<?xml-stylesheet href="note.xsl" type="text/xsl" ?>
<document>
  <note>
    <to>Jane</to>
    <from>Tom</from>
    <heading>Reminder</heading>
    <body>Don't forget me this weekend!</body>
  </note> 
  <note>
    <to>Tom</to>
    <from>Jane</from>
    <heading>Ack</heading>
    <body>How could I?</body>
  </note> 
  <note>
    <to>Jane</to>
    <from>Tom</from>
    <heading>Sorry</heading>
    <body>I was somewhat too fearful!</body>
  </note> 
</document>
Damit haben wir im Dokument die Transformation referenziert. Solche wird durch die Anzeige durch den Browser sofort angewendet (notewithxsl.xml):

note.css

Der W3 Cascading Style Sheets Standard kann auch auf XML Dokumente angewendet werden:

document {
    font-family: arial;
    background: white;
    color:black;
    padding: 1em;
}
note {
    display: block;
    background: darkblue;
    border: 1px solid white;
    color: white;
    line-height: 2em;
    padding: 0.5em;
}
to, from {
   display: block;
}
heading {
   display: block;
   font-weight: bold;
}
body {
   background: silver;     
   padding: 0.5em;
}

Das CSS Dokument sollte im Visual Studio Code Editor korrekt formatiert angezeigt werden:

Sie können die Datei auch direkt im Browser via dem Link note.css herunterladen.

note with css

Nun kopieren wir die Datei note.xml um nach notewithcss.xml und ergänzen die XML Datei mit der zugeordneten Referenz auf das CSS Dokument:

<?xml version="1.0"?>
<?xml-stylesheet href="note.css" type="text/css" ?>
<document>
  <note>
    <to>Jane</to>
    <from>Tom</from>
    <heading>Reminder</heading>
    <body>Don't forget me this weekend!</body>
  </note> 
  <note>
    <to>Tom</to>
    <from>Jane</from>
    <heading>Ack</heading>
    <body>How could I?</body>
  </note> 
  <note>
    <to>Jane</to>
    <from>Tom</from>
    <heading>Sorry</heading>
    <body>I was somewhat too fearful!</body>
  </note> 
</document>
Damit haben wir im Dokument die Transformation referenziert. Solche wird durch die Anzeige durch den Browser sofort angewendet (notewithcss.xml):