Obs!

Användargränssnittet i Dreamweaver CC och senare har förenklats. Det kan därför hända att du inte hittar en del av alternativen i den här artikeln i Dreamweaver CC och senare. Mer information finns i den här artikeln.

Använd XML och XSL med webbsidor

XML (Extensible Markup Language) är ett språk som gör att du kan strukturera information. Precis som med HTML kan du med XML strukturera information med hjälp av taggar, men XML-taggarna är inte fördefinierade som HTML-taggarna är. Istället kan du med XML skapa taggar som bäst definierar din datastruktur (schema). Taggar kapslas inom varandra för att skapa ett schema med överordnade och underordnade taggar. Precis som de flesta HTML-taggar har alla taggar i ett XML-schema en öppningstagg och en avslutande tagg.

I följande exempel visas den grundläggande strukturen för en XML-fil:

<?xml version=“1.0”> 
<mybooks> 
    <book bookid=“1”> 
        <pubdate>03/01/2004</pubdate> 
        <title>Displaying XML Data with Adobe Dreamweaver</title> 
        <author>Charles Brown</author> 
    </book> 
    <book bookid=“2”> 
        <pubdate>04/08/2004</pubdate> 
        <title>Understanding XML</title> 
        <author>John Thompson</author> 
    </book> 
</mybooks>

I det här exemplet innehåller varje överordnad <book>-tagg tre underordnade taggar: <pubdate>, <title> och <author>. Men varje <book>-tagg är även en underordnad tagg till <mybooks>-taggen, som ligger en nivå högre i schemat. Du kan döpa och ordna XML-taggar hur du vill under förutsättning att du kapslar in taggarna i varandra och tilldelar varje öppningstagg en motsvarande avslutande tagg.

XML-dokument innehåller inte någon formatering. De innehåller bara strukturerad information. När du har ett XML-schema kan du använda XSL (Extensible Stylesheet Language) för att visa informationen. På samma sätt som du kan formatera HMTL med CSS (Cascading Style Sheets) kan du formatera XML-data med XSL. Du kan definiera format, sidelement, layouter, osv. i en XSL-fil och koppla den till en XML-fil så att dessa data formateras enligt det du har definierat i XSL-filen när en användare tittar på XML-data i en webbläsare. Innehållet (XML-data) och presentationen (definierad av XSL-filen) är helt separata, vilket ger dig mer kontroll över hur informationen visas på en webbsida. XSL är i själva verket en presentationsteknik för XML där primära utdata är en HTML-sida.

XSLT (Extensible Stylesheet Language Transformations) är ett delspråk av XSL som gör att du kan visa XML-data på en webbsida och ”omvandla” dessa, tillsammans med XSL-format, till läsbar, formaterad information i HTML-format. Du kan använda Dreamweaver för att skapa XSLT-sidor som gör att du kan utföra XSL-omvandlingar med en programserver eller webbläsare. I en XSL-omvandling via server är det servern som omvandlar XML och XSL och visar dessa på sidan. I en klientomvandling gör webbläsaren (t.ex. Internet Explorer) jobbet.

Vilken inriktning du till slut väljer (serveromvandlingar eller klientomvandlingar) beror på vilket slutresultat du försöker uppnå, vilka tekniker som finns tillgängliga för dig, vilken åtkomstnivå du har till XML-källfiler samt andra faktorer. Båda inriktningarna har sina fördelar och begränsningar. Serveromvandlingar fungerar t.ex. i alla webbläsare medan klientomvandlingar är begränsade till moderna webbläsare (Internet Explorer 6, Netscape 8, Mozilla 1.8 och Firefox 1.0.2). Med serveromvandlingar kan du visa XML-data dynamiskt från din egen server eller från någon annanstans på nätet medan klientomvandlingarna måste använda XML-data som finns lokalt på din webbserver. Serveromvandlingar kräver dessutom att du använder sidorna på en konfigurerad programserver medan klientomvandlingar endast kräver tillgång till en webbserver.

En självstudiekurs om XML finns på www.adobe.com/go/vid0165_se.

