[Manual]Programando aplicaciones con XUL: Botones

Capitulo 2:

Bien continuemos con nuestro manual de XUL, ya sabemos como hacer un Hola mundo, en Xul, así que hagamoslo mas interesante.

Ahora vamos a trabajar con botones(recuerden que aqui no hay visual studio jaja).

Botones en XUL

Para que podamos interactuar con nuestro entorno es necesario disponer de botones, como cualquier otro lenguaje de programación, de la misma forma que HTML, tambien XUL, dispone de una serie de etiquetas para crear los elementos de las interfaces de los usuarios.

Estos botones estan basados en la mas basica de estas etiquetas, esta es llamada Plantilla:XULElem que nos servira para crear un boton.

Cada elemento de tipo Boton, tiene dos propiedades asociadas label e image, mutuamente compatibles, se pueden tener un boton con imagen y/o con etiqueta

La etiqueta Plantilla:XULElement usa la siguiente sintaxis

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

Cabe mencionar que todos estos atributos son opcionales y aceptan los siguientes datos.

  • 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.
  • class: Este atributo se refiere a que a un boton se le puede asignar una clase, con la cual le aplicaremos cierto estilo, usando CSS, como si fuera HTML, aunque no es necesario usar una clase, para poder aplicar estilos en los botones.
  • label: Este atributo se refiere a el texto que mostrara nuestro boton, si lo dejamos en blanco, simplemente no tendra texto.
  • image: El atributo image nos indica que imagen aparecera dentro del boton, claro si deseamos usar alguna imagen, si no se le indica alguna imagen simplemente nos aparecera sin ella, tambien se le puede especifiar una imagen a un boton mediante una hoja de estilos usando list-style-image.
  • disabled: Esta opcion creo que ya todos (o casi) la conocemos, esta opcion se refiere a que si la indicamos como true, el boton estara deshabilitado (no respondera a los click’s), y si lo ponemos como false el boton estara habilitado, si no se indica, el boton siempre estara habilitado.
  • acceskey: con este atributo, le podemos indicar que reaccione a cierta tecla de atajo (o tecla de acceso directo), con la cual le pasaremos el foco, a este elemento , que en este caso es el boton.

Aqui tenemos un ejemplo, de como quedaria nuestro archivo main.xul

< ?xml version=”1.0″?>

< ?xml-stylesheet href=”chrome://global/skin/” type=”text/css”?>

<window id=”main” title=”Usando botones en XUL” width=”300″ height=”300″ xmlns=”http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”>
<button id=”boton_buscar” label=”Buscar”/>
<button id=”boton_cancelar” label=”Cancelar” disabled=”true”/>
</window>

Recuerden usar los ejemplos de los capitulos anteriores para poder ir armando sus aplicaciones.

Les dejo el ejemplo, como siempre funcionando.

Ejemplos de botones en XUL

Basado en | Desarrollo con xul mozilla

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *