---
title: Criando uma janela
slug: Tutorial_XUL/Criando_uma_janela
tags:
  - PrecisaDeAtualização
  - Todas_as_Categorias
  - Tutorial_XUL
  - XUL
---
<p> </p>

<h3 id="Criando_uma_aplica.C3.A7.C3.A3o_XUL" name="Criando_uma_aplica.C3.A7.C3.A3o_XUL">Criando uma aplicação XUL</h3>

<p>Uma aplicação XUL pode ter qualquer nome mas ela precisa necessariamente ter a extensão <strong>.xul</strong>. A aplicação XUL mais simples tem a seguinte estrutura:</p>

<pre>&lt;?xml version="1.0"?&gt;
&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;

&lt;window
    id="findfile-window"
    title="Find Files"
    orient="horizontal"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
&lt;!-- Other elements go here --&gt;
&lt;/window&gt;
</pre>

<p>Esta janela não irá fazer nada já que ela não contém nenhum elemento de interação com o usuário (UI). Estes serão adicionados na próxima sessão. Abaixo segue uma explicação de cada linha do código acima:</p>

<ol>
 <li><strong>&lt;?xml version="1.0"?&gt;</strong><br>
  Esta linha serve simplesmente para declarar que este é um arquivo XML. Você normalmente colocará essa linha no topo de cada arquivo XUL assim como você coloca a tag HTML em cada arquivo HTML.</li>
 <li><strong>&lt;?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?&gt;</strong><br>
  Esta linha é usada para especificar o arquivo CSS que será usado pelo arquivo. Esta é a sintaxe que os arquivos XML usam para importar folhas de estilo. Nesse caso, importamos os CSS que se encontram na pasta global do pacote de skins. Repare que não foi designado um arquivo específico então o Mozilla irá determinar qual arquivo CSS será utilzado. Nesse caso, o arquivo global.css será selecionado. Este arquivo contém todas as declarações padrão para todos os elementos XUL. Pelo fato do XML não ter a capacidade de definir como os elementos serão exibidos, o CSS indica como fazê-lo. Geralmente, você colocará esta linha no topo de todos os arquivos XUL. Você poderá também importar um arquivo externo usando a mesma sintaxe. Note que você normalmente irá importar o CSS global de seu próprio arquivo.</li>
 <li><strong>&lt;window</strong><br>
  Esta linha declara que você está descrevendo um <a class="external" href="http://developer.mozilla.org/en/docs/XUL:window">window</a>. Cada janela de UI é descrita em um arquivo separado. Esta tag é semelhante à tag BODY do HTML, que engloba o conteúdo do arquivo. <a href="pt/XUL/window#Attributes">Muitos atributos</a> podem ser colocados na tag <a class="external" href="http://developer.mozilla.org/en/docs/XUL:window">window</a> -- nesse caso, são quatro. Neste exemplo, cada atributo é colocado em uma linha separada, mas não é preciso seguir essa regra.</li>
 <li><strong>id="findfile-window"</strong><br>
  O atributo <code><a class="external" href="http://developer.mozilla.org/en/docs/XUL:Attribute:id">id</a></code> é usado como um identificador que é usado por scripts para ser rerefenciado. Normalmente é colocado um atributo <code>id</code> em todos os elementos. Você pode dar qualquer nome aos atributos, mas de preferência dê nomes que identifiquem para o que o atributo serve.</li>
 <li><strong>title="Find Files"</strong><br>
  O atributo <code><a class="external" href="http://developer.mozilla.org/en/docs/XUL:Attribute:title">title</a></code> descreve o texto que irá aparecer na barra de título da janela quando ela é exibida. Nesse caso, o texto 'Find Files' irá aparecer.</li>
 <li><strong>orient="horizontal"</strong><br>
  O atributo <code><a class="external" href="http://developer.mozilla.org/en/docs/XUL:Attribute:orient">orient</a></code> especifica o posicionamento dos itens na janela. O valor <code>horizontal</code> indica que os itens devem aparecer dispostos horizontalmente na janela. Você pode também usar o valor <code>vertical</code> para designar que os elementos aparecerão em forma de colunas. Como este é o valor default, você pode optar por não escrever esse atributo caso deseje que os elementos aparecam na vertical.</li>
 <li><strong>xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;</strong><br>
  Esta linha declara o namespace para o XUL, que você deve colocar em uma elemento janela de forma a indicar que todos os seus 'filhos' são XUL. Note que essa URL não é exibida para você. Mozilla irá reconhecer essa URL internamente.</li>
 <li><strong><span class="nowiki">&lt;!-- Other elements go here --&gt;</span></strong><br>
  Você pode substituir esse bloco de comentários por outros elementos (botões, menus e outros componentes de UI) que aparecerão na janela. Nós iremos adicionar alguns deles na próxima sessão.</li>
 <li><strong>&lt;/window&gt;</strong><br>
  E finalmente, precisamos fechar a tag <a class="external" href="http://developer.mozilla.org/en/docs/XUL:window">window</a> no final do arquivo.</li>
