Temaer er ikke et nyt koncept. Du har sikkert rullet et par stykker ud ved hjælp af CSS-stilarter (Cascading Style Sheet) og klasser til at formatere udseendet og fornemmelsen af dine websteder. Ved at bruge en ramme standardiseres tilgangen og mindsker mængden af arbejde og kode, der skal skrives.

JQuery UI er nu branchestandard for implementering af temaer. Der er andre muligheder, f.eks. Dojo (kombineret med Dijit) eller Ext JS, men jQuery UI kombinerer temaer med brugen af widgets, som er de elementer, som brugerne interagerer med datovælgere eller knapper. Når man dissekerer det indre arbejde i de filer, der udgør et jQuery UI-tema, er det, man finder, ikke andet end CSS og JavaScript. Men det er den tankeproces og standardisering, der er gået ind i denne brug af CSS og JavaScript, der gør jQuery UI til en fremragende platform til at opbygge et websteds udseende og følelse.

jQuery UI-temaer

JQuery UI-platformen består af to underrammer: en widget-ramme, som indeholder Widget Factory og et sæt af almindeligt anvendte widgets, og CSS-rammen. Widget Factory danner grundlaget for alle jQuery UI-widgets, herunder de almindelige widgets, der indgår i sættet af widgets. Når du opretter widgets, skal du enten bruge en af de almindelige widgets fra sættet som udgangspunkt eller oprette en widget helt fra bunden. Når du ved, hvor de fælles widgets befinder sig, kan du åbne en af dem i din foretrukne editor og se koden. Derfra kan du enten ændre denne kode og generere en tilpasset widget (ved at bruge en af de andre widgets som udgangspunkt) eller oprette en widget med en lignende struktur.

Mappestrukturen for jQuery UI-temaer

Hvor du fortsætter med at se på de forskellige filer og deres indhold, skal du downloade et af temaerne fra jQuery UI-platformen (se Relaterede emner for at finde et link). Den downloadede ZIP-fil indeholder tre mapper: css, js og development-bundle. Mappen development-bundle indeholder en mappe med navnet themes, som er den mappe, hvor jQuery UI-temaer under udvikling opbevares. Mappen themes indeholder på sin side en mappe med navnet på det valgte/downloadede tema (f.eks. UI lightness) samt en mappe med navnet base. Denne mappe indeholder et udgangspunkt for dine egne temaer. Den downloades altid, uanset hvilket tema der er valgt.

Mappen css indeholder en mappe med navnet på det downloadede tema. Denne temamappe indeholder en CSS-fil, der indeholder CSS-markup for alle komponenter eller widgets. Mappen development-bundle indeholder imidlertid også en mappe themes/ (hvor det faktiske navn på det valgte tema er angivet), som indeholder de individuelle CSS-filer for hver komponent eller widget. Denne struktur gør det lettere at finde og ændre ændringerne i dine egne temaer. Figur 1 viser strukturen i mappen themes.

Figur 1. Strukturen af mappen themes

Se billedet i fuld størrelse

Det er ikke alle filer fra mappen, der er anført i figur 1, men de vigtige filer er her. Filen jquery.ui.all.css importerer filerne jquery.ui.base.css og jquery.ui.theme.css, hvilket gør det nemt at importere filerne ved hjælp af blot filen jquery.ui.all.css. Filen jquery.ui.base.css importerer filen jquery.ui.core.css og alle de andre komponent- og widgetfiler fra den samme mappe (ikke vist i figur 1.). Filen jquery.ui.core.css indeholder fælles klasser, der deles af alle widget-filer. Den indeholder de grundlæggende CSS-klasser for alle jQuery UI-widgets (inden for temaet) samt fælles synlighed og positionering for widgets. Den sidste vigtige fil er filen jquery.ui.theme.css, som indeholder det fælles udseende og den fælles adfærd, der deles af alle widgets i temaet samt selve temaet.

Den jquery.ui.theme.css-fil har tre forskellige typer stilarter:

• Container – Denne stil definerer container-temaet, f.eks. ui-widget, ui-widget-content eller ui-widget-header.
• States – Denne stiltype bruges af jQuery UI-widgets til at definere widgets udseende, når brugeren interagerer med den. Klasserne omfatter ui-state-default, ui-state-hover og ui-state-active.
• Cues – Når der sker noget i programmet (ikke ved brugerens handling), ændrer disse klasser widgets udseende. Klasserne omfatter ui-state-highlight, ui-state-error og ui-state-disabled.

Almindelige widgets

Dette afsnit ser på eksempelkode, der bruger nogle almindelige widgets til at opbygge et eksempelprogram. Eksemplet indeholder en widget med skyderen, en knap, der åbner en dialogboks, og en dialogboks, der viser den aktuelle værdi af skyderen, hver gang den åbnes. Figur 2 viser et snapshot af programmet.

Figur 2. Et eksempelprogram, der anvender almindelige widgets

Vis billedet i fuld størrelse

Liste 1 indeholder HTML-indeksfilen.

Liste 1. Eksempelprogram ved hjælp af almindelige widgets

Liste 2 viser den tilhørende JavaScript-fil (index.js).

Liste 2. Den tilhørende JavaScript-fil til eksempelapplikationen

Den indledende opsætning sker i overskriften med følgende kode:

Når CSS’en er linket ind, er JavaScript-filerne inkluderet.

De tre widgets i denne applikation er for størstedelen defineret ved hjælp af <div>-angivelser (bortset fra knappen, som allerede har et tag i HTML). Disse widgets er defineret i følgende kode:

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

Til sidst skal du udskyde den faktiske konstruktion af widgets i JavaScript-koden, indtil siden er blevet fuldt indlæst af browseren, som vist i Listing 3.

Listing 3. Konstruktion af widgets

Hver af de allerede omtalte widgets konstrueres med denne kode. Dialogboksen og knappen er begge tildelt funktioner til bestemte hændelser. F.eks. får klikhændelsen for knappen besked om, at den skal åbne dialogboksen, når den bliver klikket på. Dialogboksen får besked på at ændre sin tekst for at angive den aktuelle værdi af skyderen, hvilket den gør hver gang den åbnes.

Der er to måder at ændre udseendet af en widget på. Du kan overdrage værdier til konstruktøren sammen med eventuelle nødvendige konstruktørparametre for widgeten. F.eks:

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

Og du kan kalde metoder på widgeten, efter at den er blevet oprettet, som følger:

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

De fleste almindelige widgets har mange tilknyttede indstillinger, der kan indstilles. Hvis du vælger at ignorere disse indstillinger, indstiller widgetsne dem desuden til standardværdier, så du kan indstille og ændre alt det, der er nødvendigt.

Widget-hændelser

Da widgets grundlæggende er JavaScript-objekter, kan de konfigureres med hændelser, der udløses i løbet af websideapplikationens levetid. Når disse hændelser udløses, opfanges de enten af webstedets medfølgende JavaScript-kode eller håndteres i widgets (som standard).

Alle widgets implementering af standardadfærd er veldokumenteret af jQuery UI-teamet for hver enkelt fælles widget. Du kan dog injicere din egen kode for at håndtere en eller flere af en udvalgt widgets hændelser. Her er et eksempel på kode til at opsætte modtagelse af en hændelse:

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

Dette særlige eksempel kobler sig på drag-hændelsen, som udløses, når dialogboksen trækkes. Den ellipse (…), der er vist i eksemplet, er det sted, hvor den individuelle kode kan placeres for at håndtere og implementere koden for hændelsen.

Widget-metoder

Metoder (som i ethvert velkendt sprog) er knyttet til widget’en og gør det muligt at udføre forudskrevet funktionalitet på en bestemt widget for at få den til at udføre en bestemt handling. Her er et eksempel på at kalde en widgets metode:

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

