a.xul

La Fundació Mozilla ha publicat les «XUL Accessibility Guidelines» on expliquen de forma detallada com desenvolupar interficies en XUL de forma accessible.

A més a més posen a disposició del públic l’extensió XUL Accessibility Tool que permet validar de forma automàtica alguns dels critèris descrits a les pautes.

Una manera de navegar facilment pel DOM del navegador és emprant el DOM Inspector i cridant: chrome://browser/content/browser.xul.

D’aquesta manera obtenim l’arbre sencer i, per exemple, cercar la jerarquia de nodes per crear una regla CSS per poder afegir al userChrome.css.

Es pot executar el DOM Inspector des del menú d’eines.

Per reposicionar el botó de tancar pestanya del Firefox 2.0 i passar-lo de la dreta a l’esquerra el que cal fer bàsicament és jugar amb l’ordre dels elements que composen la pestanya.

Per fer-ho els CSS de Mozilla tenen la propietat -moz-box-ordinal-group

El codi de les pestanyes es pot veure al fitxer del theme globalBindings.xml i el binding que ens interessa és:

<binding id="tabbrowser-tab" extends="chrome://global/content/bindings/tabbrowser.xml#tabbrowser-tab">
  <content chromedir="&locale.dir;" closetabtext="&closeTab.label;">
    <xul:hbox class="tab-image-left" xbl:inherits="selected"/>
    <xul:hbox flex="1" class="tab-image-middle" align="center" xbl:inherits="selected">
      <xul:stack class="tab-icon">
        <xul:image xbl:inherits="validate,src=image" class="tab-icon-image"/>
        <xul:image class="tab-extra-status"/>
      </xul:stack>
      <xul:label flex="1" xbl:inherits="value=label,crop,accesskey" crop="right" class="tab-text"/>
    </xul:hbox>
    <xul:toolbarbutton anonid="close-button" class="tab-close-button" tabindex="-1"/>
      <xul:hbox class="tab-image-right" xbl:inherits="selected"/>
  </content>
</binding>

Aquest fitxer pot canviar en funció del theme usat.

Afegint el següent codi a l’userChrome.css s’aconsegueix el resultat desitjat:

.tabbrowser-tabs {
  -moz-box-ordinal-group: 2;
}
.tab-image-middle {
  -moz-box-ordinal-group: 2;
}
.tab-image-right {
  -moz-box-ordinal-group: 3;
}
.tab-image-left {
  -moz-padding-start: 12px;
}
.tab-icon  {
  -moz-padding-start: 10px;
  margin-right: -10px;
}

Per gestionar l’userChrome.css es pot utilitzar l’extensió Stylish evitant haver d’entrar al profile.

Mango és un client Jabber en XUL emprant Xulrunner com a intèrpret.

De moment per fer funcionar Mango, cal:

1. Instal·lar Xulrunner.
2. Descarregar el paquet encara anomenat Mozchat.
3. Muntar el paquet segons les instruccions de Deploying XULRunner.

Veient l’exemple del post XUL + SVG: A quick demo sembla que no es pot vincular un SVG en un XUL encara no en sé els motius.

L’opció que mostra l’exemple, afegir el codi SVG en línia amb el XUL, tot i demostrar una de les gràcies de poder mesclar dialectes XML, és un problema ja que no permet una fàcil manipulació dels skins.

Una sèrie de proves fetes mesclant XUL i SVG

Font: Xulfr

Extension Developer’s Extension

Aquesta extensió afegeix unes quantes eines per desenvolupar comodament una extensió en XUL:

Constructor d’extensions

Permet muntar els paquets d’una extensió (jar i xpi) i instal·lar-la rapidament

Editor de install.rdf

Formulari per omplir les dades necessaries del fitxer install.rdf

Javascript Shell

Permet executar javascript de forma interactiva. Al tenir permisos d’execució al chrome es pot experimentar amb XPCOM.

Entorn Javascript

Permet executar fragments de codi. Igual que la Shell de Javascript té permisos d’execució al chrome

Editor XUL

Permet editar fitxers XUL i veure’n el resultat a l’instant.

Editor HTML

Permet editar HTML i veure’n el resultat a l’instant

Recàrrega del chrome

Permet recarregar el chrome sense haver de reiniciar el navegador.

El XULRunner 1.8.0.1 ja està disponible. Es considera la primera versió estable preview release

Font: Benjamin Smedberg

New features for extension developers in Firefox 1.5

Un llistat de funcionalitats a tenir en compte pels desenvolupaments basats en Firefox 1.5.

Font: Asa Dotzler - Firefox and More

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.