PageRank • blog

Becsapós cím :D .. Valójában ki is hagynám az ajaxot.. inkább a ránk nézve fontosabb “leképezése XHTML-lel és CSS-el” részbe mennék bele.. via blog

Az Ajax-megfelelő webalklmazások egyik szépsége az egyszerűség, amit hátrányként is lehet értelmezni: a keresőmotorok nem képesek megtalálni az oldalhoz dinamikusan adott tartalmat, mert az nem jelenik meg a forráskódban. Bizonyos helyzetekben ez mindenképpen aggodalomra adhat okot, de a webalkalmazások készítésekor nem mindig cél, hogy magán az alkalmazáson belül előkelő helyre kerülő keresési találatokat kapjunk. Általában inkább a főoldalnál vagy egyéb, az alkalmazásban nem szereplő oldalaknál fontos a rangsor. A legtöbb webalkalmazásnál a keresőmotorokban elért helyezésnek nincs jelentősége. Az ilyen alkalmazások legtöbbször személyes és védett adatokat tartalmaznak, ezért természetesen könnyebbé válik a forráskód elrejtése.
Azoknak, akik megszokták, hogy egymásba ágyazott táblázatokat használnak a HTML-ben, furcsa váltás lehet, amikor elkezdenek div címkéket használni. Először talán kissé furcsa, de hamar rájövünk majd, hogy a div címkék használata hihetetlenül egyszerű, a böngésző gyorsabban képezi le azokat, és sokkal kevesebb forráskódra van szükség, mint az összevissza egymásba ágyazott táblázatoknál. Az a legnagyszerűbb, hogy ha DHTML-t használunk Ajax-adatkérelmekkel együtt, sokkal könnyebb a kezelésük, és a stílus sokkal jobban elkülönül a tartalomtól, ami lényegesen egyszerűbbé teszi a frissítést. A div címkéket olyan adattárolóknak tekinthetjük, amelyek lehetővé teszik, hogy az id (azonosító) és a name (név) jellemzőkön keresztül hivatkozzunk rájuk, így a tartalmuk, a helyük, vagy akár bármelyik társított stílusuk módosítása céljából kijelölhetők.
A kapott választ tekintve könnyen megállapíthatjuk, hogy milyen elemeket kell létrehozni. A létrehozott XML és JSON fájlok az e-mailekben megjelenő különböző elemekből állnak. Most olyan HTML-elemeket hozunk létre, amelyekben megjelenítjük az említett fájlokból származó adatokat. A fájlok által tartalmazott első adathalmaz a kategória. A kategóriák végül az elemgyűjteményekben szereplő elemek szakaszfejlécei lesznek, ezért rácsszerű szerkezetre van szükség az adatok ábrázolásához és ahhoz, hogy megfelelő adatokból álló, azonosítható szakaszokká formázzuk azokat. Miután azonosítani tudjuk az oldal tartalmát, és két elkülönülő részre tudjuk választani azt, olyan HTML-elemeket hozhatunk létre, amelyek a szerkezetet, illetve az adatokat tartalmazzák.
Szükség lesz az ajax. js onXMLResponse, illetve onJSONResponse elemekre.Olyan div elemeket hozzunk létre, amelyek magukba foglalják ezeket az adatokat, majd a body div-hez illesztjük azokat. Ez lehetővé teszi, hogy később CSS-en keresztül stílusokat társítsunk az elemekhez. Egyelőre csupán egy helyőrző div elemet adunk a kódhoz egy ikonfejléc helyett, és még néhány más div elemet, amelyekben header (fejléc) id értéket adunk meg, és az XML-, illetve a JSON-válaszok kategóriáiból származó adatokkal töltjük fel azokat.

XML
var response = request.responseXML.documentElement;
document.getElementByld("body").innerHTML = "<div id='icon'></div>
var categories = response.getElementsByTagName('category');
for(var i=0; i<categories.length; i++)
{
document.getElementByld("body").innerHTML += "<div id='header'> "+ response.getElementsByTagName('category') [i].firstChild.data +"</div>";
}

JSON

