Tworzenie okna

Przez cały kurs będziemy tworzyć proste narzędzie do wyszukiwania plików. Najpierw jednak powinniśmy zapoznać się z podstawową składnią pliku XUL.

Tworzenie pliku XUL

Plik XUL może posiadać dowolną nazwę, ale powinien mieć rozszerzenie .xul. Prosty plik XUL ma następującą postać:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window
    id="findfile-window"
    title="Znajdź pliki"
    orient="horizontal"
    xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 ...
</window>

To okno pozostanie puste dopóty, dopóki nie będzie zawierało jakichkolwiek elementów interfejsu użytkownika. Elementy te dodamy w kolejnych artykułach. Poniżej znajduje się analiza powyższego przykładu kodu, linijka po linijce:

Otwieranie okna

Istnieje kilka metod, których możemy użyć do otwarcia okna XUL. Jeśli znajdujesz się w okresie programowania, wystarczy tylko wpisać URL (czy tochrome:,file: czy inny typ URL) do paska adresu w oknie przeglądarki Mozilla. Powinieneś być także zdolnym do podwójnego kliknięcia w plik w swoim menedżerze plików, który przypisze pliki XUL do połączenia z Mozillą. Okno XUL wyświetli się w oknie przeglądarki jako nowe okno, lecz jest też często dostatecznie, podczas stawiania pierwszych kroków w programowaniu.

Poprawnym sposobem do otworzenia okna jest zastosowanie JavaScript. Nie potrzebna jest żadna nowa składnia, jako, że możemy zastosować funkcję window.open() jako jeden dokument HTML. Jednakże, jedna dodatkowa flaga, nazywająca się 'chrome' jest potrzebna do wskazania przeglądarce dokument chrome do otwarcia. Otworzymy okno bez paska narzędzi i menu, reszta okna będzie wyświetlana jak w normalnym oknie przeglądarki. Składnia została opisana poniżej:

window.open(url,windowname,flags);

gdzie: flags stanowi flagę "chrome", tak jak w tym przykładzie:

window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300");

Możemy użyć parametru linii poleceń '-chrome' do określenia pliku XUL, który zostanie otwarty w momencie uruchomienia Mozilli. Jeśli nie zostało to określone, zostanie otwarte okno domyślne (zazwyczaj jest to okno przeglądarki). Na przykład, możemy otworzyć okno dialogowe Znajdź pliki na dwa następujące sposoby:

mozilla -chrome chrome://findfile/content/findfile.xul 
 
mozilla -chrome resource:/chrome/findfile/content/findfile.xul

Jeśli uruchomisz tą komendę z linii poleceń (w zależności od tego, jakiej platformy używasz), okienko dialogowe Znajdź pliki zostanie otwarte domyślnie zamiast okna przeglądarki Mozilla. Oczywiście, ponieważ nie mamy dodanych jakichkolwiek elementów UI do okna, zobaczysz tylko okno. W kolejnych tematach dodamy różne dodatkowe elementy.

Zobacz, chociaż efekt następującego otwarcia okna zakładek:

mozilla -chrome chrome://communicator/content/bookma...rksManager.xul

Jeśli używasz Firefoksa, sprawdź:
firefox -chrome chrome://browser/content/bookmarks/b...rksManager.xul

Argument '-chrome' nie nadaje plikowi jakichkolwiek dodatkowych uprawnień. Zamiast, to powód określający plik do otwarcia jako okno bez jakiegokolwiek przeglądarkowego chrome, takich jak pole adresowe lub menu. Tylko URL chrome posiada dodatkowe przywileje.

W następnym artykule dodamy przyciski do okna.

1. <?xml version="1.0"?>
   Deklaracja pliku XML. Dodajemy tą linijkę na początku każdego pliku XUL, tak jak znacznik HTML wstawiamy na początku pliku HTML.
2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
   Linijka ustalająca arkusz stylów używany dla pliku. Jest to składnia, którą plik XML używa do importowania arkuszy stylów. W tym przypadku importuje style znajdujące się w chrome://global/skin. Nie odwołując się do konkretnego pliku przeglądarka Mozilla, w tym przypadku, wybierze plik all-important global.css. Plik ten zawiera wszystkie domyślne deklaracje wszystkich elementów XUL. Ponieważ XML nie posiada żadnej dokumentacji dotyczącej sposobu, w jaki sposób powinny być jego elementy wyświetlane. Ogólnie, umieszczamy tą linię na samej górze każdego pliku XUL. Możemy także importować inne arkusze stylów stosując prostą składnię. Zauważ, że normalnie zaimportowany zostanie globalny arkusz stylów, z wewnątrz Twojego własnego pliku arkusza stylu.
3. <window
   Deklarujemy, że będziemy opisywać okno window. Znacznik ten ma analogiczne znaczenie do BODY z języka HTML, który otacza całą zawartość strony. W znaczniku window można umieścić wiele atrybutów (w przykładzie zawarte są cztery). Każdy z nich umieszczony został w oddzielnej linii, głównie po to, aby kod był przejrzysty.
4. 'id="findfile-window"'
   Atrybut id jest używany jako identyfikator, dzięki któremu skrypty mogą odwoływać się do okna. Przeważnie id dodaje się do każdego elementu. Nazwa identyfikatora może być dowolna.
5. title="Znajdź pliki"
   Atrybut title określa tekst, który jest umieszczony na pasku tytułowym okna. W tym przypadku zostanie wyświetlone: Znajdź pliki.
6. orient="horizontal"
   Atrybut orient określa położenie elementów w oknie. Wartość horizontal ustala poziome położenie elementów w oknie. Wartością domyślną orient jest vertical, które to określa położenie elementów w kolumnie.
7. xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   Deklaracja przestrzeni nazw (namespace) w języku XUL, którą powinieneś umieścić w elemencie window, aby wskazać, że wszyscy jego potomkowie należą do XUL-a. W rzeczywistości URL ten nie jest nigdy wczytany. Stanowi informację dla przeglądarki Mozilla, że ma do czynienia ze standardową składnią języka XUL.
8. ...
   W tym miejscu deklarowane będą elementy takie jak: przyciski, menu lub inne komponenty interfejsu użytkownika.
9. </window>
   Na końcu pliku zamykamy znacznik window.