George Alexandre Sexta-feira, 08 de abril de 2005
Elementos XUL
A maioria dos elementos XUL são bem conhecidos daqueles que programam para desktop. Caixas de texto, botões, listas e painéis são comuns em linguagens como Java Swing, Visual C++, Delphi e Visual Basic. Entretanto, os elementos XML possuem um diferencial importante por possuírem uma declaração mais simples. O que, consequentemente, pode ser entendido também como uma maneira mais simples de programar. Esse raciocínio pode muito bem ser estendido aos elementos de orientação que vimos anteriormente.
A linguagem XUL, além disso, nos permite ainda trabalhar com uma ampla gama de outros elementos além daqueles já conhecidos na programação GUI conhecida. Para ilustrar a utilização de elementos XUL, construiremos um gerenciador de conteúdo básico. Mas antes faremos uma pequena explanação sobre os elementos que utilizaremos em nossa aplicação.
Elementos XUL
Em artigos anteriores já vimos alguns XUL como caixas (boxes) e elementos de agrupamentos (groupbox). Um box nos permite dividir a janela em uma série de caixas que podem ser combinadas de diferentes maneiras, criando disposições as mais diversas, seja horizontalmente, seja verticalmente (hbox e vbox). Ao combinar uma série de caixas, espaçadores, separadores e elementos com atributos flex, podemos controlar o layout de uma janela de uma maneira bem adaptável.
Veremos aqui alguns outros elementos muito utilizados em XUL, que são:
- Tabbox - são elementos muito utilizados em páginas tabuladas ou páginas com guias. Na verdade, o tabbox envolve cinco elementos: tabbox - que é o elemento mais externo, ou seja, o container da guia; tabs - o elemento mais interno que contém as guias dispostas em fileira; tab - a guia propriamente dita; tabpanels - um container de páginas; tabpanel - o corpo de uma única página.
- Splitter - nada mais é do que um separador entre duas seções. Ele permite o reajuste do tamanho das seções separadas. Quando um splitter contém um elemento grippy dentro dele, ele pode ser expansível para qualquer um dos lados dependendo do atributo collapse do elemento splitter.
- Iframe - um frame interno onde pode ser carregado um outro XUL ou uma página HTML. Seu atributo src é utilizado para especificar o conteúdo do frame.
- Browser - como o próprio nome já diz, é um navegador para páginas HTML que podem ser acessadas através de umas URL. É similar ao iframe com exceção de que anexa a ele informações de histórico de navegação e outros métodos adicionais.
- Listbox - uma lista de ítens. Esses ítens pode ser apresentados como linhas dispostas em uma ou em múltiplas colunas.
- Toolbox - ou barra de ferramentas. Como o tabbox, também é um container para elementos mais internos como: toolbar - um container de botões em fileira; toolbaritem - um item numa barra de ferramentas; toolbarbutton - uma fileira de botões interno a um toolbar.
- Trees - são lista tabulares ou hierárquicas que permite apresentar texto em linhas ou colunas, com grande maleabilidade. Linhas e colunas podem ser aninhadas umas dentro das outras. Esse elemento será visto com detalhes mais à frente.
O gerenciador de conteúdo
A estrutura de nosso gerenciador de conteúdo será a seguinte:
- um gerenciador de templates, onde serão listados os templates (modelos de páginas) existentes dentro de nosso site, como pode ser visto na figura 1;
- um navegador, para visualizarmos os templates;
- uma pagina de pesquisa, para encontramos facilmente as páginas publicadas,como pode ser visto na figura 2;
- e um editor de texto HTML, para criarmos o conteúdo para os templates.
Figura 1. Gerenciador de Conteúdo: clique para ampliar.
Figura 2. Gerenciador de Conteúdo: clique para ampliar.
De modo geral o código que conterá todos esses módulos pode ser resumido da seguinte maneira:
1 <?xml
version="1.0"?>
2 <?xml-stylesheet href="chrome://global/skin/"
type="text/css"?>
3 <script type="application/x-javascript"
src="elementos.js"/>
4 <window
5 id="Elementos"
6 title="Elementos"
7 orient="horizontal"
8 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
9 <hbox flex="1">
10 <tabbox
style="width: 200px">
11 ...
12 </tabbox>
13 <splitter
collapse="before" resizebefore="closest" resizeafter="grow">
14 <grippy
/>
15 </splitter>
16 <vbox>
17 <tabbox
flex="1" >
18 ...
19 </tabbox>
20 <vbox
align="center">
21 ...
22 </vbox>
23 </vbox>
24 </hbox>
25 </window>
Esse será nosso código-mestre XUL, onde entrarão outros códigos. Segue uma explicação linha a linha:
- Linha 1 até linha 9 é a estrutura familiar de declaração de uma janela, se necessário recapitule os artigos sobre estrutura básica do XUL.
- Linha 9 declara um elemento de orientação horizontal hbox, setando um valor para seu atributo flex. Esse atributo é muito utilizado nos elementos XUL para possibilitar um melhor aproveitamento do espaço, tornando, como o próprio atributo sugere, o elemento mais adaptável ao layout da página.
- Linha 10 declara o elemento tabular tabbox. Aqui ficará o gerenciador de templates. Damos a ele um comprimento fixo de 200 pixels. Note também a presença do atributo flex. Esse elemento tabular estará dentro de um elemento de orientação vertical. O conteúdo desses elementos será acrescido nas linhas 11 e 18 respectivamente.
- Linha 13, temos um elemento splitter, que nada mais é do que uma divisória entre os elementos. Esse elemento tem alguns atributos interessantes como collapse, resizebefore e resizeafter, que fazem que o tamanho do elemento possa ser alterado interativamente pelo usuário.
- Linha 14, como visto anteriormente, o elemento grippy permite a expansão das caixas separadas por um splitter
- Linha 17 declara um tabbox. Dentro dele ficará o navegador e também nossa página de pesquisa. Esse elemento também terá dimensões variáveis (notar o atributo flex)
- Linha 20, declara, logo abaixo do elemento tabular, outro elemento de orientação vertical, onde ficará nosso editor HTML (a ser inserido na linha 21)
Gerenciador de templates
O gerenciador de templates lista as páginas que estão dentro do nosso site. Antes de criarmos nosso box tabular, é interessante entender que, por padrão, as guias do painel tabular ficam acima do painel. Isso pode ser observado na maioria das aplicações GUI, de modo que o conteúdo do box é disposto internamente com as guias e em seguida com os painéis. As guias são referenciadas pelo elementos tabs e os painéis pelo elemento tabpanels, como a seguir:
1 <tabs>
2 <tab
label="Seções" />
3 <tab
label="Artigos" />
4 </tabs>
5 <tabpanels
flex="1" >
6 <listbox
id="listainterna" style="width:18em" onselect="setFrame();">
7 <listitem
value="home" label="Home" selected="true"
/>
8 <listitem
value="entrevista" label="Entrevistas" />
9 <listitem
value="artigos" label="Artigos" />
10 <listitem
value="noticias" label="Noticias" />
11
</listbox>
12 <iframe
type="content-primary" src="tree.xul" />
13 </tabpanels>
Eses código será acrescido na linha 11 do código-mestre. Linha por linha:
- Linha 1 declara o elemento tabs que é um container para as guias de página.
- Linha 2 e 3 as guias são chamadas de "Seções" e "Artigos".
- Linha 5 declara os painéis onde estarão contidos nossos elementos internos.
- Linha 6 criamos um listbox, atribuindo seu id como "listainterna". No evento onselect desse elemento declaramos uma função Javascript, para futuramente criarmos uma funcionalidade para esta listbox.
- Linhas 7, 8, 9 e 10 são declarados os elementos desta lista.
- Linha 12 temos um iframe que carrega em si um outro XUL, chamado de "tree.xul". Esse XUL conterá nosso elemento tree, que será visto mais adiante
- Linha 13 fecha nosso tabpanels
O conteúdo do arquivo tree.xul, ainda que não possa ser tratado aqui, mostrará uma árvore de elementos encadeados na segunda guia de página da janela, como pode ser visto na Figura 2. Note ainda que os ítens de nossa lista são estáticos, ou seja, fixos. No entanto, como veremos mais adiante, existem maneiras dentro do XUL de incluir dinamicamente ítens tanto em listas como em árvores (trees). O conteúdo do arquivo tree.xul é assunto da segunda parte desse arquivo.
Navegador e pesquisa
O segundo box tabular entra na linha 18 do nosso código-mestre. Ele conterá nosso navegador e um painel com uma lista de artigos para pesquisa, como a seguir:
1 <tabs>
2 <tab
label="Visualizar" />
3 <tab
label="Pesquisar" />
4 </tabs>
5 <tabpanels
flex="1" >
6 <browser
height="80" id="brwser" type="content-primary"
src="http://www.imasters.com.br"/>
7 <iframe
id="pesquisa" name="pesquisar" type="content-primary"
src="list2.xul"/>
8 </tabpanels>
- Linha 1 declara um container para as guias tab
- Linha 2 e 3 declara as guias, a serem chamadas de"Visualizar", que conterá nosso navegador, e "Pesquisar", que conterá nossa lista de artigos.
- Linha 6 declara o elemento browser tem como atributo src uma URL, que seria nossa página inicial.
- Linha 7 o elemento iframe aponta para um outro xul (list2.xul), que conterá o código para nossa página de pesquisa.
Por brevidade, o conteúdo do arquivo list2.xul também não é tratado aqui. Ele mostrará uma lista de ítens para pesquisa na segunda guia de página da janela, como pode ser visto na Figura 2. O conteúdo do arquivo list2.xul também é assunto da segunda parte desse arquivo.
Editor HTML
Nosso editor HTML entra logo abaixo do segundo box tabular, em uma caixa de orientação vertical, como segue:
1 <groupbox>
2 <caption
label="Gerenciador" />
3 <hbox
id="discussFormatBar">
4 <label
style="width:2em" value="Titulo:" />
5 <textbox
style="width:30em" id="titulo" multiline="false"/>
6 <toolbox>
7 <toolbarbutton
label="bold" id="boldButton" type="checkbox"
autoCheck="false"/>
8 <toolbarbutton
label="italic" id="italicButton" type="checkbox"
autoCheck="false"/>
9 <toolbarbutton
label="ul" id="ulButton" type="radio"
autoCheck="false"/>
10 <toolbarbutton
label="ol" id="olButton" type="radio"
autoCheck="false"/>
11 </toolbox>
12 <button
label="Copiar texto" />
13 <button
label="Publicar" />
14 </hbox>
15 <hbox>
16 <vbox>
17 <toolbox
id="viewModeBar" orient="vertical" flex="1">
18 <box
orient="vertical" id="discussViewMode" grippyhidden="true">
19 <toolbarbutton
label="HTML" id="htmlView" type="radio"
group="view" autoCheck="true"/>
20 <toolbarbutton
label="Code" id="sourceView" type="radio"
group="view" autoCheck="true"/>
21 </box>
22 </toolbox>
23 </vbox><spacer/>
24 <vbox>
25 <label
style="width:10em" value="Texto:" />
26 <textbox
id="edittext" multiline="true" rows="7"
cols="144"/>
27 </vbox>
28 </hbox>
29 </groupbox>
O layout desse editor será basicamente: duas caixas de texto com rótulos "Título" e "Texto", respectivamente para entrada do título e conteúdo da página; botões para copiar o conteúdo do browser e publicar o texto contido na caixa "Texto"; e uma barra de ferramentas para tags HTML, como pode ser visto na Figura 1 e 2. Segue a explicação linha a linha:
- Linha 1 agrupa todos os elementos dentro de um groupbox
- Linha 2 o título de nosso editor é configurado por um elemento caption
- Linha 3 um box horizontal conterá nossa caixa de texto com o título e uma barra de ferramentas com botões
- Linha 5 inclui nossa caixa de texto para o título da página
- Linha 6 inicia a descrição da barra de ferramentas
- Linha 7,8,9 e 10 cria os botões da barra de ferramentas, respectivamente: bold, italic, lista não-ordenada (ul) e lista ordenada (ol)
- Linha 12 e 13 cria dois botões com funções para copiar o texto do navegador e postar a página
- Linha 15 e 16 cria mais um box horizontal que conterá dois boxes verticais, um conterá uma caixa de ferramentas e o outro, a caixa de texto para digitação do conteúdo da página
- Linha 17 declara a barra de ferramentas. Ela possui como atributo orient o valor "vertical" para dispô-la verticalmente
- Linha 18 cria um box com orientação vertical para os botões
- Linha 19 e 20 declara os botões de tipo radio (ou seja, um botão fica clicado por vez, ao contrário do tipo checkbox, onde vários podem ficar clicados ao mesmo tempo), para escolhermos a forma de apresentação do conteúdo na caixa de texto, ou seja, como HTML ou como texto comum.
- Linha 23 cria um espaçador entre as caixas verticais
- Linha 26 declara a caixa de texto para digitação do conteúdo. Ela tem atributo multiline como "true", dessa forma terá o mesmo comportamento de um textbox HTML
- Linhas 27, 28 e 29 fecha boxes e groupbox
O arquivo XUL completo está disponível para download.
Esse é o nosso esqueleto da aplicação. Na segunda parte desse artigo veremos como melhorar ainda mais a apresentação, trabalhando com imagens dentro dos botões e criando os outros dois XUL internos para nosso Gerenciador de Conteúdo.