Vazba dat v DHTML – přehledný popis

11. května 2004

•

Vazba dat, propojení s daty, v originále Data Binding, je velice výkonný nástroj z rukou programátorů Microsoftu umožňující navázání dat z externího souboru, z databáze přímo do webové stránky. Tímto článkem bych vás chtěl seznámit s principy a možnostmi využití metod Data Bindingu.

Technologie vazby dat (Data Binding) nám umožňuje elegantně propojit webové stránky pomocí datových zdrojů (DSO – Data Surce Object). Data se pak načítají do stránky, která se stává pouhou šablonou. Toto spojení nám přináší mnoho výhod: vysoká rychlost nahrávání a aktualizace dat, nezávislost na webovém serveru, vše se odehrává na straně klienta, pomocí skriptů můžeme data řadit a třídit, zdrojová data mohou být například v standardním textovém souboru. Jako vše má i toto řešení své nevýhody: možnosti server-side řešení jsou rozmanitější, vazbu dat podporují hlavně prohlížeče MSIE 4 a vyšší (u některých datových zdrojů je i podpora moderních prohlížečů Mozilla), neodpovídá současným standardům (X)HTML.

Architektura vazby dat

Datová vazba obsahuje čtyři hlavní složky architektury, již zmíněné datové zdroje (DSO), spotřebitele dat (Data Consumers), agent vazby dat (Binding Agents) a agent vazby dat se stránkovanou tabulkou (Table Repetition Agent).

Datové zdroje(DSO)

Prvním předpokladem k navázání dat je existence datového zdroje, který bude zásobovat webovou stránku načtenými daty. V následující tabulce uvádím stručný přehled použitelných datových zdrojů:

DSO	Stručný popis
Tabular Data Control (TDC)	Nejjednodušší, načítá data z textového souboru s oddělovači, využití najde především k načtení jednoduchých dat, při práci off-line, při práci bez databáze.
Remote Data Services (RDS)	Získává data z databází využívajících OLE-DB nebo ODBC. Pokud chcete využívat SQL výpisy, upravovat databázi, mít data okamžitě, zvolte určitě tento zdroj.
XML Data Source	Získává data z XML dokumentů a načítá je pomocí Java appletu. V MSIE 5 jsou navíc integrovány také datové ostrůvky (Data Islands). Využijete ho například k zobrazení hierarchických dat.
MSHTML Data Source	Data z datové stránky načítá do HTML dokumentu za použití MSHTML.
Vlastní objekt datového zdroje

Spotřebitelé dat (Data Consumers)

Další klíčovou složkou architektury vazby dat jsou spotřebitelé dat, kteří umožňují prezentaci dat z datových zdrojů na webové stránce. Mohou jimi být všechny HTML prvky rozšířené o vazbo-datové atributy (dataFld, dataSrc, dataFormatAs, dataPageSize). Spotřebitelé dat se dále dělí na jednopoložkové spotřebitele (například prvek INPUT) a na tabulkové spotřebitele(prvek TABLE).

Agent vazby dat(Binding Agents)

Tento agent běžící na pozadí a je implementován v prohlížečích MSIE4 a vyšších pomocí knihovny MSHTML.dll. Při načtení stránky vyhledá všechny datové zdroje a spotřebitele dat, které následně vyplní příslušnými daty.

Agent vazby dat se stránkovanou tabulkou (Table repetition agent)

Jak je již z názvu patrné, pracuje tento agent pomocí TDC se stránkovanými(opakujícími se) tabulkami, tedy pomocí prvku TABLE jazyka HTML. Všechny spotřebitelé dat v tabulce jsou pak vyplněny jednotně.

Tabular Data Control (TDC)

Datový zdroj TDC je komponenta Microsoft ActiveX, umožňující navázat na stránku data načítaná z textového souboru s oddělovači. Díky své jednoduchosti a malé náročnosti tak patří mezi nejvyužívanější datové zdroje pro vazbu dat. Přednostmi tohoto DSO je také možnost řazení a filtrování. Všechny operace navíc probíhají na straně klienta, takže nijak nezatěžují komunikaci se serverem. Bohužel nám ale tento DSO umožňuje pouze čtení a nikoli už zápis.

Deklarace objektu TDC

Pomocí prvků PARAM můžeme definovat různé vlastnosti datového zdroje, jejich kompletní výčet předkládám zde v tabulce. Navíc má tento objekt také jednu metodu velice důležitou pro filtrování a řazení.

