Temele nu sunt un concept nou. Probabil că ați derulat câteva folosind stilurile și clasele Cascading Style Sheet (CSS) pentru a formata aspectul site-urilor dumneavoastră. Folosirea unui cadru standardizează abordarea și diminuează cantitatea de muncă și codul care trebuie scris.

jQuery UI este acum standardul industriei pentru implementarea temelor. Există și alte opțiuni, cum ar fi Dojo (cuplat cu Dijit) sau Ext JS, dar jQuery UI combină temele cu utilizarea de widget-uri, care sunt elementele cu care interacționează utilizatorii selectori de date sau butoane. Atunci când disecăm mecanismele interne ale fișierelor care alcătuiesc o temă jQuery UI, ceea ce găsim nu este altceva decât CSS și JavaScript. Însă procesul de gândire și standardizarea care au stat la baza acestei utilizări a CSS și JavaScript sunt cele care fac din jQuery UI o platformă excelentă pentru crearea aspectului unui site web.

teme jQuery UI

Platforma jQuery UI este formată din două sub-frameworks: un framework pentru widget-uri, care conține Widget Factory și un set de widget-uri utilizate în mod obișnuit, și framework-ul CSS. Widget Factory oferă baza pentru toate widgeturile jQuery UI, inclusiv pentru acele widgeturi comune incluse în setul de widgeturi. Atunci când creați widgeturi, utilizați fie unul dintre widgeturile comune din set ca punct de plecare, fie creați unul de la zero. Odată ce știți unde se află widgeturile comune, deschideți oricare dintre ele în editorul dvs. preferat și vizualizați codul. De acolo, fie modificați acest cod și generați un widget personalizat (folosind unul dintre celelalte widgeturi ca punct de plecare), fie creați unul cu o structură similară.

Structura dosarului jQuery UI themes

Înainte de a continua să analizați diferitele fișiere și conținutul lor, descărcați una dintre temele de pe platforma jQuery UI (consultați Subiecte conexe pentru un link). Fișierul ZIP descărcat conține trei dosare: css, js și development-bundle. Dosarul development-bundle conține un dosar numit themes, în care sunt păstrate temele jQuery UI în curs de dezvoltare. Dosarul themes conține, la rândul său, un dosar cu numele temei selectate/descărcate (cum ar fi UI lightness), precum și un dosar numit base. Acest dosar conține un punct de plecare pentru propriile teme. Acesta este întotdeauna descărcat, indiferent de tema selectată.

Dosarul css conține un dosar cu numele temei descărcate. Acest dosar de temă conține un fișier CSS care încorporează marcajul CSS pentru toate componentele sau widgeturile. Cu toate acestea, folderul development-bundle conține, de asemenea, un folder themes/ (unde este numele real al temei alese) care conține fișierele CSS individuale pentru fiecare componentă sau widget. Această structură facilitează găsirea și modificarea modificărilor în propriile teme. Figura 1 prezintă structura dosarului themes.

Figura 1. Structura dosarului themes

Vezi imaginea la dimensiune completă

Nu toate fișierele din dosar sunt listate în figura 1, dar cele importante sunt aici. Fișierul jquery.ui.all.css importă fișierele jquery.ui.base.css și jquery.ui.theme.css, ceea ce facilitează importul fișierelor folosind doar fișierul jquery.ui.all.css. Fișierul jquery.ui.base.css importă fișierul jquery.ui.core.css și toate celelalte fișiere de componente și widgeturi din același dosar (nu este prezentat în figura 1.). Fișierul jquery.ui.core.css conține clase comune partajate de toate fișierele widget. Acesta furnizează clasele CSS de bază pentru toate widgeturile jQuery UI (în cadrul temei), precum și vizibilitate și poziționare comune pentru widgeturi. Ultimul fișier important este fișierul jquery.ui.theme.css, care oferă aspectul și comportamentul comun împărtășit de toate widgeturile din temă, precum și de tema în sine.

Fisierul jquery.ui.theme.css are trei tipuri diferite de stiluri:

• Container – Acest stil definește tema container, cum ar fi ui-widget, ui-widget-content sau ui-widget-header.
• States – Acest tip de stil este utilizat de widgeturile jQuery UI pentru a defini aspectul widgetului pe măsură ce utilizatorul interacționează cu acesta. Clasele includ ui-state-default, ui-state-hover și ui-state-active.
• Cues – Pe măsură ce se întâmplă ceva în aplicație (nu prin acțiunea utilizatorului), aceste clase schimbă aspectul widgetului. Clasele includ ui-state-highlight, ui-state-error și ui-state-disabled.

Widget-uri comune

Această secțiune analizează codul de exemplu care utilizează unele widget-uri comune pentru a construi o aplicație de exemplu. Acest exemplu conține un widget cursor, un buton care deschide o casetă de dialog și o casetă de dialog care afișează valoarea curentă a cursorului de fiecare dată când acesta este deschis. Figura 2 oferă un instantaneu al aplicației.

Figura 2. Un exemplu de aplicație care utilizează widget-uri comune

Vezi imaginea la dimensiune completă

Lista 1 furnizează fișierul HTML de indexare.

Lista 1. Exemplu de aplicație care utilizează widget-uri comune

Lista 2 prezintă fișierul JavaScript asociat (index.js).

Lista 2. Fișierul JavaScript asociat pentru aplicația de exemplu

Configurarea inițială are loc în antet cu următorul cod:

După ce se face legătura în CSS, sunt incluse fișierele JavaScript.

Cele trei widget-uri din această aplicație sunt definite folosind în cea mai mare parte declarațiile <div> (cu excepția butonului, care are deja o etichetă în HTML). Aceste widget-uri sunt definite în următorul cod:

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

În cele din urmă, amânați construcția efectivă a widgeturilor în codul JavaScript până când pagina a fost încărcată complet de către browser, așa cum se arată în lista 3.

Listarea 3. Construcția widgeturilor

Care dintre widgeturile deja menționate este construit cu acest cod. Casetei de dialog și butonului le sunt atribuite funcții la evenimente specifice. De exemplu, evenimentului click al butonului i se spune că trebuie să deschidă caseta de dialog în momentul în care este apăsat. În ceea ce privește caseta de dialog, i se spune să își schimbe textul pentru a indica valoarea curentă a cursorului, ceea ce se face de fiecare dată când este deschisă.

Există două moduri de a schimba aspectul unui widget. Puteți transmite valori constructorului, împreună cu toți parametrii de constructor necesari pentru widget. De exemplu:

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

Ou puteți apela metode asupra widget-ului după ce acesta a fost creat, după cum urmează:

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

Majoritatea widget-urilor comune au multe opțiuni asociate care pot fi setate. În plus, dacă alegeți să ignorați aceste opțiuni, widgeturile le setează la valori implicite, permițându-vă să setați și să modificați orice este necesar.

Evenimentele widget-urilor

Pentru că widget-urile sunt în mod fundamental obiecte JavaScript, ele pot fi configurate cu evenimente care se declanșează pe durata de viață a aplicației site-ului web. Pe măsură ce aceste evenimente se declanșează, ele sunt prinse fie de codul JavaScript furnizat de site-ul dvs. web, fie sunt gestionate în cadrul widgeturilor (opțiunea implicită).

Implementarea comportamentului implicit al tuturor widgeturilor este bine documentată de către echipa jQuery UI pentru fiecare widget comun. Cu toate acestea, vă puteți injecta propriul cod pentru a gestiona unul sau mai multe dintre evenimentele unui widget ales. Iată un exemplu de cod pentru a configura recepționarea unui eveniment:

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

Acest exemplu particular se agață de evenimentul drag, care este declanșat atunci când caseta de dialog este trasă. Elipsa (…) afișată în exemplu este locul în care poate fi plasat codul individual pentru a gestiona și implementa codul pentru eveniment.

Metode widget

Metodele (ca în orice limbaj familiar) sunt asociate cu widgetul și permit executarea unei funcționalități pre-scrise pe un anumit widget pentru ca acesta să efectueze o anumită acțiune. Iată un exemplu de apelare a unei metode a unui widget:

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

