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ä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ä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> |