Vlastnost	Popis
AppendData	Určuje zda-li se nová data jsou přidána nebo nahrazena novými daty. TRUE – přidána; FALSE – nahrazena (implicitní)
CaseSensitive	Určuje zda-li se budou při porovnávání dat ignorovat malá/velká písmena. TRUE – rozlišuje (implicitní); FALSE – nerozlišuje
CharSet	Určuje znakovou sadu dat. Může být zadána pomocí kódu (například windows-1250), znakové stránky (1250) nebo abecedy (Central European Alphabet (Windows)), implicitně 1252 (Western Alphabet).
DataURL	Udává URL datového souboru ve standardním URL formátu.
EscapeChar	Určuje znak použitý pro speciální escape-sekvence, implicitní hodnota není.
FieldDelim	Určuje znak ukončující datové pole, implicitně ,(čárka).
Filter	Určuje, jak budou data filtrována.
Language	Určuje jazyk datového souboru (číselné a datové formáty). Zadává se ve standardních HTML kódech (dle ISO 369), implicitně eng-us.
RowDelim	Určuje znak ukončující záznam (řádek). NEWLINE – odřádkování (implicitní); CHARACTER- libovolný znak.
Sort	Určuje pole, podle kterého se data seřadí.
TextQualifier	Určuje nepovinný znak ohraničující pole. Implicitně “ (uvozovky)
UseHeader	Udává zda-li první řádek datového souboru obsahuje hlavičku.

Metoda	Popis
Reset	Aplikuje nové nastavení filtrovaní nebo řazení na data.

Ke všem vlastnostem (metodám) TDC je možné přistupovat také pomocí skriptů.

id_DSO.Vlastnost = Hodnota
id_DSO.Metoda()

Hlavička datového souboru

Hlavička datového souboru není povinná, nicméně vřele doporučuji ji používat. Definujete ji nastavením vlastnosti UseHeader na TRUE. V datovém souboru je pak hlavičkou první řádek, kde předefinujete jednotlivá datová pole, přičemž u všech můžete určit i datový typ. Jednotlivá pole jsou definována ve formátu nazev_pole1:datovy_typ, nazev_pole2:datovy_typ, nazev_pole3:datovy_typ… Vybrat si můžete z datových typů String (řetězec, implicitní), Date YMD (datum, Y – rok, M – měsíc, D – den), Boolean (logická hodnota), Int (celá čísla) nebo Float (desetinná čísla).

Spotřebitelé dat

Jak jsem již psal v přehledu architektury vazby dat, dělí se spotřebitelé dat na jednopoložkové a tabulkové spotřebitele dat. Přičemž tabulkovým spotřebitelem dat je v podstatě pouze prvek TABLE. K nastavení vazby prvků na DSO nám poslouží vazbo-datové atributy, které ale bohužel nejsou součástí standardů, hlavně pak atribut dataSrc a dataFld. Přehled všech atributů včetně jejich možnosti užití najdete v tabulce.

Atribut	Prvky	Popis
dataFld	Všechny vazebné prvky mimo TABLE	Nastaví datový zdroj (DSO) pomocí # a jedinečného identifikátoru DSO na stránce.
dataFormatAs	BUTTON, DIV, LABEL, MARQUEE, SPAN	Určuje formát dat. Možné hodnoty jsou text (implicitní) nebo html.
dataPageSize	TABLE	Udává počet zobrazených záznamů na stránce.
dataSrc	Všechny vazebné prvky	Nastaví pole, ze kterého budou z DSO načtena data. Pokud DSO nemá definovanou hlavičku nabývá hodnot Column1, Column2…

Jednopoložkové spotřebitele dat

Jednopoložkové spotřebitele dat s daty svazují atributy dataSrc a dataFld nebo odpovídající objekt dynamického HTML(DHTML).

V tomto jednoduchém příkladu, kde tedy chybí definice DSO s ID="id_DSO", se po načtení datového zdroje vyplní atribut HREF prvku A obsahem pole odkaz_url a obsah prvku DIV obsahem pole odkaz_text.

Výčet všech jednopoložkových spotřebitelů dat:

Prvek	Vázaná vlastnost	Zobrazí data jako HTML	Aktualizuje se
A	href	Ne	Ne
APPLET	hodnota PARAM	Ne	Ano
BUTTON	innerText, innerHTML	Ano	Ne
DIV	innerText, innerHTML	Ano	Ne
FRAME	src	Ne	Ne
IFRAME	src	Ne	Ne
IMG	src	Ne	Ne
INPUT TYPE=BUTTON	innerText, innerHTML	Ano	Ne
INPUT TYPE=CHECKBOX	checked	Ne	Ano
INPUT TYPE=HIDDEN	value	Ne	Ano
INPUT TYPE=PASSWORD	value	Ne	Ano
INPUT TYPE=RADIO	checked	Ne	Ano
INPUT TYPE=TEXT	value	Ne	Ano
LABEL	innerText, innerHTML	Ano	Ne
LEGEND	innerText, innerHTML	Ano	Ne
MARQUEE	innerText, innerHTML	Ano	Ne
SELECT	obj.options(obj.selectedIndex).text	Ne	Ano
SPAN	innerText, innerHTML	Ano	Ne
TEXTAREA	value	Ne	Ano

