mozilla

Revision 259194 of Adicionando botões

  • Slug da revisão: Tutorial_XUL/Adicionando_botões
  • Título da revisão: Adicionando botões
  • ID da revisão: 259194
  • Criado:
  • Autor: Rodmalkav
  • É revisão atual? Não
  • Comentário /* Sintaxe dos Botões */

Conteúdo da revisão

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 {{template.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.

Some examples of buttons

{{wiki.template('Block-title', [ "Example 1" ])}} : {{wiki.template('Xultu-sv', [ "ex_buttons_1.xul" ])}}

Image:buttons1.png
<button label="Normal"/>
<button label="Disabled" disabled="true"/>

The examples above will generate the buttons in the image. The first button is a normal button. The second button is disabled so it appears greyed out.

We'll start by creating a simple Find button for the find files utility. The example code below shows how to do this.

<button id="find-button" label="Find"/>
Note that Firefox doesn't allow you to open chrome windows from web pages, so the View links in the tutorial will open in normal browser windows. Due to this, the buttons will appear to stretch across the window. You can add align="start" to the window tag to prevent the stretching.
The findfile.xul example

Let's add this code to the file findfile.xul that we created in the previous section. The code needs to be inserted in-between the {{template.XULElem("window")}} tags. The code to add is shown in red below:

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

You'll notice that the Cancel button was added also. The window has been given a horizontal orientation so that the two buttons appear beside each other. If you open the file in Mozilla, you should get something like the image shown here.


Note that we shouldn't put text labels directly in the XUL file. We should use entities instead so that text can be easily translated.

In the next section, we will find out how to add labels and images to a XUL window.

See also more button fetaures

{{template.PreviousNext("XUL Tutorial:Creating a Window", "XUL Tutorial:Adding Labels and Images")}}

Categorias

Interwiki Language Links

{{ wiki.languages( { "en": "en/XUL_Tutorial/Adding_Buttons", "es": "es/Tutorial_de_XUL/A\u00f1adiendo_botones", "ja": "ja/XUL_Tutorial/Adding_Buttons", "pl": "pl/Kurs_XUL/Dodawanie_przycisk\u00f3w" } ) }}

Fonte da revisão

<h3 name="Adicionando_Bot.C3.B5es_a_uma_Janela"> Adicionando Botões a uma Janela </h3>
<p>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.
</p><p>Como em HTML, XUL tem uma série de tags que podem ser usadas para criar UIs. A mais básica delas é a tag <code>{{template.XULElem("button")}}</code>. Este elemento é usado para criar botões simples.
</p><p>O elemento botão tem duas propriedades principais associadas a ele, uma <code>label</code> uma <code>image</code>. 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.
</p>
<h4 name="Sintaxe_dos_Bot.C3.B5es"> Sintaxe dos Botões </h4>
<p>A tag <code><a class="external" href="http://developer.mozilla.org/en/docs/XUL:button">button</a></code> tem a seguinte sintaxe:
</p>
<pre>&lt;button
    id="identifier"
    class="dialog"
    label="OK"
    image="images/image.jpg"
    disabled="true"
    accesskey="t"/&gt;
</pre>
<p>Os atributos a seguir são todos opcionais:
</p>
<dl><dt> <a class="external" href="http://developer.mozilla.org/en/docs/XUL:Attribute:id">id</a> </dt><dd> 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.
</dd><dt> <a class="external" href="http://developer.mozilla.org/en/docs/XUL:Attribute:class">class</a> </dt><dd> A classe do botão. Tem o mesmo efeito do atributo "class" em HTML, usado para CSS. Neste caso, o valor <code>dialog</code> é usado.
</dd><dt> <a class="external" href="http://developer.mozilla.org/en/docs/XUL:Attribute:label">label</a> </dt><dd> O texto que irá aparecer dentro do botão. Se for deixado em branco ou não for especificado, nenhum texto irá aparecer.
</dd><dt> <a class="external" href="http://developer.mozilla.org/en/docs/XUL:Attribute:image">image</a> </dt><dd> 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 <code><a href="pt/CSS/list-style-image">list-style-image</a></code>.
</dd><dt> <a class="external" href="http://developer.mozilla.org/en/docs/XUL:Attribute:disabled">disabled</a> </dt><dd> Se este atributo for setado como <code>true</code>, 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 <a href="pt/JavaScript">JavaScript</a>.
</dd><dt> <a class="external" href="http://developer.mozilla.org/en/docs/XUL:Attribute:accesskey">accesskey</a> </dt><dd> 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.
</dd></dl>
<p>O botão possui diversas outras propriedades que podem ser vistas no link <a href="pt/XUL_Tutorial/More_Button_Features">Mais propriedades</a>.
</p>
<h4 name="Some_examples_of_buttons"> Some examples of buttons </h4>
<p>{{wiki.template('Block-title', [ "Example 1" ])}} : {{wiki.template('Xultu-sv', [ "ex_buttons_1.xul" ])}}
</p>
<div class="float-right"><img alt="Image:buttons1.png" src="File:pt/Media_Gallery/Buttons1.png"></div>
<pre>&lt;button label="Normal"/&gt;
&lt;button label="Disabled" disabled="true"/&gt;
</pre>
<p>The examples above will generate the buttons in the image. The first button is a normal button. The second button is disabled so it appears greyed out.
</p><p>We'll start by creating a simple Find button for the find files utility. The example code below shows how to do this.
</p>
<pre>&lt;button id="find-button" label="Find"/&gt;
</pre>
<div class="note">Note that Firefox doesn't allow you to open chrome windows from web pages, so the View links in the tutorial will open in normal browser windows. Due to this, the buttons will appear to stretch across the window. You can add align="start" to the window tag to prevent the stretching.</div>
<div class="highlight">
<h5 name="The_findfile.xul_example"> The findfile.xul example </h5>
<p>Let's add this code to the file findfile.xul that we created in the previous section. The code needs to be inserted in-between the <code>{{template.XULElem("window")}}</code> tags. The code to add is shown in red below:
</p>
<pre class="eval">&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="<span class="plain">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;

  <span class="highlightred">&lt;button id="find-button" label="Find"/&gt;</span>
  <span class="highlightred">&lt;button id="cancel-button" label="Cancel"/&gt;</span>

&lt;/window&gt;
</pre>
<div class="float-right"><img alt="Image:buttons2.png" src="File:pt/Media_Gallery/Buttons2.png"></div>
<p>You'll notice that the Cancel button was added also. The window has been given a horizontal orientation so that the two buttons appear beside each other. If you open the file in Mozilla, you should get something like the image shown here.
</p>
</div>
<p><br>
</p>
<div class="note">Note that we shouldn't put text labels directly in the XUL file. We should use <a href="pt/XUL_Tutorial/Localization">entities instead so that text can be easily translated</a>.</div>
<p>In the next section, we will find out how to <a href="pt/XUL_Tutorial/Adding_Labels_and_Images"> add labels and images to a XUL window</a>. 
</p><p><small>See also <a href="pt/XUL_Tutorial/More_Button_Features">more button fetaures</a></small>
</p><p>{{template.PreviousNext("XUL Tutorial:Creating a Window", "XUL Tutorial:Adding Labels and Images")}}
</p><p><span class="comment">Categorias</span>
</p><p><span class="comment">Interwiki Language Links</span>
</p>{{ wiki.languages( { "en": "en/XUL_Tutorial/Adding_Buttons", "es": "es/Tutorial_de_XUL/A\u00f1adiendo_botones", "ja": "ja/XUL_Tutorial/Adding_Buttons", "pl": "pl/Kurs_XUL/Dodawanie_przycisk\u00f3w" } ) }}
Reverter para esta revisão