Teemat eivät ole uusi käsite. Olet luultavasti kehitellyt muutaman käyttämällä Cascading Style Sheet (CSS) -tyylejä ja -luokkia verkkosivujesi ulkoasun muotoilemiseksi. Kehyksen käyttäminen standardoi lähestymistavan ja vähentää työn ja kirjoitettavan koodin määrää.

jQuery UI on nyt alan standardi teemojen toteuttamisessa. On muitakin vaihtoehtoja, kuten Dojo (yhdistettynä Dijitiin) tai Ext JS, mutta jQuery UI yhdistää teemat widgettien käyttöön, jotka ovat elementtejä, joiden kanssa käyttäjät ovat vuorovaikutuksessa päivämääränvalitsimet tai painikkeet. Kun analysoit jQuery UI -teeman muodostavien tiedostojen sisäistä toimintaa, et löydä muuta kuin CSS:ää ja JavaScriptiä. Mutta juuri CSS:n ja JavaScriptin käyttöön liittyvä ajatteluprosessi ja standardointi tekevät jQuery UI:sta niin erinomaisen alustan verkkosivuston ulkoasun ja tunnelman rakentamiseen.

jQuery UI -teemat

JQuery UI -alusta koostuu kahdesta alakehyksestä: widget-kehyksestä, joka sisältää Widget Factoryn ja joukon yleisesti käytettyjä widgettejä, sekä CSS-kehyksestä. Widget Factory tarjoaa perustan kaikille jQuery UI:n widgeteille, mukaan lukien ne yleiset widgetit, jotka sisältyvät widgettien joukkoon. Kun luot widgettejä, käytä lähtökohtana joko jotakin joukon yleisiä widgettejä tai luo widget tyhjästä. Kun tiedät, missä yhteiset widgetit ovat, avaa mikä tahansa niistä suosikkieditorissasi ja katso koodia. Sieltä voit joko muokata koodia ja luoda räätälöidyn widgetin (käyttäen jotakin muuta widgettiä lähtökohtana) tai luoda sellaisen, jolla on samanlainen rakenne.

JQuery UI -teemojen kansiorakenne

Ennen kuin jatkat eri tiedostojen ja niiden sisällön tarkastelua, lataa jokin jQuery UI -alustan teemoista (linkki löytyy kohdasta Aiheeseen liittyvät aiheet). Ladattu ZIP-tiedosto sisältää kolme kansiota: css, js ja development-bundle. Development-bundle-kansiossa on themes-niminen kansio, jossa säilytetään kehitteillä olevia jQuery UI -teemoja. themes-kansio puolestaan sisältää kansion, jossa on valitun/latatun teeman nimi (esimerkiksi UI lightness), sekä kansion nimeltä base. Tämä kansio sisältää lähtökohdan omille teemoillesi. Se ladataan aina valitusta teemasta riippumatta.

Css-kansio sisältää kansion, jossa on ladatun teeman nimi. Tämä teemakansio sisältää CSS-tiedoston, joka sisältää kaikkien komponenttien tai widgettien CSS-merkinnät. Development-bundle-kansio sisältää kuitenkin myös themes/-kansion (jossa on valitun teeman todellinen nimi), joka sisältää kunkin komponentin tai widgetin yksittäiset CSS-tiedostot. Tämä rakenne helpottaa omien teemojen muutosten löytämistä ja muokkaamista. Kuvassa 1 näkyy themes-kansion rakenne.

Kuva 1. Theme-kansion rakenne

Katso kuva koko koossa

Kuvassa 1 ei ole lueteltu kaikkia kansion tiedostoja, mutta tärkeät tiedostot ovat tässä. Tiedosto jquery.ui.all.css tuo mukanaan jquery.ui.base.css- ja jquery.ui.theme.css-tiedostot, joten tiedostojen tuominen on helppoa pelkän jquery.ui.all.css-tiedoston avulla. Jquery.ui.base.css-tiedosto tuo jquery.ui.core.css-tiedoston ja kaikki muut komponentti- ja widget-tiedostot samasta kansiosta (ei kuvassa 1.). Jquery.ui.core.css-tiedosto sisältää yhteisiä luokkia, jotka kaikki widget-tiedostot jakavat. Se tarjoaa perus-CSS-luokat kaikille jQuery UI -widgetteille (teeman sisällä) sekä widgettien yhteisen näkyvyyden ja asemoinnin. Viimeinen tärkeä tiedosto on jquery.ui.theme.css-tiedosto, joka tarjoaa yhteisen ulkoasun ja käyttäytymisen, joka on yhteinen kaikille teeman widgetille sekä itse teemalle.

Jquery.ui.theme.css-tiedostossa on kolme erityyppistä tyyliä:

