--- title: Adicionando botões slug: orphaned/Tutorial_XUL/Adicionando_botões tags: - PrecisaDeRevisãoEditorial - Todas_as_Categorias - Tutorial_XUL - XUL original_slug: Tutorial_XUL/Adicionando_botões ---

Adicionando Botões a uma Janela

A janela que nós criamos não possuía nada, então ainda não é muito interessante. Nessa sessão, iremos adicionar dois botões, um botão "Find" e outro "Cancel". Iremos também aprender uma maneira simples de posicionar os botões na janela.

Como em HTML, XUL tem uma série de tags que podem ser usadas para criar UIs. A mais básica delas é a tag {{ XULElem("button") }}. Este elemento é usado para criar botões simples.

O elemento botão tem duas propriedades principais associadas a ele, uma label uma image. Você precisará ao menos de uma delas ou das duas para criar um botão simples. Portanto, um botão pode ter apenas uma label (texto), uma imagem ou os dois juntos. Botões são geralmente usados para comandos OK e Cancel numa caixa de diálogo, por exemplo. Vale lembrar que não haverá erro caso não seja colocado nem uma label ou uma imagem, apenas o botão ficará em branco o que não é muito comum em interfaces.

Sintaxe dos Botões

A tag button tem a seguinte sintaxe:

<button
    id="identifier"
    class="dialog"
    label="OK"
    image="images/image.jpg"
    disabled="true"
    accesskey="t"/>

Os atributos a seguir são todos opcionais:

id: Um identificador único para o botão. Como já dissemos em sessões anteriores, muitos elementos terão esse identificador. Você deverá usar este atributo caso deseje referenciar o botão em um CSS ou script. Entretanto, é aconselhável que você coloque o atributo id mesmo que não vá referenciar o botão em nenhum lugar.
class: A classe do botão. Tem o mesmo efeito do atributo "class" em HTML, usado para CSS. Neste caso, o valor dialog é usado.
label: O texto que irá aparecer dentro do botão. Se for deixado em branco ou não for especificado, nenhum texto irá aparecer.
image: A URL da imagem que aparecerá no botão. Se for deixado em branco ou não for especificado, nenhuma imagem irá aparecer. Você também pode especificar a imagem através da propriedade CSS list-style-image.
disabled: Se este atributo for setado como true, o botão ficará desabilitado. Se um botão está desabilitado, as funções que ele possui não poderão ser executadas. O default para esta propriedade é o botão habilitado. Você também pode trocar o estado do botão com JavaScript.
accesskey: Esta propriedade designa uma letra como tecla de atalho. A letra especificada geralmente sublinhada no texto do botão. Caso não haja a letra especificada como atalho no texto escrito no atributo "label", a letra aparecerá no final do texto, entre parênteses. Quando o usuário pressionar a tecla ALT (ou a tecla similar em outras plataformas) e a letra de atalho, o botão será acionado.

O botão possui diversas outras propriedades que podem ser vistas no link Mais propriedades.

Alguns exemplos de botões

"Codigo Fonte" : Visualizar

<button label="Normal"/>
<button label="Disabled" disabled="true"/>

O exemplo acima irá gerar os botões da imagem ao lado. O primeiro é um botã normal. O segundo está desabilitado, por isso aparece em tom de cinza.

Vamos começar criando um simples botão "Find", para nosso aplicativo de encontrar arquivos. O código abaixo mostra como fazer isso.

<button id="find-button" label="Find"/>

Note que o Firefox não permite a você abrir janelas chrome de páginas Web, por isso os links "Visualizar" abrem em janelas normais do browser. Por esse motivo, os botões ocuparão toda a tela. Você pode adicionar o atributo align="start" na tag window para prevenir isso.

O exemplo findfile.xul

Vamos adicionar o código acima ao arquivo findfile.xul criado na sessão anterior. O código precisa se inserido entre as tags window. O código a ser adicionado está exibido em vermelho, abaixo:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
    id="findfile-window"
    title="Find Files"
    orient="horizontal"
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <button id="find-button" label="Find"/>
  <button id="cancel-button" label="Cancel"/>

</window>

Você irá notar que o botão "Cancel" foi adicionado. Foi dado à janela uma orientação horizontal fazendo com que os botões apareçam um ao lado do outro. Se você abrir o arquivo no Mozilla, você deverá ter alguma coisa parecida como a imagem ao lado.

Note que é aconselhável não colocar as labels diretamento no arquivo XUL. Devemos usar entidades de forma que o texto seja facilmente traduzido.

Na próxima sessão, iremos encontrar como

In the next section, we will find out how to adicionar labels e imagens em um arquivo XUL.