A témák nem új fogalom. Valószínűleg Ön is bevezetett már néhányat a Cascading Style Sheet (CSS) stílusok és osztályok segítségével a webhelyek megjelenésének formázására. Egy keretrendszer használata szabványosítja a megközelítést, és csökkenti a munka és a megírandó kód mennyiségét.

A jQuery UI ma már a téma megvalósításának iparági szabványa. Vannak más lehetőségek is, például a Dojo (Dijit-tel párosítva) vagy az Ext JS, de a jQuery UI a témákat a widgetek használatával kombinálja, amelyek azok az elemek, amelyekkel a felhasználók interakcióba lépnek a dátumválasztókkal vagy a gombokkal. A jQuery UI témát alkotó fájlok belső működését boncolgatva nem találunk mást, mint CSS-t és JavaScriptet. De éppen a CSS és a JavaScript használatának átgondoltsága és szabványosítása az, ami a jQuery UI-t olyan kiváló platformmá teszi a webhelyek megjelenésének kialakításához.

jQuery UI témák

A jQuery UI platform két alkeretből áll: egy widget keretrendszerből, amely a Widget Factory-t és egy sor gyakran használt widgetet tartalmaz, valamint a CSS keretrendszerből. A Widget Factory biztosítja az összes jQuery UI widget alapját, beleértve a widgetkészletben szereplő gyakori widgeteket is. A widgetek létrehozásakor vagy a készletben található gyakori widgetek egyikét használja kiindulópontként, vagy hozzon létre egyet a semmiből. Ha már tudja, hol vannak a közös widgetek, nyissa meg bármelyiket a kedvenc szerkesztőprogramjában, és tekintse meg a kódot. Onnan vagy módosítsa ezt a kódot, és hozzon létre egy testreszabott widgetet (kiindulópontként használva a többi widget egyikét), vagy hozzon létre egyet hasonló felépítéssel.

A jQuery UI témák mappaszerkezete

Mielőtt folytatná a különböző fájlok és tartalmuk megtekintését, töltse le az egyik témát a jQuery UI platformról (a linket lásd a Kapcsolódó témáknál). A letöltött ZIP-fájl három mappát tartalmaz: css, js és development-bundle. A development-bundle mappa tartalmaz egy themes nevű mappát, amelyben a fejlesztés alatt álló jQuery UI-témákat tárolják. A themes mappa viszont tartalmaz egy mappát a kiválasztott/letöltött téma nevével (például UI lightness), valamint egy base nevű mappát. Ez a mappa tartalmazza a saját témák kiindulópontját. Ez mindig letöltésre kerül, függetlenül a kiválasztott témától.

A css mappa tartalmaz egy mappát a letöltött téma nevével. Ez a téma mappa tartalmaz egy CSS fájlt, amely tartalmazza az összes komponens vagy widget CSS jelölését. A development-bundle mappa azonban tartalmaz egy themes/ mappát is (ahol a kiválasztott téma tényleges neve szerepel), amely az egyes komponensek vagy widgetek egyedi CSS-fájljait tartalmazza. Ez a struktúra megkönnyíti a változtatások megtalálását és módosítását a saját témáiban. Az 1. ábra mutatja a themes mappa felépítését.

1. ábra. A themes mappa szerkezete

Kép megtekintése teljes méretben

A mappa nem minden fájlja szerepel az 1. ábrán, de a fontosak itt vannak. A jquery.ui.all.css fájl importálja a jquery.ui.base.css és a jquery.ui.theme.css fájlokat, így a fájlok importálása csak a jquery.ui.all.css fájl használatával egyszerű. A jquery.ui.base.css fájl importálja a jquery.ui.core.css fájlt és az összes többi komponens és widget fájlt ugyanabból a mappából (az 1. ábrán nem látható.). A jquery.ui.core.css fájl az összes widgetfájl által használt közös osztályokat tartalmazza. Ez biztosítja az összes jQuery UI widget alap CSS osztályait (a témán belül), valamint a widgetek közös láthatóságát és pozicionálását. Az utolsó fontos fájl a jquery.ui.theme.css fájl, amely a téma összes widgetje, valamint maga a téma által osztott közös megjelenést és viselkedést biztosítja.

A jquery.ui.theme.css fájlban három különböző típusú stílus található:

