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

<OBJECT id=“id_DSO“ CLASSID=“clsid:333C7BC4-460F-11D0-BC04-0080C7055A83″>
 <PARAM NAME=“vlastnost1″ VALUE=“hodnota1″>
 <PARAM NAME=“vlastnost2″ VALUE=“hodnota2″>
 <PARAM NAME=“vlastnost3″ VALUE=“hodnota3″>
 …
</OBJECT>

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).

<A DATASRC=“#id_DSO“ DATAFLD=“odkaz_url“><DIV DATASRC=“#id_DSO“ DATAFLD=“odkaz_text“></DIV></A>

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.

<TABLE DATASRC=“#id_DSO“ DATAPAGESIZE=“5″>
<TBODY>
 <TR>
  <TD><DIV DATAFLD=“text“></DIV></TD>
 </TR>
</TBODY>
</TABLE>

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.

<PARAM NAME=“Sort“ VALUE=“+Pole_1;-Pole_2″ />

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.

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

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

Štítky: Články

Mohlo by vás také zajímat

Nejnovější

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *