Rozšírte si Firefox a Thunderbird - sami! - II

9. 8. 2005 | Matej Gagyi | Programování | 9162×

Ako sme si povedali v minulom diele, vývojári Mozilly chceli vytvoriť čo možno najmodulárnejšiu aplikáciu, ako sa len bude dať. Špeciálne na tvorbu GUI preto navrhli jazyk XUL (XML User-interface Language).

XUL priniesol do Mozilly úplne nový rozmer rozšíriteľnosti, ktorý vývojári horlivo využívajú. XUL je praktický aj pri vývoji webových stránok a aplikácií, ako je napríklad Google: http://www.google.com/mozilla/google.xul.

XUL je témou dnešného článku, ale nie jeho cieľom. XUL je len prostriedkom, ktorý nám umožní posunúť sa v sérii ďalej. Mozilla skrýva množstvo zaujímavých technológií a nepochybujem, že XUL bude pre vás vynikajúce lákadlo.

Základy XUL

XUL sa z časti podobá na DHTML. Vzhľad jednotlivých ovládacích prvkov určujú CSS štýly a o ich interaktivitu sa stará JavaScript. XUL je navrhnuté na tvorbu GUI, preto ponúka odlišnú funkcionalitu.

XUL súbor predstavuje aplikačné okno, alebo dialóg, alebo iný druh okna, ktorý môže existovať nezávisle na okolí. Aplikačné okno je tvorené správcami rozloženia a ovládacími prvkami usporiadanými do hierarchickej štruktúry.

Jedna aplikácia často pozostáva z viacerých okien a dialógov, ktoré pozostávajú z podobných častí. Zbytočné duplikovanie kódu XUL redukuje technológiou XUL overlay, čo sa dá preložiť ako "vrstvenie XUL".

Rovnaké komponenty okien sa ukladajú do samostatných súborov XUL s koreňovým elementom <overlay>. Do tohto súboru sa vkladajú len tie časti okna, ktoré sú spoločné.

Spoločné časti XUL okien sú označené identifikátorom, atribútom id v koreňovom tagu. V okne, v ktorom chcete použiť XUL overlay, uložíte rovnaký element s rovnakým atribútom id. Gecko engine preloží XUL definície okien vrstvami definovanými v XUL overlayoch.

To, ktoré XUL okná sa majú preložiť ktorými XUL overlaymi, je definované v RDF súboroch, ktoré sa nachádzajú vo všetkých aplikáciách a rozšíreniach. Okrem znovupoužiteľnosti kódu XUL overlay umožňuje aj rozšíriteľnosť GUI.

Vzhľad XUL aplikácií

XUL je predovšetkým multi-platformová technológia a v implementácii Mozilly je viazaná len na renderovaciu vrstvu Gecko enginu - presne tak, ako aj HTML. Tým pádom odpadá množstvo kódu, ktorý by sa staral o GUI, všetkú prácu robí Gecko.

RenderOvanie XUL je zabezpečené. Teraz chceme vyťažiť čo najviac funkcionality z konceptu, ktorý sme zvolili. Vzhľad HTML riadia CSS štýly, prečo by teda aj XUL nemohlo byť riešené rovnako?

Odpoveď znie: CSS nie je vhodné na tvorbu GUI, pretože na ňu nebolo dizajnované a neponúka potrebnú funkcionalitu. Programátori by boli čiastočne obmedzení. Riešenie je však rozšíriť štandardné CSS, pričom jadro zostane nedotknuté a plne vyhovujúce štandardu.

Mozilla používa CSS na definovanie všetkých vlastností GUI prvkov, ktoré sú pomocou CSS ľahko realizovateľné. Najzaujímavejším príkladom je rozširovanie hotových ovládacích prvkov pomocou jazyka XBL.

Správu rozloženia CSS nerobí, na to sú správcovia rozloženia, ktorých je v XUL dosť. Vďaka tomu jednotlivé ovládacie prvky GUI neskáču po okne ako text na HTML stránkach. Nie je to však pravidlo a polohovanie pomocou CSS je možné vykonávať aj v XUL.

Logika XUL aplikácií

Ovládacie prvky XUL majú svoje správanie už naprogramované. Ale dva rovnaké prvky by môžu mať rôznu funkcionalitu. Tá je implementovaná v JavaScripte. Tlačidlá v XUL majú atribút oncommand, ktorého hodnota je JavaScript, zvyčajne len volanie externej funkcie, ktorá sa vykoná po jeho stlačení.

Externý JavaScript sa do XUL vkladá elementom <script>, čo si ukážeme v tutoriáli. Logika XUL je založená na vysielaní udalostí, na podnet ktorých sú spúšťané funkcie implementované v JavaScripte.

Rozširovanie správania ovládacích prvkov XUL je realizované prepájaním udalostí s JavaScriptom, ktoré je na nižšej úrovni realizované pomocou jazyka XBL. V ďalších dieloch si všetky aspekty JavaScriptu v rozšíreniach vysvetlíme podrobne.

Tutoriál

V dnešnom tutoriáli si ukážeme, ako sa vytvárajú tlačidlá pre nástrojový panel a pridáva do XUL JavaScript. Nebudeme sa pokúšať vylepšiť rozšírenie z predchádzajúceho dielu, lebo to bude dobrá domáca úloha.

Z tutoriálu z minulého týždňa ste si mohli všimnúť, že rozšírenie sa zle odinštaluje. Ak tomu chceme predísť a vydať plne funkčnú stabilnú verziu rozšírenia, musíme všetky dáta v adresári chrome zabaliť programom zip.

