XML
Data Islands
DTD
Namensräume
Schema
XLink
XPath
Links
ASCII Table
ISO-8859-1
Impressum

XML Data Islands

  • Einbettung von XML-Daten in HTML-Seiten.
  • Internet Explorer 5.0 oder höher benötigt.

XML Daten direkt einbetten

  • Das Einbetten allein führt noch nicht zu einer Darstellung der Daten.
  • Das Attribut id dient später zur Referenzierung.

<html>
    <head>
        <title>XML Data Islands</title>
    </head>
    <body>

        <!-- Hier wird die XML Datei eingebunden -->
        <xml id="notiz">
            <notizen>
                <notiz>
                    <autor>Heinz</autor>
                    <empfaenger>Claus</empfaenger>
                    <betreff>XML Daten in HTML einbetten</betreff>
                    <inhalt>So einfach geht das, wenn man den IE verwendet.</inhalt>
                </notiz>
            </notizen>
        </xml>

    </body>
</html>

XML Daten verlinkt einbetten

  • Benötigte XML Datei mit dem Dateinamen "010_notiz.xml"

<?xml version="1.0" encoding="UTF-8"?>
<notizen>
    <notiz>
        <autor>Heinz</autor>
        <empfaenger>Claus</empfaenger>
        <betreff>XML Daten in HTML einbetten</betreff>
        <inhalt>So einfach geht das, wenn man den IE verwendet.</inhalt>
    </notiz>
</notizen>

  • HTML Dokument incl. Verweis und id-Attribut.

<html>
    <head>
        <title>XML Data Islands</title>
    </head>
    <body>
        <xml id="notiz" src="010_notiz.xml"></xml>
    </body>
</html>

  • XML-Daten werden an die Webseite gebunden.
  • XML-Daten werden jedoch nicht angezeigt.

XML Daten anzeigen

  • Die Tags <div> oder <span> können verwendet werden um die Daten darzustellen.
  • <div> beginnt jeweils eine neue Zeile, <span> nicht.
  • Das Attribut datasrc muss ein #-Zeichen vor dem Wert erhalten.
  • Das Attribut datafld verweist auf das gewünschte XML Element.
  • Es wird auf diese Weise nur der jeweils erste Datensatz angezeigt.

<p>
<br/><span datasrc="#notiz" datafld="autor"/>
<br/><span datasrc="#notiz" datafld="empfaenger"/>
<br/><span datasrc="#notiz" datafld="betreff"/>
<br/><span datasrc="#notiz" datafld="inhalt"/>
</p>

  • Durch Scripting kann dies gelöst werden.

<html>
    <head>
        <script type="text/javascript">
            function movenext()
            {
                x=xmldso.recordset
                if (x.absoluteposition < x.recordcount)
                {
                    x.movenext()
                }
            }
            function moveprevious()
            {
                x=xmldso.recordset
                if (x.absoluteposition > 1)
                {
                    x.moveprevious()
                }
            }
        </script>
    </head>

    <body>
        <xml src="010_notiz.xml" id="xmldso" async="false"></xml>
        <!-- if you change the id you need to change the script and span tags as well
             async=false is used to assure that all xml-data is loaded before any processing starts -->

        <p>Autor:
        <span datasrc="#xmldso" datafld="autor"></span>
        <br/>Empf&auml;nger:
        <span datasrc="#xmldso" datafld="empfaenger"></span>
        <br/>Betreff:
        <span datasrc="#xmldso" datafld="betreff"></span>
        <br/>Inhalt:
        <span datasrc="#xmldso" datafld="inhalt"></span></p>
        <p>
        <input type="button" value="Vorherige Notiz"
        onclick="moveprevious()" />
        <input type="button" value="N&auml;chste Notiz"
        onclick="movenext()" />
        </p>

    </body>
</html>

  • Einfacher ist es die Datenquelle an eine Tabelle zu binden.

<html>
    <head>
        <title>XML Data Islands</title>
    </head>
    <body>

        <!-- Hier wird die XML Datei eingebunden -->
        <xml id="notiz" src="010_notiz.xml"></xml>

        <h1>XML Data Islands</h1>
        <p>Durch einbinden der Daten in Tabellen werden die Daten schließlich angezeigt.</p>

        <!-- Hier erfolgt die Anbindung an die Tabelle mit Hilfe des Attributs datasrc -->
        <table border="1" datasrc="#notiz">
            <tr>
                <th>Absender</th>
                <th>Addressat</th>
                <th>Betreff</th>
                <th>Inhalt</th>
            </tr>
            <tr>
                <!-- Der Zugriff auf die Daten erfolgt über das Attribut datafld eines <span> oder <div> tags-->
                <td><span datafld="autor"/></td>
                <td><span datafld="empfaenger"/></td>
                <td><span datafld="betreff"/></td>
                <td><div datafld="inhalt"/></td>
                <!--
                <span> ist ein inline Element (IE), das andere IEs beinhalten kann. Es kann keine BLEs enthalten.
                <div> ist ein Block Level Element (BLE), das andere BLEs und IEs enthalten kann.
                Beide Tags sind Eigenschaftslos
                -->
            </tr>
        </table>
    </body>
</html>