2008 04 XUL – część III [Programowanie]


RozwiÄ…zania
XUL  wieloplatformowy język opisu interfejsu użytkownika  część III
XUL  część III
Grzegorz Madajczak
W pierwszej części minicyklu artykułów poświęconych XUL poznaliśmy poszczególne komponenty
służące do budowy graficznego interfejsu użytkownika. Drugi artykuł opisywał zagadnienia integracji
poszczególnych elementów oraz zaznajomił nas z podstawami użycia JavaScript do obsługi zdarzeń w
XUL. W ostatnim artykule z tego cyklu dowiemy się więcej na temat łączenia XUL z innymi odmianami
języka XML oraz zmiany wyglądu interfejsu z użyciem kaskadowych arkuszy stylu.
obecnym artykule zobaczymy, w jaki nazw w głównym elemencie aplikacji. Zwią-
sposób można połączyć XUL z innymi zane jest to z użyciem trzech różnych odmian języka
odmianami języka XML. Zapoznamy XML, dla których musimy zdefiniować zakres przestrze-
Wsię pokrótce z mechanizmem XPCOM, ni nazw  dla każdego z osobna. Całkowitą nowością jest
znacznie rozszerzającym możliwości tandemu XUL + Ja- natomiast fragment kodu znajdujący się pomiędzy znacz-
vaScript, a na koniec zajmiemy się również wprowadza- nikiem otwierającym i zamykającym . O jego
niem zmian do wyglądu interfejsu, tak aby wyglądał on funkcji napiszę za chwilę. Do stworzenia aplikacji wy-
inaczej niż standardowy, nieco siermiężny styl chrome. korzystano najnowszą specyfikację języka XUL, zaim-
Wszystkiego tego dowiemy się na przykładzie prostej plementowaną w przeglądarce Firefox-3.0, która na razie
aplikacji  galerii do przeglądania plików graficznych. jest w fazie rozwojowej. Wersja ta wprowadza między
Kod tej aplikacji będzie zaprezentowany na kolejnych li- innymi kontrolkę , która tworzy suwak.
stingach i w miarę potrzeby omówiony, natomiast pliki Omawiana aplikacja jest prostą przeglądarką ob-
zródłowe znajdują się na stronie www.lpmagazine.org w razków. Uruchomienie aplikacji otwiera okno dialogo-
katalogu XUL/przyklad. we, w którym należy wybrać folder z plikami graficzny-
mi. Obrazki z folderu zostanÄ… wstawione jako elementy
Opis aplikacji listy w lewym panelu aplikacji. Interfejs graficzny skła-
Kod interfejsu aplikacji, widocznej na Rysunku 1., da się z paska narzędzi () oraz z dwóch paneli
przedstawia Listing 1. Kod biblioteki JavaScript z funk- z rozdzielaczem (). Wszystkie te elementy zo-
cjami obsługującymi interfejs przedstawia Listing 2. stały omówione w poprzednich częściach minicyklu po-
Przeglądając kod XUL z Listingu 1., większość elemen- święconego XUL. Na pasku narzędzi znajdują się przy-
tów powinna wyglądać znajomo, poza niewielkimi no- ciski (), obsługujące poszczególne funk-
winkami. Jedną z nich jest deklaracja kilku przestrzeni cje związane z działaniem aplikacji  otwieraniem ob-
50 kwiecień 2008
linux@software.com.pl
RozwiÄ…zania
XUL  wieloplatformowy język opisu interfejsu użytkownika  część III
Listing 1. Kod graficznego interfejsu użytkownika aplikacji Galeria napisany w języku XUL
orient="horizontal"
onchange="magnify()"/>



increment="10"
value="100"

www.lpmagazine.org 51
RozwiÄ…zania
XUL  wieloplatformowy język opisu interfejsu użytkownika  część III
razków, poruszaniem się na liście obrazków domyślną, jak w przykładzie powyżej. No- formAttribute. Przekształcenia obiektu SVG
(lewy panel) oraz przekształceniami po- wa domyślna przestrzeń nazw będzie obo- na podstawie macierzy wykorzystuje rów-
większonego obrazka wybranego z listy. wiązywała do zamknięcia znacznika, który nież inna funkcja: miror() - służąca do od-
ją zdefiniował. Kod pomiędzy znacznikiem bijania obrazka w poziomie i w pionie. Po-
XUL i SVG otwierającym, a zamykającym interpreto- zostałe dwie funkcje  rotate() - obraca-
 w jednym stali DOMu wany bÄ™dzie na podstawie nowo zdefinio- jÄ…ca obrazek o 90° - oraz move() przesuwa-
