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