Themes zijn geen nieuw concept. Je hebt waarschijnlijk uitgerold een paar met behulp van Cascading Style Sheet (CSS) stijlen en klassen om de look en feel van uw websites op te maken. Met behulp van een kader standaardiseert de aanpak en vermindert de hoeveelheid werk en code die moet worden geschreven.

jQuery UI is nu de industriestandaard voor thema-implementatie. Er zijn andere keuzes, zoals Dojo (gekoppeld aan Dijit) of Ext JS, maar jQuery UI combineert thema’s met het gebruik van widgets, die zijn de elementen waarmee gebruikers interactie datum pickers of knoppen. Bij het ontleden van de innerlijke werking van de bestanden die deel uitmaken van een jQuery UI thema, wat je vindt is niets meer dan CSS en JavaScript. Maar het is het denkproces en de standaardisatie die zijn gegaan in dit gebruik van CSS en JavaScript dat maakt jQuery UI zo’n uitstekend platform voor het bouwen van de look and feel van een website.

jQuery UI themes

Het jQuery UI platform bestaat uit twee sub-frameworks: een widget-framework, dat de Widget Factory en een set van veelgebruikte widgets bevat, en het CSS-framework. De Widget Factory levert de basis voor alle jQuery UI widgets, inclusief de veelgebruikte widgets die zijn opgenomen in de set van widgets. Wanneer je widgets maakt, gebruik dan een van de veelgebruikte widgets uit de set als startpunt of maak er een vanaf nul. Als je eenmaal weet waar de gemeenschappelijke widgets staan, open ze dan in je favoriete editor en bekijk de code. Van daaruit kun je ofwel deze code aanpassen en een aangepaste widget genereren (met een van de andere widgets als uitgangspunt) of er een maken met een vergelijkbare structuur.

De mappenstructuur van de jQuery UI thema’s

Voordat u verder gaat met het bekijken van de verschillende bestanden en hun inhoud, downloadt u een van de thema’s van het jQuery UI platform (zie Verwante onderwerpen voor een link). Het gedownloade ZIP bestand bevat drie mappen: css, js, en development-bundle. De map development-bundle bevat een map met de naam themes, waarin de jQuery UI-thema’s in ontwikkeling worden bewaard. De themes-map bevat op zijn beurt een map met de naam van het geselecteerde/gedownloade thema (zoals UI lightness), alsmede een map met de naam base. Deze map bevat een startpunt voor uw eigen thema’s. Deze wordt altijd gedownload, ongeacht het gekozen thema.

De css map bevat een map met de naam van het gedownloade thema. Deze themamap bevat een CSS bestand dat de CSS opmaak bevat voor alle componenten of widgets. De development-bundel map bevat echter ook een themes/ map (waar de eigenlijke naam van het gekozen thema staat) die de individuele CSS bestanden bevat voor elk component of widget. Deze structuur maakt het eenvoudiger om de wijzigingen in uw eigen thema’s te vinden en aan te passen. Figuur 1 toont de structuur van de themes map.

Figuur 1. Structuur van de map Thema’s

Bekijk afbeelding op volledige grootte

Niet alle bestanden uit de map staan in figuur 1, maar de belangrijkste staan hier. Het jquery.ui.all.css bestand importeert de jquery.ui.base.css en jquery.ui.theme.css bestanden, waardoor het gemakkelijk is om de bestanden te importeren met alleen het jquery.ui.all.css bestand. Het jquery.ui.base.css bestand importeert het jquery.ui.core.css bestand en alle andere component en widget bestanden uit dezelfde map (niet getoond in Figuur 1.). Het jquery.ui.core.css bestand bevat gemeenschappelijke klassen die door alle widget bestanden worden gedeeld. Het biedt de basis CSS klassen voor alle jQuery UI widgets (binnen het thema), evenals gemeenschappelijke zichtbaarheid en positionering voor de widgets. Het laatste belangrijke bestand is het jquery.ui.theme.css bestand, dat het gemeenschappelijke uiterlijk en gedrag geeft dat gedeeld wordt door alle widgets in het thema en ook door het thema zelf.

Het jquery.ui.theme.css bestand heeft drie verschillende soorten stijlen:

