HTML

Szemantikus web

A HTML alapú web elérkezett a határaihoz, itt az ideje a technológiai és szemléletváltásnak! A blogban megjelent írások szerzője Hidvégi Gábor, a bemutatott ötletek és megoldások jogtulajdonosa.

Friss topikok

  • fodor balazs: Az XSLT tényleg egy okos állatfaj, csak elég kevés esélyt látok az elterjedésére én is. Ehelyett i... (2011.03.19. 20:13) Szemantika a HTML-ben
  • Hidvégi Gábor: @arsen: az Apple-t a saját érdekei vezérlik, például a HTML5-öt azért favorizálja, mert nagyobb ko... (2011.03.16. 23:39) Mire van szükségünk HTML 5 helyett?
  • Hidvégi Gábor: @hrgy: az oda-vissza gombok használata résztartalom-váltás esetén azért is problémás, mivel a docu... (2011.03.15. 22:11) A HTML oldalak gyorstárazása

XML + XSLT példa

2011.03.09. 21:53 Hidvégi Gábor

Az esetek többségében XML fájlunk két (sokszor el nem különülő) részből áll: a kérésre adott adatokból, valamint kiegészítő információkból. Hogy ezekből melyiket hasznosítjuk, az az igényeinktől függ; lehet, hogy csak a fő adatokra van szükségünk (például össze szeretnénk szedni hasonló technológiával készült termékek paramétereit, és azokat egy gyűjtőoldalon megjeleníteni), de lehet, hogy mindenre (ha egy konkrét weboldalt szeretnénk megnézni, ebben az esetben a kiegészítő információkból épül fel a HTML).

Lássuk akkor egy példán keresztül, hogyan is működik az XML alapú web! Egy nagyon egyszerű blogbejegyzés-gyűjtőoldalt készítettem el, amihez mellékelem a két letölthető példafájlt, és a blog.xml-t megnyitva megtekinthető az eredmény. Ez a leginkább kezdők számára készült a leírás szájbarágós stílusú, ezért akik már ismerik az XML + XSL működését, nyugodtan kihagyhatják.

blog.xml

blog.xsl.xml

(Mivel a blog.hu nem enged meg fájlokat feltölteni .xsl kiterjesztéssel, ezért hozzábiggyesztettem egy .xml-t)

A blog.xml második sorában lévő <?xml-stylesheet type="text/xsl" href="blog.xsl.xml" ?> utasítja a böngészőt, hogy töltse be a megadott stíluslapot, és annak segítségével jelenítse meg. Azért nevezik stíluslapnak, mert elveiben hasonlóan működik a CSS stíluslapokhoz, azaz szabályokat definiálhatunk benne, hogy az adott adatblokkot mivé alakítsa át. A generált adatok formátuma lehet XML, HTML és szöveges tartalom.

Egy XML fájlban egy gyökér elem, azaz root node lehet, minden tartalomnak azon belül kell lennie; esetünkben ezt <blog>-nak neveztem el önkényesen. A kiegészítő információknak létrehoztam egy saját elemet, és a <tartalom> blokkban helyeztem el a képzeletbeli blog bejegyzéseit. Mint látható, minden bejegyzésnek egyszerű szöveges tulajdonságai vannak, valamint a <szoveg> elemben HTML kódot találhatunk, amit értelemszerűen egy az egyben fogunk megjeleníteni.

A blog.xsl.xml-ben találjuk a megjelenítéshez szükséges beállításokat és stílusokat. A kimeneti adatformátunk HTML (mint látható, megadhatjuk a doctype-ot), amihez UTF-8 karakterkódolást használunk.

<xsl:output method="html" version="1.0" encoding="utf-8" doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN" doctype-system="http://www.w3.org/TR/html4/loose.dtd" />

A 7. sorban található <xsl:key ... /> sorral most nem foglalkozom, ami számunkra fontos, az az első stílusdefiníció:

<xsl:template match="blog">
  <html>
    <head>
      <xsl:call-template name="html_fejlec" />
    </head>
    <body>
      <div id="fejlec">
        <h1><xsl:value-of select="//kiegeszito_informaciok/cim" /></h1>
      </div>
 
      <div id="tartalom">
        <xsl:apply-templates select="tartalom" />
      </div>
 
      <div id="lablec">
          copyright (c) Hidvégi Gábor
      </div>
    </body>
  </html>
</xsl:template>

A bemenő XML értelmezése úgy történik, hogy a feldolgozó szoftver végigiterál az összes XML elemen, megnézi, hogy tartozik-e hozzá stílusdefiníció, ha igen, akkor azt alkalmazza. Esetünkben az <xsl:template match="blog"> azt jelenti, hogy minden <blog> elemet lecserél a definícióban található blokkra. Ez a példában egyszer fordul elő, mivel csak a gyökér elemet neveztem el így, de ha a tartalmi szekcióban is így neveznék el egy elemet, akkor elég érdekes lenne a végeredmény.

