mozilla

Nakładki

Artykuł opisuje nakładki, które mogą być użyte do oddzielenia wspólnej zawartości.

Używanie nakładek

W prostej aplikacji tylko z jednym oknem, generalnie masz tylko jeden plik XUL, wraz z plikiem skryptu, arkuszy stylu, pliku DTD i być może obrazka. Będzie to przechowywane w oddzielnych plikach XUL. Bardziej skomplikowane aplikacje będą zawierały wiele okien i okienek dialogowych.

Aplikacja, która ma kilka okien będzie miała liczne elementy lub części interfejsu użytkownika, które są wspólne dla każdego okna. Na przykład, każdy komponent Mozilli dzieli pewien wspólne elementy. Pewien menu są podobne, takie jak menu Narzędzia i Pomoc, paski boczne są podobne, a każde okno dzieli pewien wspólne globalne skróty klawiaturowe.

Można obsłużyć to poprzez implementację tych podobnych elementów i funkcji w każdym pliku, które są konieczne. jednak, byłoby to trudne do pielęgnacji. Jeśli zdecydujesz się zmienić coś, będziesz musiał zmienić to w wielu miejscach. Zamiast tego lepszym byłoby zastosowanie mechanizmu, który pozwoli ci oddzielić wspólne elementy i mieć je podzielone między oknami. Możesz zrobić to korzystając z nakładek.

Wewnątrz nakładki, możesz umieścić elementy które są dzielone między wszystkimi oknami, które używają nakładki. Elementy te są dodane do okna w lokacji określonej przez ich id.

Na przykład, powiedzmy, że chcesz stworzyć menu pomocy, które jest współdzielone przez kilka okien. Menu pomocy będzie umieszczone w nakładce, używając tego samego języka XUL, którego używasz normalnie. Menu zostanie nadany atrybut id dla jego identyfikacji. Każde okno zaimportuje nakładkę używając dyrektyw, która zostanie opisana za chwilę. Aby użyć menu pomocy zdefiniowanego w nakładce, musisz tylko dodać pojedynczy element menu z tą samą wartością atrybutu id jakiego użyłeś w nakładce. Menu to nie musi zawierać potomków ponieważ te będą umieszczone w nakładce.

Kiedy okno z nakładką jest otwarte, elementy w oknie i nakładce z tymi samymi id są połączone razem. Potomkowie dopasowanych elementów są dodane na końcu zbioru potomków w elemencie okna/ Atrybuty, które są obecne w elemencie nakładki będą zastosowane w elemencie zakładki będą zastosowane do elementów okna. Szczegóły te będą wyjaśnione później bardziej szczegółowo.

Our find files example

Aby zaimportować nakładkę do okna, użyjemy składni opisanej poniżej. Dodamy to bliżej góry okna dialogowego "Znajdź pliki" pliku XUL.

<?xul-overlay href="chrome://findfile/content/helpoverlay.xul"?>

Linia ta powinna być dodana gdzieś bliżej góry tego pliku, zazwyczaj przed deklaracjami DTD. W powyższym przykładzie, okno importuje nakładkę przechowywaną w pliku helpoverlay.xul.

Sam nakładka jest plikiem XUL zawierającym elementy nakładki zamiast elementu okna. Możesz importować nakładki z wnętrza nakładek. Nakładki mogą również mieć swoje własne arkusze stylu, DTD i skrypty. Poniższy przykład pokazuje proste menu Pomocy przechowywane w nakładce.

Simple help menu stored in an overlay

Źródła

<?xml version="1.0"?>

<!DOCTYPE overlay SYSTEM "chrome://findfile/locale/findfile.dtd">

<overlay id="toverlay"
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<menu id="help-menu">
  <menupopup id="help-popup">
    <menuitem id="help-contents" label="&contentsCmd.label;"
              accesskey="&contentsCmd.accesskey;"/>
    <menuitem id="help-index" label="&indexCmd.label;"
              accesskey="&indexCmd.accesskey;"/>
    <menuitem id="help-about" label="&aboutCmd.label;"
              accesskey="&aboutCmd.accesskey;"/>
  </menupopup>
</menu>

</overlay>