Optioner og metoder er forskellige. Bemærk dog, at en options værdi kan ændres eller hentes ved hjælp af en metode-lignende implementering, som vist i det følgende eksempel.

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

Skift af temaer

Kode kan medtages i HTML- og JavaScript-filer, der giver mulighed for at skifte temaer i farten ved hjælp af en drop-down-menu. Listing 4 viser de ændringer, der skal foretages i HTML-kildekoden for at foretage en sådan ændring.

Listing 4. Skift af temaer i farten

Liste 5 viser JavaScript-kildekoden.

Liste 5. JavaScript-kildekode til ændring af temaer i farten

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

Figur 3 viser eksempelprogrammet efter disse ændringer.

Figur 3. Eksempelprogrammet efter kodeændringer

Se billedet i fuld størrelse

Kør HTML-siden i din browser igen, og se resultaterne. Du kan nu klikke på drop-down-listen for at ændre temaet. Det valgte tema hentes i baggrunden efter behov.

Selv om det er fint at bruge værktøjet til skift af tema til ikke-produktionswebsteder (til test og visning af resultater), er det ikke en god idé til produktionswebsteder. Værktøjet er afhængig af en tredjepartsserver til at hoste temaerne, og du er ikke sikker på de resultater, som brugeren ser.

En anden måde at teste jQuery UI-temaer på er at bruge ThemeRoller-værktøjet, som kun er tilgængeligt til Mozilla Firefox (se Relaterede emner for et link). Når du har installeret værktøjet (som en bookmarklet i Firefox), skal du åbne galleriet og vælge temaerne for at få dem vist. Vælg et tema, og klik på download-linket. Når det er downloadet, skal du udpakke temamappen, placere den i din jQuery UI-mappe og pege dine HTML-filer til den.

Dette værktøj er dog meget mere nyttigt end blot til at skifte temaer. Det giver dig også mulighed for at opbygge brugerdefinerede temaer lettere, end hvis du skulle rulle dem ud i hånden.

Skabelse af unikke temaer

Med ThemeRoller-webstedet (som kører i de fleste populære browsere; se Relaterede emner for et link) kan der foretages ændringer i et eksisterende jQuery-tema (som udgangspunkt) for at skabe et unikt tema. Ved at gøre dette eliminerer man behovet for at oprette temaet fra bunden. Det betyder også, at ekspertise inden for CSS ikke er påkrævet, og værktøjet giver dig mulighed for at se ændringer i eksisterende temaer og widgets i farten. Figur 4 viser ThemeRoller-webstedet (ikke at forveksle med ThemeRoller-bookmarklet, som kører i Firefox).

Figur 4. ThemeRoller-webstedet

Se billedet i fuld størrelse

Klikker du på Galleri, kan du vælge et af de eksisterende temaer. Ved at gøre dette skifter CSS-stilene og billederne, som eksempelwidgetterne bruger, så de afspejler ændringen. Hvis du klikker på knappen Rediger, der er knyttet til et tema, kommer du til fanen “Roll Your Own”, hvor du kan foretage ændringer i de CSS-stilarter, der er knyttet til temaet. Hvis du ikke vælger et tema at redigere, og du starter på fanen “Roll Your Own” uden at have valgt et tema, opbygger du blot et tema fra bunden.

Til sidst skal du klikke på Download tema for at downloade det valgte tema som et brugerdefineret tema, der indeholder alle dine ændringer af temaet. Bemærk, at jQuery UI og dets temaer understøtter mange CSS3-funktioner, hvilket betyder, at alle større browsere understøttes (med undtagelse af tidligere versioner af Windows Internet Explorer).

Fanen “Roll Your Own” i ThemeRoller er pænt organiseret, så du hurtigt kan finde og ændre det, du leder efter. Fanen indeholder følgende vigtige afsnit (blandt andet):

