Vazba dat v DHTML – praktická ukázka (fotoalbum)

Potřebujete si vytvořit vlastní fotoalbum na CD? Nebo nemáte možnost využít databázi nebo server-side skripty a chcete na svých stránkách mít vlastní fotoalbum? Na praktickém příkladě slide-show fotoalba si zde ukážeme využítí vazby dat v DHTML.

Co je datová vazba (Data Binding) a všechny její možnosti byly již popsány v článku Vazba dat v DHTML – přehledný popis. Pro potřeby našeho fotoalba nyní využijeme nejjednoduššího datového zdroje (DSO) Tabular Data Control (TDC), který nám umožňuje načíst zdrojová data z obyčejného textového souboru s oddělovači. Budeme tedy potřebovat:

1. zdroj dat – textový soubor formátovaný pro potřebu vazby dat
2. spotřebitele dat – stránka s definovaným datovým zdrojem TDC a jednopoložkovými spotřebitely dat
3. skripty pro manipulaci s daty – pro pohyb mezi záznamy

Pro lepší pochopení si také můžete stáhnout kompletní fotoalbum.

Zdroj dat

Jako zdroj dat nám výborně poslouží obyčejný textový soubor, který si nazveme data.txt. Pro lepší přehlednost použijeme první řádek jako hlavičku, což ale nesmíme později zapomenout deklarovat v objektu TDC. Jako oddělovač použijeme znak „|“, který stejně jako další parametry později nadeklarujeme v objektu TDC, takže se tím zatím nebudeme zabývat.

kategorie|cesta|autor|datum:YMD|popisek
…

Máme tedy nadefinovánu hlavičku s poli kategorie, cesta, autor, datum a popisek, přičemž všechna pole, kromě pole datum s datovým typem date ve formátu YMD(Y-rok, M-měsíc, D-den), mají datový typ string, který je implicitně definovám, takže jej není třeba deklarovat.

Nyní naplníme textový soubor několika zkušebními záznamy, na kterých si vazbu dat ukážeme.

…
Akce1|img1.jpg|Tomáš Fišer|2004-01-01|Fotografie1
Akce1|img2.jpg|Dominik Fišer|2004-01-01|Fotografie2
Akce2|img3.jpg|Dominik Fišer|2004-01-31|Fotografie3
Akce2|img4.jpg|Ondřej Fišer|2004-01-31|Fotografie4
Akce2|img5.jpg|Dominik Fišer|2004-01-30|Fotografie5
Akce5|img6.jpg|Ondřej Fišer|2004-03-12|Fotografie6
Akce5|img7.jpg|Dominik Fišer|2004-03-12|Fotografie7
Akce3|img8.jpg|Klára Fišerová|2004-02-02|Fotografie8
Akce3|img9.jpg|Klára Fišerová|2004-02-01|Fotografie9
Akce4|img10.jpg|Dominik Fišer|2004-02-29|Fotografie10
…

Implicitně je v objektu TDC jako oddělovač záznamů použit nový řádek, tedy jeden záznam je roven jednomu řádku. Všechny záznamy jsou formátovány přesně tak, jak je to předdefinováno v hlavičce a v deklaraci objektu TDC, který si nadefinujeme za chvíli. Zdroj dat je nyní tedy kompletně připraven k použití pro vazbu dat.

Spotřebitelé dat

Další důležitou složkou vazby dat jsou spotřebitelé dat. My budeme používat komplexnější jednopoložkové spotřebitele (pokud bychom ale rádi na stránce zobrazovali více než jednu fotografii, bylo by lepší využít tabulkového spotřebitele dat). Abychom je mohli použít, vytvoříme si hlavní a jedinou HTML stránku fotoalbum.html, ve které nejprve nadeklarujeme datový zdroj TDC a potom jednotlivé spotřebitele.

<OBJECT ID=“DSO_fotoalbum“ CLASSID=“clsid:333C7BC4-460F-11D0-BC04-0080C7055A83″>
…

Datový zdroj TDC je definován pomocí prvku OBJECT, nejlépe definovaného přímo v hlavičce stránky, s příslušnými atributy a parametry. Důležitý je atribut ID, pomocí kterého datový zdroj jednoznačně označíme, abychom na něj mohli později odkazovat jednotlivé spotřebitele dat. Další atribut CLASSID pak označuje použitou komponentu Microsoft ActiveX.

 <PARAM NAME=“CharSet“ VALUE=“windows-1250″>

Parametr CharSet definuje znakovou sadu dat jako windows-1250.

 <PARAM NAME=“DataURL“ VALUE=“data.txt“>

Parametr DataURL definuje za zdrojový soubor dat námi již vytvořený soubor data.txt.

 <PARAM NAME=“FieldDelim“ VALUE=“|“>

Parametr FieldDelim definuje znak „|“ jako znak ukončující jednotlivá pole.

 <PARAM NAME=“Sort“ VALUE=“+kategorie;-datum“>

Parametr Sort určuje řazení záznamů, seřadí je tedy nejprve vzestupně podle kategorie a poté sestupně podle data.

 <PARAM NAME=“UseHeader“ VALUE=“TRUE“>

Parametr UseHeader nastaví první řádek zdrojového souboru data.txt jako hlavičku, tak jak jsme ji nadefinovali ve zdrojovém souboru.

 …
</OBJECT>

V prvku OBJECT bychom mohli definovat ještě další parametry TDC, nicméně pro naše použití to takto stačí. Teď už zbývá vytvořit jen spotřebitele dat a datová vazba bude hotová.

<A HREF=““ TARGET=“_blank“ ONCLICK=“window.clearTimeout(hrat);“ DATASRC=“#DSO_fotoalbum“ DATAFLD=“cesta“><IMG SRC=““ HEIGHT=“200px“ ALT=“Klepnutím fotografii zvětšíte“ DATASRC=“#DSO_fotoalbum“ DATAFLD=“cesta“></A>

Pomocí jednopoložkových spotřebitelů dat A, s vázanou vlastností HREF, a IMG, s vázanou vlastností SRC, zobrazíme na stránce fotografii, přičemž navíc umožníme uživatelům kliknutím na fotografii jejím zvětšení. Při kliknutí se díky zavolání metody clearTimeout zastaví přehrávání (podrobnější vysvětlení níže). Pomocí vazbo-datových atributů DATASRC, který definuje datový zdroj TDC a nabývá tedy hodnoty # + identifikátoru datového zdroje, v našem případě DSO_fotoalbum, a DATAFLD označující pole datového zdroje pro daný prvek.

<DIV DATASRC=“#DSO_fotoalbum“ DATAFLD=“kategorie“></DIV>
<DIV DATASRC=“#DSO_fotoalbum“ DATAFLD=“datum“></DIV>
<DIV DATASRC=“#DSO_fotoalbum“ DATAFLD=“autor“></DIV>
<DIV DATASRC=“#DSO_fotoalbum“ DATAFLD=“popisek“></DIV>

Jednopoložkové spotřebitele dat prvky DIV, s vázanými vlastnostmi innerText a innerHTML, využijeme zase k výpisu informací o kategorii, datu vyfocení, autorovi a popisku fotografie. Stejně tak i zde atributy DATASRC a DATAFLD definují odkud a co se má do daného DIV prvku načíst.

Nyní již tedy máme datovou vazbu hotovou a funkční, po spuštění stránky fotoalbum.html by se nám měl na stránce zobrazit první záznam ze zdrojového souboru data.txt.

Skripty pro manipulaci s daty

Zobrazení pouze prvního záznamu nám ale zcela jistě stačit nebude, proč bychom jinak celou datovou vazbu používali? Proto potřebujeme vytvořit ještě několika tlačítkovou navigační lištu spojenou událostmi DHTML se skripty. Ve skriptech zde budu používat skriptovací jazyk JavaScript. Základem celé navigace a práce se záznamy datové vazby je skriptovací objekt ADO-recordset, ke kterému můžeme přistupovat pomocí vlastnosti recordset příslušného datového zdroje. Nyní se tedy podívejme na ovládací skripty a jednotlivé ovládací prvky.

<SCRIPT LANGUAGE=“JavaScript“ FOR=“window“ EVENT=“onload“ TYPE=“text/javascript“>
 <!–
   zaznam = DSO_fotoalbum.recordset;
   zaznam.moveFirst();
   poradi();
 –>
</SCRIPT>

