Laboration 1 XML, XPath, XSLT och JSON

Transkript

1 Webbteknik II, 1DV449 Laboration 1 XML, XPath, XSLT och JSON Author: John Häggerud & Johan Leitet Semester: HT 2011 Course code: 1DV449

2 Inledning I denna första laboration är det tanken att Du ska bekanta dig med data-formaten XML och JSON. Du kommer också få lösa uppgifter som innebär att du sätter dig in i XML-tekniker så som XPath och XSLT. Laborationen består av fyra stycken obligatoriska uppgifter som alla ska lösas enligt den beskrivning som ges. Det finns också en utökning av den sista uppgiften som kan ses som en extrauppgift. Målet med laborationen är att du ska få grundläggande kännedom om XML, XSLT, XPath och JSON. Genomförande Du ska vara beredd att själv kunna söka upp viss information för att lösa laborationen. Laborationen löses individuellt men diskutera gärna eventuella problem och lösningar med dina kurskamrater. Du ska kunna svara på frågor från laborationshandledaren rörande dina lösningar. 2 (9)

3 Uppgift 1 XSLT Till denna uppgift finns en XML-fil som heter lab1_uppg1.xml att ladda ner (ligger i zipfilen som hör till laborationen). Det är det tänkt att du ska presentera denna via en XSLT-mall så det efterliknar skärmdumpen nedan: Du ska ha en kolumn där du presenterar innehåller i tre olika grupper beroende på vad de har för pris. De tre olika grupper framgår av bilden ovan. Den högra kolumnen ska presentera alla produkter i XML-dokumentet i bokstavsordning. Presentationen ska även likna exemplet ovan när det gäller färgbyte på varannan rad. Uppgiften publiceras på en åtkomlig webbserver och transformeras via något serverscriptspråk. För er som inte har en egen webbserver tillhandahåller vi detta via en VPN-koppling. Mer information om detta finns på kurshemsidan. Du får inte använda for-each-loopar i denna uppgift! 3 (9)

4 Tips! Det finns modulo i XSLT! Källkoden ska visas vid redovisningen. Uppgift 2 Analys av XHTML- sida med hjälp av XPath I denna uppgift ska du läsa in en XML-fil (finns i zipfilen som page.html) som är i form av en XHTML-sida och göra en enklare analys av med hjälp av en XSLT-mall, presentera för användaren (se skärmdumpen nedan). I denna uppgift kommer du förmodligen få problem med det dokument (XHTML-dokumentet) som du ska analysera när du kör det genom en XSLTmall. Anledningen till detta är att det blir en namespace-krock när man dels läser in ett XHTML-dokument och försöker transformera om det till ett nytt dokument med samma namespace, ( XSLTprocessorn hittar då inte de XPath-uttryck du gett. Så klart finns det en lösning på detta och för att lösa detta får du läsa följande artikel: (Kontrollerad: ). 4 (9)

5 Där går artikelförfattaren igenom hur man kan hantera detta för att komma åt noderna i det dokument man läser in. Observera att han dock använder fler namespace än vad vi behöver (e.g. Uppgiften publiceras på en åtkomlig webbserver och transformeras via serverscriptspråk. Tips! Läs på om olika XPath-funktioner för att få ihop dina XPath-frågor. Vår webbserver har bara stöd för XPath 1.0. Du kan skapa element och attribut med xsl:element och xsl:attribute vilket kan underlätta i fall när du dynamiskt ska skapa element med attribut. Källkod ska visas vid redovisningen. Uppgift 3 Atom till JSON till JavaScript I denna uppgift får du en fil med data i ATOM-format(feed.xml). Din uppgift blir att via lämpligt serverscriptspråk läsa in informationen, och generera ut JSON-data så att den medföljande JavaScript-applikationen (använder jquery mobile) fungerar och ser ut som följande skärmdumpar. (Det kan naturligtvis förekomma andra, nyare nyheter): 5 (9)

6 När man klickar på en rad ska detta ta er till en informationssida : Bilden nedan visar en skärmdump på hur JSON-objektet du returnerar från ditt serverscript ska se ut. Javascriptet du får länkar in javascript-biblioteken jquery och jquery-mobile som externa javascriptbibliotek samt en medföljande fil (ui.js) som bör ligga i samma katalog som index.html och ditt eget serverscript. Din uppgift är alltså att skriva ett serverscript som förser index.html + ui.js med rätt data, det vill säga rätt formaterad json. Det redan skrivna javascriptet i filen ui.js kommer att göra ett asynkront anrop (AJAX) mot ditt serverscript. Du måste dock ange rätt sökväg till ditt serverscript i den interna javascript-koden i filen index.html. 6 (9)

7 Tips! För att komma åt elementen som finns i ATOM-namnrymden bör man använda funktionen registerxpathnamespace ( Uppgift 4 Använda en XSLT- mall för att generera ut olika XML- applikationer I denna uppgift är det tänkt att du genom att använda de tekniker som finns inom XSLT för att generera två olika resultat beroende på den parameter man skickar in till sin XSLT-mall. I denna uppgift ska du genererar antingen en XHTML-sida eller en svg-fil eller båda två. Till din hjälp får du en xml-fil (os_resultat.xml) som innehåller den data som din XSLT-mall ska använda sig av. Din uppgift blir att läsa in XML-filen tillsammans med en XSLT-mall där din transformering ska ske. Detta görs via ett serverscript. Anropar man scriptet med querystringen render=xhtml, ska en XHTMLsida liknande skärmdumpen nedan presenteras (data inläst från XML-filen). Anropar man scriptet med querystringen render=svg, ska en korrekt utformad svg-sida liknande skärmdumpen nedan presenteras (skärmdumpen är tagen när resultatet ses med webbläsaren Google Chrome, som har stöd för svg). 7 (9)

8 Anropar man scriptet med querystringen render=xhtml_svg, ska en kombinerad sida ses där man först ser HTML-tabellen och där under ser svggrafiken. Tips: I denna uppgift kan det vara bra att använda sig av xsl:variable ( och XPath-funktionen position() för att kunna rita upp rektanglarna/diagrammen på ett dynamiskt sätt under varandra. Extrauppgift En utökad SVG- sida 8 (9)

9 För er som siktar på högre betyg och vill fördjupa er i dynamisk XSLT + svg finns en mer avancerad svg-bild att generera. Då ska istället bilden se ut som bilden nedan: De med flest guldmedaljer till vänster. Skulle man ha lika många guld blir andra sorteringsordningen silvermedaljer och sist brons. 9 (9)