CiekawostkÄ… aplikacji jest zastosowanie jÄ™- wanej przestrzeni nazw. jÄ…ca obrazek w pionie i w poziomie wyko-
zyka SVG, jako silnika do przekształceń W omawianej aplikacji SVG, jak już rzystują również podstawianie wartości do
obrazka. SVG  język skalowalnej grafiki wspomniałem, służy do przekształceń grafi- atrybutu transform - wykorzystując odpo-
wektorowej, udostępnia bowiem wiele funk- ki rastrowej (obrazka) wyświetlanej w głów- wiednie funkcje zaimplementowane w ję-
cji pozwalających na przekształcanie grafi- nym oknie programu. Funkcje przekształca- zyku SVG.
ki rastrowej. Funkcje te nie są tak rozbudo- jące zawarte są w bibliotece JavaScript. Nie Powyższe zastosowanie SVG w XUL to
wane, jak w przypadku profesjonalnych pro- jest to odpowiednie miejsce na omawianie w sumie ambitne zadanie. Nie zaprzeczam,
gramów graficznych, lecz i tak oferują du- języka SVG, lecz nie sposób wspomnieć o że opanowanie przekształceń w SVG na po-
żo więcej, niżby można było się spodziewać mechanizmach zastosowanych w aplika- ziomie kodu wymaga nieco wiedzy. Zdecy-
po aplikacji napisanej z użyciem dostępnych cji. Więcej informacji na temat SVG można dowanie prostszym przykładem jest zasto-
nam metod. znalezć w artykule SVG do tworzenia stron sowanie SVG do tworzenia elementów gra-
Zastosowanie SVG we wnętrzu kodu internetowych, który ukazał się na łamach ficznych, np. ikon na przyciskach. Takie za-
XUL jest dobrym przykładem na możliwość magazynu Linux+ w kwietniu 2007 roku (nr stosowanie SVG prezentuje kod na Listin-
mieszania różnych odmian XML w jednym 4/2007 (120)). Na potrzeby obecnego arty- gu 3. W przykładzie tym przycisk o id svg-
dokumencie. W omawianym przypadku SVG kułu omówię jedynie zastosowane w przy- button wykorzystuje możliwość wstawiania
znalazło się we wnętrzu XUL. Stosując taką kładowej aplikacji funkcje. obiektu pomiędzy znaczniki otwierający i
mieszankę należy pamiętać o zdefiniowaniu Pierwsza z funkcji przekształcających zamykający elementu button w XUL. W
przestrzeni nazw języków stosowanych w da- obrazek zaimplementowana jest w funkcji tej konkretnej sytuacji wstawionym obiek-
nym dokumencie, a następnie odwoływanie JavaScript o nazwie magnify(). Funkcja ta, tem jest kod SVG przedstawiający ikonę
się do nich przy użyciu przedrostków, np. korzystając z modelu DOM wyszukuje ele-  trzy nakładające się na siebie koła. Do-
ment o żądanym ID  w tym wypadku ele- łożenie do tego prostego skryptu zmienia-
xmlns="http://www.w3.org/2000/svg"> cym obrazek do dokumentu. Funkcja ma- ny przycisk. Utworzenie takiego przyci-
gnify() wstawia do tego elementu atrybut sku stosując zwykła grafikę rastrową by-
transform - odpowiedzialny za przekształce- łoby również możliwe, lecz zdecydowanie
nia obiektów w SVG. W tym przypadku wy- mniej efektowne.
konujemy przekształcenie na podstawie ma- Wydawać by się mogło, że utworzenie ta-
Aby uniknąć konieczności ciągłego stoso- cierzy. Więcej na ten temat można znalezć kiego przycisku, zawierającego grafikę SVG,
wania przedrostka przestrzeni nazw, moż- w dokumentacji poświęconej przekształ- jest bardzo trudne  wymagające wiedzy na
na zdefiniować ją ponownie w elemencie ceniom w SVG na stronach W3C: http: temat SVG. Okazuje się jednak, że efektowne
nadrzędnym dla danego kodu i uczynić ją //www.w3.org/TR/SVG/coords.html#Trans- elementy graficzne SVG możemy umieszczać
w aplikacji XUL posługując się dowolnym
edytorem grafiki SVG, np. programem Ink-
scape. W tym celu należy stworzyć grafikę,
posługując się szerokim wachlarzem narzę-
dzi dostarczanych przez program. Na koniec
grafikÄ™ zapisujemy w czystym formacie SVG.
Teraz pozostało nam jedynie otworzenie pli-
ku *.svg w edytorze tekstowym, skopiowanie
kodu znajdującego się pomiędzy znacznikiem
otwierajÄ…cym i zamykajÄ…cym i wkleje-
nie go w wybrane miejsce dokumentu XUL,
np. pomiędzy znacznik otwierający i zmyka-
jÄ…cy