• Container – Ez a stílus határozza meg a konténer témát, például ui-widget, ui-widget-content vagy ui-widget-header.
• States – Ezt a stílustípust a jQuery UI widgetek használják a widget kinézetének meghatározására, amikor a felhasználó interakcióba lép vele. Az osztályok közé tartozik a ui-state-default, ui-state-hover és ui-state-active.
• Cues – Ahogy valami történik az alkalmazásban (nem a felhasználó cselekvése által), ezek az osztályok megváltoztatják a widget kinézetét. Az osztályok közé tartozik a ui-state-highlight, ui-state-error és ui-state-disabled.

Gyakori widgetek

Ez a szakasz olyan példakódot mutat be, amely néhány gyakori widgetet használ egy példaalkalmazás felépítéséhez. Ez a példa tartalmaz egy csúszka widgetet, egy gombot, amely megnyit egy párbeszédpanelt, és egy párbeszédpanelt, amely minden megnyitáskor megjeleníti a csúszka aktuális értékét. A 2. ábra az alkalmazás pillanatképét mutatja be.

2. ábra. Egy általános widgeteket használó példaalkalmazás

Kép teljes méretben való megtekintése

Az 1. lista a HTML-indexfájlt tartalmazza.

1. lista. Általános widgeteket használó példaalkalmazás

A 2. lista a kapcsolódó JavaScript fájlt (index.js) mutatja.

A 2. lista. A kapcsolódó JavaScript-fájl a példaalkalmazáshoz

A kezdeti beállítás a fejlécben történik a következő kóddal:

A CSS-ben történő linkelés után a JavaScript-fájlok bekerülnek.

A három widget ebben az alkalmazásban nagyrészt <div> utasításokkal van definiálva (kivéve a gombot, amelynek már van címkéje a HTML-ben). Ezek a widgetek a következő kódban vannak definiálva:

<div style="margin-bottom:10px;"></div><button>Display Value</button><div></div>

Végül a widgetek tényleges felépítését a JavaScript-kódban addig késleltessük, amíg az oldalt a böngésző teljesen be nem tölti, ahogy a 3. felsorolásban látható.

3. lista. A widgetek felépítése

A már említett widgetek mindegyike ezzel a kóddal épül fel. A párbeszédpanelhez és a gombhoz is bizonyos eseményekhez rendelt függvények tartoznak. Például a gomb kattintás eseményére azt mondjuk, hogy kattintáskor nyissa meg a párbeszédpanelt. Ami a párbeszédpanelt illeti, arra utasítják, hogy változtassa meg a szövegét, hogy jelezze a csúszka aktuális értékét, amit minden megnyitáskor meg is tesz.

Egy widget megjelenésének megváltoztatására két lehetőség van. Átadhat értékeket a konstruktornak, a widgethez szükséges konstruktorparaméterekkel együtt. Például:

$("#dlg_popup").dialog( { autoOpen: false, draggable: true });

Vagy a widget létrehozását követően hívhat meg metódusokat a widgeten, az alábbiak szerint.

$("#dlg_popup").dialog({ draggable: false });

A legtöbb gyakori widgethez számos beállítási lehetőség tartozik. Ráadásul, ha úgy döntesz, hogy figyelmen kívül hagyod ezeket az opciókat, a widgetek alapértelmezett értékekre állítják be őket, lehetővé téve számodra, hogy beállítsd és megváltoztasd, amire szükséged van.

Widgetes események

Mivel a widgetek alapvetően JavaScript objektumok, olyan eseményekkel állíthatók be, amelyek a webhelyalkalmazás élettartama alatt tüzelnek. Ezeket az eseményeket vagy a weboldal JavaScript kódja fogja el, vagy a widgetek kezelik (ez az alapértelmezett).

A widgetek alapértelmezett viselkedésének megvalósítását a jQuery UI csapata minden egyes közös widget esetében jól dokumentálja. Ön azonban saját kódot is beszúrhat, hogy egy vagy több kiválasztott widget eseményét kezelje. Íme egy példa egy esemény fogadásának beállítására szolgáló kódra:

$( "#dlg_popup" ).dialog({ drag: function(event, ui) { ... }});

Ez a konkrét példa a drag eseménybe kapcsolódik, amely a párbeszédpanel húzásakor lép működésbe. A példában látható ellipszis (…) az a hely, ahol az eseményt kezelő és megvalósító egyedi kódot elhelyezhetjük.

Widget metódusok

A metódusok (mint minden ismert nyelvben) a widgethez kapcsolódnak, és lehetővé teszik az előre megírt funkciók végrehajtását egy adott widgeten, hogy az egy adott műveletet hajtson végre. Íme egy példa egy widget metódusának meghívására:

$("#dlg_popup").dialog("moveToTop");

Fogalmilag az opciók és a metódusok különböznek. Megjegyezzük azonban, hogy egy opció értéke megváltoztatható vagy lekérdezhető egy metódusszerű megvalósítással, ahogy az a következő példában látható.

$("#dlg_popup").dialog("option", "autoOpen", false);

Témaváltás

A HTML- és JavaScript-fájlokba beépíthető olyan kód, amely lehetőséget ad a témaváltásra menet közben, egy legördülő menü segítségével. A 4. lista mutatja a HTML-forráskód módosításait egy ilyen változtatáshoz.

4. lista. Témaváltás menet közben

Az 5. lista a JavaScript forráskódot mutatja.

5. lista. JavaScript forráskód a témák menet közbeni megváltoztatásához

$(document).ready(function(){ $('#switcher').themeswitcher();...});

A 3. ábra a példaalkalmazást mutatja a módosítások után.

3. ábra. A példaalkalmazás a kódmódosítások után

Kép megtekintése teljes méretben

Futtassa újra a HTML-oldalt a böngészőben, és nézze meg az eredményeket. Most a legördülő listára kattintva megváltoztathatja a témát. A kiválasztott téma szükség szerint a háttérben letöltődik.

Noha a témaváltó eszköz használata nem termelési webhelyek esetében (teszteléshez és az eredmények megtekintéséhez) rendben van, termelési webhelyek esetében nem jó ötlet. Az eszköz egy harmadik fél szerverére támaszkodik a témák elhelyezéséhez, és nem lehet biztos abban, hogy a felhasználó milyen eredményeket lát.

A jQuery UI témák tesztelésének egy másik módja a ThemeRoller eszköz használata, amely csak a Mozilla Firefoxhoz érhető el (a linket lásd a Kapcsolódó témáknál). Az eszköz telepítése után (könyvjelzőként a Firefoxban) nyissa meg a galériát, és válassza ki a témákat a megtekintéshez. Válasszon ki egy témát, és kattintson a letöltési linkre. A letöltés után csomagolja ki a téma mappáját, helyezze a jQuery UI mappájába, és mutasson rá a HTML-fájlokra.

Ez az eszköz azonban sokkal hasznosabb, mint a témák egyszerű váltása. Azt is lehetővé teszi, hogy könnyebben készítsen egyéni témákat, mintha kézzel kellene kiépítenie őket.

Egyedi témák létrehozása

A ThemeRoller weboldal segítségével (amely a legtöbb népszerű böngészőben fut; a linket lásd a Kapcsolódó témáknál) egy meglévő jQuery-témán (kiindulási pontként) változtatásokat végezhetünk, hogy egyedi témát hozzunk létre. Ezzel kiküszöbölhető, hogy a témát a nulláról kelljen létrehozni. Ez azt is jelenti, hogy nincs szükség CSS-szakértelemre, és az eszköz lehetővé teszi a meglévő témák és widgetek módosításainak menet közbeni megtekintését. A 4. ábra a ThemeRoller webhelyet mutatja (nem tévesztendő össze a ThemeRoller könyvjelzővel, amely Firefoxban fut).

4. ábra. A ThemeRoller oldal

Kép teljes méretben megtekintése

A Galériára kattintva bármelyik meglévő témát kiválaszthatja. Ezáltal a minta widgetek által használt CSS stílusok és képek átváltoznak, hogy tükrözzék a változást. A témához tartozó Szerkesztés gombra kattintva a “Roll Your Own” lapra jut, ahol módosíthatja a témához tartozó CSS-stílusokat. Ha nem választ témát a szerkesztéshez, és a “Roll Your Own” lapon indul, ahol nincs téma kiválasztva, akkor egyszerűen a semmiből készít egy témát.

Végül a Téma letöltése gombra kattintva a kiválasztott téma egyéni témaként letöltődik, amely tartalmazza az összes téma módosítását. Vegye figyelembe, hogy a jQuery UI és témái számos CSS3 funkciót támogatnak, ami azt jelenti, hogy az összes főbb böngésző támogatott (kivéve a Windows Internet Explorer korábbi verzióit).

A ThemeRoller “Roll Your Own” lapja szépen rendszerezett, így gyorsan megtalálhatja és módosíthatja, amit keres. A lap a következő fontos részeket tartalmazza (többek között):