Tabulkový spotřebitel dat prvek TABLE

Protože prvek TABLE počítá s naplněním jednotlivých jednopoložkových spotřebitelů dat, které obsahuje, několika záznamy, je DSO nastaven pomocí atributu dataSrc přímo v prvku TABLE. Stejně tak můžeme v prvku TABLE definovat atribut dataPageSize určující počet záznamů(řádků tabulky) zobrazených na stránce. Jednotlivé prvky již poté stanovují pouze pole pomocí atributu dataFld, přičemž nesmí být umístěny v částech THEAD a TFOOT prvku TABLE. Data se pak načítají do stránky vždy každý záznam do nového řádku tabulky.

Na příkladě tabulkového spotřebitele dat prvku TABLE můžete vidět mimo jiné i použití atributu dataPageSize, díky kterému se na stránce zobrazí vždy 5 záznamů a to každý v novém řádku tabulky. Definice DSO zde sice také chybí, ale spotřebitel dat nastavuje jako DSO objekt s ID="id_DSO". Obsah prvku DIV se poté naplňuje načítanými daty z DSO určeného v prvku TABLE obsahem pole text.

Manipulace s daty

Samozřejmě můžeme s daty na stránce také různě manipulovat. Kromě řazení a filtrování nám datová vazba umožňuje také pohyb mezi záznamy. Nejjednodušší pohyb je ve stránkované tabulce, složitější ale rozmanitější operace nám dovoluje provádět ADO (ActiveX Data Object) – recordset. Pro lepší ovládání a větší možnosti využití má datová vazba v DHTML definovány také několik svých specifických událostí.

Filtrování dat

Dynamické filtrování dat můžeme provést pomocí vlastnosti Filter objektu TDC a zavoláním metody Reset téhož objektu. Hodnota vlastnosti Filter může obsahovat název filtrovaného pole, popř. polí oddělených čárkami, pokud není definována hlavička, ve tvaru Column1, Column2…, a dále logické operátory AND (&) a OR (|) a relační operátory (<, <=, >=, >, =, <>). Nejlépe asi uvidíte na ukázce:

<PARAM NAME=“Filter“ VALUE=“(Pole_1 >= 5 & Pole_2 = sklad) | Pole_2 = prodejna“ />

id_DSO.Filter=“(Pole_1 >= 5 & Pole_2 = sklad) | Pole_2 = prodejna“;
id_DSO.Reset();

Tento filtr vybere ze všech záznamů DSO ty, které mají v poli Pole_1 hodnotu větší nebo rovnou 5 a současně v poli Pole_2 hodnotu sklad, nebo ty, u kterých pole Pole_2 obsahuje hodnotu prodejna. V prvním případě je filtr definován pomocí vlastnosti Filter v prvku PARAM(vnořený prvek prvku OBJECT) a bude tedy proveden hned při načtení DSO, v případě druhém je filtr definován pomocí skriptovací modelu a může tak být zavolán například jako funkce při jakékoliv události.

Řazení dat

Dynamické řazení dat u datové vazby provádíme pomocí další z vlastností objektu TDC, vlastnosti Sort. Stejně jako u filtrování je třeba po řazení zavolat metodu Reset objektu TDC, aby se řazení projevilo. Hodnota vlastnosti Sort se skládá ze znaménka, + vzestupně a – sestupně, a názvu řazeného pole, popřípadě polí oddělených středníkem, přičemž pokud není definována hlavička názvy polí jsou stejně jako u vlastnosti Filter Column1, Column2… Řazení pak probíhá v závislosti na datovém typu řazeného pole.

id_DSO.Sort=“+Pole_1;-Pole_2″;
id_DSO.Reset();

Výše uvedené řazení by záznamy z DSO seřadilo podle Pole_1 vzestupně a potom podle Pole_2 sestupně. Na prvním příkladě zase vidíte řazení pomocí prvku PARAM a na druhém příkladě řazení pomocí skriptování.

Pohyb mezi záznamy stránkované tabulky

Pohyb mezi záznamy stránkované tabulky je velice jednoduchý. Jak již víte, počet záznamů stránkované tabulky můžeme určit pomocí atributu DATAPAGESIZE, jehož hodnota tedy musí být pro pohyb mezi záznamy nenulová, jinak by byly na stránku vypsány všechny záznamy. K tomu má objekt DSO předefinovány čtyři metody – nextPage, která zobrazí další stránku záznamů, previousPage, které zobrazí naopak stránku předchozí, firstPage, zobrazující první záznam, a lastPage, zobrazující poslední záznam. Přikládám zde ještě jednoduchý příklad ovládacích tlačítek pro pohyb stránkovanou tabulkou, která pomocí události onclick volají dané metody objektu DSO.