XSL-omvandlingar via server

Dreamweaver innehåller metoder för att skapa XSLT-sidor där du kan utföra XSL-omvandlingar via servern. När en programserver utför XSL-omvandlingen kan filen som innehåller XML-data ligga på din server eller någon annanstans på nätet. Dessutom kan vilken webbläsare som helst visa dessa omvandlade data. Det är dock ganska komplicerat att använda sidor för serveromvandlingar och det kräver att du har tillgång till en programserver.

När du arbetar med XSL-omvandlingar via servern kan du använda Dreamweaver för att skapa XSLT-sidor som skapar fullständiga HTML-dokument (hela XSLT-sidor) eller XSLT-avsnitt som skapar en del av ett HTML-dokument. En hel XSLT-sida påminner om en vanlig HTML-sida. Den innehåller en <body>-tagg och en <head>-tagg och gör att du kan visa en kombination av HTML- och XML-data på sidan. Ett XSLT-avsnitt är kod som används av ett separat dokument och som visar formaterade XML-data. Till skillnad från en hel XSLT-sida är det en oberoende fil som inte innehåller någon <body>- eller <head>-tagg. Om du vill visa XML-data på en egen sida skapar du en hel XSLT-sida och kopplar XML-data till den. Om du istället ville visa XML-data i ett visst avsnitt på en befintlig dynamisk sida, t.ex. en dynamisk hemsida för en butik med sportartiklar, med sportresultat från ett RSS-inlägg som visas på den ena sidan, skulle du skapa ett XSLT-avsnitt och infoga en referens till det på den dynamiska sidan. Det är vanligare att skapa XSLT-avsnitt och använda dem i samband med andra dynamiska sidor för att visa XML-data.

Det första steget för att skapa dessa typer av sidor är att skapa XSLT-avsnittet. Det är en separat fil som innehåller layouten, formateringen, osv. för de XML-data som du vill visa på den dynamiska sidan. När du skapar XSLT-avsnittet infogar du en referens till det på den dynamiska sidan (t.ex. en PHP- eller ColdFusion-sida). Den infogade referensen till avsnittet fungerar ungefär som en SSI (server side include). Formaterade XML-data (avsnittet) ligger i en separat fil och i designvyn visas en platshållare för avsnittet på den dynamiska sidan. När en webbläsare begär den dynamiska sidan som innehåller referensen till avsnittet bearbetar servern den inkluderade instruktionen och skapar ett nytt dokument där det formaterade innehållet i avsnittet visas istället för platshållaren.

XSL-omvandlingar via server
A. Webbläsaren begär en dynamisk sida B. Webbservern hittar sidan och skickar den till programservern C. Programservern söker på sidan efter instruktioner och hämtar XSLT-fragment D. Programservern utför transformeringen (läser XSLT-fragment, hämtar och formaterar xml-data) E. Programservern infogar transformerat fragment på sidan och skickar tillbaka den till webbservern F. Webbservern skickar den färdiga sidan till webbläsaren 

Du använder serverfunktionen XSL-omvandling för att infoga referensen i ett XSLT-avsnitt på en dynamisk sida. När du infogar referensen skapar Dreamweaver mappen includes/MM_XSLTransform/ i platsens rotmapp som innehåller en biblioteksfil för körtid. Programservern använder funktionerna som definierats i den här filen när angivna XML-data omvandlas. Filen hämtar XML-data och XSLT-avsnitt, utför XSL-omvandlingen och visar resultaten på webbsidan.

Filen som innehåller XSLT-avsnittet, XML-filen som innehåller dina data och den biblioteksfil för körtid som skapats måste alla finnas på servern för att sidan ska visas ordentligt. (Om du väljer en fjärransluten XML-fil som datakälla, t.ex. en från ett RSS-inlägg, måste den filen givetvis finnas någon annanstans på Internet.)