</ol>

<h3 id="Abrindo_uma_janela" name="Abrindo_uma_janela">Abrindo uma janela</h3>

<p>Para abrir uma janela XUL, existem vários métodos que podem ser usados. Se você estiver apenas na fase de desenvolvimento, você pode simplesmente escrever a URL (como um chrome:, file: or outros tipos de URL) na barra de endereços do Mozilla. Você pode também dar um duplo-clique no nome do arquivo em seu diretório, assuminfo que os arquivos XUL estão associados com o Mozilla. A janela XUL irá aparecer na janela do browser como se fosse uma nova janela, mas isso é o suficiente durante o estágio de desevolvimento.</p>

<p>A forma correta, é claro, é abrir a janela usando javascript. Nenhuma sintaxe nova é necessária, podendo ser usada a função <a href="pt/DOM/window.open">window.open()</a> como se fosse uma documento <a href="pt/HTML">HTML</a>. Entretanto, um parâmetro adicional com o valor 'chrome' é necessário para indicar ao browser será aberto um documento <a href="pt/DOM/window.open#Window_functionality_features">chrome</a>. Isso ira abrir a janela sem as barras de ferramenta e os menus. A sintaxe é descrita abaixo:</p>

<pre>window.open(url,windowname,flags);

onde o parâmetro 'flags' recebe o valor "chrome", como no exemplo:

window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300");
</pre>

<div class="highlight">
<h5 id="O_exemplo_findfile.xul" name="O_exemplo_findfile.xul">O exemplo findfile.xul</h5>

<p>Vamos começar criando um arquivo básico para a janela 'Find File'. Crie um arquivo chamado findfile.xul e o coloque no diretório especificado no arquivo findfile.manifest (nós o criamos na sessão anterior). Adicione o exemplo mostrado anteriormente ao arquivo e salve-o.</p>
</div>

<p>Você pode usar o parâmetro da linha de comando '-chrome' para especificar o arquivo XUL a ser aberto quando o Mozilla iniciar. Se não for especificado nenhum arquivo, a janela padrão será aberta. (Normalmente a janela do browser.) Por exemplo, podemos abrir a janela 'Find Files' das seguintes formas:</p>

<pre>mozilla -chrome chrome://findfile/content/findfile.xul

mozilla -chrome resource:/chrome/findfile/content/findfile.xul
</pre>

<p>Se você executar este comando a partir de uma linha de comando (assumindo que você tem uma na sua plataforma), a janela 'Find Files' irá abrir como janela padrão, ao invés da janela do browser. Por nós ainda não termos inserido nenhum elemento de interação na janela, você não verá a janela aparecendo. Iremos adicionar alguns elementos na próxima sessão.</p>

<p>Para ver o efeito, o link a seguir irá abrir a janela de favoritos:</p>

<pre class="eval">mozilla -chrome <a class="external" rel="freelink">chrome://communicator/content/bookma...rksManager.xul</a>

<span class="highlightred">Se você estiver usando o Firefox, utilize o link abaixo</span>
firefox -chrome <a class="external" rel="freelink">chrome://browser/content/bookmarks/b...rksManager.xul</a>
</pre>

<p>O argumento '-chrome' não dá ao arquivo nenhum privilégio adicional. Ao contrário, ele abre o arquivo especificado como uma aba, sem barra de endereço ou menus. Apenas URL chromes tem privilégios adicionais.</p>

<div class="note">No link <a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Extension Developer's Extension</a> você encontra um editor XUL que permite que você escreva códigos XUL e veja os resultados em tempo real sem o uso do Mozilla!</div>