Windows - XML adatok HTML oldalakon

XML 10. rész

forráskód letöltése
Az XML dokumentumok felhasználási területe rendkívül széles. Láttunk már példát Excel táblázatok adatainak XML-ben való tárolására, formázott dokumentum készítésére, de XML-ben készültek a Windows 2000/XP MMC konzoljai is. Most egy HTML táblázatot hozunk létre és változtatunk a dokumentum viselkedésén: az Internet Explorer-el való megnyitás után nem forráskód jelenik meg, hanem a formázott tartalom.
Példa dokumentumunk fizikailag három fájlból fog állni:
"Start.xml" - Kattintsunk rá duplán, elindul az Internet Explorer és betölti a másik két állományt, végül megjeleníti a formázott tartalmat.
"Watermark.xml" - Tárolja a háttérben megjelenő vízjel szövegét.
"Transform.xsl" - Minden megjelenítéssel kapcsolatos információ itt tárolódik.
A példaadatok egy könyvkereskedés eladási statisztikáját alkotják. Táblázatosan megjelenítjük az adatokat fejléccel, összegzéssel ellátva. A dokumentum rendelkezik címsorral, alcímmel és megjegyzéssel, a háttérben pedig egy vízjel látható.
Elsőként az indító állományt vizsgáljuk meg.
Start.xml
Kötelező paraméterként adjuk meg az XML verziószámát, majd határozzuk meg a megjelenítési stíluslapot leíró fájlt (XSL).
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="transform.xsl"?>
A dokumentum fejlécének (heading), alcímének (subhead) és megjegyzés sorának (description) szövegét külön tároljuk a többi adattól.
<sales>
   <summary>
      <heading>Windows Software Online</heading> 
      <subhead>XML cikksorozat</subhead> 
      <description>Minta tablazat</description> 
   </summary>
Most következnek a táblázat adatai, 4 oszlopot és 3 sort hozunk létre, a "books_sold" értékét számformátumra (lásd cikksorozatunk előző részét) állítjuk és mindenhol megadunk egy számot. A "region" jelölőelem jelenti a sorokat, a "quarter" pedig az oszlopokat.
<data>
      <region>
         <name>1 sor</name> 
         <quarter number="1" books_sold="12400"/> 
         <quarter number="2" books_sold="13100" /> 
         <quarter number="3" books_sold="14010" /> 
         <quarter number="4" books_sold="1000" /> 
      </region>
      <region>
         <name>2 sor</name> 
         <quarter number="1" books_sold="21000" /> 
         <quarter number="2" books_sold="36080" /> 
         <quarter number="3" books_sold="22000" /> 
         <quarter number="4" books_sold="12000" /> 
      </region>
      <region>
         <name>3 sor</name> 
         <quarter number="1" books_sold="11000" /> 
         <quarter number="2" books_sold="10550" /> 
         <quarter number="3" books_sold="9500" /> 
         <quarter number="4" books_sold="10000" /> 
      </region>
   </data>
</sales>
Watermark.xml
Ez egy egyszerűbb XML fájl lesz, a háttérben megjelenő vízjel tartalmát tárolja. Tulajdonképpen beilleszthető lenne a "Start.xml"-be is, de logikailag elkülönül tőle, ezért került másik állományba.
<?xml version='1.0'?>
<document>
   <watermark>Animare</watermark>
   <copyright>www.SoftwareOnline.hu</copyright>
</document>
Transform.xsl
Az előző fájlokban adatokat tároltunk és nem volt semmilyen információ a megjelenítésre vonatkozóan. Ezzel teljesen különválasztottuk a tartalmat az ábrázolástól. Most viszont meg kell adnunk a teljes megjelenítés minden részletét.
Az XML verziószámán kívül meg kell adni a stíluslap verziószámát is.
<?xml version='1.0'?>
<xsl:stylesheet version="1.0"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
A kimeneti formátum HTML, ez teszi lehetővé, hogy az Internet Explorer megnyissa és értelmezze.
<xsl:output method="html"/>
Határozzunk meg az adatokban egy küszöbértéket: ami 21000-nél kisebb az piros színnel fog megjelenni, ami nagyobb az zölddel.
<xsl:param name="low_sales" select="21000"/>
<xsl:template match="/">
<html>
<head>
<title><xsl:value-of select="//summary/heading"/></title>
</head>
<body>
A szöveg hátterébe tegyünk egy vízjelet (Internet Explorer böngészőt igényel), meghatározott betűtípussal és méretben, tartalma a "Watermark.xml"-ben tárolódik.
<xsl:variable name="watermark" select="document('watermark.xml')"/>
<div style="position:absolute;font-size:96;font-family:Times New Roman;
      color:#F0F0F0;z-index:-1">
   <xsl:value-of select="$watermark//watermark"/>
</div>
A "summary" jelölőelemek által határolt "heading" elem tartalmát (Strat.xml) a HTML címsor1 (h1) formázásával íratjuk ki, a "subhead" elemét pedig címsor2-vel.
<h1><xsl:value-of select="//summary/heading"/></h1>
<h2><xsl:value-of select="//summary/subhead"/></h2>
<p><xsl:value-of select="//summary/description"/></p>
Következő lépés, hogy létrehozzunk egy HTML táblázatot. Elsőként a fejléceket jelenítjük meg. A "Start.xml" dokumentum adataira ismét a //jelölőelem/adat jelölőelem formában hivatkozunk és a @ karakterrel kérjük le az oszlopokat alkotó elemek sorszámát.
<table>
<tr>
   <th>sor\oszlop</th>
   <xsl:for-each select="//data/region[1]/quarter">
      <th><xsl:value-of select="@number"/> oszlop</th>
   </xsl:for-each>
   <th>Osszesen</th>
</tr>
Ezután feltöltjük a táblázatot a "Start.xml"-ben szereplő adatokkal. Az előzőekhez képes szerepel egy programozás technikai újdonság, mégpedig a számformátum egész és tizedes ábrázolásának megadása a ###,### karakterek segítségével.
<xsl:for-each select="//data/region">
<tr>
   <th style="text-align:left"><xsl:value-of select="name"/></th>
   <xsl:for-each select="quarter">
<td>
   <xsl:attribute name="style">
      <xsl:choose>
         <xsl:when test="number(@books_sold <= $low_sales)">
               color:red;</xsl:when>
         <xsl:otherwise>color:green;</xsl:otherwise>
      </xsl:choose>
      text-align:right;
   </xsl:attribute>
   <xsl:value-of select="format-number(@books_sold,'###,###')"/>
</td>
   </xsl:for-each>
   <td style="text-align:right;font-weight:bold;">
      <xsl:value-of select="format-number(sum(quarter/@books_sold),'###,###')"/>
   </td>
</tr>
</xsl:for-each>
Végül a táblázat alá kisbetűkkel (font-size:9) kiíratjuk a "Watermark.xml"-ben tárolt "copyright" jelölőelem tartalmát.
</table>
<div style="font-size:9">
   <xsl:value-of select="$watermark//copyright"/>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

XML cikksorozat