Du kan även använda Dreamweaver för att skapa hela XSLT-sidor som du använder med serveromvandlingar. En hel XSLT-sida fungerar på exakt samma sätt som ett XSLT-avsnitt, förutom att när du infogar referensen till hela XSLT-sidan med serverfunktionen XSL-omvandling så infogar du hela innehållet i en HTML-sida. Därmed måste den dynamiska sidan (.cfm-, .php- eller .asp-sidan som fungerar som behållarsida) rensas på all HTML innan du infogar referensen.

Dreamweaver stöder XSL-omvandlingar för ColdFusion-, ASP- och PHP-sidor.

Obs!

Din server måste konfigureras på rätt sätt för att utföra serveromvandlingar. Kontakta serveradministratören för mer information.

XSL-omvandlingar via klient

Du kan utföra XSL-omvandlingar på klienten utan att använda en programserver. Du kan använda Dreamweaver för att skapa en hel XSLT-sida som gör detta, men för klientomvandlingar måste du manipulera XML-filen som innehåller de data som du vill visa. Klientomvandlingar fungerar dessutom endast i moderna webbläsare (Internet Explorer 6, Netscape 8, Mozilla 1.8 och Firefox 1.0.2). Mer information om vilka webbläsare som stöder/inte stöder XSL-omvandlingar finns på www.w3schools.com/xsl/xsl_intro.asp.

Skapa först en hel XSLT-sida och koppla en XML-datakälla till den. (Du får en uppmaning i Dreamweaver att koppla datakällan när du skapar den nya sidan.) Du kan skapa en XSLT-sida från början eller så kan du konvertera en befintlig HTML-sida till en XSLT-sida. När du konverterar en befintlig HTML-sida till en XSLT-sida måste du koppla en XML-datakälla till den via panelen Bindningar (Fönster > Bindningar).

När du har skapat XSLT-sidan måste du länka den till XML-filen som innehåller XML-data genom att infoga en referens till XSLT-sidan i själva XML-filen (ungefär som om du skulle infoga en referens till en extern CSS-formatmall i <head>-avsnittet på en HTML-sida). Besökarna på platsen måste visa XML-filen (inte XSLT-sidan) i en webbläsare. När besökarna på platsen tittar på sidan utför webbläsaren XSL-omvandlingen och visar XML-data formaterade av den länkade XSLT-sidan.

Förhållandet mellan de länkade XSLT- och XML-sidorna är lika begreppsmässigt, men skiljer sig från den externa modellen för CSS/HTML-sidor. När du har en HTML-sida med innehåll (t.ex. text) använder du en extern formatmall för att formatera innehållet. HTML-sidan avgör innehållet och den externa CSS-koden, som användaren aldrig ser, avgör presentationen. Med XSLT och XML är situationen den omvända. XML-filen (som användaren aldrig ser i obearbetat format) avgör innehållet medan XSLT-sidan avgör presentationen. XSLT-sidan innehåller tabeller, layout, bilder, osv. som vanlig HTML oftast innehåller. När en användare tittar på XML-filen i en webbläsare formaterar XSLT-sidan innehållet.

XSL-omvandlingar via klient
A. Webbläsaren begär en XML-fil B. Servern svarar genom att skicka XML-filen till webbläsaren C. Webbläsaren läser XML-direktivet och anropar XSLT-filen D. Servern skickar XSLT-filen till webbläsaren E. Webbläsaren transformerar XML-data och visar dem i webbläsaren 

När du använder Dreamweaver för att länka en XSLT-sida till en XML-sida infogar Dreamweaver rätt kod åt dig högst upp på XML-sidan. Om du äger XML-sidan som du länkar till (d.v.s. om XML-filen finns exklusivt på din webbserver) behöver du bara använda Dreamweaver för att infoga rätt kod som länkar de två sidorna. När du äger XML-filen är XSL-omvandlingarna som utförs av klienten helt dynamiska. När du uppdaterar data i XML-filen kommer alla HTML-utdata som använder den länkade XSLT-sidan automatiskt att uppdateras med den nya informationen.

Obs!

XML- och XSL-sidor som du använder för klientomvandlingar måste ligga i samma katalog. Om de inte gör det kommer webbläsaren att läsa XML-filen och hitta XSLT-sidan för omvandlingen, men den kommer inte att hitta resurser (formatmallar, bilder, osv.) som definierats av relativa länkar på XSLT-sidan.