• Container – Deze stijl definieert de container thema, zoals ui-widget, ui-widget-content, of ui-widget-header.
• Staten – Dit stijltype wordt gebruikt door jQuery UI widgets om het uiterlijk van de widget te definiëren als de gebruiker ermee interageert. Klassen zijn ui-state-default, ui-state-hover, en ui-state-active.
• Cues – Als er iets gebeurt in de applicatie (niet door toedoen van de gebruiker), veranderen deze klassen het uiterlijk van de widget. De klassen zijn ui-state-highlight, ui-state-error, en ui-state-disabled.

Gemeenschappelijke widgets

Deze sectie kijkt naar voorbeeld code die een aantal gemeenschappelijke widgets gebruikt om een voorbeeld applicatie te bouwen. Dit voorbeeld bevat een schuifbalk widget, een knop die een dialoogvenster opent, en een dialoogvenster dat de huidige waarde van de schuifbalk weergeeft elke keer dat het wordt geopend. Figuur 2 geeft een momentopname van de applicatie.

Figuur 2. Een voorbeeldtoepassing die gebruikmaakt van algemene widgets

Bekijk afbeelding op volledige grootte

Lijst 1 bevat het HTML-indexbestand.

Lijst 1. Voorbeeld applicatie met gemeenschappelijke widgets

Listing 2 geeft het bijbehorende JavaScript bestand (index.js).

Listing 2. Het bijbehorende JavaScript-bestand voor de voorbeeldtoepassing

De eerste opzet vindt plaats in de header met de volgende code:

Na koppeling in de CSS worden de JavaScript-bestanden opgenomen.

De drie widgets in deze toepassing worden grotendeels gedefinieerd met <div> statements (behalve de knop, die al een tag in HTML heeft). Deze widgets zijn gedefinieerd in de volgende code:

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

Ten slotte stel je de eigenlijke constructie van de widgets in de JavaScript-code uit totdat de pagina volledig door de browser is geladen, zoals te zien is in Listing 3.

Listing 3. Constructie van de widgets

Elke van de reeds genoemde widgets wordt met deze code geconstrueerd. Het dialoogvenster en de knop krijgen beide functies toegewezen aan specifieke gebeurtenissen. Bijvoorbeeld, de klik gebeurtenis van de knop wordt verteld dat het het dialoogvenster moet openen wanneer erop geklikt wordt. Het dialoogvenster moet zijn tekst veranderen om de huidige waarde van de schuifbalk aan te geven, wat het elke keer doet als het wordt geopend.

Er zijn twee manieren om het uiterlijk van een widget te veranderen. U kunt waarden doorgeven aan de constructor, samen met eventuele vereiste constructor parameters voor de widget. Bijvoorbeeld:

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

Of u kunt methoden op de widget aanroepen nadat deze is gemaakt, zoals hieronder.

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

De meeste veelgebruikte widgets hebben veel geassocieerde opties die kunnen worden ingesteld. Bovendien, als je ervoor kiest om deze opties te negeren, stellen de widgets ze in op standaard waarden, zodat je kunt instellen en wijzigen wat nodig is.

Widget gebeurtenissen

Omdat widgets fundamenteel JavaScript objecten zijn, kunnen ze worden ingesteld met gebeurtenissen die tijdens de levensduur van de website applicatie vuren. Deze gebeurtenissen worden opgevangen door de JavaScript-code van de website of door de widgets zelf (de standaardinstelling).

De implementatie van het standaardgedrag van alle widgets is goed gedocumenteerd door het jQuery UI-team voor elke gemeenschappelijke widget. U kunt echter uw eigen code injecteren om een of meer van de gebeurtenissen van een gekozen widget af te handelen. Hier is een voorbeeld van code om de ontvangst van een gebeurtenis in te stellen:

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

Dit specifieke voorbeeld haakt in op de drag gebeurtenis, die wordt getriggerd wanneer het dialoogvenster wordt versleept. De ellips (…) die in het voorbeeld wordt getoond is waar individuele code kan worden geplaatst om de code voor de gebeurtenis af te handelen en te implementeren.

Widget methods

Methods (zoals in elke bekende taal) zijn geassocieerd met de widget en maken het mogelijk om vooraf geschreven functionaliteit uit te voeren op een bepaalde widget om deze een specifieke actie te laten uitvoeren. Hier is een voorbeeld van het aanroepen van een widget’s methode:

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

