Añadiendo botones

En esta sección veremos cómo añadir botones sencillos a una ventana.

Añadir botones a una ventana

La ventana que hemos creado no contiene nada hasta ahora, así es que carece de interés. En esta sección vamos a añadir dos botones: Uno para buscar y otro para cancelar. También aprenderemos una forma fácil de ubicarlos dentro de la ventana.

Al igual que HTML, XUL tiene una serie de etiquetas para crear elementos de interfaz de usuario. La más básica de todas es la etiqueta button, que sirve para crear un botón simple.

Cada elemento botón tiene dos propiedades asociadas: label e image, mútuamente compatibles: Se puede tener un botón con imagen y/o con etiqueta. Los botones se usan generalmente para las opciones de Aceptar o Cancelar en los cuadros de diálogo, por ejemplo.

Sintaxis de los botones

La etiqueta button tiene la siguiente sintaxis:

<button
    id="identificador"
    class="dialogo"
    label="Aceptar"
    image="imagenes/imagen.jpg"
    disabled="true"
    accesskey="t"/>

Los atributos son todos opcionales, y se interpretan así:

id 

Un identificador único (dentro de la página actual) que represente de forma inequívoca al botón. Es muy útil para referirse al botón desde una hoja de estilos CSS o desde un script de código, por ejemplo. Es recomendable rellenar este atributo en todas las etiquetas que uno declare (si no figura explícitamente en cada etiqueta de esta guía es porque se da por sobreentendido).

class 

La clase-estilo del botón. Se usa de la misma manera que en HTML: Sirve para indicar el estilo que el navegador deberá aplicar al botón creado. En el ejemplo precedente se usa la clase dialogo, aunque por lo general uno no suele establecer una clase específica para un botón.

label 

El texto que aparecerá dentro del botón. Por ejemplo: Aceptar or Cancelar. Si no se rellena, el botón aparece sin texto.

image 

La URL de la imagen que aparecerá dentro del botón. Si no se rellena, el botón aparecerá sin imagen. Una forma alternativa de especificar esta imagen es desde una hoja de estilo CSS, mediante una propiedad list-style-image.

disabled 

Indicador de deshabilitado: Si se rellena con valor true, el botón aparecera deshabilitado, lo que quiere decir que no responderá a la acción de pulsar sobre él (y el aspecto, usualmente, será con el texto en gris pálido). Si no se especifica este atributo, el botón está habilitado. También se puede cambiar el estado habilitado/deshabilitado mediante JavaScript.

accesskey 

En este atributo debe ir una sóla letra que se usará como tecla de acceso directo para pulsar el botón. Esta letra debería pertenecer al valor del atributo label. El aspecto, usualmente, será un subrayado bajo la letra escogida en el botón. Su funcionamiento consiste en que cada vez que el usuario pulse la letra escogida (más un pulsador que pude variar en función de la plataforma; usualmente ALT), desde cualquier lugar de la ventana, el botón recibirá el foco.

Atención: La etiqueta button en realidad soporta más atributos de los listados aquí, pero el resto se verán más adelante.

Algunos ejemplos de botones

var el = env.locale; Example 1 : Código Ver en funcionamiento

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

El ejemplo de arriba genera los botones mostrados en la imagen. El primer botón es un botón normal, el segundo está desabilitado.

Empezaremos creando un simple botón "Buscar" para la función buscar fichero. El ejemplo siguiente nos muestra cómo hacer esto.

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

El ejemplo findfile.xul

Coloquemos este código al archivo que habiamos creado en la sección anterior. El código debe ser colocado entre las etiquetas de window. El código que debemos agregar esta aquí abajo en rojo.

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

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

</window>

Verás que tambien se agrego el botón Cancel. Le dimos a la ventana una orientación horizontal, de este modo, los botones se muestran uno al lado del otro. Si abres el fichero en Mozilla, obtendras algo como la imagen mostrada aquí.

En la próxima sección descubriremos cómo agregar etiquetas e imágenes a una ventana XUL.

Ver también more button fetaures