Informationsansvarig: Marie-Louise Gustafsson, webmaster@itn.liu.se
Sidan uppdaterades senast: 2006-05-16
LiU > ITN>Utbildning> Utbildningsområden


[ Hoppa direkt till textinnehållet ] [ Hjälp ] [ Tillgänglighetsinformation ]
In English | A till ÖKartorKontakta oss
Gå till LiU.se
LiU > ITN>Utbildning> Utbildningsområden

Laboration XSLT
Laborationspäng: 5-10

Förberedelser

Föreläsningsanteckningarna om XSLT, samt motsvarande kapitel i boken är lämpliga att läsa. Bra tutorials finns på http://www.w3schools.com/". En XSLT-tutorial finns här. Observera dock att den senare är gjord för att fungera med IE5 som använder en tidigare version av XSLT.

Poäng

Den första delen är obligatorisk. Den andra är valfria men ger bonuspoäng. Om du lämnar in innan deadline (se schema) får du 2 bonuspoäng.

Först ska du skapa en mapp i din webbmapp där du ska lägga filerna. Ladda ner filen lab-xslt.zip, packa upp innehållet och lägg mappen "lab-xslt" som skapas i mappen "TNM065" som du skapade i första laborationen.

Del 1: XSLT (5 p)

I denna del av laborationen kommer du att få lära dig att göra XSL stylesheets för att översätta en XML-struktur som beskriver en mängd nyheter, till en HTML-struktur som är anpassad för mottagarens webb-läsare.

XSLT-tranformationerna sker i detta fall i själva browsern, inte på servern. Idag stöder de flesta moderna webbläsare XSLT-transformationer (Firefox, IE, Safari, Opera och kanske andra). Jag rekommenderar Firefox.

Öppna din webbläsare och gå in på adressen http://www.student.itn.liu.se/~ditt-användarnamn/TNM065/lab-xslt/nyheter.xml

Om allt gått rätt till ska du nu få upp ett fönster som ser ut så här (fråntaget URLen):

bild

Du är nu redo att börja själva laborationen. I denna del av laborationen ska du modifiera innehållet i filen nyheter-html.xsl. Detta görs med lämplig texteditor, förslagsvis den du använde i förra laborationen.

För att verifiera att allt verkligen fungerar som det är tänkt bör du nu öppna stylesheetet nyheter-html.xsl i din texteditor och ändra texten "bla bla bla" till "hej hej hej". Ladda nu om sidan i din webläsare. Om texten nu lyder "hej hej hej" är allt som det ska.


  • Rita upp ett diagram över nyheter.xml, enligt modellen som finns angiven i föreläsningsanteckningarna om XSLT.
  • Modifiera filen nyheter-html.xsl för att resultatet ska bli likadant som filen nyheter-html.html i din katalog. Du bör ta säkerhetskopior OFTA och försöka göra endast en sak i taget eftersom ett litet misstag kan leda till att ingen text returneras över huvud taget, vilket kan vara svårt att debugga. Om du upplever att du gjort en förändring men att ingenting händer, kan det ibland bero på att webläsaren cacheat själva xslt-dokumentet. Öppna då själva xslt-dokumentet från din webläsare, och öppna därefter xml-dokumentet. Då bör allt fungera.
  • Om allt blir riktigt märkligt kan det vara läge att börja på nytt från en tidigare sparad version. Kom ihåg att de vanligaste felet brukar vara att XSL-dokumentet inte längre är valid, pga en missad slut-tag eller ett missat citat-tecken. ETT BRA TIPS är att öppna xsl-dokumentet i Mozilla eller IE, då ser man ifall dokumentet inte är well-formed.

Observera speciellt de meta-taggar som ska finnas i början av resultat-dokumentet. Dessa syns inte i en webbläsare men finns ändå där. För att kunna kontrollera att ni verkligen fått med dessa behöver ni alltså se den resulterade koden av själva transformationen.

Jag har för detta gjort en liten php-snutt som kan göra transformerna på servern. Ett formulär finns på

http://xml3.nada.kth.se/~bjornh/xslt.html

Fyll i URLarna till ditt xml-dokument och ditt xslt-dokument, välj mime-typ text/html och tryck på "Skicka" så får du tillbaka resultatet från transformen. Titta antingen på resultatet med "View source" eller spara ner det till fil med "Save as...". Sedan kan du kontrollera att meta-taggarna verkligen kommit med.

På mac och linux kan man köra kommandot xsltproc från kommandorad för att genomföra transformationerna. Syntaxen är enligt

xsltproc party.xsl party.xml
Då får man resultatet direkt på standard out. Om man vill ha det på fil, t.ex. out.wml kan man skriva
xsltproc party.xsl party.xml >out.wml
Det finns säkert motsvarande program för Windows. Tipsa i så fall gärna om det i diskussionsforumet.

Del 2: XSLT -> WML (3 p, frivillig uppgift)

OBS! Det går endast att lämna in en laboration vid ett och endast ett tillfälle. Det går alltså inte att förs lämna in den obligatoriska delen, och sedan vid ett tillfälle lämna in en frivillig extradel. Hur som helst, som bonusuppgift kan du göra så att presentationen genererar WML-kod. WML är märkspråket som används i WAP-enheter, t.ex. telefoner. Numera används den nyare versionen som är baserad på xhtml, men flera telefoner, framför allt äldre, stöder WML

Som WML-läsare får du använda webläsaren Opera (www.opera.com) eller hellre den utmärka plugin till Firefox som finns på på https://addons.mozilla.org/en-US/firefox/addon/62.

Dessvärre går det inte att göra XSLT-transformationerna webbläsaren, pga att rätt MIME-typ måste sättas. Använd därför formuläret ovan ( http://xml3.nada.kth.se/~bjornh/xslt.html), fyll i URLarna till ditt xml-dokument och ditt xslt-dokument, välj MIME-typ text/vnd.wap.wml och tryck på "Skicka", alternativt kör via kommandoprompt enligt ovan


Förhoppningsvis bör du få upp en bild som ser ut ungefär så här (beroende på Operaversion).
operawap

Nu är det "bara" att producera ett xslt-dokument (nyheter-wml.xsl) som tranformerar innehållet i nyheter.xml så att resultatet av tranformationen blir identiskt med nyheter-wml.wml

För att få doctype och liknande att stämma använder man xsl:output. Det kan ni åstadkomma genom att lägga in följande kod som barnelement till xsl:stylesheet

<xsl:output method="xml" standalone="no" doctype-system="http://www.wapforum.org/DTD/wml_1.1.xml" 
  doctype-public="-//WAPFORUM//DTD WML 1.1//EN"/> 

Exakt hur wml fungerar behöver ni inte förstå för att göra laborationen, men för den intresserade finns en bra introduktion på http://www.w3schools.com/wap/default.asp

Observera att wml-koden är ganska grötig. En del av poängen med labmomentet är att ni ska hitta vilka delar i wml-dokumentet som är statiska och vilka som är dynamiska.

Ett angreppssätt kan vara att först göra ett xsl-dokument som genererar "facit" utan att hämta de dynamiska delarna från xml-dokumentet. Sedan modifierar man dokumentet ett steg i taget där man ersätter de statiskt inlagda delarna med de dynamiska delar som egentligen ska vara där.

Validering: Observera att ni kan (och ska) validera den resulterade wml-koden. Detta kan göras från en vanlig valideringstjänst (t.ex. http://validator.w3.org), under förutsättning att du lagrat resultatet från transformationen på fil (out.wml).

Examination

Redovisas via It's learning genom att skriva in länkar till samtliga filer du använt, samt om du arbetat tillsammans med någon så ange denna som "deltagare" när du lämnar in. I It's learning kan då vi rätta laborationen en gång och båda får då poängen. Om du lämnar in innan deadline (se schema) får du 2 bonuspoäng.