Tematy nie są nową koncepcją. Prawdopodobnie rozwinąłeś już kilka używając stylów i klas kaskadowego arkusza stylów (CSS) do formatowania wyglądu i działania swoich stron internetowych. Użycie frameworka standaryzuje podejście i zmniejsza ilość pracy i kodu, który trzeba napisać.

JQuery UI jest obecnie standardem przemysłowym dla implementacji motywów. Istnieją inne opcje, takie jak Dojo (w połączeniu z Dijit) lub Ext JS, ale jQuery UI łączy motywy z wykorzystaniem widżetów, które są elementami, z którymi użytkownicy wchodzą w interakcję, takimi jak datowniki czy przyciski. Kiedy rozglądamy się po plikach, które tworzą motyw jQuery UI, nie znajdujemy tam nic więcej niż CSS i JavaScript. Ale to właśnie proces myślowy i standaryzacja, które wpłynęły na użycie CSS i JavaScript, sprawiają, że jQuery UI jest tak doskonałą platformą do budowania wyglądu i działania strony internetowej.

tematy jQuery UI

Platforma jQuery UI składa się z dwóch podszkieletów: szkieletu widżetów, który zawiera Fabrykę Widżetów i zestaw powszechnie używanych widżetów, oraz szkieletu CSS. Fabryka widżetów stanowi podstawę dla wszystkich widżetów jQuery UI, w tym tych wspólnych widżetów zawartych w zestawie widżetów. Podczas tworzenia widżetów, użyj jednego z powszechnie używanych widżetów z zestawu jako punktu wyjścia lub stwórz jeden od podstaw. Gdy już wiesz, gdzie znajdują się wspólne widżety, otwórz dowolny z nich w swoim ulubionym edytorze i zobacz kod. Stamtąd albo zmodyfikuj ten kod i wygeneruj niestandardowy widżet (używając jednego z innych widżetów jako punktu wyjścia), albo stwórz taki o podobnej strukturze.

Struktura folderów motywów jQuery UI

Przed dalszym przeglądaniem różnych plików i ich zawartości należy pobrać jeden z motywów z platformy jQuery UI (odnośnik znajduje się w temacie Tematy pokrewne). Pobrany plik ZIP zawiera trzy foldery: css, js, oraz development-bundle. Folder development-bundle zawiera folder o nazwie themes, w którym przechowywane są rozwijane motywy jQuery UI. Folder themes zawiera z kolei folder z nazwą wybranego/pobranego motywu (np. UI lightness) oraz folder o nazwie base. Folder ten zawiera punkt startowy dla Twoich własnych motywów. Jest on zawsze pobierany, niezależnie od wybranego motywu.

Folder css zawiera folder z nazwą pobranego motywu. Ten folder motywu zawiera plik CSS, który zawiera znaczniki CSS dla wszystkich komponentów lub widżetów. Folder development-bundle, jednakże, zawiera również folder themes/ (gdzie jest rzeczywista nazwa wybranego motywu), który zawiera indywidualne pliki CSS dla każdego komponentu lub widgetu. Taka struktura ułatwia odnalezienie i modyfikację zmian we własnych motywach. Rysunek 1 przedstawia strukturę folderu themes.

Rysunek 1. Struktura folderu themes

View image at full size

Nie wszystkie pliki z folderu są wymienione na rysunku 1, ale te ważne znajdują się tutaj. Plik jquery.ui.all.css importuje pliki jquery.ui.base.css i jquery.ui.theme.css, co ułatwia importowanie plików przy użyciu tylko pliku jquery.ui.all.css. Plik jquery.ui.base.css importuje plik jquery.ui.core.css oraz wszystkie inne pliki komponentów i widżetów z tego samego folderu (nie pokazanego na rysunku 1.). Plik jquery.ui.core.css zawiera wspólne klasy dzielone przez wszystkie pliki widżetów. Dostarcza on bazowe klasy CSS dla wszystkich widżetów jQuery UI (w obrębie motywu), a także wspólną widoczność i pozycjonowanie dla widżetów. Ostatnim ważnym plikiem jest plik jquery.ui.theme.css, który zapewnia wspólny wygląd i zachowanie dla wszystkich widżetów w motywie, jak również dla samego motywu.

Plik jquery.ui.theme.css ma trzy różne typy stylów:

• Container – Ten styl określa motyw kontenera, taki jak ui-widget, ui-widget-content lub ui-widget-header.
• Stany – ten typ stylu jest używany przez widżety jQuery UI do określania wyglądu widżetu w miarę interakcji użytkownika z nim. Klasy obejmują ui-state-default, ui-state-hover i ui-state-active.
• Cues – Gdy coś dzieje się w aplikacji (nie przez działanie użytkownika), klasy te zmieniają wygląd widżetu. Klasy te obejmują ui-state-highlight, ui-state-error i ui-state-disabled.

Wspólne widżety

W tej sekcji przyjrzymy się przykładowemu kodowi, który używa niektórych wspólnych widżetów do zbudowania przykładowej aplikacji. Przykład ten zawiera widżet suwaka, przycisk otwierający okno dialogowe oraz okno dialogowe, które wyświetla aktualną wartość suwaka przy każdym jego otwarciu. Rysunek 2 przedstawia migawkę aplikacji.

Rysunek 2. Przykładowa aplikacja wykorzystująca wspólne widżety

View image at full size

Lista 1 dostarcza plik indeksu HTML.

Lista 1. Przykładowa aplikacja wykorzystująca wspólne widżety

Listwa 2 przedstawia powiązany plik JavaScript (index.js).

Listwa 2. Powiązany plik JavaScript dla przykładowej aplikacji

Wstępna konfiguracja odbywa się w nagłówku z następującym kodem:

Po połączeniu w CSS, pliki JavaScript są dołączane.

Trzy widżety w tej aplikacji są zdefiniowane przy użyciu instrukcji <div> w przeważającej części (z wyjątkiem przycisku, który ma już znacznik w HTML). Widżety te są zdefiniowane w następującym kodzie:

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

Na koniec opóźnij faktyczną konstrukcję widżetów w kodzie JavaScript do momentu, gdy strona zostanie w pełni załadowana przez przeglądarkę, jak pokazano na listingu 3.

Listing 3. Konstruowanie widżetów

Każdy z wymienionych już widżetów jest konstruowany za pomocą tego kodu. Zarówno okno dialogowe jak i przycisk mają przypisane funkcje do określonych zdarzeń. Na przykład, zdarzenie kliknięcia przycisku mówi, że powinien on otworzyć okno dialogowe po kliknięciu. Okno dialogowe ma zmienić swój tekst tak, by wskazywał na bieżącą wartość suwaka, co czyni za każdym razem, gdy jest otwierane.

Istnieją dwa sposoby zmiany wyglądu widżetu. Możesz przekazać wartości do konstruktora, wraz z wszelkimi wymaganymi parametrami konstruktora dla widżetu. Na przykład:

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

Albo można wywołać metody na widżecie po jego utworzeniu, jak poniżej.

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

Większość popularnych widżetów ma wiele powiązanych opcji, które można ustawić. Ponadto, jeśli zdecydujesz się zignorować te opcje, widżety ustawiają je na wartości domyślne, pozwalając ci ustawić i zmienić to, co jest potrzebne.

Zdarzenia widżetów

Ponieważ widżety są zasadniczo obiektami JavaScript, mogą być skonfigurowane ze zdarzeniami, które wystrzelą podczas życia aplikacji internetowej. Gdy te zdarzenia się uruchamiają, są one przechwytywane przez kod JavaScript dostarczony przez witrynę lub obsługiwane wewnątrz widżetów (domyślnie).

Wszystkie implementacje domyślnego zachowania widżetów są dobrze udokumentowane przez zespół jQuery UI dla każdego wspólnego widżetu. Możesz jednak wstrzyknąć swój własny kod, aby obsłużyć jedno lub więcej zdarzeń wybranego widżetu. Oto przykład kodu do skonfigurowania odbioru zdarzenia:

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

Ten konkretny przykład zahacza o zdarzenie drag, które jest wywoływane, gdy okno dialogowe jest przeciągane. Elipsa (…) pokazana w przykładzie jest miejscem, w którym można umieścić indywidualny kod do obsługi i implementacji kodu dla tego zdarzenia.

Metody widżetów

Metody (jak w każdym znanym języku) są związane z widżetem i pozwalają na wykonanie wstępnie napisanej funkcjonalności na konkretnym widżecie w celu wykonania przez niego określonej akcji. Oto przykład wywołania metody widżetu:

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

Koncepcyjnie, opcje i metody są różne. Zauważ jednak, że wartość opcji może być zmieniana lub pobierana za pomocą implementacji podobnej do metody, jak pokazano w poniższym przykładzie.

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

Przełączanie motywów

Kod może być zawarty w plikach HTML i JavaScript, które dają możliwość przełączania motywów w locie za pomocą rozwijanego menu. Listing 4 pokazuje zmiany w kodzie źródłowym HTML, aby dokonać takiej zmiany.

Listing 4. Zmiana motywów w locie

Listing 5 pokazuje kod źródłowy JavaScript.

Listing 5. Kod źródłowy JavaScript do zmiany motywów w locie

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

Rysunek 3 przedstawia przykładową aplikację po wprowadzeniu tych zmian.

Rysunek 3. Przykładowa aplikacja po modyfikacji kodu

View image at full size

Uruchom ponownie stronę HTML w przeglądarce i obejrzyj wyniki. Możesz teraz kliknąć listę rozwijaną, aby zmienić motyw. Wybrany motyw jest pobierany w razie potrzeby w tle.

Ale używanie narzędzia przełącznika motywów jest dobre dla witryn nieprodukcyjnych (do testowania i przeglądania wyników), nie jest to dobry pomysł dla witryn produkcyjnych. Narzędzie opiera się na serwerze innej firmy do hostowania motywów i nie będziesz mieć pewności co do wyników, które zobaczy użytkownik.

Jeszcze innym sposobem testowania motywów jQuery UI jest użycie narzędzia ThemeRoller, które jest dostępne tylko dla przeglądarki Mozilla Firefox (zobacz Tematy pokrewne, aby uzyskać link). Po zainstalowaniu narzędzia (jako bookmarklet w Firefoksie), otwórz galerię i wybierz motywy, aby je obejrzeć. Wybierz motyw i kliknij na link do pobrania. Po pobraniu rozpakuj folder motywu, umieść go w swoim folderze jQuery UI i wskaż na niego swoje pliki HTML.

To narzędzie jest o wiele bardziej użyteczne niż zwykłe przełączanie motywów. Pozwala ono również na łatwiejsze tworzenie własnych motywów, niż gdybyś musiał je tworzyć ręcznie.

Tworzenie unikalnych motywów

Używając witryny ThemeRoller (która działa w większości popularnych przeglądarek; zobacz Tematy pokrewne, aby uzyskać łącze), można dokonać zmian w istniejącym motywie jQuery (jako punkcie wyjścia), aby utworzyć unikalny motyw. W ten sposób eliminuje się potrzebę tworzenia motywu od podstaw. Oznacza to również, że nie jest wymagana wiedza z zakresu CSS, a narzędzie umożliwia podgląd zmian w istniejących motywach i widżetach w locie. Rysunek 4 pokazuje witrynę ThemeRoller (nie mylić z zakładką ThemeRoller, która działa w Firefoksie).

Rysunek 4. Witryna ThemeRoller

View image at full size

Kliknięcie Galerii pozwala wybrać dowolny z istniejących motywów. W ten sposób style CSS i obrazy, z których korzystają przykładowe widżety, są przełączane w celu odzwierciedlenia zmiany. Kliknięcie na przycisk Edytuj związany z motywem przenosi Cię do zakładki „Rozwiń swój własny”, gdzie możesz dokonać zmian w stylach CSS związanych z motywem. Jeśli nie wybierzesz motywu do edycji i zaczniesz od zakładki „Roll Your Own” bez wybranego motywu, po prostu budujesz motyw od zera.

Na koniec kliknięcie przycisku Pobierz motyw powoduje pobranie wybranego motywu jako motywu niestandardowego zawierającego wszystkie modyfikacje motywu. Zwróć uwagę, że jQuery UI i jego motywy obsługują wiele funkcji CSS3, co oznacza, że obsługiwane są wszystkie główne przeglądarki (z wyjątkiem wcześniejszych wersji Windows Internet Explorer).

Zakładka „Roll Your Own” programu ThemeRoller jest ładnie zorganizowana, abyś mógł szybko znaleźć i zmienić to, czego szukasz. Zakładka zawiera następujące ważne sekcje (między innymi):

• Font Settings – Umożliwia ogólne zmiany czcionki używanej w całym motywie.
• Corner Radius – Kontroluje zaokrąglenie (lub jego brak) rogów dla różnych widżetów.
• Header/Toolbar – Zapewnia wygląd i sposób działania nagłówków używanych w różnych widżetach.
• Zawartość – Zapewnia ustawienia do kontrolowania głównej treści widżetów.
• Klikalne – Kontroluje różne stany, których używają widżety.

Klikając przez opcje, zauważysz kilka interesujących rzeczy o konstrukcji tych motywów. Na przykład, motywy jQuery UI wykorzystują tekstury. Aby zobaczyć je w użyciu, kliknij na Header/Toolbar w ThemeRoller. Następnie kliknij kolorowy przycisk na środku. Pojawi się rozwijana paleta zawierająca wzory, z których można wybierać. Wybrana tekstura jest łączona z wybranym przez Ciebie kolorem tła, aby uzyskać wzór, którego używają nagłówki i paski narzędzi. Jest to tylko jedno z zastosowań tekstur. Istnieją inne w motywach jQuery UI. Na przykład, zmodyfikuj teksturę w „Clickable: default state”, aby zobaczyć jak zmiana wpływa na przyciski w wybranym motywie.

Jedną z interesujących cech motywów jQuery UI jest użycie podświetleń i błędów (znanych również jako wizualne wskazówki). ThemeRoller zapewnia pełną kontrolę nad tym, jak te wizualne wskazówki są wyświetlane dla użytkowników. Tekstura, kolor tła, rogi konturu, kolor tekstu, a nawet kolor ikony mogą być zmienione (jeśli ikona jest wyświetlana w podpowiedzi). Nazwy tych stylów są wyświetlane w ThemeRoller, więc po prostu użyj tych nazw na swoich stronach, aby mieć te style zastosowane w razie potrzeby do tekstu wyświetlanego użytkownikom.

Wprowadzenie zmian w różnych ustawieniach powoduje zmiany w adresie URL w przeglądarce. Listing 6 przedstawia adres URL jako przykład.

Listing 6. Example ThemeRoller URL

Zapisz i później przywróć ten adres URL, aby wrócić i dokonać dalszych zmian w ustawieniach. Na przykład, skopiuj adres URL po dokonaniu modyfikacji i wklej go gdzieś na przechowanie. Teraz zamknij swoją przeglądarkę (lub kartę przeglądarki zawierającą stronę ThemeRoller) i otwórz ją ponownie używając skopiowanego adresu URL. Jak widzisz, wszystkie twoje modyfikacje są z powrotem, gotowe do dalszych modyfikacji.

Zakończenie

Wiele jeszcze można powiedzieć o wewnętrznych aspektach jQuery UI, ale powinieneś mieć już podstawy potrzebne do rozpoczęcia eksperymentów z motywami jQuery UI. Widziałeś już strukturę folderów i plików, które pozwolą Ci zmodyfikować motyw. Możesz przejrzeć te pliki lub użyć ich jako punktu wyjścia do tworzenia własnych motywów, gdy będziesz gotowy.

Ten artykuł omawiał również ThemeRoller i związane z nim strony internetowe wspierające modyfikację istniejących motywów, jak również tworzenie nowych motywów od podstaw. Wreszcie, zbadano proces zapisywania i przywracania modyfikacji motywów na stronie ThemeRoller.

Zasoby do pobrania

• PDF tej treści

• Platforma jQuery UI: Pobierz jQuery UI, aby przetestować i postępować zgodnie z tym artykułem i przykładami, które zawiera.
• ThemeRoller: Sprawdź witrynę ThemeRoller, która pozwala testować istniejące motywy z platformy jQuery UI, dostosowywać istniejące motywy lub tworzyć własne motywy.
• developerWorks Strefa rozwoju sieci Web: Znajdź artykuły obejmujące różne rozwiązania oparte na sieci Web. Zobacz bibliotekę techniczną Web Development, aby uzyskać szeroki wybór artykułów technicznych i wskazówek, samouczków, standardów i książek IBM Redbooks.
• Wersje ewaluacyjne produktów IBM: Pobierz i zapoznaj się z narzędziami do tworzenia aplikacji oraz produktami middleware firm DB2, Lotus, Rational, Tivoli i WebSphere.
• developerWorks na Twitterze: Dołącz już dziś, aby śledzić tweety developerWorks.