mozilla
Los resultados de tu búsqueda

    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

    Image:buttons1.png
    <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"/>
    
    FireFox no permite abrir ventanas "chrome" desde páginas web, asi que el links "Ver" en el tutorial abriran una ventana de normal de browser.debido a esto, los botones aparecerán ocupando todo el ancho de la ventana. Puedes colocar align="start" a la etiqueta window para que esto no ocurra.
    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="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

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


    Nota: No deberíamos poner el texto de label directamente en el fichero XUL. En lugar de eso, deberíamos usar entes así, el texto puede ser traducido facilmente..

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

    Ver también more button fetaures

    Etiquetas y colaboradores del documento

    Etiquetas: 
    Contributors to this page: Nukeador, Lucasarg, Mgjbot, Originaldoc, Saturno, Blank zero, Sebaires
    Última actualización por: Lucasarg,