eval("var response = ("+request.responseText+")");
document.getElementByld("body").innerHTML = "<div id='icon'></div>";
for(var i in response.data.categories.category)
{
document.getElementByld("body").innerHTML += "<div id='header'> "+ response.data.categories.category[i] +"<div/>";
}

Láthatjuk, hogy az ikon és a kategória adatait egyszerűen betokozzuk ezekbe a div címkékbe, amelyeket később a CSS segítségével stílussal látunk el, és elválasztunk azoktól az elemadatoktól, amelyeket ezekkel a kategóriákkal társítunk. Más szóval gyakorlatilag rácsot készítünk a válasz megfelelő adataiból. Most, hogy létrehoztuk a fejlécet alkotó div elemeket, div elemeket adunk az elemadatokhoz, majd mindegyiket a megfelelő művelethez, illetve ikonhoz rendeljük. Az egyes elemekhez tartozó div címkék pusztán item (elem) id értéket kapnak. A műveletet úgy társítjuk az egyes egységek div címkéjéhez, hogy mindegyikhez egyszerűen egy onclick (kattintáskor) eseményt adunk, majd hozzáillesztjük a műveleti változót. Az ikonok hozzáadásakor csak az egyes elemcsoportok első eleméhez akarunk ikont adni, nem minden div-hez. Az alábbi kódok az XML- és a JSON-válaszhoz tartozó elemkódokhoz illesztenek div címkéket:

XML

for(var i=0; i<row.length; i++)
{
var action = response.getElementsByTagName('items') [i] .getAttribute('action'); var icon =
response.getElementsByTagName('items')[i].getAttribute('icon'); var items = response.getElementsByTagName('items')[i].childNodes; document.getElementByld("body").innerHTML +=
"<div id='icon'ximg src='"+ icon +"'/></div>"; for(var j=0; j<items.length; j++)
{
for(var k=0; k<items[j].childNodes.length; k++)
{
document.getElementByld("body").innerHTML += "<div id='item' onclick=\""+ action +"\"> "+ tems[j].childNodes[k].nodeValue +"</div>";
}
}
}

JSON

Most, hogy az XHTML az oldalra ír, ideje felvenni azokat a stílusokat, amelyek kialakítják a végső elrendezést. Ezt úgy oldjuk meg, hogy CSS-t társítunk az elemekhez.

