Könyvjelzőzhető Ajax alkalmazások

ajaxAz Ajax alkalmazások jelentősen megváltoztatják a weblapok létrehozására használt eddigi technikáinkat. Ez nem baj, de általános tapasztalatok szerint a felhasználók sokkal később reagálnak az efféle változásokra, illetve egy-egy ilyen újítás kivehet a user kezéből régi jól megszokott eszközöket. Ilyen a könyvjelző, vagy éppen a vissza gomb. Ezeket Ajaxxal alapból elvesszük a usertől, de valahogyan vissza kéne nekik adni.

A probléma

A probléma két oldalú. Az egyik az, hogy a user számít olyan cuccokra amiket az elmúlt 10 évben használt. Megszokta őket, és továbbra is használni akarja. Szereti nyomogatni a vissza gombot és továbbra is nyomogatni akarja. Még akkor is ha mi fejlesztők kitaláltunk valami nagyon szuper új cuccot ami meglehetősen másképpen viselkedik mondjuk a vissza gombra.
A másik oldal pedig a tényleg hasznos funkciók elvesztése, mint például a könyvjelzők. Ha az url sohasem módosul, akkor se könyvjelzőzni nem tudok egy adott állapotot, sem elküldeni valakinek emailben.

A megoldás

Egy full Ajax alkalmazásban alapból az url végig változatlan marad. Lehet sok funkciónk, sokféle szolgáltatásunk, de az url minden esetben ugyanaz marad. Hacsak… Hacsak nem gondoskodunk arról, hogy változzon.

Mire reagáljon az url?

Első körben azt kell kitalálnunk, hogy mire reagáljon, azaz milyen események bekövetkezése esetén módosuljon az url. A gouranga.TV oldalon például azt szerettük volna, hogy egy video lejátszásakor az url-be bekerüljön a video azonosítója illetve, hogy a bal oldalon lévő navigációs részben kiválasztott csatorna / tag megjelenjen ott. Más nem. Nem jelezzük, hogy egy adott csatorna lapozásakor hol járt, sem azt, hogy a jobb oldalon lévő boxok közül éppen melyik aktív. Miért? Mert ezek az információk a user számára valószínűleg nem lesznek fontosak. Ez a döntés mindig egyedi. Azt kell mérlegelnünk, hogy a usernek mire lesz igénye.

Na de hogyan?

Többféle library is létezik ami orvosolja a fenti problémát. A Backbase és a dojo keretrendszer ezt be is építette magába, de mondjuk a prototype már nem. Ha az oldalunk épp nem dojot vagy backbase-t használ akkor találnunk kell valami független megoldást. A Really Simply History library pontosan ezzel a céllal jött létre. Csöppet sem meglepő módon a megoldás kicsit más IE-re és a többi böngészőprogramra.

Jöjjenek a konkrétumok

  1. Miután letöltöttük a libraryt, tegyük elérhetővé az alkalmazásunk számára. (Ez általában azt jelenti, hogy fel kell tölteni a szerverre és be kell linkelnünk egy <script type="text/javascript" src="dhtmlHistory.js"></script> hívással)
  2. Rá kell vennünk, hogy az oldal betöltésekor aktivizálódjon:
    Event.observe(window, 'load', mediaCenter.historyInit);
    
  3. Persze ehhez szükséges lesz létrehoznunk a historyInit függvényt is.
    mediaCenter.historyInit = function(){
       dhtmlHistory.initialize();
    

    Először is inicializálnunk kell a history kezelő ojjektumot.

       dhtmlHistory.addListener(mediaCenter.historyChangeKezelo);
    

    Aztán meg kell neveznünk, hogy melyik függvény reagáljon a vissza és előre gombokra.

       if(dhtmlHistory.isFirstLoad()){
          //most hívtuk meg az oldalt közvetlenül
          //nézzük, hogy az url tartalmaz-e #video: részt és ha igen akkor indítsuk el annak a videonak a lejátszását
          if(location.hash.search(/video\:/) != -1){
             mediaCenter.mcStartVideo();
             }
          }
       }
    

    Végül ha kedvünk tartja akkor első betöltéskor lefuttathatunk egy ellenőrzést, mondjuk arra, hogy a meghívott url tartalmaz-e valami számunkra lényeges infót, és ha igen, akkor meghívhatjuk az ahhoz tartozó eseménykezelőt. Itt azt vizsgájuk, hogy az urlünk http://gouranga.tv/#video:425 alakú-e, és ha igen, akkor az mcStartVideo függvényünkkel elindítjuk a kiválasztott videót.

  4. Definiáljuka historyChangeKezelo függvényt is.
    mediaCenter.historyChangeKezelo = function(ujUrl, historyAdat){
       //ez az URL változásánál hívódik meg, amit kiválthat back vagy forward gomb
       if(ujUrl == '') ujUrl = 'video:main';
       ujUrl = ujUrl.replace(/video\:/,'');
       }

    Itt nem sok mindent csinálnuk, a főbb dolgokat a dhtmlHistory így is úgy is meg fogja csinálni.

  5. Ezzel be is állítottunk mindent ami a működtetéshez és az url kezeléséhez szükséges. Ezután már csak annyi dolgunk van, hogy hozzáadjuk a dhtmlHistory-hoz azokat az állapotokat melyeket rögzíteni szeretnénk a historyban. Most itt nem akarom a teljes mediaCenter objektumomat betenni, mert nem a könyvjelzőzhetőségről szól. Lényeg az, hogy azt akartam, hogy amikor a user elindít egy videót, akkor ez a tény rögzüljön a historyban. Szóval volt egy mediaCenter.mcStartVideo() függvényem, és ebbe kellett betennem egy sort.
    dhtmlHistory.add('video:'+mediaCenter.aktualVideo);
    

Ezzel meg is vagyunk, mivel gondoskodtunk arról, hogy video indításnál a tény (és a video azonosítója) rögzüljön a historyban, illetve arról is, hogy a user egy ilyen url-t hív meg (könyvjelzőből vagy egy sima linkből), akor a video lejátszása is el fog indulni.

One thought on “Könyvjelzőzhető Ajax alkalmazások

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.