XML (inledning)
Xml är en förkortnings för extensible markup language och är en standard för att skapa egna dokumentbeskrivningsspråk. Trots sin yttre likhet med html, så är xml en standard med betydligt fler och bredare användningsområden. Nu kommer jag på dessa xml-sidor, mest att fokusera på användningen av xml i webbsammanhang, men det är bra om man känner till att xml är så mycket mer.Ett xml-dokument måste vara välformat, d.v.s. måste uppfylla vissa regler, för att vara ett xml-dokument. Det kan också vara validerat (välformulerat), d.v.s. uppfylla kraven från en dokumentbeskrivningsmall. Det finns två olika typer av sådana meta-dokumentbeskrivare, dels dtd -document type definition- dels xml-schema. Den nyaste typen är xml-schema, där man har rikligt med möjligheter att detaljstyra, hur ett korrekt xml-dokument måste se ut. Det har t.ex. stöd för datatyper.
Vi ska lite längre fram kika på både dtd och xml-schema. Jag kommer dock att börja med välformade xml-dokument och hur man med hjälp av xslt (extensible stylesheet language transformations) kan presentera dessa som vanliga webbsidor i en browser.
HTML - standarden som gick fel
Som du säkert känner till, så kan man i princip skriva vilka fel och andra dumheter som helst i html-kod och den stackars browsern kommer ändå att göra sitt bästa för att visa upp någon sida. Man kan säga, att webbläsarna är förlåtande mot html. Man kan till exempel blanda stora och små bokstäver, <HtmL> går lika bra som <html>. Man kan ha citattecken runt attributvärden ( bgColor="red") eller man kan låta bli (bgColor=blue). Vissa instruktioner behöver inte avslutas <hr>, <br> och <p>. Vidare, så finns det attribut, som saknar värden. t.ex. noresize.Samtidigt, åtminstone i tidigare standarder, så blandades sidornas innehåll med instruktioner om sidornas utseende. Det gjorde att html-sidornas struktur var snårig för att inte säga obefintlig. Till detta kommer webbmakarnas snickarglädje, som inte på något sätt gjort html-standarden mindre vildvuxen och obegriplig.
Man vågar nog påstå, att om man från början hade anat vilken väg utveklingen skulle ta, så hade html-standarden varit betydligt striktare och webbläsarna mindre förlåtande. Det hade underlättat sökandet och kategoriserandet av data på webben. Det skulle också ha skapats förutsättningar för webbdokumentens portabilitet. Man hade kunnat flytta över en webbsida till någon applikation eller system på ett betydligt smidigare sätt än i dag.
Svaret på alla dessa bekymmer heter just xml. Det finns en html-standard byggd på xml, som heter xhtml. Vidare så har man i stor utsträckning lyckats med att dela på data och datans utseende med hjälp av stilmallar (CSS). Däremot så är webbläsarna lika förlåtande mot html som förut. Det är nog en match, som måste anses förlorad.
Ett första xml-dokument
Du kan skriva av kodexemplen nedan i t.ex. Anteckningar och spara dokumenten med extensionen .xml. I Anteckningar, så är det också viktigt att du väljer filformatet alla filer. Du kan sedan öppna dokumentet i Explorer eller Firefox, som båda är utrustade med xml-parsers och en defaultstilmall. Man kan se dokumentens trädstrukturer, med noder som kan öppnas och stängas. För det mesta (beroende version), så kan man öppna xml-dokumenten i Excell eller Word, om man nu har en Windowsinstallation.För att visa på möjigheter att lagra data i xml, så ska första dokumentet beskriva en telefonlista, en lista där man kan lagra uppgifter om kontakter.
Alla xml-dokument inleds med en processorinstruktion, som egentligen inte är xml. I denna finns attributen version och encoding. Version måste man ha med och nu gällande version är 1.0. Encoding är frivillig, men jag har valt att ha med den och jag ställer den allt som oftast till "iso-8859-1", för att kunna använda åäö. Den vanligaste teckentabellen är annars "utf-8".
Vidare så har allar xml-dokument en trädstruktur - inte något helt obekant för en programmerare. Ett träd består av en rot (rotnod). På denna rot (eller i), så finns det löv ( barnnoder). Dessa kan i sin tur ha ytterligare barnnoder o.s.v.Har du lagt märke till vad många sidor det finns på webben med konstiga tecken på. Det kan många gånger se ut som japanska eller kinesiska skrivtecken. Detta kan vara en av de få nackdelarna med xhtml och xml. Om det beror på att webbutvecklarna inte vet, hur de ska handskas med teckentabeller, eller om orsaken är någon annan, vet jag inte, men jag hoppas att detta problem löses med tiden.
Så ett xml-dokument måste ha en rotnod. telefonregister.xml
<?xml version="1.0" encoding="iso-8859-1" ?> <!-- processorinstruktion är egentligen inte xml --> <telefonlista> <!-- telefonlista är dokumentets rotnod, måste finnas --> </telefonlista> <!-- alla noder måste avslutas, jfr. med html -->En rotnod, kan ha hur många barnnoder som helst. Vi ska lägga till en ny nod för varje kontakt. Kontakten ska ha ett attribut. Alla attribut utan undantag måste ha värden och alla värden måste omges av citattecken.
telefonregister.xml
<?xml version="1.0" encoding="iso-8859-1"?> <telefonlista> <kontakt id="a1"> </kontakt> </telefonlista>Titta vad fint det blev! Studera särskilt nästlingen av elementen. Kontakt ligger i telefonlista. Än har vi inte sett annat, än att en nod innehåller en annan nod, men en nod kan också innehålla data.
telefonregister.xml
<?xml version="1.0" encoding="iso-8859-1"?> <telefonlista> <kontakt id="a1"> <namn>Morgan Augustsson</namn> <telefon>0506-12345</telefon> </kontakt> </telefonlista>Jag tror att vi tar och lägger till en kontakt till.
telefonregister.xml
<?xml version="1.0" encoding="iso-8859-1"?> <telefonlista> <kontakt id="a1"> <namn>Morgan Augustsson</namn> <telefon>0506-12345</telefon> </kontakt> <kontakt id="a2"> <namn>Karl Bogrehn</namn> <telefon>0511-3456</telefon> </kontakt> </telefonlista>Man får se upp, när man lägger till nya noder (kontakter), så att dessa blir barn till rotnoden <telefonlista>. Det hade förmodligen blivit fel, eller i alla fall konstigt, om man hade lagt kontakt "a2" nästlad innuti "a1".
Vid det här laget har du säkert upptäckt, att webbläsarna vägrar att visa felaktiga dokument. Istället får man felmeddelanden på sidorna. Meddelanden som starkt påminner om de kompileringsfel man får så rikligt av som programmerare.
Det är bara att försöka rätta till koden, spara och ladda om.
Försök nu att som övning lägga till några kontakter på egen hand.
XSLT - Extensible Stylesheet Language Tansformations
XSLT är ett kraftfullt verktyg för att transformera xmldokument till andra format.t.ex. html. Med xslt kan du hämta hela eller delar av ett xml-träd och göra om till ett annat format. Egentligen består xslt av två delar, men i praktiken så ser man inte detta. Den ena delen heter Path Language förkortat XPath. Det är den delen av språket, som är till för att loopa igenom och i övrigt bearbeta trädstrukturer.Den andra delen, den som använder Xpath, är den som utför transformationen. Man utgår från ett källträd, som bearbetas och ger ett resultatträd.
Syntaxen är, tycker jag med min programmerarbakgrund, ganska komplicerad och stel, men allt här i livet är inte enkelt och smärtfritt. Man måste kämpa lite och resultatet gör mödan värd.Det är på samma sätt som med SQL, som också består av två delar, data definition langauga och data manipulating language. Det är bara om man aktivt tänkter på det, som man ser det.
Vi börjar med skapa ett nytt dokument at typen xsl, som vi döper till stil.xsl och spara i samma map som telefonregister.xml. Det förtjänar nämnas, att xslt också är ett xmlspråk. Det får till konsekven att det måste följa reglerna för ett välformulerat xml-dokument.
stil.xsl
<?xml version="1.0" encoding="ISO-8859-1"?><!--vanligt xmldirektiv-->
<!-- på nästa rad definieras en namnrymd. För att namnrymden ska vara unik, så
knyts den till en uri, en unik adress. xmlns betyder kort och gott, xml name space-->
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" indent="yes"/< <!-- ganska självbeskrivande -->
<xsl:template match="/"> <!-- matchar alla noder i ett träd -->
<!-- två sluttaggar. Allt som öppnas måste stängas-->
</xsl:template>
</xsl:stylesheet>
Nu ska vi länka in stilmallen i telefonregister.xml.
<?xml version="1.0" encoding="iso-8859-1"?> <?xml-stylesheet href="stil.xsl" type="text/xsl"?><!-- också en instruktion--> <telefonlista> <kontakt id="a1"> <namn>Morgan Augustsson</namn> <telefon>0506-12345</telefon> </kontakt> <kontakt id="a2"> <namn>Karl Bogrehn</namn> <telefon>0511-3456</telefon> </kontakt> </telefonlista>Om du laddar om telefonregister.xml i din browser och inget fel uppstår, så får du en vit sida. Lugn, bara lugn! Allt är precis, som det ska vara. Du kan pröva att titta på källkoden i din browser, så kommer du att upptäcka, att xml-koden finns kvar. Det är bara att ingenting syns på sidan.
Vi ska börja med att få lite html-struktur på sidan. Sedan ska vi skapa en alldeles vanlig stilmall, som vi länkar in i stil.xsl.
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="html" indent="yes"/> <xsl:template match="/"> <!--Vi börjar här efter template match hela trädet. Som du kan se så flikar man in vanlig html-kod på ungefär samma sätt, som det går till i de flesta serverscriptspråk--> <html> <head> <title>Mina telefonkontakter</title> </head> <body> </body> </html> </xsl:template> </xsl:stylesheet>Om du laddar om sidan nu, så har du i alla fall fått en titel på sidan. Källkoden till sidan ser fortfarande likadan ut och det kommer den att göra även i fortsättningen. De html-instruktioner man lägger in i stilmallen följer reglerna för xml, så det är egentligen någon form av xhtml vi jobbar med.
Då skapar vi en enkel stilmall och länkar in den i stil.xsl.
stilmall.css
body
{
font-family:sans-serif;
font-size:0.9em;
padding:0;
margin:0;
background-color:rgb(255,255,255);
}
h3
{
text-align:center;
font-family:sans-serif;
font-size:4.2em;
padding:0.3em;
margin:0;
color:rgb(255,255,255);
background-color:rgb(0,0,0);
border-bottom:solid 5px rgb(255,255,0);
}
Vi passar även på att lägga till en rubrik på sidan. Nytt är fetmarkerat.
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="html" indent="yes"/> <xsl:template match="/"> <html> <head> <title>Mina telefonkontakter</title> <link href="stilmall.css" rel="stylesheet" type="text/css" /> </head> <body> <h3>Mina telefonkontakter</h3> </body> </html> </xsl:template> </xsl:stylesheet>Nu har det hänt en del, som du kan se, om du laddar om sidan. Ännu kan vi inte se någon data på sidan. Det kommer längre fram. Jag tänkte att vi skulle lägga ett block (div) mitt på sidan. Vi kompletterar stilmal.css med några nya regler, bland annat ett litet trick, för att få Explorer att centera det nya blocket. stilmall.css (nytt är fetmarkerat)
body
{
font-family:sans-serif;
font-size:0.9em;
padding:0;
margin:0;
background-color:rgb(255,255,255);
text-align:center;
}
h3
{
text-align:center;
font-family:sans-serif;
font-size:4.2em;
padding:0.3em;
margin:0;
color:rgb(255,255,255);
background-color:rgb(0,0,0);
border-bottom:solid 5px rgb(255,255,0);
}
#content
{
margin-right:auto;
margin-left:auto;
width:60%;
background-color:rgb(200,200,200);
text-align:left;
}
Sedan lägger vi in det nya blocket i stil.xsl (nytt är fetmarkerat).
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="html" indent="yes"/> <xsl:template match="/"> <html> <head> <title>Mina telefonkontakter</title> <link href="stilmall.css" rel="stylesheet" type="text/css" /> </head> <body> <h3>Mina telefonkontakter</h3> <div id="content"></div> </body> </html> </xsl:template> </xsl:stylesheet>Nu ska vi ta och skriva ut lite data. Jag vill i detta sammhang varna ömtåliga programmerare för en och annan stark sekvens. Läs och försök förstå!
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" indent="yes"/>
<xsl:template match="/">
<html>
<head>
<title>Mina telefonkontakter</title>
<link href="stilmall.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h3>Mina telefonkontakter</h3>
<div id="content">
<table width="60%" border="0">
<tr>
<td class="head">id</td>
<td class="head">namn</td>
<td class="head">telefon</td>
</tr>
<xsl:for-each select="telefonlista/kontakt">
<!--Man kan loopa igenom ett helt träd med hjälp av xsl:for-each.
Nedan så gör jag ett test av nuvarande position. Skulle positionen vara
jämnt delbar med 0, så får td en stilmallsklass annars en annan.
xsl:choose motsvara if else i vilken annat normalt programmeringsspråk
som helst. Den programmeringsvane riskerar att bli sinnesrubbad efter en
stunds programmerande med xslt. Titta till exempel på moduluskonstruktionen
mod 2 = 0. Men det är bara att bita ihop. Resultatet blir bra!
När man ska hämta värden från trädet och ska visa dessa, så använder man
xsl:value-of select=elementets namn. Varianten med @id (at id) ger attributets
värde. Tänk på att det egentligen står telefonlista/kontakt@id, eftersom uttrycken
ligger inom for-each select="telefonlista/kontakt"
-->
<tr>
<xsl:choose>
<xsl:when test="position() mod 2 = 0">
<td class="blue"><xsl:value-of select="@id"/></td>
<td class="blue"><xsl:value-of select="namn"/></td>
<td class="blue"><xsl:value-of select="telefon"/></td>
</xsl:when>
<xsl:when test="position() mod 2 != 0">
<td class="gray"><xsl:value-of select="@id"/></td>
<td class="gray"><xsl:value-of select="namn"/></td>
<td class="gray"><xsl:value-of select="telefon"/></td>
</xsl:when>
</xsl:choose>
</tr>
</xsl:for-each>
</table>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Ja, vi avslutar det här avsnittet med den kompletta cssmallen och som vanligt
är det nya fetmarkerat.
body
{
font-family:sans-serif;
font-size:0.9em;
padding:0;
margin:0;
background-color:rgb(255,255,255);
text-align:center;
}
h3
{
text-align:center;
font-family:sans-serif;
font-size:4.2em;
padding:0.3em;
margin:0;
color:rgb(255,255,255);
background-color:rgb(0,0,0);
border-bottom:solid 5px rgb(255,255,0);
}
#content
{
margin-right:auto;
margin-left:auto;
width:60%;
background-color:rgb(200,200,200);
text-align:left;
}
.head
{
background-color:rgb(150,150,150);
font-weight:bold;
}
.blue
{
background-color:rgb(0,0,150);
color:rgb(255,255,0);
}
.gray
{
background-color:rgb(220,220,220);
color:rgb(0,0,0);
}
Ja, en så här fin kontaktlista fick jag i Firefox. Om du vill veta mer, så har jag lagt upp lite
länkar i menyn till vänster. Nästa avsnitt, när det gäller xml på denna site kommer att bli
en lite större applikation, som beskriver ett seriesystem.