Weblabor

Az Internet Explorer 4.0-s verziója óta áll az adatkapcsolási technika a fejlesztők rendelkezésére. Bár az említett verzió már elég régen jelent meg, mégis viszonylag ritkán találkozhatunk olyan oldalakkal, melyek kihasználják az adatkapcsolás lehetőségeit. Ennek oka nem a technika bonyolultságában keresendő, hanem abban, hogy jelenleg más böngészők egyáltalán nem támogatják az IE által megvalósított adatkapcsolást, mivel az egyáltalán nem szabványos. A cikkben bemutatott technológiát ne használjuk az interneten!

Miről is van szó - mi az az adatkapcsolás?

Az adatkapcsolás alkalmazásával lehetőségünk nyílik különböző HTML elemek tartalmát adatforrásokban található adatokhoz kötni. Segítségével oldalunkon dinamikusan tudunk adatokat megjeleníteni, rendezni és keresni, mindezt kliens oldalon, mindenféle szerveroldali segítség (adatbázis kiszolgáló, szerveroldali scripnyelvek) igénybevétele nélkül. Az adatkapcsolásnak megvan tehát az az előnye, hogy nem kell folyton a szerver válaszára várni.

Az Internet Exploreren belül megvalósított adatkapcsoláshoz szükségünk van adatforrásra (ebben találhatók maguk az adatok) és adatfogyasztókra (ezek jelenítik meg az adatokat). Adatforrás sok minden lehet: szövegfájl, maga az adatkapcsolást megvalósító HTML fájl, külső HTML file, XML fájl, adatbázis, Excel fájl, külső alkalmazás, stb. Adatfogyasztó (adatmegjelenítő) lehet valamilyen HTML elem az oldalon belül.

Cikkemben kétféle megoldást ismertetek, az egyik esetben egy CSV fájlból nyerünk ki adatokat a Tabular Data Control vezérlő segítségével, a másik esetbeen pedig XML adatok szolgálnak adatforrásként.

Menjünk biztosra!

Mivel, mint említettem a technológia csakis IE-ben áll rendelkezésünkre olyan helyen alkalmazzuk, ahol biztosak lehetünk ezen alkalmazás meglétében! Ha Windowst használunk, akkor nap, mint nap használunk IE-t, még akkor is, ha nem tudjuk, ott van az orrunk előtt, úgy hívják: Active Desktop. A cikkben szeretnék néhány olyan alkalmazást bemutatni, melyeket eredetileg Active Desktopon való felhasználásra szántam, bár semmi akadálya, hogy ezeket webes környezetben is használjuk, de csak akkor - nem győzöm elégszer hangsúlyozni -, ha biztosak vagyunk abban, hogy felhasználóink Internet Explorert használnak (intranet, saját használatra készült oldal).

Táblázatos adatok kapcsolása

Példánkban az ábrán látható telefonszám nyilvántartót fogjuk létrehozni, melynek csupán az alapszerkezetét kódoljuk le a HTML fájlban, a sorok feltöltése egy külső fájlban található adatokkal történik. Minimális Javascript segítségével adatainkat tetszőlegesen rendezhetjük, kereséseket végezhetünk.

Adatfájl létrehozása

Az Internet Explorer egyes adatkapcsolási szolgáltatásainak jellemzője, hogy adatbáziskezelő szerver illetve webszerver nélküli környezetben (pl.: Windows munkaasztal) működnek. Elegendő, ha létrehozunk egy egyszerű szövegfájlt - persze megfelelően struktúrálva - és ezt használhatjuk adatforrásként. A példához a következő tartalmú fájlt használom, melyet az egyszerűség kedvéért a HTML fájllal egy mappába mentettem le telefonok.csv néven:Amint látható, az első sor tartalmazza a mezők neveit, a többi sor pedig a tényleges adatokat. Gondolom a gyakorlottabbak azt is észrevették, hogy ez bizony egy teljesen szokványos CSV fájl, azaz az egyes rekordok soronként találhatók, a mezőket pedig valamilyen elválasztó-karakterrel különítjük el egymástól. Jelen esetben a pontosvesszőt alkalmaztam. Ilyen fájlt készíthetünk Excelben, de akár Jegyzettömbben is.

Adatfogyasztó létrehozása

Nos adatfájlunk már lenne, következőként lássuk a megjelenítést végző HTML részt, azaz az adatfogyasztónkat. Az adatfogyasztóknak két fő típusa van, az egyedi értéket fogyasztó (single-valued consumer) és a táblázatos fogyasztó (tabular consumer). Az egyedi fogyasztó az éppen aktuális rekord egyetlen mezőjét jeleníti meg, míg a táblázatos fogyasztó a rendelkezésre álló teljes adatkészletet. A táblázatos fogyasztók az általuk tartalmazott elemeket sablonként használva, azokat ismételve állítják elő az oldal végleges tartalmát.

