mozilla
Os seus resultados da pesquisa

    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 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

    Image:buttons1.png
    <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>
    
    Image:buttons2.png
    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.

    See also more button fetaures

    Categorias

    Interwiki Language Links

    Etiquetas do documento e colaboradores

    Contributors to this page: Rodmalkav, Verruckt, Leandro Mercês Xavier
    Última atualização por: Verruckt,