XML pro web aneb od teorie k praxi, 10.díl

Podtitulem dnešního dílu by mohlo být "XML s HTML na tři způsoby". První způsob nás opět zavede do (jmenného) prostoru, prostřednictvím druhého způsobu přistaneme na datových ostrovech a třetí způsob ukáže alchymii proměny XML dokumentu pomocí substance nazvané XSLT...

V minulém dílu jsme naznačili cestu k vizuální úpravě XML dokumentů pomocí kaskádových stylů. Dá se říci, že pro účely běžného zobrazení obsahu dokumentů si vcelku úspěšně vystačíme s kombinací XML a CSS. Pokud ovšem začneme uvažovat o XML jako "náhradě" (X)HTML, velice rychle narazíme na velká omezení - (X)HTML nám umožňuje jednoduše pracovat např. s hypertextovými odkazy nebo formuláři, což v XML není právě jednoduché. Existují sice nové standardy, jako XLink nebo XForms, které nám mají pomoci dosáhnout stejné funkčnosti dosáhnout (a přinášejí i zcela nové užitečné vlastnosti), nicméně o nějaké smysluplné podpoře v prohlížečích se zatím samozřejmě nedá mluvit...

Je nasnadě, že řešení těchto problémů existuje - dokonce nikoliv pouze jediné. Žádné se ale neobejde bez nějakého toho "ale".

XHTML elementy v XML dokumentu

První způsob, kterým můžeme překonat mezeru mezi XML a starým dobrým jazykem (X)HTML, jsou jmenné prostory, o kterých byla řeč v předminulém dílu. Jistě si vzpomenete na návod, jak lze do HTML stránky přidávat vlastní elementy - jmenné prostory nám nijak nebrání v tom, abychom použili opačný postup, tj. přidání XHTML elementů, které potřebujeme, přímo do XML dokumentu. Nejlépe to zdokumentuje následující příklad. Jedná se o upravený XML dokument použitý v posledním příkladu z minulého dílu, který obsahuje navíc klasický HTML formulář. [ukázka]

<?xml version="1.0"?>
<?xml-stylesheet href="style_1.css" type="text/css" media="screen"?>
<tabform>
	<usertab>
		<user>
			<num>1.</num>
			<nickname>Alien</nickname>
			<password>vetrelec</password>
			<reg-date>11.6.2002</reg-date>
		</user>
		<user>
			<num>2.</num>
			<nickname>Pancho</nickname>
			<password>xx16d5</password>
			<reg-date>15.6.2002</reg-date>
		</user>
	</usertab>
	<form xmlns="http://www.w3.org/1999/xhtml" action="index.php">
		<input type="text" name="promenna-1" />
		<select name="promenna-2">
			<option value="hodnota-1">XML</option>
			<option value="hodnota-2">XSLT</option>
			<option value="hodnota-3">CSS</option>
		</select>
		<input type="submit" value="Odeslat" />
	</form>
</tabform>

Jak vidíte není to nijak složité. Stačí použít jmenný prostor http://www.w3.org/1999/xhtml a prohlížeč rozpozná XHTML element a poté jej správně zobrazí včetně jeho potomků náležejících do stejného namespace. Samozřejmě můžete používat všechny způsoby deklarace, které jmenné prostory umožňují. Má to pouze jediný háček a tím je Microsoft Internet Explorer, který toto příjemné řešení nezvládne díky nedostatečné podpoře standardu namespace. Musíme se tedy zatím spolehnout na Mozillu a Operu.

Datové ostrůvky od Microsoftu

Nebyl by to ovšem Internet Explorer, kdyby na každý standard, který nezvládne, nepřipadala minimálně jedna "skvělá technologie", kterou ovšem jako na potvoru zvládá pouze on sám :-). Na exkluzivní zájezd na datové ostrůvky vás s sebou vezme výhradně jen tento, vychvalovaný i zatracovaný, Internetový Průzkumník.

Datové ostrůvky (data islands) představují poměrně jednoduchý způsob, jak začlenit XML dokument do HTML stránky a posléze v ní použít data z tohoto XML dokumentu. XML dokument lze začlenit do kódu (X)HTML stránky pomocí nestandardního elementu xml. Tento element může obsahovat XML dokument přímo, nebo odkazovat na samostatný XML soubor. Fragment (X)HTML kódu, který obsahuje XML dokument inline, může vypadat např. takto:

<xml id="usertab">
	<usertab>
		<user>
			<num>1.</num>
			<nickname>Alien</nickname>
			<password>vetrelec</password>
			<reg-date>11.6.2002</reg-date>
		</user>
		<user>
			<num>2.</num>
			<nickname>Pancho</nickname>
			<password>xx16d5</password>
			<reg-date>15.6.2002</reg-date>
		</user>
	</usertab>
