Rozšírte si Firefox a Thunderbird - sami! - 7 (XHTML)

21. 9. 2005 | Matej Gagyi | Programování | 5485×

Krátka príručka k jazyku XUL. Kmeňové elementy, správcovia rozloženia, kontajnery, základné vizuálne prvky.

Na úvod

Aby bol nasledujúci dokument zrozumiteľný a sebestačný, na úvod zhrniem základné poznatky o XUL.

XUL (XML User interface Language) je multiplatformový jazyk na tvorbu GUI, ktorý sa v mnohom podobá na XHTML. XUL je ukladaný v XML formáte, vzhľad a čiastočne aj správanie XUL dokumentov sú riadené kaskádovými štýlmi (CSS).

Logika aplikácií je programovaná pomocou JavaScriptu. JavaScript a XUL sú prepojené pomocou DOM (Document Object Model).

Tento dokument nemá byť rozsiahla referenčná príručka, ale má poukázať na niektoré XUL elementy, ktoré neboli spomenuté ani v seriáli, ani v tutoriále.

Rozsiahlu referenčnú príručku k jazyku XUL nájdete na stránkach XUL planet. Doplňujúce informácie o všetkých technológiách Mozilly nájdete na stránkach Mozilla developer center.

Kmeňové elementy

XUL sa používa na mnoho účelov. Niekedy v ňom definujeme hlavné okno aplikácie, inokedy dialóg, alebo ho využijeme pri tvorbe webovej aplikácie. XUL dokumenty môžu mať rozličné kmeňové elementy a každý z nich ponúka rozličné funkcie.

<page>

Je to najjednoduchší typ XUL dokumentu. Je určený pre použitie v dokumentoch, ktoré sa majú zobraziť vo vnútri iných dokumentov. Toto vkladanie sa vykonáva pomocou tagu <iframe src="URL dokumentu"/>. (Používa sa napríklad pri tvorbe bočného panelu pre Firefox).

<window>

Element <window> je primárne určený na tvorbu hlavného okna aplikácie, ale jeho funkcie sú užitočné aj pri tvorbe webových aplikácií. (Napríklad atribút title umožňuje nastaviť titulok stránky, alebo okna aplikácie.)

<dialog>

Podobný elementu <window>, ale má odlišné správanie, ktoré záleží na platforme. Tento element je užitočný pri tvorbe dialógových okien. (Ponúka napríklad niekoľko atribútov, ktoré vytvoria tlačidlá OK, Cancel a pod.).

<wizard>

Podobný elementu <window>. Tentokrát ide o ešte sofistikovanejší nástroj na tvorbu sprievodcov, takzaných wizardov. Sprievodca sa skladá z niekoľkých stránok, medzi ktorými sa užívateľ pohybuje vpred, prípadne vzad. Jednotlivé stránky sú vnorené do elementov <wizardpage>. (Pohyb medzi stránkami nemusí byť lineárny a môžete definovať komplexnejšiu navigáciu.)

<overlay>

Overlay združuje ľubovolný počet fragmentov XUL dokumentu, ktoré sa môžu byť vložené do iných XUL dokumentov. Princíp fungovania XUL overlayov som vysvetlil v 2. diele seriálu.

<window>

Najčastejšie používaný koreňový element XUL dokumentov.

Atribúty:

height

Výška okna.

hidechrome

Hodnota true spôsobí, že okno nebude mať orámovanie.

id

Používa sa na identifikáciu okna v skriptoch a na vytvorenie mena súboru s ikonou pre dané okno

screenX

Poloha okna na obrazovke podľa osi X.

screenY

Poloha okna na obrazovke podľa osi Y.

sizemode

Stav okna. Akceptuje hodnoty:

maximized

Maximalizované

minimized

Minimalizované

normal

Normálny

title

Titulok okna.

width

Šírka okna

windowtype

Druh okna. Niekedy sa používa na rozlíšenie napríklad "editora" a "prehliadača", alebo pri združování okien rovnakého typu.

Správcovia rozloženia

Rozloženie textu a obrázkov sa v HTML kedysi riešilo pomocou tabuliek. Dnes sa na tento účel používajú kaskádové štýly CSS a výsledkom sú prispôsobivejšie HTML stránky. V XUL je tiež možné použiť CSS, ale výsledkom sú zväčša ovládacie prvky, ktoré lietajú po hlavnom okne.

XUL jazyk preto používa špeciálne elementy ako praktických správcov rozloženia. Pomocou nich je možné ovládacie prvky umiestňovať na jednu pevnú pozíciu.

<box>, <hbox> a <vbox>

Element <box> môže obsahovať ľubovolný počet ovládacích prvkov XUL. Prvky budú usporiadané vodorovne zľava do prava.

Element <hbox> je identický s <box>om. Element <vbox> je identický s <box>om, až na to, že ovládacie prvky usporiadáva zvyslo z hora nadol.

Element <box> nemá žiadne špeciálne atribúty, okrem atribútov spoločných pre všetky XUL elementy. Za zmienku stoja dva z nich:

orient