<INPUT TYPE=“BUTTON“ VALUE=“<<“ ONCLICK=“id_DSO.firstPage();“ />
<INPUT TYPE=“BUTTON“ VALUE=“<“ ONCLICK=“id_DSO.previousPage();“ />
<INPUT TYPE=“BUTTON“ VALUE=“>“ ONCLICK=“id_DSO.nextPage();“ />
<INPUT TYPE=“BUTTON“ VALUE=“>>“ ONCLICK=“id_DSO.lastPage();“ />

Pohyb mezi záznamy – ADO recordset

Protože často používáme jednopoložkové spotřebitele dat, potřebujeme ovládat také pohyb mezi těmito záznamy. K tomu nám Microsoft připravil výkonný skriptovací objekt ADO recordset, který je přístupný všem DSO vlastností recordset. Objekt ADO recordset dává webovým autorů rozličné možnosti využití, navigaci mezi záznamy, vkládání, mazání, aktualizaci záznamů (TDC tyto operace neumožňuje), nastavení nebo získávání polí a jejich vlastností. Pomocí vlastností recordNumber a absolutePosition objektu recordset můžeme navíc zjistit i celkový počet záznamů(vlastnost recordNumber) nebo pozici záznamu(vlastnost absolutePosition). ADO recordset obsahuje také dvě kolekce Fields a Properties, pomocí kterých můžeme získat hodnoty hledaných polí daného záznamu.

<INPUT TYPE=“BUTTON“ VALUE=“<<“ ONCLICK=“id_DSO.recordset.MoveFirst();“ />
<INPUT TYPE=“BUTTON“ VALUE=“<“ ONCLICK=“id_DSO.recordset.MovePrevious();if(id_DSO.recordset.BOF)id_DSO.recordset.MoveFirst();“ />
<INPUT TYPE=“BUTTON“ VALUE=“>“ ONCLICK=“id_DSO.recordset.MoveNext();if(id_DSO.recordset.EOF)id_DSO.recordset.MoveLast();“ />
<INPUT TYPE=“BUTTON“ VALUE=“>>“ ONCLICK=“id_DSO.recordset.MoveLast();“ />

Na tomto příkladě vidíte stejnou navigační lištu, jako v předchozím oddíle, ale s tím rozdílem, že zde je pro navigaci použito objektu recordset a jeho metod volaných stejně jako v předchozím příkladě pomocí události onclick. Oproti metodám pro pohyb stránkovanou tabulkou zde musíme 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 záznamu, protože objekt recordset se na nich nezastaví, ale pokračuje v navigaci mimo data načtená z DSO, tedy nevypisuje nic.

Události dat v DHTML

Objektový model DHTML obsahuje i několik událostí dat určených přímo pro vázaná dat. Umožňují nám ovládat například manipulaci s daty nebo zjišťovat stav DSO. Zde je jejich kompletní přehled:

Událost	Aplikována na	Nastane když
onbeforeupdate	spotřebitelé dat	v prvcích podporujících aktualizaci dat, při změně aktivity aktualizované hodnoty, před odesláním do DSO
onafterupdate	spotřebitelé dat	v prvcích podporujících aktualizaci dat, po odeslání aktualizovaných dat do DSO
onrowenter	DSO	změní se ukazatel záznamu
onrowexit	DSO	než se změní ukazatel záznamu
onbeforeunload	window	uživatel se pokusí opustit stránku před uložením aktualizovaných dat
ondataavailable	DSO	při asynchroním přenosu dat, další data jsou přístupná
ondatasetcomplete	DSO	všechna data jsou již načtena
ondatasetchanged	DSO	datová sada je připravena k použití a to ikdyž byla upravena
onerrorupdate	spotřebitelé dat	nastane chyba při přenosu dat mezi spotřebitelem a DSO
onreadystatechange	DSO	může nabýt hodnoty vlastnosti readyState
oncellchange	DSO	změnila se data DSO
onrowsinserted	DSO	záznam byl přidán
onrowsdelete	DSO	záznam je připraven ke smazání

Využití vazby dat

Možnosti využití vazby dat jsou velice rozsáhlé. I když v současnosti dávají programátoři webových stránek přednost spíše relačním databázím, najde si tato technologie své místo především v situacích, kdy například nemáte možnost využít databázového serveru či webového serveru vůbec. Přesto ve spojení se server-side skriptovacími jazyky a relačními databázemi dokážeme práci s datovou vazbou ještě více zefektivnit.