Portál AbcLinuxu, 2. dubna 2024 14:10

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

21. 9. 2005 | Matej Gagyi
Články - Rozšírte si Firefox a Thunderbird - sami! - 7 (XHTML)  

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.

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.

Seriál Rozšírte si Firefox a Thunderbird - sami! (dílů: 8)

První díl: Rozšírte si Firefox a Thunderbird - sami!, poslední díl: Rozšírte si Firefox a Thunderbird - sami! - 8 (Záver).
Předchozí díl: Rozšírte si Firefox a Thunderbird - sami! - 6 (Lokalizácia)
Následující díl: Rozšírte si Firefox a Thunderbird - sami! - 8 (Záver)

Související články

Rozšírte si Firefox a Thunderbird - sami!
Rozšírte si Firefox a Thunderbird - sami! - II
Rozšírte si Firefox a Thunderbird - sami! - 3
Rozšírte si Firefox a Thunderbird - sami! - 4 (JavaScript)
Rozšírte si Firefox a Thunderbird - sami! - 5 (Nastavenia)
Rozšírte si Firefox a Thunderbird - sami! - 6 (Lokalizácia)
Rozšírte si Firefox a Thunderbird - sami! - 8 (Záver)
Rozšiřte si Firefox!
Rozšiřte si Thunderbird!
Rozhovor s Pavlem Cvrčkem z týmu CZilla
Sunbird
Thunderbird I
Thunderbird II
Firefox
Liber Mozillae aneb tajemná Kniha Mozilly
Kde známé projekty ke svým jménům přišly...

Další články z této rubriky

LLVM a Clang – více než dobrá náhrada za GCC
Ze 4 s na 0,9 s – programovací jazyk Vala v praxi
Reverzujeme ovladače pro USB HID zařízení
Linux: systémové volání splice()
Programování v jazyce Vala - základní prvky jazyka

Diskuse k tomuto článku

21.9.2005 01:05 Marián André | skóre: 10 | blog: Qblog
Rozbalit Rozbalit vše Jazykové okienko
Odpovědět | Sbalit | Link | Blokovat | Admin
Obsahovo vynikajúci seriál, škoda len, že ho kazí toľko chýb. Dnes sa toho nazbieralo nezvykle veľa (nepozorný korektor?): Č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.
O mne.
21.9.2005 01:39 Ja
Rozbalit Rozbalit vše Re: Jazykové okienko
Č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.
21.9.2005 06:46 coccyx
Rozbalit Rozbalit vše Re: Jazykové okienko
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)
21.9.2005 08:58 ivdo | skóre: 6 | blog: ivdo | Ostrava 49° 50' 52" N, 18° 17' 01" E
Rozbalit Rozbalit vše Re: Jazykové okienko
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 avatar 21.9.2005 20:18 Yin | skóre: 39 | blog: Yinotopia | Slovesnko, Košice
Rozbalit Rozbalit vše Re: Jazykové okienko

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.

Nikdy nie je tak zle, aby to jeden poharik nemohol ešte zhorsiť.
21.9.2005 08:18 Robert Krátký | skóre: 94 | blog: Robertův bloček
Rozbalit Rozbalit vše Re: Jazykové okienko
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.

ISSN 1214-1267, (c) 1999-2007 Stickfish s.r.o.