• Skrifttypeindstillinger – Giver mulighed for generelle ændringer af den skrifttype, der anvendes i hele temaet.
• Hjørneradius – Styrer afrunding (eller mangel på) af hjørner for forskellige widgets.
• Overskrift/værktøjslinje – Giver udseende og følelse for overskrifter, der anvendes i de forskellige widgets.
• Indhold – Giver indstillinger til at styre hoveddelen af widgets.
• Klikbar – Styrer forskellige tilstande, som widgets bruger.

Når du klikker dig gennem indstillingerne, vil du bemærke et par interessante ting ved opbygningen af disse temaer. For eksempel udnytter jQuery UI-temaer teksturer. Hvis du vil se dem i brug, skal du klikke på Header/Toolbar i ThemeRoller. Klik derefter på den farvede knap i midten. Der vises en rulleliste, der indeholder mønstre, som du kan vælge imellem. Den valgte tekstur kombineres med dit valg af baggrundsfarve for at frembringe det mønster, som overskrifter og værktøjslinjer bruger. Dette er blot én af anvendelsesmulighederne for teksturer. Der er andre i alle jQuery UI-temaer. Du kan f.eks. ændre tekstur i “Clickable: default state” for at se, hvordan ændringen påvirker knapper i det valgte tema.

En interessant funktion i jQuery UI-temaer er brugen af fremhævninger og fejl (også kendt som visuelle signaler). ThemeRoller giver fuld kontrol over, hvordan disse visuelle signaler vises for brugerne. Teksturen, baggrundsfarven, konturhjørnerne, tekstfarven og endda ikonfarven kan ændres (hvis der vises et ikon i cueet). Navnene på disse stilarter vises i ThemeRoller, så du skal blot bruge disse navne på dine egne websteder for at få disse stilarter anvendt efter behov på den tekst, der vises for brugerne.

Gennemførelse af ændringer i de forskellige indstillinger medfører ændringer i URL-adressen i din browser. Listing 6 indeholder en URL-adresse som eksempel.

Listing 6. Eksempel URL til ThemeRoller

Spar og gendan senere denne URL for at komme tilbage og foretage yderligere ændringer af indstillingerne. Du kan f.eks. kopiere URL’en, efter at du har foretaget ændringer, og indsætte den et sted, hvor du kan gemme den. Luk nu din browser (eller den browserfane, der indeholder ThemeRoller-webstedet), og åbn den igen med den kopierede URL-adresse. Som du kan se, er alle dine ændringer tilbage og klar til yderligere ændringer.

Konklusion

Der kan siges meget mere om jQuery UI’s interne funktioner, men du burde have det nødvendige grundlag for at begynde at eksperimentere med jQuery UI’s temaer. Du har set strukturen af mapper og filer, som gør det muligt for dig at ændre et tema. Du kan se eller bruge disse filer som udgangspunkt for at oprette dine egne temaer, når du er klar.

Denne artikel dækkede også ThemeRoller og de tilhørende websider, der understøtter ændring af eksisterende temaer samt oprettelse af nye temaer fra bunden. Endelig udforskede du processen med at gemme og gendanne temaændringer på ThemeRoller-webstedet.

Downloadbare ressourcer

• PDF af dette indhold

• jQuery UI-platform: Download jQuery UI for at teste og følge med i denne artikel og de eksempler, som den indeholder.
• ThemeRoller: Tjek ThemeRoller-webstedet, som giver dig mulighed for at teste eksisterende temaer fra jQuery UI-platformen, tilpasse eksisterende temaer eller oprette brugerdefinerede temaer.
• developerWorks Webudviklingszone: Find artikler, der dækker forskellige webbaserede løsninger. Se det tekniske bibliotek for webudvikling for at finde en bred vifte af tekniske artikler og tips, vejledninger, standarder og IBM Redbooks.
• IBM-produkt-evalueringsversioner: Download og få fingrene i værktøjer til applikationsudvikling og middlewareprodukter fra DB2, Lotus, Rational, Rational, Tivoli og WebSphere.
• developerWorks på Twitter: Tilmeld dig i dag for at følge developerWorks tweets.