Orientácia usporiadania ovládacích prvkov. Akceptuje dve hodnoty:

horzontal

Horizontálna orientácia (zľava doprava).

vertical

Vertikálna orientácia (zhora nadol).

pack

Poloha prvkov v kontajneri. Akceptuje tri hodnoty:

start

Na začiatku (v horizontálnom <box>e budú všetky prvky posunuté čo najviac naľavo, vo vertikálnom nahor).

center

V strede.

end

Na konci (vpravo, alebo dole).

<stack> a <deck>

Elementy <stack> a <deck> umiestňujú ovládacie prvky jeden nad druhý. Rozdiel medzi nimi je ten, že <stack> zobrazí všetky elementy naraz a tie sa budú navzájom prekrývať a <deck> zobrazí stále iba jeden z nich.

Element <deck> má jeden atribút:

selectedIndex

Poradové číslo práve zobrazeného ovládacieho prvku. Prvý ovládací prvok v poradí má číslo 0.

Element <deck> má v JavaScripte jednu metódu:

selectedPanel

Ukazovateľ na element práve zobrazovaného ovládacieho prvku.

<tabbox>

Element <tabbox> je manažér záložiek (on má na starosti napríklad viac panelové prehliadanie vo Firefoxe). Element <tabbox> by mal obsahovať elementy <tabs> a <tabpanels>. V elemente <tabs> by ďalej mali byť elementy <tab> a v každom z nich obsah jednotlivých záložiek. V elemente <tabpanels> majú byť umiestnané elementy <tabpanel> a každý z nich má obsahovať obsah jednotlivých tabov.

eventnode

Určuje, ktoré ovládacie prvky môžu byť označené, aby bolo možné použiť navigáciu medzi záložkami pomocou klávesnice. Akceptuje tri hodnoty:

parent

Klávesové skratky bude možné použiť vždy, keď neskončia zachytené pri inom ovládacom prvku. (Klávesová skratka je udalosť a udalosti sa šíria po dokumente, kým ich niekde JavaScript nezachytí).

window

Klávesové skratky budú použiteľné, pokiaľ bude okno aplikácie aktívne.

document

Klávesové skratky budú funkčné, len ak bude označený niektorý ovládací prvok vo vnútri aktuálneho panelu (aktuálneho tabu).

handleCtrlPageUpDown

Povoliť klávesovú skratku Ctrl+PageUp (ďalší panel) a Ctrl+PageDown (predchádzajúci panel).

handleCtrlTab

Povoliť klávesovú skratku Ctrl+Tab (ďalší panel).

grid

Element <grid> umiestňuje ovládacie prvky do tabuľky. Okraj tabuľky sa nezobrazuje. Element <grid> by mal obsahovať jeden element <rows> a ten môže obsahovať ľubovolný počet elementov <row>. Každý element <row> je jeden riadok a každý prvok, ktorý sa v ňom nachádza, je umiestnený do jedného stĺpca podľa poradia.

Ak potrebujete ovládať vlastnosti celých stĺpcov, do elementu <grid> môžete umiestniť element <columns> a do neho ľubovolný počet elementov <column>. Takto definujete stĺpce namiesto riadkov.

Ani jeden z uvedených elementov nemá žiadne špeciálne atribúty.

Kontajnery

Kontajnery sú aj všetky kmeňové elementy a správcovia rozloženia, ale tie sú veľmi špecifické. Kontajner je taký XUL element do vnútra ktorého sa vkladajú iné ovládacie prvky. <groupbox> sa nedá zaradiť do žiadnej inej skupiny.

<groupbox>

Element <groupbox> zobrazí okolo svojho obsahu rám s malým nadpisom. Používa sa na zoskupovanie podobných nastavení, alebo informácií na dialógoch.

Nadpis je určený vnoreným elementom <caption>. Text nadpisu sa vkladá do atribútu label.

Element <groupbox> nemá žiadne špeciálne atribúty. Element <caption> má nasledujúce atribúty:

accesskey

Určuje písmeno, po ktorého stlačení sa nadpis označí. Toto správanie je závislé na platforme.

crop

Ak je text nadpisu príliš dlhý na to, aby ho bolo možné celý zobraziť v okne, časť textu bude odrezaná. Tento atribút určuje, ktorá časť nadpisu zostane viditeľná. Môže mať styri hodnoty:

start

Začiatok

center

Stred

end

Koniec

none

Záleží na hodnote polohovania textu CSS šablónou.

image

Adresa obrázku, ktorý sa v nadpise zobrazí.

label

Text nadpisu.

tabindex

Určuje poradie nadpisu pri označovaní ovládacích prvkov pomocou tabulátora.

Základné vizuálne prvky

<spacer>

Element <spacer> sa vôbec nezobrazuje a vytvára v XUL dokumente prázdne miesto. Vizuálne oddeluje ovládacie prvky.

Nemá žiadne špeciálne atribúty.

<label>

Label zobrazuje text. Zväčša sa používa na popisovanie ovládacích prvkov, alebo indikáciu nejakého stavu, alebo oznámenia.