Mivel példánkban adatainkat táblázatos formában szeretnénk megjeleníteni, ezért egy táblázat sablont készítünk. Figyelem! Szabálytalan, nem W3C szabványnak megfelelő elemek és megoldások következnek:Mint látható a table elemen belül megadunk egy datasrc nevű tulajdonságot. Ez annak az adatforrás objektumnak az azonosítója, mely a tulajdonképpeni összeköttetést valósítja meg szövegfájlunk és a HTML elemek között. Létrehozását a következő pontban mutatom be. Az azonosító bármilyen szabályos azonosító lehet, lényeg, hogy a kettő helyen egyezzen meg, valamint első karakterként mindenképp szerepeljen a # (kettőskereszt).

Vizsgáljuk meg sablonunkat közelebbről! A thead elem használata egyértelmű, persze nem kötelező, de azért példánkban jó szolgálatot fog tenni. A sablon "lelke" a tr elem és az általa közrefogott td elemek. Adatfájlunk minden sorához a tr elemen belül meghatározott szerkezetnek megfelelően fognak megjelenni adataink a generált oldalon. A td-ken belüli datafld tulajdonság határozza meg, hogy melyik mező tartalma kerüljön beillesztésre. Ezek a datafld értékek a szövegfájlunk első sorában megadott mezőneveknek felelnek meg. Tehát végeredményben adatfájlunk minden sorának egy táblázaton belüli sor fog megfelelni, minden mezőjének pedig egy táblázatcella. Ez így logikusnak tűnik, azonban hadd hívjam fel néhány óriási logikai bukfencre a figyelmet. Amint látható, nem a td elemhez rendeljük a datafld tulajdonság segítségével az adatmezőket, hanem az azon belül található span elemhez. Ennek magyarázata az, hogy a td elem nem lehet adatfogyasztó, a span viszont igen. Nos, figyelembe véve, hogy rekordkészletek megjelenítése főleg táblázatos formában történik, ez a viselkedés minimum furcsának mondható. Ugyanennyire furcsállottam a tbody viselkedését is. Persze ezek nem véletlenszerű viselkedések, a specifikációban dokumentálva vannak. Ha tbody elemet is alkalmazunk sablonunkban, akkor az is a sablon részeként fog viselkedni, tehát minden egyes adatsorunknak nem egy tr elem fog megfelelni, hanem egy tbody, azon belül pedig a tr elem. Jelen példánkban ez összesen négy tbody elemet eredményezne. Hááát, nem mondom, a nyilvánvalóan szükséges td elem nem támogatott, viszont a tbody elem, amiből - valljuk meg őszintén - egy is elegendő, az bizony ismétlődni fog. A rendszer alkotójának egy nagy gratula! Még valami: a thead és tfoot elemeken belül a tr elem sem fog ismétlődni! Ez mondjuk, jól jön.

Adatfájl és adatfogyasztó összekapcsolása

Miután rendelkezünk adatfájlal és az adatok megjelenítéséhez egy sablonnal, már csak a kapcsolatot kell felépíteni a kettő között, azaz lehetővé kell tennünk, hogy adatfogyasztónk elérhesse a fájlban tárolt adatokat. Az adatelérést egy "beépített" ActiveX vezérlő, a Tabular Data Control valósítja meg, mely vezérlő használatba vételének szándékát HTML oldalunkon jelezni kell. Ezt a "jelzést" az <object> elem segítségével tehetjük meg; tudnunk kell még, hogy kötelezően fell kell tüntetnünk az ActiveX objektum egyedi azonosítóját a classid tulajdonságban, mely minden esetben a következő: Ezek után paraméterek megadásával tudjuk beállítani objektumunk megfelelő viselkedését.A fontosabb paraméterek a következők:

CharSet: Az adatfájlban használt karakterkészlet (értékei a szokásosak pl.: windows-1250, utf-8, iso-8859-2, stb. Bővebben a megadott forrásokban utánakereshetőek.
DataUrl: Az adatfájl URL-je, szabványos jelöléssel, teljes, vagy relatív elérési úttal (http://weblabor.hu/akarmi.csv, telefonok.csv, stb.).
FieldDelim: Az adatmezőket elválasztó karakter. Ha nem adjuk meg, alapértelmezett értéke: , (vessző).
TextQualifier: A speciális karaktereket is tartalmazó szövegeket határoló jelet adhatjuk meg. Pl.: ha FieldDelim értéke: , (vessző) és adatmezőnkben is szerepel a vessző karakter, akkor ezen határoló jelekkel kell körbevennünk a mezőnket, hogy helyesen kerüljön értelmezésre: "egy, megérett a meggy". Alpértelmezett értéke a " (idézőjel).
RowDelim: Az adatsorokat elválasztó karakter. Alapértelmezett értéke, ha nem adjuk meg: newline, azaz újsor karakter, ahogy én is tettem, szöveggel kiírva.
UseHeader: Megadja, hogy adatfájlunk első sora fejlécinformációt tartalmaz-e, vagy pedig konkrét adatot. Értéke true (van fejlécinfó) vagy false (nincs fejléc) lehet.

A működőképes oldal

Az eddigieket összerakva egy HTML oldalba, valamint a fent megadott módon létrehozott csv fájlt ugyanabban a könyvtárban telefonok.csv néven elmentve, majd Internet Explorerbe betöltve az oldalt sok minden világosabbá válik az eddigiekből. A teljes oldal kódja a következő:

Adatok rendezése

Már korábban említettem, hogy a rendelkezésre álló adatainkat egyszerű módon sorba rendezhetjük és kereshetjük JavaScript segítségével. Lássuk először a rendezést!

A rendezéshez a Tabular Data Control Sort tulajdonságát és Reset() metódusát kell csupán felhasználnunk. A Sort tulajdonság segítségével tudjuk beállítani az elsődleges, másodlagos, stb. rendezési szempontokat, valamint a csökkenő és növekvő rendezést. Ha több szempont alapján adunk meg rendezést, akkor ezeket ; (pontosvessző) karakterrel kell elválasztani egymástól. A rendezés megadásánal az adatfájlban szereplő mezőneveket kell magadnunk. Növekvő sorrendet a + (plusz) jellel, csökkenőt a - (mínusz) jellel adthatunk meg. Ha üres értéket adunk, akkor nem lesz rendezés. A Sort tulajdonság beállításának nincs azonnali hatása, a Reset() metódust meghívva hajtódik végre maga a rendezés. Lássunk néhány példát:

Név szerinti növekvő rendezés: Telefonszám szerint csökkenő rendezés: Név szerint növekvő, azon belül telefonszám szerint csökkenő rendezés: Nos ennyi elmélet után lássunk neki a tényleges megvalósításnak. Mivel egyszerű és fájdalommentes megoldásra törekszünk, oldjuk meg a feladatot úgy, hogy a táblázat fejlécére kattintva a fejléc szerinti mező legyen a rendezési szempont. Ehhez az alábbi kis módosítást végezzük el táblázatunk fejlécén:Ezek után hozzuk létre magát a scriptet:Alapértelmezett rendezettséget is megadhatunk adatainknak, ha az object elemben egy újabb paramétert veszünk fel, pl.: <param name="Sort" value="-Nev">. Ekkor adatfájlunk a betöltődés után név szerint csökkenő sorrendben fog megjelenni

Keresés, szűrés

Láthattuk, hogy a különböző szempontok alapján történő rendezéseket szinte kódolás nélkül valósíthattuk meg. Keresések esetében szintén könnyű dolgunk lesz, csupán a Tabular Data Control Filter tulajdonságát kell megfelelően beállítanunk, majd ezek után az előbbiekhez hasonlóan a Reset() metódust kell meghívnunk.

A filter tulajdonság megadásakor használhatjuk mezőneveinket, relációs jeleket (=, >, <, >=, <=, <>), logikai operátorokat (& - ÉS, | - VAGY) illetve zárójeleket, valamint a * helyettesítő-karaktert mely bármely karaktert helyettesíthet feltételünkben. Amennyiben egy kifejezésen belül használunk ÉS (&) és VAGY (|) operátorokat, akkor az egyes részkifejezések körül mindenképp használnunk kell zárójeleket. Lássunk néhány példát! A tdc objektum továbbra is a lapon található tdc azonosítóval ellátott Tabular Data Controlra hivatkozik:

Kikeresi apeh nevű kedves ismerőseinket:Az "a" betűvel kezdődő nevek:Mindenki, akinek neve "a"-val kezdődik vagy telefonszáma 555-3331:Építsük be a fentieket példánkba! Ehhez hozzunk létre egy beviteli mezőt, ahová a feltételt írhatjuk, valamint egy nyomógombot.Ezek után scriptünket is egészítsük ki az alábbi sorokkal:Mint láthatjuk függvényünk a beviteli mező szövege (txtFeltetel.value) alapján keres, mégpedig úgy, hogy a bevitt szöveget a Nev és a Telefon mezőkben is megtalálja a VAGY (|) kapcsolat miatt. A feltételben használt * karakter miatt ráadásul nem is kell végig beírnunk a keresett nevet vagy telefonszámot.

Aki kipróbálja tapasztalhatja, hogy a keresés érzékeny a kis-nagybetűk különbözőségére. Kényelmi megfontolásokból éppen ezért a fenti függvénybe a tdc.Reset(); sor elé szúrjuk be a tdc.CaseSensitive="false"; sort vagy az object elemen belül hozzuk létre a <param name="CaseSensitive" value="false"> bejegyzést.

XML adatszigetek

Mint bevezetőmben említettem XML adatokat is használhatunk adatforrásként. Ehhez az Internet Explorer által támogatott xml elemet kell használnunk, mely segítségével úgynevezett XML adatszigetet tudunk létrehozni a HTML oldalon belül. Nincs szükségünk külön ActiveX elemre, hogy megteremtsük a kapcsolatot az XML adatok és az adatfogyasztó HTML elemek között, mivel az XML adatok "közvetlenül fogyaszthatóak". Két lehetőségünk van:

• közvetlenül a HTML oldalba ágyazzuk be adatainkat:

  
  ...<body>
  ...
  <xml id="xml_adat">
  <sajat_xml_tag> adatok</sajat_xml_tag>
  <sajat_xml_tag>további adatok</sajat_xml_tag>
  </xml>
  ...
  </body>...
  

• külső fájlban helyezzük el azokat és az xml elem src tulajdonságában adjuk meg az elérési utat:

  
  ...<body>
  ...
  <xml id="xml_adat" src="xmlfile.xml"></xml>
  ...
  </body>...
  

  Fentiek alapján ismét nézzük egy példán, hogyan is tudjuk a gyakorlatban HTML elemeinket XML adatokhoz kapcsolni, milyen lehetőségeink vannak, és milyen akadályokat kell leküzdenünk!
  

XML adatok létrehozása

Példánkban néhány viccet ágyazunk be egy HTML oldalon elhelyezett XML adatszigetben, majd megalkotjuk adatfogyasztónkat és scriptünket, melyek segítségével bizonyos időközönként véletlenszerűen jelenítjük meg valamelyik viccet. Először egy nem működő példát mutatok be, mert úgy gondolom ebből is lehet tanulni. Persze a későbbiekben a működő megoldást is ismertetem! :)Kezdjük a végén! A div elem nem táblázatos adatfogyasztó, hanem egyedi értéket fogyaszt, azaz egyszerre csak egyetlen (az éppen aktuális) rekord adatait tudja megjeleníteni. A további rekordok megjelenítéséről, a rekordok léptetéséről majd scriptben gondoskodunk. Mint látható, szándékaink szerint a vicc xml elemen belüli szöveget szeretnénk megjeleníteni. Sajnos, ebben az xml struktúrában ez nem fog sikerülni, semmi nem fog megjelenni a div elemen belül. A probléma megoldásához alakítsuk át adatszigetünket a következőképp, és módosítsuk a div datafld tulajdonságát is:Amint látható, egy plusz elemmel "burkoltuk be" adatainkat. Ezt a viselkedést nem láttam külön dokumentálva a Microsoft oldalain, de van rá magyarázat, s nem is olyan bonyolult: az XML szabvány megköveteli, hogy legyen egy gyökérelem, s csak egy legyen belőle.

A végleges oldal scripttel együtt

Mint az előbbiekben is írtam a script segítségével választjuk ki a megjelenítendő rekordot. Amint látható a rekordkészletre az XML adatsziget recordset tulajdonságával hivatkozhatunk. Ez a tulajdonság egy ADO rekordkészlet, tehát az ADO objektummodell segítségével tudjuk azt manipulálni. A példában a recordCount tulajdonság segítségével megkapjuk az összes rekord számát, amire majd a véletlenszám-generálásnál lesz szükség, nehogy olyan számot generáljunk, aminek megfelelő indexű elem már nem található a rekordok között. A tényleges rekordra ugrást a mehet() függvény végzi. Miután meghatároztuk a kívánt rekordot a recordset absolutePosition tulajdonságával beállítjuk aktuálisnak. Figyelem: a rekordok indexelése 1-ről, és nem 0-ról indul!

HTML formázás XML adatszigeten belül

Adatkapcsolás során lehetőségünk van a az adatainkban HTML elemek elhelyezésére is. Ekkor az adatfogyasztó létrehozásakor be kell állítanunk a dataformatas="html" tulajdonságot is. Ezt megtehetjük az előzőekben ismertetett Tabular Data Control esetében is, de mivel az XML adatszigetek esetében "speciális" megoldásra van szükség, ezért most ismertetem.

Ha az xml elemen belül csak egyszerűen beírjuk a HTML elemeket a megfelelő formázás eléréséhez, akkor nagy valószínűséggel nem fogjuk látni rekordjainkat a kész oldalon, ugyanis azok nem megfelelően kerülnek értelmezésre. Lássuk az egyszerű megközelítést, ami nem jó:Nos, ebben az esetben a HTML elemeket is XML elemként próbálja értelmezni a böngésző, így a rekordszerkezet felborul. Ebből következik, hogy valamilyen módon arra kell rábírnunk az XML értelmezőt, hogy ne értelmezze tovább a szoveg elemen belül található adatokat. Ezt úgy érhetjük el, ha a teljes részt egy CDATA szekción belül helyezzük el:Persze ne felejtsük el az adatfogyasztó div dataformatas="html" tulajdonságát sem beállítani:

További rekordműveletek

A teljesség igénye nélkül, tekintsünk át még néhány fontosabb rekordműveletet - ismét egy példán keresztül!

Létrehozunk egy XML adatszigetet az oldalon belül, melyben különböző eseményeket (születésnap, névnap, stb.) tartunk nyilván. Az egyes események között pedig gombok nyomkodásával lépkedhetünk előre és hátra. Lássuk mindjárt a teljes forráskódot, a magyarázatot pedig utána:Az XML rész nem hinném, hogy bővebb magyarázatra szorulna. Adatfogyasztóink span elemek, melyek datafld tulajdonságában állítjuk be a megjelenítendő mezőnevet. Az érdekesebb rész a scripten belül található. A valtas() függvény a gombok megnyomása után kerül meghívásra, és a következő illetve előző rekordra lépteti a rekordmutatót. Az előreléptetést a moveNext(), a visszaléptetést a movePrevious() ADO függvénnyel éjük el. Még annyit trükközünk, hogy ha a rekordmutató az utolsó rekordot elérte, akkor "körbeforgunk", és az első rekordra ugrunk a moveFirst() függvénnyel. Ugyanezt tesszük, csak fordítva a rekordkészlet elejét elérve, ekkor az utolsó rekordra ugrunk a moveLast() metódussal.

Felhasználási lehetőségek, korlátok

Mint láthattuk a technika alkalmazásával nagyon egyszerűen és gyorsan tudunk szokványos adatkezelési műveleteket végrehajtani, szinte kódolás nélkül. Mindeközben persze ne felejtsük el a korlátokat sem! Nagy méretű, gyakran változó adathalmaz kezelésére a módszert ne használjuk. Ismét hangsúlyozom, hogy jelenleg csakis Internet Explorerben működő megoldásról van szó, bár előfordulhat, hogy a jövőben más böngészők is támogatni fognak hasonló technikákat. Egyes régebbi, illetve személyre szabott IE telepítéseken sem garantált a működés, feltétel ugyanis az adatkapcsolási lehetőségek telepítése - XP-n ez alapban adott. Ha biztosak vagyunk az előbbi feltételek teljesülésében (pl.: intranetes alkalmazás, saját használatra készült oldal, Windows munkaasztalon történő alkalmazás) csak akkor bízzuk magunkat a fenti megoldásra.

További lehetőségek

Az Internet Explorer adatkapcsolási technológiáról még oldalakon keresztül lehetne írni, erre idő hiányában egyelőre nem vállalkozom. Remélem azonban, hogy aki valamennyire fogékony a téma iránt, annak az érdeklődését sikerült felkeltenem, és a források közt utánanéz a többi lehetőségnek is, úgy mint az MSHTML adatforrás, illetve a Remote Data Service (RDS) által nyújtott lehetőségek, valamint az adatkapcsoláshoz kapcsolódó eseménymodell.

Jó próbálgatást!

Források

• http://msdn.microsoft.com/library/default.asp?url=/workshop/author/databind/data_binding_node_entry.asp
  
• http://www.sitepoint.com/article/control-internet-explorer
  
• http://www.15seconds.com/issue/010116.htm
  
• http://msdn.microsoft.com/library/default.asp?url=/library/en-us/ado270/htm/mdmscadoapireference.asp
  
• http://www.devguru.com/Technologies/ado/quickref/ado_index.html