Archive for the 'XUL' Category

Complementar XUL amb XHTML

Sunday, October 16th, 2005

XUL és un llenguatge de marques absolutament enfocat a presentar aplicacions però no és en absolut adequat per textos tipus documentació, ajuda, etc..

Com que XUL no és res més que una sintàxi XML ens podem aprofitar de la funcionalitat extensiva d’aquest format i mesclar XUL i XHTML per tal de formatejar adequadament fragments de text dins la nostra aplicació.

Per poder emprar elements XHTML dins un document XUL s’ha de:

  1. Declarar el namespace de l’XHTML
  2. Escriure els elements XHTML amb el prefix escollit pel namespace

És a dir, donat un XUL tal com

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="loremIpsum" title="Lorem Ipsum" orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <description>Lorem Ipsum dolor sit amet...</description>
</window>

Podriem considerar substituir l’element description per un paràgraf XHTML o, fins hi tot afegir un títol de secció mitjançant un h1. El codi quedaria així:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="loremIpsum" title="Lorem Ipsum" orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html=”http://w3.org/1999/xhtml”>
   <html:h1>Un lorem ipsum qualsevol</html:h1>
   <html:p>Lorem ipsum dolor sit amet…</html:p>
</window>

D’aquesta manera podriem arribar a combinar la potència de XUL amb XHTML, SVG, MathML, XForms, etc. sense límit.

Estructura bàsica d’un fitxer

Friday, October 7th, 2005

Els fitxers XUL tenen com a arrel l’element window. Aquest és recomanat que tingui un identificador (id) per tal de manegar els seus nodes còmodament mitjançant el mètode DOM getElementByID.

Com que un fitxer XUL és un XML s’haurà d’iniciar sempre amb la sentència:

<?xml version="1.0" encoding="utf-8"?>

La codificació és opcional i pot no ser utf-8.

Després caldrà vincular els fulls d’estil (CSS) genèrics usant la forma:

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

De la mateixa manera es poden vincular tots els CSS que calguin.

I finalment caldrà declarar l’element arrel del fitxer:


<window
    id="exemple-xul"
    title="titol del fitxer"
    orient="horizontal"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   [...]contingut[...]
</window>

El title serà el text que es mostrarà a la part superior de la finestra, l’orient és l’orientació del fluxe bàsic dels elements i l’xmlns és el namespace del XUL. Si s’utilitzessin més sintàxis s’haurien d’afegir els xmlns corresponents.

El resultat doncs serà:


<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
    id="exemple-xul"
    title="titol del fitxer"
    orient="horizontal"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   [...]contingut[...]
</window>