accesskey

Určuje písmeno, po ktorého stlačení sa mal nadpis označiť. Toto správanie je závislé na platforme.

control

Mal by obsahovať hodnotu atribútu id elementu, ku ktorému je <label> priradený. Ak užívateľ klikne na zobrazený text, priradený element bude označený.

crop

Ak je text nadpisu príliš dlhý na to, aby ho bolo možné celý zobraziť v okne, časť textu bude odrezaná. Tento atribút určuje, ktorá časť nadpisu zostane viditeľná. Môže mať styri hodnoty:

start

Začiatok

center

Stred

end

Koniec

none

Záleží na hodnote polohovania textu CSS šablónou.

disabled

Hodnota true spôsobí, že text bude vykreslený šedou farbou a nebude vôbec reagovať.

value

Zobrazený text.

A ešte pár rád

1. Ak potrebujete zobrazovať zoznam, použite element <tree>, nie <listbox>. <listbox> nie je o nič jednoduchší ako <tree>a je omnoho pomalší. Ukážku jednoduchého použitia <tree> nájdete v Tutoriáli AbcLinuxu 7.
2. Naštudujte si ako sa používajú XUL RDF šablóny a využívajte automaticky generované dokumenty. RDF šablóny sú rýchle a pomerne jednoducho použiteľné. RDF je rosiahla téma a vyžadovala by si samostatný seriál.

3. Do XUL dokumentov môžete vkladať XHTML kód. XUL a XHTML tagy musíte rozlíšíť pomocou XML namespace:

   <?xml version="1.0"?>

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  xmlns:html="http://www.w3.org/1999/xhtml"
  title="AbcLinuxu.cz - Rozsirte si Firefox a Thunderbird - sami! - 7 - príklad XHTML">
 
 <label value="XUL Label"/>
 <html:p>XHTML odstavec</html:p>
 
</window> Pozri príklad XHTML online.

• mozext07-example-box.xul
• mozext07-example-grid.xul
• mozext07-example-groupbox.xul
• mozext07-example-spacer.xul
• mozext07-example-stack-deck.xul
• mozext07-example-xhtml.xul

Záver

Do nového tutoriálu som pridal dlho sľubovaný bočný panel napísaný v XUL. JavaScript som optimalizoval a teraz je rozšírenie naozaj rýchle. Ak vás zmeny zaujímajú stiahnite si Tutoriáli AbcLinuxu 7.

Ďalší diel seriálu bude náš posledný. Do ukážkového rozšírenia pridám vyhladávacie políčko pre bočný panel a možno vylepším otváranie odkazov. Seriál ukončím zhrnutím nových vlastností pripravovaného Firefoxu 1.5, poradím ako pri vývoji rozšírení postupovať samostatne a ako vedomosti získané v tomto seriáli uplatniť pri vývoji pre Thunderbird.

       

Komentáře

[Marián André]

Obsahovo vynikajúci seriál, škoda len, že ho kazí toľko chýb. Dnes sa toho nazbieralo nezvykle veľa (nepozorný korektor?):

• štýlmy -> štýlmi
• navigáciou -> navigáciu
• z ľava -> zľava
• staja -> stoja
• prekríva -> prekrýva
• ednu -> jednu
• nastarosti -> na starosti
• kontainer -> kontajner
• seriále -> seriáli

Čiarky v súvetiach, mäkčene som sem nevypisoval. Poprosím nebrať ako buzeráciu, len ako snahu o nápravu a možno zlepšenie jazykovej úrovne.

[Ja]

Čo dodať. Autora poznám z IRC. Už tam to bola katastrófa. Snáď, však pochopí, že erudovaný človek okrem IT musí ovládať i slovenský jazyk.

[coccyx]

katastrofa -y -rof ž.

náhle veľké nešťastie, pohroma: prírodná, živelná katastrofa, odvrátiť katastrofu; hovor. expr. to je katastrofa nečakaná nepríjemnosť;

http://www.slex.sk/onlines/slex/index.asp

a hlavne slovensky jazyk s madarskym prizvukom :o)

[ivdo]

Taky mám raději lingvisticky dokonalé články, ale tyhle opravy a kritiky by snad měly probíhat soukromě s autorem. Diskuse k článkům by se měly týkat tématu. Tímto se omlouvám za svůj off-topic a děkuji autorovi sa přínosný seriál.

[Yin]

Ja som autor...

Nepamätám si, že by som bol poledný polrok na inom IRC kanále ako irc.mozilla.org#firefox... ale nepamätám sa, pretože mám krátku pamäť.

Na nešťastie som bol počas písania tohto dielu veľmi zaneprázdnený a tak som ho kontroloval len po semantickej stránke. Z môjho prvého článku DevFS vs. udev som sa poučil a svoje články dôkladne kontrolujem... Aj ja milujem dokonalú gramatiku, len si ju nevšímam.

[Robert Krátký]

Omlouvám se za to, chyby hned opravím. Obyčejně už teď na slovenských článcích spolupracuji s někým "od vás", ale tentokrát jsem nikoho nezastihl online.