Om du inte äger XML-sidan som du länkar till (om du t.ex. vill använda XML-data från ett RSS-inlägg någonstans på nätet) kommer arbetsflödet att bli något mer komplicerat. Om du vill utföra klientomvandlingar med XML-data från en extern källa måste du först hämta XML-källfilen till samma katalog där XSLT-sidan ligger. När XML-sidan finns på din lokala plats kan du använda Dreamweaver för att lägga till rätt kod som länkar den till XSLT-sidan och lägga upp båda sidorna (XML-filen som du hämtat och den länkade XSLT-sidan) på din webbserver. När användaren tittar på XML-sidan i en webbläsare formaterar XSLT-sidan innehållet, precis som i föregående exempel.

Nackdelen med att utföra XSL-omvandlingar via klient på XML-data som kommer från en extern källa är att XML-data endast är ”dynamiska” till viss del. XML-filen som du hämtar och ändrar är bara en ögonblicksbild av filen som finns någon annanstans på nätet. Om den ursprungliga XML-filen på nätet ändras måste du hämta filen igen, länka den till XSLT-sidan och lägga upp XML-filen på webbservern igen. Webbläsare återger endast de data som de får från XML-filen på webbservern, inte de data som finns i den ursprungliga XML-källfilen.

XML-data och upprepade element

Med XSLT-objekt för upprepade regioner kan du visa upprepade element från en XML-fil på en sida. En region som innehåller en platshållare för XML-data kan omvandlas till en upprepad region. De vanligaste regionerna är en tabell, en tabellrad eller en serie med tabellrader.

I följande exempel visas hur XSLT-objektet för den upprepade regionen används i en tabellrad som visar menyinformation för en restaurang. Den första raden visar tre olika element från XML-schemat: objekt, beskrivning och pris. När XSLT-objektet för den upprepade regionen används i tabellraden och sidan bearbetas av en programserver eller webbläsare upprepas tabellen med unika data som infogats i varje ny tabellrad.

XSLT-objekt för en upprepad region används

När du använder ett XSLT-objekt för en upprepad region på ett element i dokumentfönstret visas en tunn, streckad, grå kontur runt den upprepade regionen. När du förhandsgranskar arbetet i en webbläsare (Arkiv > Förhandsgranska i webbläsare) försvinner den grå konturen och markeringen utökas så att den visar de angivna upprepade elementen i XML-filen, som i föregående illustration.

När du lägger till XSLT-objektet för den upprepade regionen på sidan klipps längden på platshållaren för XML-data i dokumentfönstret av. Detta beror på att Dreamweaver uppdaterar XPath (XML Path-språk) för platshållaren för XML-data så att den motsvarar sökvägen till det upprepade elementet.

Följande kod är t.ex. för en tabell som innehåller två dynamiska platshållare, utan att ett XSLT-objekt för den upprepade regionen läggs till i tabellen:

<table width="500" border="1"> 
    <tr> 
        <td><xsl:value-of select="rss/channel/item/title"/></td> 
    </tr> 
    <tr> 
        <td><xsl:value-of select="rss/channel/item/description"/></td> 
    </tr> 
</table>

Följande kod gäller för samma tabell när XSLT-objektet för den upprepade regionen läggs till i den:

<xsl:for-each select="rss/channel/item"> 
    <table width="500" border="1"> 
        <tr> 
            <td><xsl:value-of select="title"/></td> 
        </tr> 
        <tr> 
            <td><xsl:value-of select="description"/></td> 
        </tr> 
    </table> 
</xsl:for-each>

I föregående exempel har Dreamweaver uppdaterat XPath för de objekt som hamnar inom den upprepade regionen (rubrik & beskrivning) så att de motsvarar XPath i de avgränsande <xsl:for-each>-taggarna, istället för hela dokumentet.

