Data til præsentation

XSL-Transformationer af data fra XML-dokumenter kan foregå hvor XSLT blot anvendes til at præsentere data fra XML-dokumentet. Med andre ord kan du ved anvendelse af XSLT - i stedet for at anvende CSS - definere hvordan dine data skal vises.
På denne side viser jeg et eksempel herpå.

Derudover kan XSLT også anvendes til at ændre eller tilføje data i XML-dokumentet, dette kaldes data-til-data transformation, og jeg vil senere lave et eksempel på anvendelse af dette.


Vis linksamling ved brug af XML, XSLT, ASP og DOM

Jeg ønskede at linksamling ved anvendelse af XSLT skulle vises i samme layout som er anvendt på de øvrige sider her på janeinabox. Derfor var jeg nødt til at indgå et kompromis for at få lavet en visning af linksamlingen ved brug af ovennævnte.

For at det overhovedet skulle ligne den eksisterende linksamling, var det nødvendigt at bruge den samme css-opbygning. Almindelig import af janestyle.css fungerede ikke ved kald af vis_links.asp (den fil der kaldes, når du trykker på knappen under denne tekst).

Derfor har jeg været nødt til at lave css'en som indlejret, og heri består så mit kompromis, for jeg ville helst have undgået at lave noget indlejret.

Derudover vises samtlige links på én gang. En detalje som jeg ved kan ændres, så der igen kun vises to af gangen, men lige nu skal jeg videre med at lege med DOM og læse om XPATH.

Bonus ved anvendelsen af ovennævnte teknikker var, at jeg fik mulighed for at udnytte mit ønske om at kunne sortere på "Emne", så denne liste vises p.t. ud fra en alfabetisk sortering af emnerne. Dette kan selvfølgelig også udbygges til at lade brugeren vælge et emne, så kun links for det pågældende emne vises.

OBS: Hvis du anvender Mozilla er der p.t. problemer ved visning af linksamlingen. I stedet for at få linksamlingen præsenteret ses kildekoden til den. Jeg er ved at undersøge, hvad problemet skyldes, og mistænker anvendelsen af XML/XSL.



Hvordan foregår visningen?

Som ved linksamlingen, der laves ved brug af XML og data islands, er dataene fra det samme XML-dokument (links.xml). Men i stedet for at anvende data islands til præsentation, anvendes XSLT. Xsl-filen ser således ud:

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" />

<!-- Match dokument-roden. -->
<xsl:template match="/">

<html>
	<head>	<style>Den indlejrede css-del er udeladt i denne visning
		</style>
	</head>		
	<body>
		<div id="indhold">
		<h1>Linksamling ved brug af XML, XSLT, ASP og DOM</h1>
		<table border="0" cellspacing="4">
		<tbody>
			<xsl:apply-templates select="linksamling/link" >
			<xsl:sort select="emne" /> </xsl:apply-templates>     
		</tbody>
		</table>	
		</div>	
	</body>
</html>

</xsl:template>

<!-- Match link-element -->
<xsl:template match="link">
<tr valign="top" bgcolor="white">
<td><b>Emne</b></td>
<td><xsl:value-of select="emne"/></td>
</tr>
<tr valign="top">
<td><b>Adresse</b></td>
<td><a href="{httpadresse}"><xsl:value-of select="httpadresse" /></a></td>
</tr>
<tr valign="top">
<td><b>Beskrivelse</b></td><td><xsl:value-of select="beskrivelse"/></td>
</tr>	
</xsl:template>
</xsl:stylesheet>

Koden under "Match link-element" er en template (skabelon), der bestemmer hvordan oplysninger for det enkelte link i XML-dokumentet skal vises. Denne kode kaldes fra <xsl:apply-templates select="linksamling/link" >, som søger XSL-filen igennem for at tjekke, om der er en template der matcher dette.

Under "Match link-element" havde jeg det samme problem (som ved anvendelse af data islands) med at få linket til at dirigere videre til den rigtige webside.

Uddrag fra ovenstående kode:

<a href="{httpadresse}">

Jeg forsøgte med flere varianter og her var min største fejl nok, at jeg brugte @-tegnet foran "httpadresse". Fejlen består i, at tegnet indikerer at der peges på en id-værdi på elementet i XML-dokumentet, og jeg ville blot have fat i elementets data og omforme disse til et link.
Tålmodighed var en fordel, og jeg fandt den rigtige måde ved at opbygge linien et tegn af gangen og så teste på effekten heraf.

Valid CSS!

Valid XHTML 1.0!