</xml>

Na samostatný XML soubor se můžeme odkázat pomocí atributu src:

<xml id="usertab" src="files/usertab.xml"></xml>

Nyní je možné začlenit data obsažená v elementech XML dokumentu za použití jiné MS technologie nazvané data binding. V příkladu je vše ukázáno na jednoduché tabulce. Speciální atribut datasrc elementu table obsahuje odkaz na zdroj dat (po znaku # následuje id, které jsme uvedli u elementu xml). V každé buňce tabulky je obsažen element div s dalším neobvyklým atributem datafld, který obsahuje název elementu, ze kterého se získávají data pro textový obsah elementu. Příklad funguje pouze v IE 5.0 a vyšším. [ukázka]

<table datasrc="#usertab">
	<tr>
		<td><div datafld="num"></div></td>
		<td><div datafld="nickname"></div></td>
		<td><div datafld="password"></div></td>
		<td><div datafld="reg-date"></div></td>
	</tr>
</table>

Všimněte si, že tabulka obsahuje pouze jedinou řadu (tr), přesto je ovšem výsledná tabulka zobrazena s počtem řad odpovídajícím počtu elementů user v XML dokumentu.

Praktické využití tato technologie nalezne v současné době spíše omezeně na intranetu. Ovšem vzhledem k jednoduchosti použití data islands a rozšířenosti Internet Exploreru je pravděpodobnost, že se s datovými ostrůvky setkáte, větší než malá :-) Jistě nemusím zdůrazňovat problematičnost podobných řešení pro web.

XSLT transformace

Třetí řešení, které je odpovědí na koexistenci XML a (X)HTML, je transformace XML dokumentu pomocí XSLT stylesheetu. Problematika stylových a transformačních jazyků pro XML je poměrně rozsáhlá a pro současnost a zvláště budoucnost webu velice důležitá. Kdybychom se však měli zabývat třeba jen jazykem XSLT důkladně, vydalo by to zcela jistě na samostatný delší seriál. Proto se pokusím spíše jen nastínit význam XSLT pro XML a ukázat další zdroje informací. Tématu XSLT se však ještě několikrát dotkneme z různých stran v budoucích pokračováváních seriálu, takže znalost XSLT se může ještě hodit.

Jak pracuje XSLT?

Pomocí XSLT stylesheetu je možné vytvořit z XML dokumentu jiný XML dokument se zcela odlišnou strukturou; ale nejen to - může vzniknout také nový HTML dokument nebo textový soubor. XSLT stylesheet je sám také XML dokumentem, který obsahuje speciální elementy. Základními "bloky" XSLT stylesheetu jsou tzv. šablony (templates, element xsl:template). Každá šablona má specifikovány uzly XML dokumentu, na které se aplikuje - takový uzel je dle této šablony změněn na nový uzel ve výsledném dokumentu. Pro specifikaci uzlů, na které se šablona vztahuje, se používá jazyk XPath. Možností, kterak přetvořit uzel původního XML dokumentu, nabízí jazyk XSLT poměrně mnoho.

Ukažme si použití XSLT na jednoduchém příkladu. Připojení XSLT stylesheetu k XML dokumentu lze provést stejným způsobem, jako připojení souboru s kaskádovým stylem:

<?xml version="1.0"?>
<?xml-stylesheet href="xslt-style.xsl" type="text/xsl"?>

Nyní uveďme příklad XSLT stylesheetu, kterým budeme transformovat již notoricky známý XML dokument usertab. Výstup bude obsahovat tabulku s nadpisem.

<?xml version="1.0"?>
<xsl:stylesheet version=`1.0` 
	xmlns:xsl=`http://www.w3.org/1999/XSL/Transform`>
	
	<xsl:template match="usertab">
		<html>
			<head>
				<title>XSLT transformace</title>
			</head>
			<body>
				<h1>Tabulka uzivatelu</h1>
			    <table border="1">
			         <xsl:apply-templates />
			    </table>
			</body>
		</html>
	</xsl:template>
	
	<xsl:template match="user">
	     <tr>
	          <xsl:apply-templates />
	     </tr>
	</xsl:template>
	
	<xsl:template match="user//*">
	     <td>
	          <xsl:value-of select="."/>
	     </td>
	</xsl:template>
	
</xsl:stylesheet>

Příklad obsahuje 3 šablony. Všimněte si, že v šabloně se objevují běžné HTML elementy, které se pak stanou součástí výsledného HTML dokumentu. Příkazy jazyka XSLT poznáte podle předpony jmenného prostoru xsl. Na zobrazení výstupu v prohlížeči se můžete podívat. Příklad umí korektně zobrazit IE 6 nebo Mozilla.