for(var i in response.data.row.items)
{
document.getElementById("body").innerHTML += "<div id='icon'ximg src=' "+ response.data.row.items[i].icon +" '/></div>";
for(var j in response.data.row.items[i].item)
{
document.getElementById("body").innerHTML += "<div id='item' onclick=\"" + response.data.row.items[i].action +"\">"+ response.data.row.items[i].item[j] +"</div>";

CSS

Ha az XHTML-t a CSS-sel együtt alkalmazva képezzük le az Ajax-válaszadatokat, elkülönülő rétegeket kapunk a kódban, ami lehetővé teszi, hogy az alkalmazás bizonyos területeit anélkül frissítsük, hogy a többit bármilyen módon érintenénk. Miután már tudjuk, hogyan kell XHTML-ként leképezni az adatokat úgy, hogy JavaScripttel div elemekhez adjuk azokat, hozzáláthatunk az oldal díszítéséhez. Ehhez először CSS-osztályokat hozunk létre, amelyek meghatározzák az egyes elemek stílusát, ezáltal az egész oldal külalakját. Ahhoz, hogy CSS-t használjunk a HTML oldalon, ahhoz előbb be kell tölteni azokat a CSS állományokat, amelyek meghatározzák az oldal elemeinek stílusát. Először hozzunk létre egy új fájlt, és nevezzük el layout. css-nek. A következő kódot adjuk a HTML indexfájl fejlécéhez, hogy betöltsük a CSS-t:

<link href="css/layout.css" rel="stylesheet" type="text/css" />

Mivel már azonosítottuk és elhelyeztük az oldal HTML elemeit, tudjuk, hogy milyen elemekhez kell stílust készíteni. A stílusok létrehozása előtt el kell képzelnünk, hogy milyennek szeretnénk látni az oldal külalakját. Ha az oldalkép gondolatban történő megjelenítése nem megy könnyen, egy grafikus szerkesztőben készíthetünk vázlatot, illetve mintát. Bárhogy is érjük el, ha már megvan az elképzelés, elkezdhetjük a CSS-sel rendezni az elemeket. Ebben a példában egyszerű rácsos elrendezést szeretnénk az e-mail adatokhoz, amelyben a cellák fejléce és a cellákhoz tartozó adatok soronként jelennek meg a fejlécek alatt.

Az új CSS fájlban négy osztályt hozunk létre, body, header, item és icon néven. Ez az a négy elem, amelyet az előző rész ajax.js fájljában szereplő válaszfüggvények segítségével már hozzáadtunk a kódhoz. A body div-vel kezdve – amely eleve hozzáadódott az oldalhoz – egy 570 képpontos width (szélesség) értékkel rendelkező osztályt hozunk létre. Ez a szélesség kiegyenlíti azt a margin (szegély) értéket, amelyet a rács minden eleme körül elhelyezünk, de ezt majd akkor részletezzük, amikor befejeztük a header és az item osztály hozzáadását. A body osztályt az alábbi kód hozza létre:

#body
{
width: 570px;
}

Következő lépésként létrehozzuk a header div elem osztályát. Ha visszatekintünk az általunk kért XML és JSON fájlokra, láthatjuk, hogy három fejléc és három elem szerepel bennük. Ezeknek a fejléceknek és elemeknek egymás mellett kellene sorakozniuk, hogy adatsorokat képezzenek. Ennek megvalósítását egy left (bal) értékkel ellátott float (lebegés) jellemző hozzáadásával kell kezdeni. Ez minden header és item címkét balra zár, és ezáltal adatsorokat alkot. Akkor jönnek létre új sorok, amikor elérjük a tároló szélességének határát, amit a body osztályban határoztunk meg. Egy nyílmutatót is felveszünk, amellyel minden elemet kattinthatónak jelölünk. Az alábbi kódot rendeljük az egyes fejlécekhez és elemekhez:

#header
{
float: left;
width: 18Opx;
padding: lOpx Opx lOpx Opx;
background-color: #666;
color: #fff;
margin: lpx;
}
#item
{
float: left;
width: 18Opx;
padding: lOpx Opx lOpx Opx;
background-color: ieaeaea;
color: #333;
margin: lpx;
cursor: pointer;
}

A body osztályhoz rendelt szélesség befogadja az egyes sorokban megjelenő három elem szélességét és szegélyét, valamint az ikonok szélességét és szegélyét. Ha több elemet akarnánk megjeleníteni egy sorban, egyszerűen átállítanánk a tároló szélességét, figyelembe véve az elemek szegélyét és egyéb térközeit.

Láthatjuk, hogy a fejléceket és az elemeket háttérszínnel és betűszínnel formázzuk, valamint nyílmutatót adunk az egyes elemekhez, ami egyértelművé teszi, hogy rájuk lehet kattintani. Ezeket az elemeket millióféleképpen lehet testreszabni; érdemes egy kicsit játszani és kísérletezni.
Az utolsó elem, amelyhez osztályt kell létrehozni, az icon elem. Az ikon nagyon kicsi, ezért nincs szüksége ugyanakkora szélességre, mint egy hagyományos elemnek – éppen emiatt kell saját osztályt létrehozni az ikonok számára. Az icon elemet egyaránt használjuk helyőrzőként a fejlécben az ikonokhoz szükséges hely fenntartásához, és tényleges ikonként, ami az elemek bal oldalára kerül. A rács összes eleméhez hasonlóan ez az elem is a bal oldalra úszik, hogy sorok jöjjenek létre. Egyéb általános tulajdonságai is vannak, például szélesség (width), kitöltés (padding), betűszín (color) és szegély (margin):

#icon
{
float: left;
width: 2 Opx;
padding: 5px Opx 5px Opx;
color: #333;
margin: lpx;
}

–