Conceptueel zijn opties en methoden verschillend. Merk echter op dat de waarde van een optie kan worden gewijzigd of opgehaald met behulp van een methode-achtige implementatie, zoals in het volgende voorbeeld wordt getoond.

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

Schakelen tussen thema’s

Code kan worden opgenomen in HTML- en JavaScript-bestanden die de mogelijkheid geven om met behulp van een keuzemenu snel van thema te wisselen. Listing 4 toont de wijzigingen in de HTML-broncode om een dergelijke verandering door te voeren.

Lijst 4. On-the-fly veranderen van thema

Lijst 5 toont de JavaScript broncode.

Lijst 5. JavaScript broncode voor het veranderen van thema’s on the fly

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

Figuur 3 toont de voorbeeld applicatie na deze veranderingen.

Figuur 3. De voorbeeldtoepassing na codewijzigingen

Bekijk afbeelding op volledige grootte

Run de HTML-pagina opnieuw in uw browser, en bekijk de resultaten. U kunt nu op de vervolgkeuzelijst klikken om het thema te wijzigen. Het geselecteerde thema wordt indien nodig op de achtergrond gedownload.

Hoewel het gebruik van de themaswitcher tool prima is voor niet-productiesites (voor het testen en bekijken van resultaten), is het geen goed idee voor productiesites. De tool vertrouwt op een server van een derde partij om de thema’s te hosten, en je zult niet zeker zijn van de resultaten die de gebruiker ziet.

Een andere manier om jQuery UI thema’s te testen is door gebruik te maken van de ThemeRoller tool, die alleen beschikbaar is voor Mozilla Firefox (zie Verwante onderwerpen voor een link). Na het installeren van de tool (als bookmarklet in Firefox), open de galerij en selecteer de thema’s om ze te bekijken. Kies een thema en klik op de download link. Eenmaal gedownload, pak het thema map, plaats het in uw jQuery UI map, en wijs uw HTML-bestanden naar het.

Deze tool is veel nuttiger dan alleen voor het wisselen van thema, dat wel. Het stelt u ook in staat om aangepaste thema’s te bouwen gemakkelijker dan als je ze uit te rollen met de hand.

Het maken van unieke thema’s

Met behulp van de ThemeRoller website (die in de meeste populaire browsers draait; zie Verwante onderwerpen voor een link), kunnen wijzigingen worden aangebracht in een bestaand jQuery thema (als startpunt) om een uniek thema te maken. Hierdoor is het niet meer nodig om het thema helemaal opnieuw te maken. Het betekent ook dat kennis van CSS niet nodig is, en de tool stelt u in staat om wijzigingen in bestaande thema’s en widgets direct te bekijken. Figuur 4 toont de ThemeRoller site (niet te verwarren met de ThemeRoller bookmarklet, die in Firefox draait).

Figuur 4. De ThemeRoller site

Bekijk afbeelding op volledige grootte

Als u op de Galerij klikt, kunt u een van de bestaande thema’s selecteren. Door dit te doen worden de CSS stijlen en afbeeldingen die de voorbeeld widgets gebruiken aangepast aan de verandering. Door op de Edit knop te klikken die bij een thema hoort, komt u op de “Roll Your Own” tab, waar u wijzigingen kunt aanbrengen in de CSS stijlen die bij het thema horen. Als u geen thema kiest om te bewerken en u begint bij de “Rol uw eigen” tab zonder een thema geselecteerd, dan bouwt u gewoon een thema vanaf nul.

Ter slotte kunt u door op Thema downloaden te klikken het geselecteerde thema downloaden als een aangepast thema met al uw thema-aanpassingen. Merk op dat jQuery UI en zijn thema’s veel CSS3-functies ondersteunen, wat betekent dat alle belangrijke browsers worden ondersteund (met uitzondering van eerdere versies van Windows Internet Explorer).

Het tabblad “Roll Your Own” van ThemeRoller is overzichtelijk ingedeeld, zodat u snel kunt vinden en wijzigen wat u zoekt. Het tabblad bevat (onder andere) de volgende belangrijke secties:

• Font Settings – Hiermee kunnen algemene wijzigingen worden aangebracht in het lettertype dat in een thema wordt gebruikt.
• Corner Radius – Regelt de afronding (of het ontbreken daarvan) van de hoeken voor diverse widgets.
• Header/Toolbar – Zorgt voor de look en feel voor headers die in de diverse widgets worden gebruikt.
• Inhoud – Biedt instellingen voor de belangrijkste body van de widgets.
• Klikbaar – Regelt verschillende toestanden die de widgets gebruiken.

Als je door de opties klikt, zul je een paar interessante dingen opmerken over de opbouw van deze thema’s. Bijvoorbeeld, jQuery UI thema’s maken gebruik van texturen. Om ze in gebruik te zien, klik op Header/Toolbar in ThemeRoller. Klik dan op de gekleurde knop in het midden. Er verschijnt een vervolgkeuzelijst met patronen waaruit u kunt kiezen. De geselecteerde structuur wordt gecombineerd met de achtergrondkleur die u kiest om het patroon te maken dat de kopteksten en werkbalken gebruiken. Dit is slechts één gebruik van texturen. Er zijn andere in jQuery UI thema’s. Bijvoorbeeld, wijzig de textuur in de “Clickable: default state” om te zien hoe de verandering knoppen in het geselecteerde thema beïnvloedt.

Een interessante eigenschap van jQuery UI thema’s is het gebruik van highlights en fouten (ook bekend als visuele hints). ThemeRoller biedt volledige controle over hoe deze visuele signalen aan gebruikers worden getoond. De textuur, achtergrondkleur, omtrekhoeken, tekstkleur en zelfs de kleur van het pictogram kan worden gewijzigd (als een pictogram wordt weergegeven in de cue). De namen van deze stijlen worden weergegeven in ThemeRoller, dus gebruik deze namen in uw eigen websites om deze stijlen naar behoefte toe te passen op de tekst die aan gebruikers wordt getoond.

Het wijzigen van de verschillende instellingen leidt tot wijzigingen in de URL in uw browser. Listing 6 geeft een URL als voorbeeld.

Listing 6. Voorbeeld ThemeRoller URL

Opslaan en later herstellen van deze URL om terug te komen en verdere wijzigingen in de instellingen aan te brengen. Kopieer bijvoorbeeld de URL nadat u wijzigingen hebt aangebracht en plak deze ergens om hem veilig te bewaren. Sluit nu uw browser (of het browsertabblad met de ThemeRoller-site) en open deze opnieuw met de gekopieerde URL. Zoals u kunt zien, zijn al uw wijzigingen weer terug, klaar voor verdere aanpassingen.

Conclusie

Er kan nog veel meer gezegd worden over de interne onderdelen van jQuery UI, maar u zou de basis moeten hebben om te kunnen experimenteren met de thema’s van jQuery UI. Je hebt de structuur van de mappen en bestanden gezien, waarmee je een thema kunt aanpassen. U kunt deze bestanden bekijken of gebruiken als uitgangspunt om uw eigen thema’s te maken als u er klaar voor bent.

Dit artikel behandelde ook ThemeRoller en de bijbehorende websitepagina’s die het wijzigen van bestaande thema’s en het maken van nieuwe thema’s vanaf nul ondersteunen. Tot slot hebt u het proces van het opslaan en herstellen van thema-aanpassingen op de ThemeRoller-website bestudeerd.

Downloadbare bronnen

• PDF van deze inhoud

• jQuery UI-platform: Download jQuery UI om te testen en volg dit artikel en de voorbeelden die erin worden gegeven.
• ThemeRoller: Bekijk de ThemeRoller website, waarmee u bestaande thema’s van het jQuery UI platform kunt testen, bestaande thema’s kunt aanpassen, of aangepaste thema’s kunt maken.
• developerWorks Web development zone: Vind artikelen over verschillende webgebaseerde oplossingen. Zie de Web development technical library voor een breed scala aan technische artikelen en tips, tutorials, standaarden, en IBM Redbooks.
• IBM product evaluatie versies: Download en krijg je handen op applicatie ontwikkeling tools en middleware producten van DB2, Lotus, Rational, Tivoli, en WebSphere.
• developerWorks op Twitter: Word vandaag nog lid om developerWorks tweets te volgen.