Conceptual, opțiunile și metodele sunt diferite. Rețineți, totuși, că valoarea unei opțiuni poate fi modificată sau recuperată folosind o implementare asemănătoare unei metode, așa cum se arată în următorul exemplu.

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

Schimbarea temelor

Codul poate fi inclus în fișierele HTML și JavaScript care oferă posibilitatea de a schimba temele din mers folosind un meniu derulant. Lista 4 prezintă modificările aduse codului sursă HTML pentru a face o astfel de schimbare.

Listarea 4. Schimbarea temelor din mers

Lista 5 prezintă codul sursă JavaScript.

Lista 5. Codul sursă JavaScript pentru schimbarea temelor din mers

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

Figura 3 prezintă aplicația de exemplu după aceste modificări.

Figura 3. Aplicația de exemplu după modificările de cod

Vezi imaginea în mărime naturală

Executați din nou pagina HTML în browserul dumneavoastră și vizualizați rezultatele. Acum puteți face clic pe lista derulantă pentru a schimba tema. Tema selectată este descărcată în fundal, după cum este necesar.

Deși utilizarea instrumentului de schimbare a temei este bună pentru site-urile care nu sunt de producție (pentru testarea și vizualizarea rezultatelor), nu este o idee bună pentru site-urile de producție. Instrumentul se bazează pe un server terț pentru a găzdui temele și nu veți fi sigur de rezultatele pe care le vede utilizatorul.

Încă o altă modalitate de a testa temele jQuery UI este de a utiliza instrumentul ThemeRoller, care este disponibil numai pentru Mozilla Firefox (consultați Subiecte conexe pentru un link). După instalarea instrumentului (ca un bookmarklet în Firefox), deschideți galeria și selectați temele pentru a le vizualiza. Alegeți o temă și faceți clic pe linkul de descărcare. Odată descărcat, extrageți folderul temei, plasați-l în folderul jQuery UI și îndreptați fișierele HTML către el.

Acest instrument este mult mai util decât pentru simpla schimbare a temelor, totuși. De asemenea, vă permite să construiți teme personalizate mai ușor decât dacă ar trebui să le desfășurați manual.

Crearea de teme unice

Utilizând site-ul ThemeRoller (care rulează în majoritatea browserelor populare; vezi Subiecte conexe pentru un link), se pot face modificări la o temă jQuery existentă (ca punct de plecare) pentru a crea o temă unică. Procedând astfel, se elimină necesitatea de a crea tema de la zero. De asemenea, înseamnă că nu este necesară expertiza în CSS, iar instrumentul vă permite să vizualizați din mers modificările aduse temelor și widgeturilor existente. Figura 4 prezintă site-ul ThemeRoller (a nu se confunda cu bookmarklet-ul ThemeRoller, care rulează în Firefox).

Figura 4. Site-ul ThemeRoller

Vezi imaginea în mărime naturală

Clicul pe Galerie vă permite să selectați oricare dintre temele existente. Făcând acest lucru, se schimbă stilurile CSS și imaginile pe care widgeturile de probă le utilizează pentru a reflecta schimbarea. Dacă faceți clic pe butonul Edit (Editare) asociat cu o temă, accesați fila „Roll Your Own” (Creează-ți propria temă), unde puteți efectua modificări ale stilurilor CSS asociate cu tema respectivă. Dacă nu alegeți o temă pe care să o editați și începeți de la fila „Roll Your Own” fără nicio temă selectată, construiți pur și simplu o temă de la zero.

În cele din urmă, făcând clic pe Download theme (Descărcare temă) descărcați tema selectată ca temă personalizată care conține toate modificările aduse temei dumneavoastră. Rețineți că jQuery UI și temele sale acceptă multe caracteristici CSS3, ceea ce înseamnă că sunt acceptate toate browserele majore (cu excepția versiunilor anterioare ale Windows Internet Explorer).

Fila „Roll Your Own” din ThemeRoller este frumos organizată, astfel încât să puteți găsi și modifica rapid ceea ce căutați. Această filă conține următoarele secțiuni importante (printre altele):