• Betűtípus-beállítások – Lehetővé teszi a téma egészében használt betűtípus általános módosítását.
• Sarok sugara – A különböző widgetek sarkainak lekerekítését (vagy hiányát) szabályozza.
• Fejléc/eszközsor – A különböző widgetekben használt fejlécek megjelenését biztosítja.
• Content – A widgetek fő részének vezérlésére szolgáló beállításokat biztosítja.
• Clickable – A widgetek által használt különböző állapotok vezérlése.

Amint végigkattint a beállításokon, észre fog venni néhány érdekes dolgot a témák felépítésével kapcsolatban. A jQuery UI témák például kihasználják a textúrák előnyeit. Ha látni szeretné őket használat közben, kattintson a ThemeRollerben a Header/Toolbar menüpontra. Ezután kattintson a középen lévő színes gombra. Megjelenik egy legördülő paletta, amely mintákat tartalmaz, amelyek közül választhat. A kiválasztott textúra az Ön által kiválasztott háttérszínnel kombinálva hozza létre a fejlécek és eszköztárak által használt mintát. Ez csak a textúrák egyik felhasználási módja. A jQuery UI-témák között vannak mások is. Módosítsa például a textúrát a “Clickable: default state” (kattintható: alapértelmezett állapot) menüben, hogy megnézze, hogyan hat a változás a kiválasztott témában lévő gombokra.

A jQuery UI témák egyik érdekes jellemzője a kiemelések és hibák (más néven vizuális jelzések) használata. A ThemeRoller teljes körű ellenőrzést biztosít arra vonatkozóan, hogy ezek a vizuális jelzések hogyan jelenjenek meg a felhasználók számára. A textúra, a háttérszín, a körvonalsarkok, a szöveg színe, sőt még az ikon színe is megváltoztatható (ha a jelzőben ikon jelenik meg). Ezeknek a stílusoknak a neve megjelenik a ThemeRollerben, így egyszerűen használja ezeket a neveket a saját webhelyein, hogy ezeket a stílusokat szükség szerint alkalmazza a felhasználóknak megjelenített szövegre.

A különböző beállítások módosítása a böngésző URL-jének módosítását eredményezi. A 6. lista egy URL-t mutat be példaként.

6. lista. Példa ThemeRoller URL

Mentse el és később állítsa vissza ezt az URL-t, hogy visszatérhessen és további módosításokat hajthasson végre a beállításokon. Például másolja ki az URL-t, miután elvégezte a módosításokat, és illessze be valahová megőrzés céljából. Most zárja be a böngészőt (vagy a ThemeRoller webhelyet tartalmazó böngészőfület), és nyissa meg újra a másolt URL-címmel. Amint láthatod, minden módosításod visszakerül, készen áll a további módosításokra.

Következtetés

A jQuery UI belsejéről még sok mindent el lehetne mondani, de most már rendelkeznie kell a szükséges alapokkal ahhoz, hogy elkezdhessen kísérletezni a jQuery UI témáival. Láttad a mappák és fájlok szerkezetét, amelyek lehetővé teszik egy téma módosítását. Ezeket a fájlokat megtekintheti vagy kiindulópontként használhatja saját témáinak létrehozásához, amikor készen áll.

Ez a cikk foglalkozott a ThemeRollerrel és a hozzá tartozó, a meglévő témák módosítását, valamint új témák nulláról történő létrehozását támogató weboldalakkal is. Végül a ThemeRoller weboldalon a témamódosítások mentésének és visszaállításának folyamatát vizsgálta meg.

Letölthető források

• Ez a tartalom PDF változata

• jQuery UI platform: Töltse le a jQuery UI-t, hogy kipróbálhassa és követhesse ezt a cikket és a benne található példákat.
• ThemeRoller: Tekintse meg a ThemeRoller webhelyet, amely lehetővé teszi a jQuery UI platform meglévő témáinak tesztelését, a meglévő témák testreszabását vagy egyéni témák létrehozását.
• developerWorks Webfejlesztési zóna: Különböző webes megoldásokkal foglalkozó cikkeket talál. A webfejlesztés technikai könyvtárában technikai cikkek és tippek, útmutatók, szabványok és IBM Redbookok széles választékát találja.
• IBM termékértékelő verziók: Töltse le és vegye kézbe a DB2, Lotus, Rational, Tivoli és WebSphere alkalmazásfejlesztési eszközeit és middleware termékeit.
• developerWorks a Twitteren: Csatlakozzon még ma, hogy követhesse a developerWorks tweetjeit.