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-
z
ró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()"/>



id="main"
title="Galeria obrazków"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/ there.is.only.xul" ="window.open('help.xul')"/>
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">


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
nie go w wybrane miejsce dokumentu XUL,
np. pomiędzy znacznik otwierający i zmyka-
jÄ…cy . Ostatecznie modyfikujemy de-
klaracjÄ™ przestrzeni nazw  i gotowe...
A
atwo zauważyć, że JavaScript nie roz-
różnia, który z elementów jest elementem
kodu SVG, a który elementem kodu XUL.
Dla JavaScript wszystkie one sÄ… elementa-
mi, które mają swoje ściśle określone miej-
sce w modelu dokumentu. Podobnie bÄ™-
dzie z każdym innym językiem pochodnym
Rysunek 1. Przykładowa aplikacja napisana w XUL, omawiana w bieżącym artykule
XML, który wprowadzimy do XUL.
52 kwiecień 2008
RozwiÄ…zania
XUL  wieloplatformowy język opisu interfejsu użytkownika  część III
Listing 2. Kod biblioteki funkcji JavaScript obsługujących GUI aplikacji.
var fp = Components.classes["@mozilla.org/filepicker;1
function getFiles()
"].createInstance(nsIFilePicker);
{
fp.appendFilters(nsIFilePicker.filterImages);
try fp.init(window, "Select a File",
{ nsIFilePicker.modeOpen);
netscape.security.PrivilegeManager.enablePrivilege("Uni var res = fp.show();
versalXPConnect"); if (res == nsIFilePicker.returnOK)
} {
catch (e) var path = fp.file.path;
{ var listaElement=document.getElementById("lista");
alert("Brak uprawnien do odczytu / zapisu var newItemEl = document.createElement("listitem
lokalnych plikow"); ");
} var img = document.createElement("image");
var startPath; img.setAttribute("src", path);
var nsIFilePicker = Components.interfaces.nsIFilePic img.setAttribute("width", "200");
ker; img.setAttribute("height", "150");
var fp = Components.classes["@mozilla.org/filepicker;1 img.setAttribute("onclick","setImage();");
"].createInstance(nsIFilePicker); newItemEl.appendChild(img);
fp.init(window, "Select a File", nsIFilePicker.modeG listaElement.appendChild(newItemEl);
etFolder); var image = document.getElementById("svgimg");
var res = fp.show() image.setAttribute("xlink:href", path);
}
if (res == nsIFilePicker.returnOK) }
{
startPath = fp.file.path; function loaddata()
} {
var file = Components.classes["@mozilla.org/file/local; var photos = getFiles();
1"].createInstance(Components.interfaces.nsILocalFile); var listaElement=document.getElementById("lista");
file.initWithPath(startPath); for (i=0;i var entries = file.directoryEntries; {
var Farray = []; var newItemEl = document.createElement("listitem
while(entries.hasMoreElements()) ");
{ var img = document.createElement("image");
var entry = entries.getNext(); img.setAttribute("src", photos[i]);
entry.QueryInterface(Components.interfaces.nsIFi img.setAttribute("width", "200");
le); img.setAttribute("height", "150");
Farray.push(entry.path); img.setAttribute("onclick","setImage();");
} newItemEl.appendChild(img);
return Farray; listaElement.appendChild(newItemEl);
} }
}
function openImage()
{ function setImage()
try {
{ var lista = document.getElementById("lista");
netscape.security.PrivilegeManager.enablePrivilege var image = document.getElementById("svgimg");
("UniversalXPConnect"); var imageSrc = lista.childNodes[lista.selectedIndex].
} childNodes[0].getAttribute("src");
catch (e) image.setAttribute("xlink:href", imageSrc);
{ idx = lista.selectedIndex;
alert("Brak uprawnien do odczytu / zapisu }
lokalnych plikow");
} function magnify()
var path; {
var nsIFilePicker = Components.interfaces.nsIFilePic var image = document.getElementById("svgimg");
ker; var scale = document.getElementById("magnifyScale");
www.lpmagazine.org 53
RozwiÄ…zania
XUL  wieloplatformowy język opisu interfejsu użytkownika  część III
XML w XUL
Listing 2b. Kod biblioteki funkcji JavaScript obsługujących GUI aplikacji
Wielokrotnie podkreślałem, że jedną z na-
var scaleLabel = document.getElementById("scaleValue"); czelnych cech języków pochodnych od
var imageGr = document.getElementById("moveEl"); XML, jest możliwość wzajemnego prze-
scaleLabel.setAttribute("value", scale.value); platania siÄ™ w jednym dokumencie. W po-
var sxy = scale.value/100; przednim rozdziale artykułu omawiałem
imgWidth = 600 * scale.value/100; sytuacjÄ™, gdy SVG jest wtrÄ…cone do kodu
imgHeight = 450 * scale.value/100; XML. Przeglądając kod na Listingu 3. moż-
pozX = (600  imgWidth)/2; na zobaczyć, że znajduje się tam fragment
pozY = (450  imgHeight)/2; kodu w XHTML tworzący tabelę. Z równą
imageGr.setAttribute("transform", "matrix(" + sxy + ",0,0," + sxy + "," + łatwością można stosować każdy inny ele-
pozX + "," + pozY + ")"); ment języka XHTML, jak i każdy inny język
} pochodny XML, np. MathML, czy XForms
(więcej o tych językach m. in. na stronie
function rotate(dir) http://www.w3schools.com).
{ Możliwa jest również sytuacja odwrot-
var image = document.getElementById("rotateEl"); na, kiedy to kod XUL znajduje siÄ™ we-
if(dir == "right") rotation = rotation + 90; wnątrz innego języka XML. Takie rozwią-
else rotation = rotation  90; zanie można odnalez
ć w dokumencie ne-
image.setAttribute("transform", "rotate(" + rotation sted_xul.xhtml, który znajduje się w folde-
+ ")"); rze XUL/przyklad na płycie dołączonej do
} czasopisma. Przy takim rozwiązaniu należy
jednak liczyć się z tym, że nie wszystkie ele-
function mirror(dir) menty XUL będą prawidłowo działały.
{
var image = document.getElementById("rotateEl"); XPCOM
var imageMoveEl = document.getElementById("moveEl"); XPCOM (z ang. Cross Platform Compo-
nent Object Model) to międzyplatformowy
if(dir == "poziom") model komponentów podobnym do mecha-
{ nizmu CORBA znanego z Gnome lub COM
mirrorVal[0] = mirrorVal[0] * -1; firmy Microsoft. W przykładowej aplikacji
pozX = pozX - (imgWidth + 20) * mirrorVal[0]; mechanizm XPCOM został wykorzystany
} do otwierania folderu zawierajÄ…cego grafi-
kę oraz otwieranie pojedynczych plików
if(dir == "pion") { graficznych.
mirrorVal[1] = mirrorVal[1] * -1; Mechanizm otwierajÄ…cy folder z plika-
pozY = pozY - (imgHeight + 20) * mirrorVal[1]; mi graficznymi znajduje siÄ™ w funkcji get-
} Files() (Listing 2.). Pierwsze wiersze ko-
image.setAttribute("transform", "matrix(" + mirrorVal[0] + ",0,0," + du funkcji stanowią kluczowy element całej
mirrorVal[1] + "," + pozX + "," + pozY + ")"); aplikacji. Funkcja
}
netscape.security.PrivilegeManager
function move(dir) { .enablePrivilege("UniversalXPConne
var imageMoveEl = document.getElementById("svgimg"); ct");
if(dir == "up") pozY = pozY  10;
if(dir == "down") pozY = pozY + 10; włącza bowiem możliwość odczytu i zapisu
if(dir == "right") pozX = pozX + 10; plików przez JavaScript za pośrednictwem
if(dir == "left") pozX = pozX  10; przeglądarki internetowej. Jeśli wcześniej
imageMoveEl.setAttribute("transform", "translate(" + pozX + "," + pozY + możliwość taka została zablokowana, poja-
")"); wi siÄ™ stosowny komunikat o braku upraw-
} nień do powyższych czynności.
function nextprev(i) { Pierwszym etapem wykorzystujÄ…cym
var image = document.getElementById("svgimg"); mechanizm XPCOM jest utworzenie nowej
var lista = document.getElementById("lista"); instancji komponentu nsILocalFile, obsłu-
idx = idx + i; gującego operacje wejścia/wyjścia strumie-
var imageSrc = lista.childNodes[idx].childNodes[0].getAttribute("src"); nia z/do pliku.
image.setAttribute("xlink:href", imageSrc);
} var nsIFilePicker = Components.inter
faces.nsIFilePicker;
54 kwiecień 2008
RozwiÄ…zania
XUL  wieloplatformowy język opisu interfejsu użytkownika  część III
Listing 3. Kod prezentujący możliwość mieszania różnych odmian XML w jednym dokumencie.


id="help"
title="Pomoc do galerii obrazków"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:svg="http://www.w3.org/2000/svg">

Nagłówek 1	Nagłówek 2
Komórka 1	Komórka 2

www.lpmagazine.org 55
RozwiÄ…zania
XUL  wieloplatformowy język opisu interfejsu użytkownika  część III
var fp = Components.classes["@mozill użycie więcej niż jednego filtra naraz jed- Styl chrome oględnie rzecz ujmując nie należy
a.org/filepicker1"] nocześnie: do najbardziej porywających, chyba że ktoś lu-
.createInstance(nsIFilePicker); bi minimalizm. Moim zdaniem zmiana wyglÄ…du
fp.appendFilters(nsIFilePicker.filter interfejsu może wpłynąć pozytywnie na komfort
Kolejnym krokiem jest inicjalizacja okna HTML | nsIFilePicker.filterXML); pracy z aplikacjÄ….
dialogowego wyboru pliku. W celu zmiany wyglÄ…du tworzonej aplikacji
Powyższe polecenie tworzy filtr plików prze- XUL najprościej będzie stworzyć własny arkusz
fp.init(window, "Select a File", puszczający jedynie pliki HTML i XML Te- stylów, który zostanie zdefiniowany na począt-
nsIFilePicker.modeGetFolder); raz ustawiamy reakcje na zdarzenie zwiÄ…zane z ku dokumentu XUL zamiast globalnego arkusza
oknem wyboru plików. stylów chrome. W dokumencie tym definiujemy
W tym miejscu warto zwrócić uwagę na wygląd dla poszczególnych komponentów inter-
wartość nsIFilePicker.modeGetFolder, var res = fp.show(); fejsu, podobnie, jak w dokumencie HTML.
która oznacza, że nowo otwarte okno dia- if (res == nsIFilePicker.returnOK){
logowe będzie nastawione na wybór katalo- // kod metody obsługującej XUL  czy warto?
gów, nie zaś plików, które pozostaną w nim zdarzenie} Można zastanowić się, do czego może służyć
nieaktywne. Poza wymienioną wartością w XUL. Z pewnością jest to doskonałe narzędzie
metodzie inicjalizacji okna dialogowego Klasa nsIFilePicker może zwrócić następu- do budowania rozszerzeń dla przeglądarek z
mogÄ… znalez
ć się następujące wartości: jące wartości: rodziny Mozilla. W połączeniu z JavaScript i
XPCOM każdy projekt stoi przed nami otwo-
" modeOpen  tworząc okno do wyboru " returnOK  zwracana w przypadku, gdy rem. XUL może być również wykorzystywa-
pojedynczych plików; użytkownik wybierze plik i naciśnie ne do tworzenia interfejsów aplikacji siecio-
" modeSave  tworzÄ…c okno do wyboru pli- przycisk OK; wych uruchamianych jedynie w przeglÄ…dar-
ku do zapisu (strumienia wyjściowego); " returnCancel  zwracana w przypadku, kach Mozilla, co jest poważnym ogranicze-
" modeOpenMultiple  tworząc okno dialo- gdy użytkownik anuluje wybór pliku; niem dla tego języka. Nie martwiłbym się
gowe wyboru wielu plików jednocześnie. " returnReplace  zwracana jedynie przez jednak tym zbytnio, gdyż już powstają nie-
okno zapisu pliku w przypadku, gdy użyt- zależne projekty, których celem jest stworze-
W przypadku, gdy posługujemy się oknem kownik próbuje nadpisać istniejący plik nie interpretera XUL dla innych przeglądarek
dialogowym wybierającym pliki (pojedyn- (wartość returnOK zostanie zwrócona gdy  Opera, Mozilla, czy nawet Internet Explo-
cze lub wiele naraz), możliwe jest zastoso- użytkownik poda nową nazwę pliku). rer (DXUL  http://wednus.com/Portal:
wanie filtrowania plików. Dokonujemy tego DXUL). Istnieje więc nadzieja, że ten dobry
w następujący sposób: Gdy okno wyboru pliku zwróci wartość retur- język programowania zapanuje także w in-
nOK, we właściwościach klasy nsIFilePicker prze- nych przeglądarkach.
fp.appendFilter("Image chowywany będzie wybrany plik. Dostęp do tego
Files","*.jpg; *.jpeg; *.gif; pliku umożliwia następująca właściwość: Podsumowanie
*.tiff; *.png"); W cyklu trzech artykułów starałem się przybli-
var thefile = fp.file; żyć zasady tworzenia aplikacji z użyciem XUL
W powyższej metodzie tworzymy filtr plików  języka opisu interfejsu aplikacji powstałe-
stosując opisową wersję jak powyżej, wymie- Wartością zwracaną przez powyższą właści- go na bazie XML. Każdy, kto choć trochę zna
niając poszczególne rozszerzenia plików. Moż- wość będzie obiekt nsIFile, który udostępnia się na tworzeniu stron internetowych w HTML
na jednak znacznie uprościć sprawę stosując sta- między innymi właściwość path zwracającą oraz nie są mu obce zasady panujące w XML
łe zaimplementowane w klasie nsIFilePicker: pełną ścieżkę dostępu do pliku: bez problemu poradzi sobie z XUL. Przykła-
dem na to może być opisywana w tym arty-
" filterAll  dozwolone wszystkie pliki; var file_source = thefile.path; kule przykładowa aplikacja  przeglądarka
" filterHTML  wybiera tylko pliki HTML; obrazków. Zdaję sobie sprawę, że może ona
" filterText  wybiera tylko pliki tekstowe; Zaprezentowane powyżej funkcje stanowią je- nie w pełni działać, lecz służy ona jedynie
" filterImages  wybiera tylko pliki z grafiką; dynie niewielki wycinek możliwości mecha- zaprezentowaniu omawianych technik i mo-
" filterXML  wybiera tylko pliki XML; nizmu XPCOM. Poza operacjami na plikach, że być punktem wyjścia do własnych ekspe-
" filterXUL  wybiera tylko pliki XUL; dzięki metodom XPCOM, możliwy jest do- rymentów z XUL.
" filterApps  wybiera tylko pliki aplika- stęp do wszystkich komponentów przeglądarki
cji (wykonywalne).  ustawień, zakładek, a także plików cookies.
O autorze
Stosując jedną z powyższych wartości można Zmiana wyglądu
w łatwy sposób filtrować wybierane pliki, np. interfejsu użytkownika
Autor artykułu, z wykształcenia lekarz we-
Dotychczas tworzone dokumenty za każdym
terynarii, mikrobiolog, pasjonuje siÄ™ Li-
fp.appendFilters(nsIFilePicker.filte razem zawierały odwołanie do domyślnego ar-
nuksem od ponad pięciu lat. Jego ulubio-
rHTML); kusza stylów chrome:
ne dystrybucje to Gentoo i Slackware.
Kontakt z autorem:
Powyższe polecenie tworzy filtr przepusz- madajczak@gmail.com
czający jedynie pliki HTML. Możliwe jest global/skin/" type="text/css"?>
56 kwiecień 2008


Wyszukiwarka