Element overlay otacza zawartość nakładki. Używa on tej samej przestrzeni nazw co pliki okna XUL. Wewnątrz nakładki zdefiniowano pojedyncze menu z trzema elementami. Kod id tego menu jest help-menu. Oznacza to, że jego zawartość będzie dodana do okna gdzie istnieje podobny element z tą samą wartością id. Jeśli taki element nie istnieje, ta część nakładki jest ignorowana. Nakładka może zawierać tak wiele elementów jak to konieczne. Zauważ, że nakładka musi również objąć plik DTD. Użyjemy tego samego tu jako okna głównego, ale zwykle tworzymy oddzielny plik DTD dla każdej nakładki.

Następnie musimy dodać menu pomocy do okna dialogowego findfiles. Robiąc to dodajemy menu z takim samym id we właściwej lokacji. Najbardziej prawdopodobnym miejscem jest to po menu edycji.

  <menu id="edit-menu" label="Edit" accesskey="e">
    <menupopup id="edit-popup">
      <menuitem label="&cutCmd.label;" accesskey="&cutCmd.accesskey;"
                key="cut_cmd"/>
      <menuitem label="&copyCmd.label;" accesskey="&copyCmd.accesskey;"
                key="copy_cmd"/>
      <menuitem label="&pasteCmd.label;" accesskey="&pasteCmd.accesskey;"
                key="paste_cmd" disabled="true"/>
    </menupopup>
  </menu>
  <menu id="help-menu" label="&helpCmd.label;"
        accesskey="&helpCmd.accesskey;"/>
</menubar>

Tutaj element menu pomocy nie zawiera żadnej zawartości. Pozycje z menu są pobierane z nakładki ponieważ id są dopasowane. Możemy potem importować nakładkę w innym oknie i tylko ma zawartość menu pomocy zdefiniowanego w jednym miejscu. Musimy również dodać pewne linie do pliku DTD:

 <!ENTITY helpCmd.label "Help">
 <!ENTITY helpCmd.accesskey "h">
 <!ENTITY contentsCmd.label "Contents">
 <!ENTITY indexCmd.label "Index">
 <!ENTITY aboutCmd.label "About...">
 <!ENTITY contentsCmd.accesskey "c">
 <!ENTITY indexCmd.accesskey "i">
 <!ENTITY aboutCmd.accesskey "a">
 <!ENTITY findfilehelpCmd.label "Find files help">
 <!ENTITY findfilehelpCmd.accesskey "f">
Image:overlay1.jpg

Użyjemy również te dwa ostatnie wejścia za chwilę.

Zamiast tego możemy dalej zredukować ilość kodu wewnątrz okna przez wstawienie atrybutów w menu pomocy (w tym przykładzie label i accesskey) w nakładce. Atrybuty te będą dziedziczone przez ten element. Jeśli element i okno określają ten sam atrybut, wartość w nakładce będzie przesłaniać wartość elementu.

Zmieńmy menu pomocy w ten sposób.

findfile.xul:

<menu id="help-menu"/>

helpoverlay.xul:

<menu id="help-menu" label="&helpCmd.label;"
      accesskey="&helpCmd.accesskey;">

Duplicate content

Jeśli mamy zawartość wewnątrz okna XUL i w nakładce, zawartość okna będzie używana a zawartość nakładki będzie dołączona na końcu. Demonstruje to poniższy przykład:

stopandgo.xul:

<?xml version="1.0"?>

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

<window title="Stop and Go" id="test-window"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <?xul-overlay  href="chrome://findfile/content/toverlay.xul"?>

  <box id="singlebox">
    <button id="gobutton" label="Go"/>
    <button id="stopbutton" label="Stop"/>
  </box>

</window>

toverlay.xul:

<?xml version="1.0"?>

<overlay id="toverlay"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <box id="singlebox">
    <button id="backbutton" label="Back"/>
    <button id="forwardbutton" label="Forward"/>
  </box>

</overlay>
Image:overlay2.jpg

W tym przykładzie, pole z identyfikatorem singlebox zawiera swoją zawartość. Elementy są połączone a dwa przyciski z nakładki są dodane na końcu pola. Możemy użyć tej techniki również w okienku dialogowym znajdź pliki:

Our find files example

We can use this technique in the find files dialog also:

Image:overlay3.jpg
findfile.xul:

  <menu id="help-menu">
    <menupopup id="help-popup">
      <menuitem id="help-findfiles" 
                label="&findfilehelpCmd.label;" 
                accesskey="&findfilehelpCmd.accesskey;"/>
    </menupopup>
   </menu>
</menubar>