Naša nová adresárová štruktúra vyzerá takto:

install.rdf
chrome/abc2/content/contents.rdf
chrome/abc2/content/abc2overlay.xul
chrome/abc2/content/abc2.js
chrome/abc2/content/abc2.css
chrome/abc2/content/abc2.png
chrome/abc2/content/abc2-small.png

Ak dáta rozšírenia niesú zbalené v jar súbore, FF bude mať problémy s odinštalovaním rozšírenia. Napísal som pre vás Makefile, ktorý celý balík prevytvorí sám. Stačí ak do Makefilu napíšete meno rozšírenia, aby vedel, aký súbor má vytvoriť:

PKGNAME=abc2

Nasledovné výpisy prosím skopírujte do súborov, ktorých názov zodpovedá ich nadpisu:

install.rdf

<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
                xmlns:em="http://www.mozilla.org/2004/em-rdf#">

        <Description about="urn:mozilla:install-manifest">
                <em:name>Abc tutorial 2</em:name>
                <em:id>abctutorial-2</em:id>
                <em:version>0.1</em:version>
                <em:description>Tutoril AbcLinuxu.cz</em:description>

                <em:file>
                        <Description about="urn:mozilla:extension:file:abc2.jar">
                                <em:package>content/</em:package>
                        </Description>
                </em:file>

                <em:targetApplication>
                        <Description>
                                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
                                <em:minVersion>0.9</em:minVersion>
                                <em:maxVersion>1.0+</em:maxVersion>
                        </Description>
                </em:targetApplication>
        </Description>
</RDF>

contents.rdf

<?xml version="1.0"?>

<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:chrome="http://www.mozilla.org/rdf/chrome#">

  <RDF:Seq about="urn:mozilla:package:root">
    <RDF:li resource="urn:mozilla:package:abc2"/>
  </RDF:Seq>

  <RDF:Description about="urn:mozilla:package:abc2"
        chrome:displayName="Abc Tutorial 2"
        chrome:name="tabmix"
        chrome:description="Multi-functions for tabbed browsing."
        chrome:extension="true"/>

  <RDF:Seq about="urn:mozilla:overlays">
    <RDF:li resource="chrome://browser/content/browser.xul"/>
  </RDF:Seq>

  <RDF:Seq about="chrome://browser/content/browser.xul">
    <RDF:li>chrome://abc2/content/abc2overlay.xul</RDF:li>
  </RDF:Seq>

</RDF:RDF>

abc2overlay.xul

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://abc2/content/abc.css" type="text/css"?>

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

        <script type="application/x-javascript" src="chrome://abc2/content/abc.js"/>

        <toolbarpalette id="BrowserToolbarPalette">
                <toolbarbutton
                        id="abcToolbarButton"
                        type="menu-button"
                        class="toolbarbutton-1"
                        oncommand="abcAction();"
                        label="abclabel"/>
        </toolbarpalette>
</overlay>

abc2.js

var count = 0;

function abcAction() {
        count++;
        alert("Ahoj, po " + count + "-raz.");
}

abc2.css

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#abcToolbarButton {
        list-style-image: url(chrome://abc2/content/abc2.png);
}

toolbar[iconsize="small"] #abcToolbarButton {
        list-style-image: url(chrome://abc2/content/abc2-small.png);
}

abc2.png, abc2-small.png

Záver

Dnešný diel našej série o rozširovaní aplikácií založených na Gecko engine bol viac teoretický. XUL je veľmi rozsiahly jazyk a ponúka množstvo možností, ktoré nie som schopný v priebehu týždňa spísať do zrozumiteľnej príručky.

Keď si o metódach rozširovania Mozilly porozprávame viac, niektorý diel venujem referenčným príručkám špecifických vlastností technológií používaných v Mozille.

V ďalšom diele si ukážeme lepší JavaScript, ktorý už bude pracovať s HTML dokumentami, ktoré užívateľ zobrazuje v prehliadači. Okrem toho sa budeme venovať výhradne tutoriálu a každý riadok, ktorý napíšeme, aj poriadne vysvetlíme.

Dnes som vynechal komentáre a vysvetlivky k uvedenému kódu vám nechávam na domácu úlohu. Posnažte sa kód pochopiť a o týždeň si budete môcť skontrolovať, či ste postupovali správne.

Dúfam, že som vás potešil a že sa vám ďalší diel bude páčiť.

       

Komentáře

[nvj]

Ako sme si povedali v minulom dieli ...

[karol matis]

"V ďalšom diely"... správne má byť v ďalšom dieli. Je to úplne dole v závere.

[Robert Krátký]

Díky za upozornění. Nakonec jsem se na základě rady (díky Dušan) a Slovníku slovenského jazyka rozhodl pro kompromis: http://www.forma.sk/onlines/slex/index.asp?key=diel.

[Jů Helé]

Nebuc mudry, dobre ? :DDDD

[Yin]

Prajem pekný deň milý čitatelia.

Práve sa rodí tretí diel seriálu a ten štvrtý už má svoju tému vybranú. Ak Vás zujíma nejaká konkrétna téma, o ktorej by ste sa chceli dočítať, napíšte mi a ja ju zaradím do piateho dielu.

Piaty diel bude kratší a omnoho zrozumiteľnejší ako všetky ostatné a nemusí byť zaujímavý pre každého. Nechcem veľmi miešať témy, ale keď musím, tak aspoň tie, ktoré sa budú hodiť Vám.