Proste paski menu

This is an archived page. It's not actively maintained.

W tym artykule zobaczymy, jak utworzy膰 prosty pasek menu.

Tworzenie menu

W XUL menu mo偶na stworzy膰 na r贸偶ne sposoby. Najprostszym z nich jest dodanie paska menu wraz z wierszem menu na pasku, w taki sam spos贸b, jak maj膮 inne programy. Mo偶emy tak偶e utworzy膰 menu wyskakuj膮ce. Mo偶liwo艣ci wykorzystania menu s膮 zale偶ne od liczby r贸偶nych element贸w, pozwalaj膮cych Ci utworzy膰 prosty pasek menu lub menu wyskakuj膮ce. Pozycje w menu mo偶emy dostosowa膰 bardzo prosto. Widzieli艣my je w cz臋艣ci kursu, pokazuj膮cego, jak doda膰 listy rozwijane stosuj膮c element menulist. W artykule tym opiera膰 b臋dziemy si臋 na zdobytej do tej pory wiedzy.

Paski menu s膮 cz臋sto tworzone podobnie jak toolbar. Pasek menu mo偶e by膰 umieszczony wewn膮trz toolbar i po jego lewej stronie pojawi si臋 strza艂ka, kt贸ra pozwoli na jego rozwini臋cie lub zwini臋cie. Takie menu b臋dzie dzia艂a艂o, tak jak ka偶dy inny pasek narz臋dzi. XUL posiada kilka specjalnych element贸w menu, kt贸re dostarczaj膮 typowej funkcjonalno艣ci menu.

Poni偶ej znajduje si臋 pi臋膰 element贸w po艂膮czonych z paskiem menu i jego menu, kt贸re s膮 wykorzystane poni偶ej, a w dalszej kursu cz臋艣ci om贸wione s膮 ich szczeg贸艂y:

menubar
Pojemnik na wiersze menu.
menu
Wbrew nazwie jest to tylko tytu艂 menu na pasku menu. Ten element mo偶emy umie艣ci膰 na pasku menu lub mo偶emy go umie艣ci膰 osobno.
menupopup
Wyskakuj膮ce menu, kt贸re pojawia si臋 po naci艣ni臋ciu elementumenu. Zawiera w sobie list臋 z poleceniami menu.
menuitem
Pojedyncze polecenie menu. Powinno by膰 umieszczone w menupopup.
menuseparator
Pozioma linia oddzielaj膮ca elementy paska menu. Powinna by膰 umieszczona w menupopup.

Menu mo偶na dostosowa膰 do swoich potrzeb, umieszczaj膮c w nich dowolne elementy. Odnosi si臋 to do wszystkich platform, opr贸cz Macintosh, kt贸ry posiada swoje w艂asne specjalne menu na g贸rze ekranu kontrolowane przez system. Podczas tworzenia w艂asnego menu miej na uwadze, 偶e specjalne regu艂y styl贸w lub element贸w nieb臋d膮cych elementami menu, kt贸re s膮 umieszczone w menu, mog膮 nie zosta膰 zaimplementowane.

Przyk艂ad prostego paska menu

殴r贸d艂a Podgl膮d

grafika:menubar-ex1.png
<toolbox flex="1">
  <menubar id="sample-menubar">
    <menu id="file-menu" label="Plik">
      <menupopup id="file-popup">
        <menuitem label="Nowy"/>
        <menuitem label="Otw贸rz"/>
        <menuitem label="Zapisz"/>
        <menuseparator/>
        <menuitem label="Zako艅cz"/>
      </menupopup>
    </menu>
    <menu id="edit-menu" label="Edycja">
      <menupopup id="edit-popup">
        <menuitem label="Cofnij"/>
        <menuitem label="Przywr贸膰"/>
      </menupopup>
    </menu>
  </menubar>
</toolbox>


Jak widzimy, zosta艂 tu stworzony prosty pasek menu z elementem menubar. Znajduj膮 si臋 w nim dwa elementy menu (Plik i Edycja), u艂o偶one poziomo. Tworz膮 one dwa tytu艂y, po naci艣ni臋ciu, kt贸rych pojawi si臋 odpowiednie menu wyskakuj膮ce menupopup. Ich rozmiary dostosowuj膮 si臋 tak, aby zmie艣ci艂y si臋 zawarte w nich polecenia. Polecenia te s膮 z kolei tworzone poprzez menuitem.

W celu oddzielenia grup kilku pozycji w menu stosujemy element menuseparator, b臋d膮cy separatorem.

Element menubar

menubar jest polem zawieraj膮cym menu. Zwr贸膰 uwag臋, 偶e zosta艂 on umieszczony wewn膮trz toolbox. Pasek menu nie posiada specjalnych atrybut贸w, ale jest on typu pude艂kowego. Znaczy to, 偶e powinni艣my utworzy膰 pionowy pasek menu ustawiaj膮c atrybut orient na warto艣膰 vertical.

grafika:menubar-ex2.png

Element menu zazwyczaj jest umieszczany w pasku menu, ale niekoniecznie musi tak by膰. Jednak jego wygl膮d b臋dzie si臋 wtedy jeszcze r贸偶ni艂. Obrazek ukazuj膮cy aktualny przyk艂ad sprawia wra偶enie, jakby nie by艂 w pe艂ni paskiem menu (jest jeszcze wczesne stadium projektowania tego偶 paska).

Element menu

Elementy menu zachowuj膮 si臋 podobnie, jak elementy przycisk贸w button. Cz臋艣膰 atrybut贸w jest taka sama, a opr贸cz tego istnieje kilka dodatkowych:

id
Unikatowy identyfikator.
label
Etykieta, kt贸ra powinna pojawi膰 si臋 jako napis na menu, np. Plik lub Edytuj.
disabled
Atrybut typu logicznego (boolean), okre艣laj膮cy element menu jako wy艂膮czony, gdy posiada przypisany true. Mo偶e przyjmowa膰 warto艣ci typu boolean - true i domy艣lnie ustawion膮 false.
accesskey
Jest to klawisz, kt贸ry u偶ytkownik mo偶e nacisn膮膰, aby aktywowa膰 pozycj臋 menu. Litera, kt贸ra zazwyczaj pokazuje znak podkre艣lenia w tytule menu. Menu w Mozilli wygl膮da jak atrybut label i nast臋pnie dodajemy podkre艣lenie znaku do u偶ywanego w etykiecie znaku. Z tego powodu powinno si臋 u偶ywa膰 okre艣lanego i istniej膮cego znaku w jakiej艣 tre艣ci.

Element menupopup

Element menupopup tworzy wyskakuj膮ce menu zawieraj膮ce komendy. Jest ono typu pude艂kowego, domy艣lnie ustawione pionowo. Mo偶na zmieni膰 je na poziome, wtedy menuitem b臋d膮 wy艣wietlone w rz臋dzie. Zazwyczaj menupopup zawiera elementy typu menuitem i menuseparator, ale mo偶esz tak偶e wstawi膰 elementy jakiego艣 typu (nie b臋d膮 one jednak wtedy wy艣wietlane pod Macintoshem).

Element menuitem

Element menuitem jest podobny do elementu menu i cz臋艣膰 jego atrybut贸w jest identyczna:

id
Unikatowy identyfikator.
label
Etykieta, kt贸ra powinna pojawi膰 si臋 na menu jako napis, np. Otw贸rz lub Zapisz.
disabled
Atrybut typu logicznego (boolean), okre艣laj膮cy element menu jako wy艂膮czony, gdy posiada przypisany true. Mo偶e przyjmowa膰 warto艣ci typu boolean - true i domy艣ln膮 false.
accesskey
Jest to klawisz, kt贸ry u偶ytkownik mo偶e nacisn膮膰, aby aktywowa膰 pozycj臋 menu. Litera, kt贸ra zazwyczaj pokazuje znak podkre艣lenia w tytule menu. Menu w Mozilli wygl膮da jak atrybut label i nast臋pnie dodajemy podkre艣lenie znaku do u偶ywanego w etykiecie znaku. Z tego powodu powinno si臋 u偶ywa膰 okre艣lanego i istniej膮cego znaku w jakiej艣 tre艣ci.
acceltext
Okre艣la klawisz skr贸tu, kt贸ry widoczny jest obok tekstu komendy menu. Nic nie 艂膮czy tych skr贸t贸w ze skr贸tami w menuitem. Zobacz artyku艂 o skr贸tach klawiaturowych.

Element menuseparator

Element menuseparator nie posiada specjalnych atrybut贸w. Tworzy po prostu poziom膮 lini臋 pomi臋dzy poprzednim, a nast臋pnym elementem.

W nast臋pnym artykule poznamy dodatkowe mo偶liwo艣ci menu.