XML, XSL, CSS, HTML ...

Az XML-t önállóan megtanulni egy kicsit olyan lehet, mint latinul tanulni. Bemagoljuk a szótárt és néhány nyelvtani szabályt, de addig nem sok értelme van, amíg hiányoznak az összefüggések és a tényleges alkalmazás (mint például az orvosi iskolákban). Tudjuk, hogy az XHTML az XML, de a legtöbb webtervezô nem használja naponta. Sôt a legtöbb fejlesztô nem is ismeri teljesen a lényegét és a hasznosságát. Aki nem ismer egy XML-alapú szervertechnológiát, annak az XML célja kissé homályos lehet.

Az XML-struktúra manipulációja XSLT-vel

És mi a helyzet az XML ügyféloldali használatával? Leszokunk a régi keresôkrôl, amelyek CSSés XHTML-támogatása szegényes, de van egy másik, az elmúlt években figyelmen kívül hagyott technológia, amit érdemes megvizsgálni: az XSLT. Az XSLT képviseli az XSL átalakításokat és ugyanúgy, mint az XML, az XSLT is a W3C-ben dolgozó barátainktól származik. Az XSLT és az unokatestvére, az XSL Formatting Objects (XSLFO) is az XML és más típusú dokumentumok (például HTML, PDF és RTF) struktúrájának megváltoztatására szolgálnak. Egy dokumentum átalakításának folyamata XSLT-ben magában foglalja az egyik formátumból, vagy struktúrából származó adatok átalakítását egy másikba. Habár az XSLT nagyon hatékony, de a nyelv elsajátítása egy lassú folyamat.

A jó hír az az, hogy a legtöbb modern keresô támogatja az XSLT-t és habár a nyelv új gondolkodásmódot igényel az adatfeldolgozást és az alapproblémák megoldását illetôen, azért elég könnyû elsajátítani. Az XSLT-n kívül, az XPath támogatja az átalakítási folyamatot. Mivel az XPath amolyan integrált része az XSLT-nek, általában egyetlen egységként kezelik ôket. Aki jártas az adatbázisokban, annak érthetô, hogy az XPath az XML-t támogatja, az SQL pedig a kapcsolódó adatbázist.

Egy másik nyelv elsajátítása

A tartalom elkülönítésének elônyeit a designtól, XHTML és CSS segítségével már megismertük. Mit gondolnak akkor, ha én azt mondom, hogy ez még nem minden?

Ugyan a design zöme tárolható a CSS fájlokban, a legtöbb dokumentum még tartalmaz a tartalomhoz tartozó strukturális kódot. A design legfontosabb részének CSS-be történô áthelyezése bizonyára fejleszti a designt, de ez nem az a tartalom-szétválasztás, amit mi szeretnénk.

Az XSLT használata lehetôvé teszi a tartalom teljes elválasztását a designtól. Ahelyett, hogy összekevernénk a strukturális jeleket az adatokkal, mi kettéválasztjuk a kettôt. A tartalom XML-ben található, a dokumentum struktúrája XSL-ben, a design CSS-ben, a jellemzôk pedig JavaScript/ECMAScript-ben. Az elkülönítés fejleszti a munkafolyamatokat Ez a modell nem csak a kezelhetôséget, de a nagyon összetett weboldalakat is fejleszti.


A tartalom és megjelenés szétválása – a szerzô illusztrációjában. Baloldalon a HTML 1997 körüli állapota, középen a web-szabványok létrejötte körüli helyzet, amíg a jobb oldalon a következô generációs rendszer látható.

Lehetôvé teszi a programozók és/vagy az adatbázis-kezelôk részére, hogy az adatokra koncentráljanak és létrehozzák az XML-t és nem kényszeríti ôket arra, hogy UI és használhatósági döntéseket hozzanak. Az információszerkesztô foglalkozik az oldalszerkesztéssel XSLT használatával és ô csoportosítja, rendszerezi és jeleníti meg a tartalmat. A design-készítô együtt dolgozik az információszerkesztôvel és CSS használatával alkotja meg a színsémákat, a felületet és a tipográfiát, valamint Java- Scriptet használ a funkcionalitás létrehozására. Amíg a struktúra nem változik meg, az összes szint önhatalmúlag mûködik. Az XML adat frissíthetô anélkül, hogy azt jelezni kellene az információszerkesztônek; vagy az XSLT változtatható, vagy másolható más célokra is, továbbá a látvány is megváltoztatható CSS-sel. Nagy elônye a modellnek, hogy az XSLT szinte bármilyen dokumentumformátum (például SVG, XForms, XHTML 2.0) elôállítására alkalmas.

Egy könyves példa

Egy egyszerû példát mutatok be Önöknek, amely a legtöbb modern keresôvel mûködik. (Javaslom, hogy használják a Firefox, az Internet Explorer, vagy a Safari legutolsó verzióját). Példánkban létrehozunk egy könyvlistát. Elôször elkészítjük az XML fájlt, ami semmi mást nem tartalmaz, csak adatokat – könyvcímeket és a szerzôk neveit.

Mentsék el ezt a fájlt az asztalra, majd nyissák meg: (a nyitó és záró kisebb-nagyobb jelek közti rész egy sorba kell, hogy kerüljön – szerk.)

books.xml
<?xml version="1.0" encoding="UFT-8" ?>
<books>
   <book>
      <author>Roth, Philip </author>
      <title>American Pastoral</title>
   </book>
   <book>
      <author>Hesse, Hermann</author>
      <title>The Glass Bead Game</title>
   </book>
   ...
   </book>
</books>

Egyszerûen lefordítva, az elsô sor azt mondja: ”Ez egy XML dokumentum, az 1.0 verzióját használom UTF-8-cas kódolással”. A <books> … </books> sorok között számos <books> … </book> sort találunk, amelyek tartalmaznak <author> … </author> és <title> … </title> sorokat. Ez egy egyszerû XML fájl, amely minden formázástól mentes – csak az alapvetô tartalmat szolgáltatja.

Most készítsük el az XSLT fájlt!

Mentsék el ezt a fájlt az asztalra majd nyissák meg:

books.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
</xsl:stylesheet>

Ezek a sorok kicsit ijesztôbbnek tûnnek, mint amilyenek valójában. A második sor a dokumentum alap eleme. Elengedhetetlenül szükséges. Szintén elengedhetetlenül szükséges a verzió és a használt verzió érvényes namespace megadása. A namespace meghatározás ”xmlns:xsl="http://www.w3.org/1999/XSL/Transform"” egyszerûen egy egységes azonosító annak igazolására, hogy a keresô, vagy az eszköz, amely elôadja az XSLT-t, az ugyanarról a verzióról beszél. Az természetes, ha valaki most még nem érti meg a namespace lényegét, de azt meg kell érteni, hogy ezekre a meghatározásokra szükség van.

Az elsô transzformáció
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
   <html>
      <head>
         <title>My Book Club</title>
      </head>
      <body>
         <h2>Some Good Books </h2>
      </body>
   </html>
</xsl:template>
</xsl:stylesheet>

Valószínûleg a HTML mindenki számára ismerôs. Az egyetlen újdonság a HTML-tartalmat körülölelô szöveg. Az XSLT egyik lényege a minta-koncepció: ”Halló, XSL processzor! Ha talál egy eredeti csomópontot, készítse el a tartalmat abban a formátumban, amit meghatároztam”.

Szóval hogyan egyesítsük a tartalmat (books.xml) a struktúránkkal (books.xsl)? Az egyszerûség kedvéért csak annyit teszünk, hogy az XSLT processzort megadjuk a keresônek. Adjuk a vastagon írt sort a books.xml-hez:
<?xml version="1.0" encoding="UFT-8" ?>
<?xml-stylesheet type="text/xsl" href="books.xsl"?>
<books>
   <book>
      <author>Roth, Philip </author>
      <title>American Pastoral</title>
   </book>
   <book>
      <author>Hesse, Hermann</author>
      <title>The Glass Bead Game</title>
   </book>
   ...
   </book>
</books>