• Container – Tämä tyyli määrittelee container-teeman, kuten ui-widget, ui-widget-content tai ui-widget-header.
• States – Tätä tyylityyppiä käyttävät jQuery UI -widgetit määrittelemään widgetin ulkoasun, kun käyttäjä on vuorovaikutuksessa sen kanssa. Luokkiin kuuluvat ui-state-default, ui-state-hover ja ui-state-active.
• Cues – Kun sovelluksessa tapahtuu jotain (ei käyttäjän toimesta), nämä luokat muuttavat widgetin ulkoasua. Luokkiin kuuluvat ui-state-highlight, ui-state-error ja ui-state-disabled.

Yleiset widgetit

Tässä osassa tarkastellaan esimerkkikoodia, jossa käytetään joitakin yleisiä widgettejä esimerkkisovelluksen rakentamiseen. Tämä esimerkki sisältää liukusäädinwidgetin, painikkeen, joka avaa valintaikkunan, ja valintaikkunan, joka näyttää liukusäätimen nykyisen arvon joka kerta, kun se avataan. Kuvassa 2 on tilannekuva sovelluksesta.

Kuva 2. Esimerkkisovellus, jossa käytetään yleisiä widgettejä

Katso kuva täydessä koossa

Listauksessa 1 on HTML-indeksitiedosto.

Listaus 1. Esimerkkisovellus, jossa käytetään yleisiä widgettejä

Luettelossa 2 esitetään siihen liittyvä JavaScript-tiedosto (index.js).

Luettelo 2. Esimerkkisovellukseen liittyvä JavaScript-tiedosto

Alkuasetus tapahtuu otsikossa seuraavalla koodilla:

CSS:n linkittämisen jälkeen JavaScript-tiedostot liitetään mukaan.

Tämän sovelluksen kolme widgettiä määritellään suurimmaksi osaksi <div>-lausekkeilla (paitsi painike, jolla on jo tagi HTML:ssä). Nämä widgetit on määritelty seuraavassa koodissa:

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

Viivytä lopuksi widgettien varsinaista rakentamista JavaScript-koodissa, kunnes selain on ladannut sivun kokonaan, kuten Listauksessa 3 on esitetty.

Listaus 3. Widgettien rakentaminen

Jokainen jo mainituista widgetistä rakennetaan tällä koodilla. Sekä valintaikkunalle että painikkeelle annetaan funktioita tiettyihin tapahtumiin. Esimerkiksi painikkeen klikkaustapahtumalle kerrotaan, että sen pitäisi avata valintaikkuna, kun sitä klikataan. Valintaikkunaa ohjataan muuttamaan tekstinsä osoittamaan liukusäätimen senhetkistä arvoa, minkä se tekee joka kerta, kun se avataan.

Widgetin ulkoasua voidaan muuttaa kahdella tavalla. Voit välittää arvoja konstruktoriin yhdessä widgetin mahdollisesti tarvitsemien konstruktoriparametrien kanssa. Esim:

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

Tai voit kutsua widgetin metodeja sen luomisen jälkeen seuraavasti:

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

Useimpiin yleisimpiin widgetteihin liittyy monia asetettavia vaihtoehtoja. Lisäksi, jos päätät jättää nämä vaihtoehdot huomiotta, widgetit asettavat niille oletusarvot, jolloin voit asettaa ja muuttaa mitä tarvitset.

Widgetin tapahtumat

Koska widgetit ovat pohjimmiltaan JavaScript-objekteja, niille voidaan määrittää tapahtumia, jotka laukeavat verkkosovelluksen elinkaaren aikana. Kun nämä tapahtumat laukeavat, ne otetaan kiinni joko verkkosivuston tarjoamalla JavaScript-koodilla tai käsitellään widgettien sisällä (oletusarvoisesti).

JQuery UI -tiimi on dokumentoinut hyvin kaikkien widgettien oletuskäyttäytymisen toteutuksen kunkin yleisen widgetin osalta. Voit kuitenkin pistää omaa koodiasi käsittelemään yhtä tai useampaa valitun widgetin tapahtumaa. Tässä on esimerkki koodista, jolla määritetään tapahtuman vastaanotto:

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

Tämä tietty esimerkki kytkeytyy drag-tapahtumaan, joka käynnistyy, kun valintaikkunaa vedetään. Esimerkissä näkyvä ellipsi (…) on paikka, johon voidaan sijoittaa yksittäistä koodia tapahtuman käsittelyä ja toteuttamista varten.

Widget-metodit

Metodit (kuten missä tahansa tutussa kielessä) liittyvät widgetteihin ja mahdollistavat ennalta kirjoitetun toiminnallisuuden suorittamisen tietylle widgetille, jotta se suorittaa tietyn toiminnon. Tässä on esimerkki widgetin metodin kutsumisesta:

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

