Představte si situaci, kdy disponujete větším seznamem produktů (v našem případě knih), který potřebujete v lehce stravitelné podobě předložit návštěvníkům vašeho serveru. Vypsat na stránku desítky či stovky položek asi nebude příliš šťastným řešením. Díky ostrůvkům dat v XML lze ze seznamu vytvořit jednopoložkovou tabulku a daty jednoduše listovat pomocí tlačítek.
Nejdříve potřebujete vytvořit zdroj dat. Já jsem zvolil seznam knih. Ten můžete samozřejmě generovat z databáze.
<?xml version=“1.0″ encoding=“Windows-1250″?>
<nabidka>
<kniha>
<nazev>Excel jednoduše</nazev>
<autor>Ivo Magera</autor>
<popis>Potřebujete se naučit zacházet s Excelem, ale nemůžete učení obětovat týdny času?</popis>
<cena>93</cena>
</kniha>
<kniha>
<nazev>MS Outlook 2002 Jednoduše</nazev>
<autor>Jaroslav Černý</autor>
<popis>Chcete se naučit pracovat s Outlookem rychle a snadno?</popis>
<cena>99</cena>
</kniha>
<kniha>
<nazev>Web a databáze</nazev>
<autor>Luboslav Lacko</autor>
<popis>Vše o databázích na webu.</popis>
<cena>279</cena>
</kniha>
…
</nabidka> |
|
Kompletní XML soubor najdete zde.
Nyní už stačí pouze vytvořit HTML stránku, do které budete data "natahovat":
<html>
<head>
<title>Nabídka knih</title>
</head>
<body>
<h3>Aktuální nabídka titulů</h3>
<xml id=“Books“ SRC=“booksdata.xml“></xml>// pojmenování a nastavení zdroje dat
<table border=“1″ width=“500″ id=“tblData“ datasrc=“#Books“ datapagesize=“1″>// id identifikuje tabulku pro pozdější práci navigačních tlačítek, datasrc uvádí zdroj dat a datapagesize udává počet záznamů na stránku (můžete nastavit libovolně)
<tr>
<td width=“120″>Název:</td>
<td width=“380″><span datafld=“nazev“></span></td>
</tr>
<tr>
<td width=“120″>Autor:</td>
<td width=“380″><span datafld=“autor“></span></td>
</tr>
<tr>
<td width=“120″>Popis</td>
<td width=“380″><span datafld=“popis“></span></td>
</tr>
<tr>
<td width=“120″>Cena:</td>
<td width=“380″><span datafld=“cena“></span> Kč</td>
</tr>
</table>
<input type=“button“ value=“<<“ onClick=“tblData.firstPage();“>
<input type=“button“ value=“<“ onClick=“tblData.previousPage();“>
<input type=“button“ value=“>“ onClick=“tblData.nextPage();“>
<input type=“button“ value=“>>“ onClick=“tblData.lastPage();“>
</body>
</html> |
|
Výsledek si prohlédněte zde. Připomínám, že jde o technologii Microsoftu a vše funguje pouze pod MSIE.
Jak vidíte, je vytvoření ostrůvku i navigace opět velmi jednoduché.
Význam hodnoty onClick navigačních tlačítek je myslím zcela jasný. Výhodou je procházení záznamů bez nutnosti použití přídavného JavaScriptu. Pokud vám však
z nějakého důvodu JS chybí, uvádím i příklad takového řešení:
<html>
<head>
<title>Nabídka knih</title>
</head>
<script language=“JavaScript“>
<!–
function Booksfirst(){
data.recordset.moveFirst();
}
function Booksprevious(){
if(data.recordset.absoluteposition>1)
data.recordset.movePrevious();
}
function Booksnext(){
if(data.recordset.absoluteposition < data.recordset.recordcount)
data.recordset.moveNext();
}
function Bookslast(){
data.recordset.moveLast();
}
–></script>
<body>
<h3>Aktuální nabídka titulů</h3>
<xml id=“data“ SRC=“booksdata.xml“></xml>
<table border=“1″ width=“500″>
<tr>
<td width=“120″>Název:</td>
<td width=“380″><span dataSrc=“#data“ datafld=“nazev“></span></td>
</tr>
<tr>
<td width=“120″>Autor:</td>
<td width=“380″><span dataSrc=“#data“ datafld=“autor“></span></td>
</tr>
<tr>
<td width=“120″>Popis</td>
<td width=“380″><span dataSrc=“#data“ datafld=“popis“></span></td>
</tr>
<tr>
<td width=“120″>Cena:</td>
<td width=“380″><span dataSrc=“#data“ datafld=“cena“></span> Kč</td>
</tr>
</table>
<input type=“button“ value=“|<“ onClick=“Booksfirst()“></input>
<input type=“button“ value=“<“ onClick=“Booksprevious()“></input>
<input type=“button“ value=“>“ onClick=“Booksnext()“></input>
<input type=“button“ value=“>|“ onClick=“Bookslast()“></input>
</body>
</html> |
|
Sami máte možnost vidět, že použité formátování není velmi přívětivé. Použijte tedy CSS a stránku s nabídkou naformátujte do přijatelnějšího tvaru. Navíc se zbavíte zkostnatělé tabulky.
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“>
<html>
<head>
<meta http-equiv=“Content-Type“ content=“text/html; charset=windows-1250″>
<meta http-equiv=“Content-language“ content=“cs“>
<meta http-equiv=“Content-Style-Type“ content=“text/css“>
<style media="all" type="text/css">@import "books.css";</style>
<title>Akční nabídka knižních titulů</title>
<script type=“text/javascript“ src=“booksnav.js“></script>
</head>
<body>
<div class=“nadpis“>Nabídka knih</div>
<script type=“text/javascript“ src=“setxml.js“></script>
<div class=“databrd“>
<div class="line">
<span class=“popisek“>Název: </span><span class=“text“ datasrc=“#Books“ datafld=“nazev“></span>
</div>
<div class="line">
<span class=“popisek“>Autor: </span><span class=“text“ datasrc=“#Books“ datafld=“autor“></span>
</div>
<div class="line">
<span class=“popisek“>Popis: </span><span class=“text“ datasrc=“#Books“ datafld=“popis“></span>
</div>
<div class="line">
<span class=“popisek“>Cena: </span><span class=“text“><span datasrc=“#Books“ datafld=“cena“></span> Kč </span>
</div>
</div>
<p>
<script type=“text/javascript“ src=“buttons.js“></script>
</p>
</body>
</html> |
|
Výsledek najdete zde.
Kompletní zdroje všech příkladu si můžete stáhnout zde.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