Tento skript se provede hned po načtení stránky v prohlížeči a je třeba jej umístit do hlavičky stránky pod deklaraci datového zdroje. Nejprve zde definuje proměnnou zaznam označující datovou sadu datového zdroje DSO_fotoalbum, výše zmíněnou vlastnost recordset. Poté skript načte pomocí metody moveFirst() na stránku první záznam datového zdroje. Zavoláním uživatelsky definované funkce poradi() vypíšeme aktuální pozici záznamu.

<input type=“button“ onclick=“zaznam.moveFirst();poradi()“ value=“<<„>
<input type=“button“ onclick=“zaznam.movePrevious();if(zaznam.BOF)zaznam.moveFirst();poradi()“ value=“<„>
<input type=“button“ onclick=“zaznam.moveNext();if(zaznam.EOF)zaznam.moveLast();poradi()“ value=“>“>
<input type=“button“ onclick=“zaznam.moveLast();poradi()“ value=“>>“>

Pro pohyb mezi záznamy pak využijeme této jednoduché navigační lišty se čtyřmi tlačítky. Použitím události DHTML onclick, která nastane při kliknutí na dané tlačítko pak voláme metody objektu recordset (potažmo zaznam) moveFirst(), pro přesun na první záznam, movePrevious(), pro přesun na předchozí záznam, moveNext(), pro přechod na následující záznam, a moveLast(), pro přechod na poslední záznam. Musíme zde však také ošetřit pomocí vlastností BOF (vrací TRUE, pokud se dostaneme na první záznam) a EOF (vrací TRUE, pokud se dostaneme na poslední záznam) navigaci na prvním a posledním zaznamu, protože objekt recordset by se na nich nezastavil, ale vypisoval by prázdné záznamy. Zároveň vždy voláne navíc i funkci poradi(), která na stránku vypíše aktualizovaný údaj o pozici záznamu.

<SCRIPT LANGUAGE=“JavaScript“ TYPE=“text/javascript“>
 <!–
  function poradi(){
   document.all.poradi.innerText = zaznam.AbsolutePosition+“ z „+zaznam.RecordCount;
  }
 –>
</SCRIPT>

Funkce poradi() zajišťuje vypsání pozice aktuálního záznamu ze všech záznamů do prvku s ID rovno poradi. Pozici aktuálního záznamu nám vrací vlastnost AbsolutePosition objektu recordset, počet všech záznamů pro změnu vlastnost RecordCount téhož objektu. Protože se pohybem mezi záznamy hodnota aktuální pozice mění, je potřeba tuto funkci vyvolat po každém pohybu mezi záznamy. Jednoduchý prvek, do kterého budeme pozici záznamu vypisovat, může vydat například následovně.

<div id=“poradi“></div>

Pro komfort uživatelů připravíme ještě jednu funkci play(), která nám umožní spustit slade-show bez nutnosti klikat na tlačítko při jakémkoliv pohybu mezi záznamy.

<SCRIPT LANGUAGE=“JavaScript“ TYPE=“text/javascript“>
 <!–
   function play(){
   zaznam.moveNext();
   if(zaznam.EOF){zaznam.moveLast(); window.clearTimeout(hrat);}
   poradi();
   hrat=window.setTimeout(„play()“,“5000″);
   }
 –>
</SCRIPT>

Funkce play() nejprve provede posun mezi záznamy, stejně jako např. po kliknutí na tlačítko další záznam, pouze s tím rozdílem, že pokud se ukazatel v záznamech dostane na poslední pozici pomocí metody clearTimeout()(s parametrem id zadaného setTimeoutu) objektu window ukončí přehrávání. Pro aktualizaci pozice záznamu zavolá funkci poradi(). Potom již znovu volá funkci play() pomocí metody setTimeout(), s parametry volaná funkce a časová prodleva(v ms), objektu window. Vše se tedy opakuje do té doby, dokud není odněkud zavolána metoda clearTimeout(hrat).

<input type=“button“ onclick=“play();“ value=“I>“>
<input type=“button“ onclick=“window.clearTimeout(hrat);“ value=“II“>

Zbývá nám tedy ještě přidat do navigační lišty dvě jednoduchá tlačítka pro spuštění a zastavení slade-show. Skripty jsou zde stejně jako u ostatních tlačítek volány přes událost onclick.

Vše je tedy kompletně hotovo, takže nezbývá než uspořádat všechny dílčí části dohromady. Pokud si ke svému fotoalbu vytvoříte ještě nějakou pěknou grafiku, můžete vesele kdekoliv prezentovat své fotografie.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.