Máte-li zájem proniknout do jazyka XSLT detailněji, doporučuji vaší pozornosti XSLT tutoriál na serveru Zvon. Přesto, že je v anglickém jazyce, jedná se o nejlepší cestu k bližšímu seznámení s jazykem XSLT.

XSL(T) v prohlížečích - MSXML story

Velice zajímavá historie, která způsobuje mnohá zmatení ohledně XSLT, se pojí s prohlížečem Microsoft Internet Explorer. IE už od verze 5.0 umožňuje zobrazit XML dokument transformovaný pomocí XSL stylesheetu jako HTML stránku. V té době se však nejednalo o XSLT, jak ho známe dnes - Microsoft tehdy implementoval starý W3C working draft (tedy pracovní návrh) standardu XSLT, který nesl název XSL. Mezitím byl vývoj XSLT dokončen a byla vydána finální verze (W3C Recomendation) standardu XSLT. Plná podpora standardu XSLT přišla až s Internet Explorerem verze 6. Obě implementace, XSL a XSLT, se vzájemně mírně odlišují, liší se například i v deklaraci jmenného prostoru. Výsledkem je, že u IE 5 a 5.5 nelze XSLT standardně vůbec použít, IE 6 disponuje zpětnou kompatibilitou i pro starší a zavržené XSL.

Situace je však ještě o něco složitější. XSL (resp. XSLT) transformaci má v v Internet Exploreru na starosti XML parser známý pod označením MSXML. Velice zkráceně lze říci, že IE 5 obsahuje MSXML verze 2.0, IE 5.5 obsahuje MSXML 2.5 a IE 6 přišel s MSXML parserem verze 3.0, která obsahuje podporu pro transformaci dle XSLT. Vývoj MSXML parseru dále pokračuje a nyní je k dispozici verze 4.0. MSXML parser není pevně svázán s Internet Explorerem určité verze - do IE 5.0 i 5.5 je možné nainstalovat novou verzi MSXML parseru a tak umožnit XSLT transformaci dle současné normy.

Mozilla zvládne XSLT transformaci stejně dobře jako Microsoft Internet Explorer. Přirozeně však nemá nic společného se starým XSL implementovaným v IE 5.0 a 5.5. Vývojové verze Mozilly až do 0.9.8 zase pro změnu obsahují chybu v implementaci XSLT, která se projevuje tím, že v HTML stránce, která je výsledkem XSLT transformace, nefuguje javascript.

Jak je vidět, s implementací XSL(T) v prohlížečích si můžeme užít spousty "legrace". Nejinak je tomu v případě kombinace XML + Javascript, kterou se začneme zabývat příště.

Diskuze (4) Další článek: NVidia se zase kamarádí s Microsoftem ohledně XBoxu

Témata článku: Software, Internet, Programování, Internet Explorer, Code, Speciální díl, Password, Jediný způsob, HTML, Skvělá technologie, Starý typ, XML, Fragment, Draft, Samostatná stránka, IE 10, Jediný háček, Výsledné dílo, Element, Běžné zobrazení, IE 11, Teorie, Match


Určitě si přečtěte

Photolemur 3: Prostě do něj přetáhnete fotky a začne se dít magie. Tedy údajně...

Photolemur 3: Prostě do něj přetáhnete fotky a začne se dít magie. Tedy údajně...

** Je lepší nabušený Photoshop, nebo program s jedním tlačítkem? ** Photolemur si myslí to druhé ** Tento fotoeditor neumí skoro nic, a přitom (skoro) všechno

Jakub Čížek | 19

Porno insider: Jak virtuální realita vstupuje do filmů pro dospělé

Porno insider: Jak virtuální realita vstupuje do filmů pro dospělé

** Pornografie údajně představuje třetinu internetové obsahu a je technologický tahounem ** Do erotického obsahu postupně zasahuje i virtuální realita ** Kromě vizuálního vjemu se pracuje také na virtuálním uspokojení toho hmatového

Jan Dudek | 29

Proč je pro obézní lidi tak těžké shodit nadbytečná kila?

Proč je pro obézní lidi tak těžké shodit nadbytečná kila?

** Obézním lidem selhávají mechanismy, jež je mají chránit před nadměrným příjmem potravy ** Mozek tlouštíků ignoruje hormon leptin varující před hromaděním tukové tkáně v těle ** Vědci nyní odhalili, jak to udělat, aby mozek otupený obezitou leptin opět vnímal

Jaroslav Petr | 47


Aktuální číslo časopisu Computer

Jak vytvořit a spravovat vlastní web

Velký test herních klávesnic a DVB-T2 tunerů

Vše o formátu RAW

Vybíráme nejlepší základní desku