Atrybut id elementu menupopup również dopasowuje się w nakładce. Powoduje to, że pozycje będą łączone w tym samym menu wyskakującym. Nakładki będą łączyć pozycje z tymi samymi id nawet, jeśli są one wewnątrz innych elementów.

Umieszczanie elementów nakładkowych

Jednakże możemy chcieć mieć pozycje menu z nakładki w poprzednim przykładzie umieszczone na początku menu zamiast na końcu. XUL dostarcza mechanizmu, który pozwala ci nie tylko umieścić je na początku ale wstawia pewne pozycje na górze a pozostałe na dole (lub gdziekolwiek pośrodku) . Pozwala to na nakładanie menu, pasków narzędzi i innych elementów graficznych w dokładnej lokacji jaką sobie życzysz.

Aby wykonać to użyj atrybutu insertbefore w menuitems. Te wartości powinny być id elementu jakie chcesz wstawić przed pozycją. Ewentualnie, możesz użyć atrybutu insertafter aby wskazać jaki element wstawić po. Atrybuty te wpływają na elementy tylko jeśli atrybuty są dodane. Jeśli jeden element jest 'wstawiony przed', pozostałe elementy są dodane na końcu. Jeśli chcesz mieć wszystkie te elementy pojawiające się przed, musisz wstawić atrybut insertbefore we wszystkich elementach.

Dodatkowo, możesz użyć atrybutu position, jeśli chcesz ustalić określoną pozycję indeksu. Pierwsza pozycja to 1.

Powiedzmy, że chciałeś, aby pozycje Contents i Index z poprzedniego przykładu pojawiły się przed pozycją pomocy "Znajdź pliki" a pozycja About pojawiła się po. Zrobimy to dodając atrybut insertbefore w pozycjach menu Content i index. Dla kompletu możemy dodać atrybut insertafter również w menu About, ale nie jest to konieczne ponieważ domyślnie pojawia się ono na końcu.

W powyższym przykładzie menu pomocy, id pozycji menu to help-findfiles. Zatem, musimy ustawić atrybuty insertbefore dla tego id. Poniższy przykład pokazuje zmiany:

<menupopup id="help-popup">
  <menuitem id="help-contents" label="Contents" insertbefore="help-findfiles"/>
  <menuitem id="help-index" label="Index" insertbefore="help-findfiles"/>
  <menuitem id="help-about" label="About..."/>
</menupopup>

Teraz kiedy okno używającej nakładki pomoc (takiej jak okno dialogowe znajdź pliki) jest otwarte, wystąpi co następuje:

  • Dla wszystkich bezpośrednich pozycji w nakładce, to znaczy wszystkich potomków elementu nakładki, element w oknie bazowym jest znaleziony

z tym samym id. Jeśli nie znaleziono go ten element w nakładce jest ignorowany. W tym przykładzie, znajdujemy elementy z id help-menu i help-popup.

  • Jeśli znajdziemy, atrybuty w elemencie nakładki są kopiowane do znalezionego elementu.
  • Potomkowie elementu nakładki, w typem przypadku każda pozycja menu, są wstawiane jako potomkowie elementu okna bazowego.
    • jeśli element nakładki zawiera atrybut insertafter, element jest dodawany po elemencie w oknie bazowym z id ,które pasuje do wartości tego atrybutu.
    • jeśli element nakładki zawiera atrybut insertbefore, element jest dodany przed elementem w oknie bazowym z id pasującym do wartości tego atrybutu.
    • jeśli element nakładki zawiera atrybut position, element jest dodany pod indeksem bazującym na określonym w tym atrybucie.
    • w przeciwnym razie, element jest dodany jako ostatni potomek.

W rzeczywistości, wartości insertbefore i insertafter mogą być listami oddzielonymi przecinkami, w przypadku czego pierwsze id znalezione na liście w oknie jest używane do określania pozycji.

Our Find files example so far: Źródła

Removing elements

If you would like to remove an element that is already in the XUL file, create elements with removeelement attribute. For example, we could remove the About menu entry.

<menupopup id="help-popup">
  <menuitem removeelement="true" id="help-about">
</menupopup>

Next, we'll find out to apply overlays to windows in different packages.

Autorzy i etykiety dokumentu

Etykiety: 
Contributors to this page: fscholz, teoli, Ptak82, Mgjbot
Ostatnia aktualizacja: fscholz,