Vazba dat v DHTML – přehledný popis
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.
Mohlo by vás také zajímat
-
Lék na phishing a apatii ve světě e-mailového marketingu
18. března 2024 -
Užitečné nástroje pro sledování výkonu Linuxu
31. října 2022 -
Webdesign: Jak optimalizovat tlačítka na webu
7. března 2024
Nejnovější
-
Doména .io v ohrožení: Co přinese předání Čagoských ostrovů?
10. října 2024 -
Jak se chránit před podvody na internetu – část 1
8. října 2024