Ez a sor megadja a keresônek, hogy melyik XSLT fájlt használja az átalakítás során. Mentsük el a books.xml-t és nyissuk azt ki a keresôben. A következôt kell látnunk:

Some Good Books

Ha ezt a sort látják, akkor gratulálok! Ezzel létrejött az elsô átalakítás. Ez azt jelenti, hogy az XSL megtalálta a megfelelô elemet és az elvárásoknak megfelelôen kezelte a HTML-t. Az adatok kinyerése Most nyerjük ki ténylegesen az adatokat a fájlból. Ehhez néhány utasítást kell adnunk az XSL-hez. Adjuk a vastagon írt sorokat a books.xml-hez:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
   <html>
      <head>
         <title>My Book Club</title>
      </head>
      <body>
         <h2>Some Good Books </h2>
         <xsl:apply-templates />
      </body>
   </html>
</xsl:template>

<xsl:template match="books">
   <ul id="booklist">
   <xsl:apply-templates />
   </ul>
</xsl:template>

<xsl:template match="book">
   <li><em><xsl:value-of select="title" /></em> by <xsl:value-of select="author" /></li>
</xsl:template>

</xsl:stylesheet>

Bizonyára észrevették, hogy a példában egyszerû HTML-k szerepelnek.

Csak annyit teszünk, hogy elkészítjük az XML fájlból a könyvek rendezetlen listáját. Az XSLT nagyon hatékonyan alkalmazza a mintákat, amelyek végrehajtják a megadott instrukciókat. A példában megkerestük az eredeti csomópontot, majd amikor a processzor megtalálta, hozzáadtuk a HTML tartalmat. Közvetlenül a <h2>Some Good Books</h2> alatt a következôt látjuk:
<xsl:apply-templates />. Ez magával vonja a következô utasítást (ami a jelenlegi példánkban a <xsl:template match="books">). Amennyiben a <books> nodet megtalálja, az <ul> és az illeszkedô tag létrejön. Az <xsl:apply-templates /> utasítás megismétlôdik, amely a processzort a következô <book> elemhez illeszkedô mintára irányítja.

És ekkor van az, hogy a tartalmat ténylegesen kinyerjük az XML fájlból. Az <xsl:template match="book"> soron belül található az <xsl:value-of select="title" />. Ez arra utasítja a processzort, hogy vegye ki a szöveget, amit a <title> tag-ok között talál a xml fájlban. Ezután egy következô utasítás kinyeri a szerzô nevét: <xsl:value-of select="author" />. Bezárjuk a mintát és mivel már mindent feldolgoztunk, így az átalakítás elkészült, a processzor kiadja az eredményfát.

Az adatok rendezése

Az adatokat kinyertük és azok ugyanolyan sorrendben vannak, mint az XML fájlban voltak. Elôfordulhat, hogy a könyvek listája száz könyvet is tartalmaz és szeretnénk azt a szerzô vezetékneve szerinti alfabetikus sorrendben látni. És jól jönne a lapszámozás is…Szerencsére csak egy rövid utasítást kell adnunk. Adjuk a vastagon írt sort a books.xsl-hez:
<xsl:template match="books">
<ul>
<xsl:apply-templates>
<xsl:sort select="author" />
</xsl:apply-templates>
</ul>
</xsl:template>

Néhány további apró utasítással véglegesíthetjük munkánkat. Ez az ismertetô csupán körvonalazza az XSLT képességeit. Számos egyéb módszerrel és technikával rendelkezik, és néhányukat sajnos csak egy keresô támogat, vagy máshogyan kell azokat telepíteni - ismerôsen hangzik?. Egy stylesheet kapcsolása az XML fájlban a legtöbb keresôvel mûködik, így ez egy jó módja az XSLT tanulásának elkezdéséhez. Ha régebbi keresôkkel szeretnék használni, olyan nyelveket kell alkalmazni, mint a JSP, a PHP, az ASP.NET vagy a ColdFusion MX.

Ken Westin
Ken Westin jelenleg a Tektronix fejlesztôje. Korábban három évig Web Managerként dolgozott a Pacific Universitynél, valamint webes és interaktív projekteken a Fordnál, a Dodge-nál és a Subarunál.