A következő sor a <xsl:call-template name="html_fejlec" />, ahol egy névvel ellátott definíció eredményét illesztjük bele a generált HTML kódunkba, nevezetesen a <title> és <meta> tag-eket. Az oldal címe a bemenő XML <kiegeszito_informaciok> blokkja cim elemének tartalma, és a későbbiekben ugyanezt az adatot használjuk a <div id="fejlec">-ben lévő <h1> értékének beállításához is.

Hadd hívjam fel a figyelmet a "html_fejlec" nevű stílusdefinícióban található programrészletre, ami a <meta name="keywords"> tartalmának generálásáért felelős!

<xsl:attribute name="content">
  <xsl:for-each select="//cimke[generate-id() = generate-id(key('cimkek', .)[1])]">
    <xsl:value-of select="." />
    <xsl:if test="position() != last()">, </xsl:if>
  </xsl:for-each>
</xsl:attribute>

Működését tekintve ez összegyűjti a bemenő XML-ben található összes egyedi <cimke> elemet, és összefűzi őket egy karakterláncba, vesszővel elválasztva, azaz az eredmény körülbelül így fog kinézni: <meta name="keywords" content="internet, http, szemantikus web">.

Ami ebben különleges, az az elv: nem a szerveroldalon dől el, hogy bizonyos adatokat milyen formában írunk ki, hanem a kliensoldalon, így nem kell a háttérrendszer programozóinak azzal foglalkozniuk, hogy számunkra ugyanazokat az adatokat több módon legenerálják. Már korábban többször említettem, hogy szemléletváltásra van szükség a szemantikus web bevezetéséhez, ez erre egy kiváló példa.

Visszatérve a példára, a következő érdekes sor:

<xsl:apply-templates select="tartalom" />

Ez azt csinálja, hogy a bemenő adatokban megkeresi a <tartalom> elemet, a benne lévő elemeken végigiterál, és ha tartozik hozzájuk stílusdefiníció, azokat feldolgozza és beilleszti erre a helyre. Ha megnézzük a blog.xml-t, a <tartalom>-on belül a <bejegyzesek>-et találjuk, azon belül pedig <bejegyzes> elemeket.

<xsl:template match="bejegyzesek">
  <div id="bejegyzesek">
    <xsl:for-each select="bejegyzes">
      <xsl:call-template name="bejegyzes" />
    </xsl:for-each>
  </div>
</xsl:template>

A fenti definíció segítségével dolgozzuk fel a <bejegyzesek>-et, amiben egy ciklus segítségével végigiterálunk az összes <bejegyzes>-en, és meghívjuk a hozzá tartozó stílust.

A könnyebb érthetőség végett leírom, hogyan működik pontosan a fenti definíció. Az <xsl:template match="bejegyzesek"> hatására a feldolgozó a bemenő XML fájlban megkeresi az összes <bejegyzesek> elemet (esetünkben egyet), és annak tartalmát adja át a stílusnak, ami a következő XML töredék:

<bejegyzes>
  ...
</bejegyzes>
<bejegyzes>
  ...
</bejegyzes>

Első lépésként "kirajzolja" ezt a sort:

<div id="bejegyzesek">

Ez után következik az iteráció:

<xsl:for-each select="bejegyzes">

Ez "fogja" az első <bejegyzes> tartalmát, és átadja a <xsl:call-template name="bejegyzes" /> utasításban megjelölt "bejegyzes" nevű stílusdefiníciónak, amelyik tehát a következő XML töredéket kapja meg:

<cim>A HTTP protokollról</cim>
<url>a_http_protokollrol</url>
<szerzo>Hidvégi Gábor</szerzo>
...

Amikor ebben a stílusban a vezérlés a <h2><xsl:value-of select="cim" /></h2> sorra kerül, akkor ide ennek az adatblokknak a <cim> elemében található tartalmat másolja: <h2>A HTTP protokollról</h2>.

Végül visszakerülünk a <xsl:template match="bejegyzesek"> definícióba, ami az iteráció után lezárja a megnyitott <div> elemünket.

Mindenkit bátorítok, hogy kezdjen el játszani a stíluslapokkal, viszonylag hamar rá lehet jönni a logikájukra, XSL referenciának a ZVON gyűjteményét ajánlom (magyar nyelvű).

Szólj hozzá!

Címkék: szemantikus web xml xslt

A bejegyzés trackback címe:

https://szemantikus.blog.hu/api/trackback/id/tr42726359

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

Nincsenek hozzászólások.