XUL (ou XML User Interface Language, pronuncia-se zool) é o futuro das interfaces gráficas para desktop, popularmente chamadas de GUI (Graphical User Interface). Essa declaração pode ser um tanto ousada, mas nem tanto, considerando que até mesmo a Microsoft está criando uma nova linguagem baseada em XML (a XAML). Fácil de escrever (necessita-se apenas de um simples editor de texto), fácil de alterar e perfeitamente apropriado para o desenvolvimento GUI, a XUL, por ser baseada em XML, também é muito fácil de aprender. Mas, ao contrário do XML, XUL é mais do que uma simples linguagem markup para descrever a interface com o usuário.

Sua utilização pode ser estendida a outros tipos de aplicações como: ferramentas para gerenciamento de conteúdo e templates, editores HTML, interpretadores de scripts e integração com Web Services. Contudo a XUL não está restrita apenas a aplicações desktop, pois já existem aplicações Java baseada em XUL rodando também em servidores como o Luxor.

Antes de tudo, a linguagem XUL é uma parte integrante do browser Mozilla, portanto se faz necessário utilizar o mesmo para poder executá-la, podendo este ser baixado no seu site oficial. A programação em XUL separa a interface do usuário em quatro camadas distintas:

• Conteúdo: onde são descritos os elementos da interface, essas descrições se encontram num arquivo de extensão xul;
• Aparência: a apresentação que se encontra num arquivo de extensão .css e em arquivos de imagem (GIF, JPG e PNG);
• Comportamento (behavior): a lógica por trás da interface, que se encontra num arquivo Javascript (extensão js e xbl);
• Locale: as informações necessárias para o correto reconhecimento do idioma em que foi escrita a aplicação.

Uma introdução mais aprofundada no XUL, em português, pode ser adquirida nesse endereço e exemplos de aplicações podem ser vistas aqui. Nesta primeira parte deste artigo vamos construir uma interface básica em XUL para uma calculadora e, na segunda parte, vamos criar a funcionalidade para a mesma. Este exemplo foi testado nos seguintes browsers: Mozila 1.7.2 e Mozilla FireFox 1.0.1. Os requisitos mínimos para se aprender XUL é ter um certo conhecimento básico de HTML, XML e Javascript.

Figura 1. Interface básica: Aplicação Calculadora.

Criando um janela

Vamos começar criando nosso arquivo XUL em um editor de texto de sua preferência. Chamaremos esse arquivo de calculadora.xul. O arquivo XUL mais simples tem a seguinte estrutura:

1    <?xml version="1.0"?>
2    <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
3    <window
4         id="calculadora"
5         title="Calculadora"
6         orient="horizontal"
7         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
8    ...
9    </window>

Esta janela ainda não possui qualquer funcionalidade, contém apenas um frame para os elemento da interface. Adicionaremos os elementos na seção seguinte. Primeiro vamos dar uma olhada na sintaxe básica do arquivo XUL. Abaixo uma descrição linha por linha deste código:

Linha 1 - Declara que este é um arquivo XML. Adicionar esta linha no início do arquivo xul é semelhante a colocar a tag HTML no topo de um arquivo HTML.

Linha 2 - Esta linha é usada para especificar as folhas de estilo (style sheets) utilizadas pelo arquivo. Esta é sintaxe utilizada para importar as folhas de estilo pelos arquivos XML. Neste caso, importamos os estilo que estão no diretório chrome que se encontra na raiz da instalação do Mozilla. Não especificaremos qual o arquivo, para que assim o Mozilla determine quais arquivos serão utilizados. No caso, o arquivo global.css é selecionado. Este arquivo contém todas as declarações default para a maioria dos elementos XUL.

Linha 3 - Declara que estamos descrevendo uma janela. Cada janela de interface do usuário é descrita em um arquivo separado. Esta tag é semelhante à tag BODY no HTML. Vários atributos podem ser colocados na tag window, neste caso existem quatro. No nosso exemplo, cada atributo é colocado em uma linha separada mas esse procedimento não é necessário.

Linha 4 - O atributo id é utilizado em um identificador de modo que a janela possa ser referenciada pelos scripts. Normalmente colocaremos um atributo id em todos os elementos.

Linha 5 - O atributo title descreve o texto que aparecerá na barra de título da janela quando esta é lançada. Nesse caso, o texto Calculadora.

Linha 6 - O atributo orient especifica a organização dos itens na janela. O valor horizontal indica que os itens devem ser dispostos horizontalmente através da janela. Podemos usar o valor vertical, que significa que os itens são dispostos em coluna. Este é um valor default, assim podemos deixar o atributo de fora se desejarmos a orientação horizontal.

Linha 7 - Declara o namespace (coleção de nomes de atributos e tipos de elementos XML) para o XUL, que deve ser colocado em um elemento da janela para indicar que todos os elementos seguintes deste arquivo estão em XUL. Note que esta URL nunca é de fato acessada. Mozilla reconhecerá esta URL internamente.

Linha 8 - Aqui serão declarados os elementos (botões, menus e outros componentes de interface do usuário). Adicionaremos alguns deles a seguir.

Linha 9 - E finalmente, necessitamos fechar a tag window no fim do arquivo.

Criando os elementos

Agora acrescentaremos os elementos da interface, acrescentando o código adicional a partir da linha 8 do código anterior, como segue:

1     <vbox id="root">
2      <groupbox>
3       <caption label="Resultado"/>
4       <text id="display"/>
5      </groupbox>
6      <hbox>
7       <button label="C" command="C" style="width: 150px"/>
8      </hbox>
9      <hbox>
10     <vbox id="buttons">
11       <hbox>
12         <button label="7" command="7" style="width: 50px"/>
13         <button label="8" command="8" style="width: 50px"/>
14         <button label="9" command="9" style="width: 50px"/>
15       </hbox>
16     </vbox>
17     <vbox>
18         <button id="add" label="+" command="add" />
19         <button id="sub" label="-" command="sub" />
20         <button id="mult" label="*" command="mult" />
21         <button id="div" label="/" command="div" />
22   <  /vbox>
23   </hbox>

Segue a descrição linha por linha:

Linha 1 - Declara um tag vbox que cria uma camada vertical e um container para os controles dentro desta tag.

Linha 2 - Declara um elemento groupbox que serve para agrupar vários elementos.

Linha 3 - Cria um elemento caption, ou rótulo, com o texto "Resultado".

Linha 4 - Cria um elemento textbox, uma caixa de texto.

Linha 5 - Fecha a tag groupbox.

Linha 6 - Assim como a tag vbox, a tag hbox também cria uma camada, só que horizontal, e um container para os controles dentro desta tag. Neste caso a tag hbox irá conter nossos botões.

Linha 7 - Cria o elementos buttons (botões) com rótulo "C". Este vai ser nosso botão de Reset da calculadora.O botão tem um atributo command que é utilizado para vincular um botão a um código Java. Quando o usuário clica no botão, o framework XUL inicia um evento a ser processado e este atributo é utilizado para mapear os botões. Os botões possuem também um atributo style utilizado, assim como em CSS, para modelar sua aparência. Nesse caso colocamos o botão com largura de 150 pixels.

Linha 8 - Fecha a tag hbox.

Linha 9 - Abre um novo container horizontal, agora para os botões com os números e sinais de operação.

Linha 10 - Dentro deste abriremos dois containers verticais, um para os números e outro para os sinais de operação.

Linha 11 - Este é um container horizontal para uma linha de botões com os números.

Linha 12, 13 e 14 - Cria os elementos buttons (botões) com rótulo "7", "8" e "9".

Linha 15 - Fecha a tag hbox.

Linha 16 - Fechar a tag vbox.

Linha 17 - Abre um container vertical com uma coluna para os botões com os sinais de operação.

Linha 18, 19, 20 e 21- Cria os botões com os sinais de operação com rótulo "+", "-" e "*" e "/". Note que identificamos cada botão com seu id, pois esses identificadores serão úteis para executar determinados eventos na parte lógica da nossa aplicação.

Linha 22 - Fecha a tag vbox.

Linha 23 - Fechar a tag vbox mais externa.

Figura 2. Organização: Disposição dos containers.

Como se pode ver, o XUL é muito parecido com XML. Na Figura 2, vemos o esquema de organização dos containers, onde os containers numerados como 2 e 3 são os horizontais e os numerados como 1, 4 e 5 são os verticais. Note que na figura não se encontra o groupbox, pois esse se encontra no vbox mais externo. Vamos completar agora o restante da interface, acrescentando mais alguns botões, logo abaixo da linha 15, no código anterior:

<hbox>
       <button label="4" command="4" style="width: 50px"/>
       <button label="5" command="5" style="width: 50px"/>
       <button label="6" command="6" style="width: 50px"/>
</hbox>
<hbox>
       <button label="1" command="1" style="width: 50px"/>
       <button label="2" command="2" style="width: 50px"/>
       <button label="3" command="3" style="width: 50px"/>
</hbox>
<hbox>
       <button label="0" command="0" style="width: 50px"/>
       <button label="." command="dot" style="width: 50px"/>
       <button label="=" command="equal" style="width: 50px"/>
</hbox>

Como essas declarações repetem as do código anterior, não entraremos em maiores detalhes. O código completo para o arquivo XUL está disponível para download.

Abrindo a janela numa página HTML

No estágio de desenvolvimento, podemos apenas digitar a URL em que o arquivo está localizado para executá-lo. Assim se salvarmos nosso arquivo no diretório c:\xul (tomando o Windows como sistema operacional) podemos acessar digitando:

file:///c:/xul/calculadora.xul

na barra de endereços do Mozilla. Contudo, vamos utilizar uma página HTML para abrir nossa pequena aplicação, utilizando a função javascript window.open(). Segue abaixo o HTML que chama nosso XUL:

1 <html>
2 <body>
3   <h1>Interface Básica em XUL</h1>
4   <form>
5   <input type="button" name="open" value="Clique para abrir"
onClick="javascript:window.open("calculadora.xul", "calculadora",
"chrome,width=320,height=200");">
6 </form>
7 </body>
8 </html>

Na linha 5 está a função javascript window.open() vinculada ao método OnClick de um botão. Um flag adicional nos parâmetros da função window.open(), "chrome" indica ao browser que este deve abrir um documento chrome, que é o formato dos arquivos Mozilla. Esse HTML também está disponível para download.

Crie um novo arquivo com esse código e chame-o de calculadora.html, salvando-o no mesmo diretório do arquivo XUL. Isto abrirá a janela sem as barras de ferramentas e menus. Com isso criamos a interface básica para nossa aplicação. Na segunda parte desse artigo, criaremos a funcionalidade para a mesma.