XSL i praktiken
Vi utgår från en XML fil. Den måste vara well-formed och
helst även validerad mot en DTD. Nedan finns en fil som uppfyller dessa
villkor:
xml16_1.xml
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE products [
<!ELEMENT products (product+)>
<!ELEMENT product (code,price,amount)>
<!ELEMENT code (#PCDATA)>
<!ELEMENT price (#PCDATA)>
<!ELEMENT amount (#PCDATA)>
]>
<products>
<product>
<code>HPD dator</code>
<price>5000</price>
<amount>4</amount>
</product>
</products>
Öppna XML filen Öppna XML konverterad till HTML (Även NS)
Denna fil skulle vi vilja visa på nätet och behöver för
detta en XSL fil...
Börja från en HTML fil
Vi kan utan problem utgå från en HTML fil, som visedan modifierar
till att bli en XSL fil. Nedan finns en liten HTML fil som vi kan utgå
från. Eftersom XSL filen kommer att betraktas som en XML fil när
den är färdig, är det noga med att även HTML koden är
well-formed. Den skall gärna uppfylla XHTML normerna.
xml16_1.htm
<html>
<head>
<title>TITEL</title>
<style type="text/css">
h4
{
font-family:verdana,arial,sans-serif;
color:#666666;
}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<h4>En TestSida</h4>
<!-- hit vill jag få in från XML filen -->
</body>
</html>
Klicka här för att se filen i praktiken
För att få html filen till en (simpel) XSL krävs några
saker.
- När du är nöjd med HTML filens utseende så sparar du
den med filextension .xsl
- Sedan gör du de modifieringar som syns nedan. Det är tre rader
som kommer in i början, och två som kommer till i slutet.
xml16_1.xsl
<?xml version='1.0' encoding="iso-8859-1" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head>
<title>TITEL</title>
<style type="text/css">
h4
{
font-family:verdana,arial,sans-serif;
color:#666666;
}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<h4>En TestSida</h4>
<!-- hit vill jag få in från XML filen -->
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Om du har IE 5.0 eller nyare kan du klicka här för att se filen i praktiken
Den första raden är en normal XML Pi som säger att detta är
en XML fil och den använder teckenuppsättningen från iso-8859-1.
Den andra raden säger vilken xml standard som används. Här är
det lite jobbigt eftersom den rad som visas i ovanstående exempel inte
följer senaste standard. Egentligen borde det stå:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
Men eftersom Microsoft implementerade XML i IE före den senaste standarden
blivit fastställd, så förväntar sig IE att får se
den instruktion som då var gällande:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
OBS. Om du skriver för Microsoft Internet Explorer 6.0 och inte behöver
beakta bakåtkompatibilitet, skall du använda den korrekta versionen.
Det är dock inte en bug i IE5, utan MS gjorde det bästa de för
tillfället kunde med denna browsers XML implementation.
Den tredje raden säger attdenna template skall matcha rotnoden. En template
skall alltid ha en match mot roten "/", även om vi inte är
intresserad av dess värden, utam bara data djupare in.
De två sista raderna avslutar template och stylesheet
Nästa steg
I detta skede har vi en fungerande XML fil och en giltig (men inte alltför
effektiv) XSL fil.
Följande steg blir att koppla ihop dessa. Detta görs genom att sätta
en hänvisning till XSL filen i XML filen. Se nedan:
xml16_2.xml
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="xml16_1.xsl"?>
<!DOCTYPE products [
<!ELEMENT products (product+)>
<!ELEMENT product (code,price,amount)>
<!ELEMENT code (#PCDATA)>
<!ELEMENT price (#PCDATA)>
<!ELEMENT amount (#PCDATA)>
]>
<products>
<product>
<code>HPD dator</code>
<price>5000</price>
<amount>4</amount>
</product>
</products>
Öppna XML filen Öppna XML konverterad till HTML (Även NS)
Ovanstående exempel är fullt giltig XSL kod. Problemet är bara
att det inte visas något data i sidan. Det är lätt fixat. Om
vi sätter in några rader så att vi får följande
kod så ser vi lite mer:
xml16_3.xsl
<?xml version='1.0' encoding="iso-8859-1" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head>
<title>TITEL</title>
<style type="text/css">
h4
{
font-family:verdana,arial,sans-serif;
color:#666666;
}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<h4>En TestSida</h4>
<xsl:value-of select="products/product/code"/> <br />
<xsl:value-of select="products/product/price"/> <br />
<xsl:value-of select="products/product/amount"/> <br />
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Om du har IE 5.0 eller nyare kan du klicka här för att se filen i praktiken
Om denna modifierade XSL fil används i vår XML fil får vi
följande resultat.
xml16_3.xml
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="xml16_3.xsl"?>
<!DOCTYPE products [
<!ELEMENT products (product+)>
<!ELEMENT product (code,price,amount)>
<!ELEMENT code (#PCDATA)>
<!ELEMENT price (#PCDATA)>
<!ELEMENT amount (#PCDATA)>
]>
<products>
<product>
<code>HPD dator</code>
<price>5000</price>
<amount>4</amount>
</product>
</products>
Öppna XML filen Öppna XML konverterad till HTML (Även NS)
Detta fungerar så att raden
<xsl:value-of select="products/product/code"/>
säger att vi vill visa värdet (value-of) på det valda data
(select) som finns under roten products, i en noden product och
i dess nod code. Jämför gärna med hur man hänvisar
till kataloger på en disk (paths). Samma regler om nuvarande katalog och
underkataloger som finns för diskar, gäller även för XSL.
MEr om detta senare i texten...
XML
Top
XSL