• Font Settings – Permite modificări generale ale fontului utilizat în întreaga temă.
• Corner Radius – Controlează rotunjirea (sau lipsa) colțurilor pentru diverse widget-uri.
• Header/Toolbar – Oferă aspectul și aspectul pentru antetele utilizate în diversele widget-uri.
• Content – Oferă setări pentru a controla corpul principal al widget-urilor.
• Clickable – Controlează diferite stări pe care le folosesc widget-urile.

Cum faceți clic prin opțiuni, veți observa câteva lucruri interesante despre construcția acestor teme. De exemplu, temele jQuery UI profită de texturi. Pentru a le vedea în utilizare, faceți clic pe Header/Toolbar în ThemeRoller. Apoi faceți clic pe butonul colorat din mijloc. Se dezvăluie o paletă derulantă care conține modele din care puteți alege. Textura selectată este combinată cu culoarea de fundal aleasă de dvs. pentru a produce modelul pe care îl folosesc anteturile și barele de instrumente. Aceasta este doar o utilizare a texturilor. Există și altele în toate temele jQuery UI. De exemplu, modificați textura din „Clickable: default state” pentru a vedea cum afectează schimbarea butoanele din tema selectată.

O caracteristică interesantă a temelor jQuery UI este utilizarea evidențierii și a erorilor (cunoscute și sub numele de indicii vizuale). ThemeRoller oferă un control complet asupra modului în care aceste indicii vizuale sunt afișate utilizatorilor. Textura, culoarea de fundal, colțurile de contur, culoarea textului și chiar culoarea pictogramei pot fi modificate (dacă în indiciu este afișată o pictogramă). Numele acestor stiluri sunt afișate în ThemeRoller, așa că este suficient să folosiți aceste nume în propriile site-uri web pentru ca aceste stiluri să fie aplicate, după cum este necesar, textului afișat utilizatorilor.

Facerea de modificări ale diferitelor setări produce modificări ale URL-ului din browserul dumneavoastră. Lista 6 oferă un URL ca exemplu.

Lista 6. Exemplu de URL ThemeRoller

Salvați și restaurați ulterior acest URL pentru a reveni și a face alte modificări ale setărilor. De exemplu, copiați URL-ul după ce ați făcut modificări și lipiți-l undeva pentru a-l păstra în siguranță. Acum, închideți browserul (sau fila din browser care conține site-ul ThemeRoller) și redeschideți-l folosind URL-ul copiat. După cum puteți vedea, toate modificările dvs. sunt înapoi, gata pentru alte modificări.

Concluzie

Multe altele pot fi spuse despre elementele interne ale jQuery UI, dar ar trebui să aveți elementele de bază necesare pentru a începe să experimentați cu temele jQuery UI. Ați văzut structura dosarelor și a fișierelor, ceea ce vă va permite să modificați o temă. Puteți vizualiza sau utiliza aceste fișiere ca punct de plecare pentru a vă crea propriile teme atunci când sunteți pregătit.

Acest articol a acoperit, de asemenea, ThemeRoller și paginile web asociate care sprijină modificarea temelor existente, precum și crearea de noi teme de la zero. În cele din urmă, ați explorat procesul de salvare și restaurare a modificărilor temelor pe site-ul ThemeRoller.

Resurse descărcabile

• PDF al acestui conținut

• Platforma jQuery UI: Descărcați jQuery UI pentru a testa și a urmări acest articol și exemplele pe care le oferă.
• ThemeRoller: Consultați site-ul ThemeRoller, care vă permite să testați temele existente din platforma jQuery UI, să personalizați temele existente sau să creați teme personalizate.
• developerWorks Zona de dezvoltare web: Găsiți articole care acoperă diverse soluții bazate pe web. Consultați biblioteca tehnică de dezvoltare Web pentru o gamă largă de articole și sfaturi tehnice, tutoriale, standarde și IBM Redbooks.
• Versiuni de evaluare a produselor IBM: Descărcați și puneți mâna pe instrumente de dezvoltare de aplicații și produse middleware de la DB2, Lotus, Rational, Tivoli și WebSphere.
• developerWorks pe Twitter: Înscrieți-vă astăzi pentru a urmări tweet-urile developerWorks.