Käsitteellisesti vaihtoehdot ja metodit ovat erilaisia. Huomaa kuitenkin, että option arvoa voidaan muuttaa tai hakea metodin kaltaisella toteutuksella, kuten seuraavassa esimerkissä näkyy.

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

Teemojen vaihtaminen

HTML- ja JavaScript-tiedostoihin voidaan sisällyttää koodia, joka antaa mahdollisuuden vaihtaa teemoja lennossa pudotusvalikon avulla. Listauksessa 4 näytetään HTML-lähdekoodiin tehtävät muutokset tällaisen muutoksen tekemiseksi.

Listaus 4. Teemojen vaihtaminen lennossa

Listaus 5 näyttää JavaScript-lähdekoodin.

Listaus 5. JavaScript-lähdekoodi teemojen vaihtamiseen lennossa

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

Kuvassa 3 näkyy esimerkkisovellus näiden muutosten jälkeen.

Kuva 3. Esimerkkisovellus koodimuutosten jälkeen

Katsele kuva täydessä koossa

Aja HTML-sivu uudelleen selaimessa ja katso tulokset. Voit nyt vaihtaa teemaa napsauttamalla avattavaa luetteloa. Valittu teema ladataan tarvittaessa taustalla.

Vaikka teemanvaihtotyökalun käyttäminen sopii hyvin muille kuin tuotantosivustoille (testaukseen ja tulosten tarkasteluun), se ei ole hyvä idea tuotantosivustoille. Työkalu luottaa kolmannen osapuolen palvelimeen teemojen isännöinnissä, etkä voi olla varma käyttäjän näkemistä tuloksista.

Toinen tapa testata jQuery UI -teemoja on käyttää ThemeRoller-työkalua, joka on saatavilla vain Mozilla Firefoxille (linkki löytyy kohdasta Aiheeseen liittyvät aiheet). Kun olet asentanut työkalun (bookmarkletina Firefoxissa), avaa galleria ja valitse teemat, jotta voit tarkastella niitä. Valitse teema ja napsauta latauslinkkiä. Kun teema on ladattu, pura teemakansio, sijoita se jQuery UI -kansioon ja osoita HTML-tiedostot siihen.

Tämä työkalu on kuitenkin paljon hyödyllisempi kuin pelkkä teemojen vaihtaminen. Sen avulla voit myös rakentaa mukautettuja teemoja helpommin kuin jos joudut rullaamaan ne käsin.

Yksilöllisten teemojen luominen

Käyttämällä ThemeRoller-verkkosivustoa (joka toimii useimmissa suosituimmissa selaimissa; linkki löytyy kohdasta Liittyvät aiheet), olemassa olevaan jQuery-teemaan (lähtökohtana) voidaan tehdä muutoksia yksilöllisen teeman luomiseksi. Näin tekemällä ei tarvitse luoda teemaa tyhjästä. Se tarkoittaa myös, että CSS-osaamista ei tarvita, ja työkalun avulla voit tarkastella muutoksia olemassa oleviin teemoihin ja widgetteihin lennossa. Kuvassa 4 on ThemeRoller-sivusto (ei pidä sekoittaa ThemeRoller-kirjanmerkkiohjelmaan, joka toimii Firefoxissa).

Kuva 4. ThemeRoller-sivusto

Katso kuva täydessä koossa

Klikkaamalla Galleriaa voit valita minkä tahansa olemassa olevista teemoista. Tekemällä niin vaihdat CSS-tyylit ja kuvat, joita esimerkkividgetit käyttävät, vastaamaan muutosta. Klikkaamalla teemaan liittyvää Muokkaa-painiketta pääset ”Roll Your Own”-välilehdelle, jossa voit tehdä muutoksia teemaan liittyviin CSS-tyyleihin. Jos et valitse muokattavaa teemaa ja aloitat ”Roll Your Own”-välilehdeltä ilman valittua teemaa, rakennat teeman tyhjästä.

Klikkaamalla lopuksi Lataa teema lataa valitun teeman mukautettuna teemana, joka sisältää kaikki teemaan tekemäsi muutokset. Huomaa, että jQuery UI ja sen teemat tukevat monia CSS3-ominaisuuksia, mikä tarkoittaa, että kaikki tärkeimmät selaimet ovat tuettuja (lukuun ottamatta Windowsin Internet Explorerin varhaisempia versioita).

ThemeRollerin ”Roll Your Own” -välilehti on järjestetty kauniisti, jotta löydät ja voit muuttaa etsimäsi nopeasti. Välilehti sisältää (muun muassa) seuraavat tärkeät osiot:

• Fonttiasetukset – Mahdollistaa yleiset muutokset koko teemassa käytettävään fonttiin.
• Kulmasäde – Ohjaa eri widgettien kulmien pyöristystä (tai sen puuttumista).
• Otsikko/Työkalupalkki – Tarjoaa ulkoasun eri widgetissä käytettäville otsikoille.
• Content (Sisältö) – Tarjoaa asetukset, joilla ohjataan widgettien päärunkoa.
• Clickable (Klikattavissa) – Ohjaa erilaisia tiloja, joita widgetit käyttävät.

Kun klikkaat läpi asetuksia, huomaat muutaman mielenkiintoisen asian näiden teemojen rakenteesta. Esimerkiksi jQuery UI -teemat hyödyntävät tekstuureja. Näet ne käytössä klikkaamalla ThemeRollerissa Header/Toolbar. Napsauta sitten keskellä olevaa värillistä painiketta. Näkyviin tulee pudotusvalikoima, joka sisältää kuvioita, joista voit valita. Valittu tekstuuri yhdistetään valitsemaasi taustaväriin, jolloin otsikoiden ja työkalurivien käyttämä kuvio syntyy. Tämä on vain yksi tekstuurien käyttötapa. JQuery UI -teemoissa on muitakin. Muokkaa esimerkiksi tekstuuria kohdassa ”Clickable: default state” nähdäksesi, miten muutos vaikuttaa valitun teeman painikkeisiin.

Yksi jQuery UI -teemojen mielenkiintoinen ominaisuus on korostusten ja virheiden (joita kutsutaan myös visuaalisiksi vihjeiksi) käyttö. ThemeRoller tarjoaa täydellisen hallinnan siihen, miten nämä visuaaliset vihjeet näytetään käyttäjille. Tekstuuria, taustaväriä, ääriviivojen kulmia, tekstin väriä ja jopa kuvakkeen väriä voidaan muuttaa (jos vihjeessä näkyy kuvake). Näiden tyylien nimet näkyvät ThemeRollerissa, joten voit yksinkertaisesti käyttää näitä nimiä omilla verkkosivustoillasi, jotta näitä tyylejä voidaan soveltaa tarpeen mukaan käyttäjille näytettävään tekstiin.

Muutosten tekeminen eri asetuksiin tuottaa muutoksia selaimen URL-osoitteeseen. Listauksessa 6 on esimerkkinä URL-osoite.

Listaus 6. Esimerkki ThemeRoller URL

Tallenna ja palauta myöhemmin tämä URL-osoite, jotta voit palata takaisin ja tehdä asetuksiin lisää muutoksia. Kopioi esimerkiksi URL-osoite muutosten tekemisen jälkeen ja liitä se jonnekin säilytettäväksi. Sulje nyt selaimesi (tai selaimen välilehti, jossa ThemeRoller-sivusto on) ja avaa se uudelleen kopioidulla URL-osoitteella. Kuten näet, kaikki tekemäsi muutokset ovat takaisin, valmiina uusiin muokkauksiin.

Johtopäätös

JQuery UI:n sisäisistä ominaisuuksista voidaan sanoa vielä paljon lisää, mutta sinulla pitäisi olla perusteet, joita tarvitset aloittaaksesi jQuery UI:n teemojen kokeilun. Olet nähnyt kansioiden ja tiedostojen rakenteen, jonka avulla voit muokata teemaa. Voit tarkastella tai käyttää näitä tiedostoja lähtökohtana omien teemojen luomiseen, kun olet valmis.

Tässä artikkelissa käsiteltiin myös ThemeRolleria ja siihen liittyviä verkkosivuja, jotka tukevat olemassa olevien teemojen muokkaamista sekä uusien teemojen luomista tyhjästä. Lopuksi tutkittiin teema-muutosten tallentamista ja palauttamista ThemeRoller-sivustolla.

Latattavat resurssit

• PDF tästä sisällöstä

• jQuery UI -alusta: Lataa jQuery UI testataksesi ja seurataksesi tätä artikkelia ja sen tarjoamia esimerkkejä.
• ThemeRoller: Tutustu ThemeRoller-sivustoon, jonka avulla voit testata jQuery UI -alustan olemassa olevia teemoja, muokata olemassa olevia teemoja tai luoda omia teemoja.
• developerWorks Web-kehitysalue: Löydät artikkeleita, jotka käsittelevät erilaisia verkkopohjaisia ratkaisuja. Katso Web-kehityksen teknisestä kirjastosta laaja valikoima teknisiä artikkeleita ja vinkkejä, opetusohjelmia, standardeja ja IBM Redbooks -kirjoja.
• IBM:n tuotteiden arviointiversiot: Lataa ja tutustu DB2:n, Lotuksen, Rationalin, Tivolin ja WebSpheren sovelluskehitystyökaluihin ja väliohjelmistotuotteisiin.
• developerWorks Twitterissä: Liity tänään ja seuraa developerWorksin twiittejä.