Dreamweaver skapar även sammanhangsberoende XPath-uttryck i andra fall. Om du t.ex. drar en platshållare för XML-data till en tabell som redan har ett XSLT-objekt för en upprepad region tillagt visar Dreamweaver automatiskt XPath relativt till den befintliga XPath i de avgränsande <xsl:for-each>-taggarna.

Förhandsgranska XML-data

När du använder Förhandsvisa i webbläsare (Fil > Förhandsvisa i webbläsare) för att förhandsgranska XML-data som du har infogat i ett XSLT-avsnitt eller en hel XSLT-sida skiljer sig programmet som utför XSL-omvandlingen åt från fall till fall. För dynamiska sidor som innehåller XSLT-avsnitt utför alltid programservern omvandlingen. Andra gånger är det antingen Dreamweaver eller webbläsaren som utför omvandlingen.

I följande tabell sammanfattas fallen när du använder Förhandsvisa i webbläsare och programmen som utför respektive omvandlingar:

Typ av sida som förhandsgranskats i webbläsare Dataomvandling utförd av
Dynamisk sida som innehåller XSLT-avsnitt Programserver
XSLT-avsnitt eller hel XSLT-sida Dreamweaver
XML-fil med länk till hel XSLT-sida Webbläsare

Följande avsnitt innehåller riktlinjer för att hjälpa dig att hitta rätt metoder för förhandsvisning baserat på dina behov.

Förhandsgranska sidor för serveromvandlingar

När det gäller serveromvandlingar omvandlas innehållet som besökaren på platsen slutligen ser av din programserver. När du skapar XSLT- och dynamiska sidor som ska användas med serveromvandlingar är det alltid bra att förhandsgranska den dynamiska sidan som innehåller XSLT-avsnittet istället för själva XSLT-avsnittet. I det tidigare fallet använder du programservern som ser till att förhandsvisningen är konsekvent med det besökarna på platsen kommer att se när de besöker din sida. I det senare fallet utför Dreamweaver omvandlingen och något inkonsekventa resultat kan uppstå. Du kan använda Dreamweaver för att förhandsgranska XSLT-avsnittet medan du skapar det, men du kommer att se de mest exakta resultaten av dataåtergivningen om du använder programservern för att förhandsgranska den dynamiska sidan efter att du har infogat XSLT-avsnittet.

Förhandsgranska sidor för klientomvandlingar

När det gäller klientomvandlingar omvandlas innehållet som besökaren på platsen slutligen ser av en webbläsare. Du uppnår detta genom att lägga till en länk från XML-filen till XSLT-sidan. Om du öppnar XML-filen i Dreamweaver och förhandsgranskar den i en webbläsare tvingar du webbläsaren att läsa XML-filen och utföra omvandlingen. På så sätt får du samma upplevelse som besökaren på platsen.

Med den här metoden är det dock svårare att felsöka sidan eftersom webbläsaren omvandlar XML-filen och skapar HTML internt. Om du väljer alternativet Visa källa i webbläsaren för att felsöka den skapade HTML-filen kommer du bara att se den ursprungliga XML-filen som webbläsaren tog emot, inte hela HTML-filen (taggar, format, osv.) som återger sidan. Om du vill se hela HTML-filen när du visar källkoden måste du förhandsgranska XSLT-sidan istället.

Förhandsgranska hela XSLT-sidor och XSLT-avsnitt

När du skapar hela XSLT-sidor och XSLT-avsnitt kanske du vill förhandsgranska arbetet för att kontrollera att dina data visas på rätt sätt. Om du använder Förhandsvisa i webbläsare för att visa en hel XSLT-sida eller ett XSLT-avsnitt utför Dreamweaver omvandlingen med ett inbyggt omvandlingsprogram. Med den här metoden får du snabba resultat och det blir enklare att skapa och felsöka sidan stegvis. Den innehåller även ett sätt som gör att du kan visa hela HTML-filen (taggar, format, osv.) genom att välja alternativet Visa källa i webbläsaren.

Obs!

Denna förhandsvisningsmetod används ofta när du börjar bygga XSLT-sidor, oavsett om du använder klienten eller servern för att omvandla data.

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy