Skip to main content

Visit Mozilla.org

Tutorial de XUL:Creando Diálogos

De MDC


A menudo una aplicación XUL requiere que se muestren diálogos. Esta sección describe como puedes crearlos.

Tabla de contenidos

[editar] Creando un diálogo

La función open() se usa para abrir ventanas. Una función relacionada es openDialog(). Esta función tiene varias diferencias. Muestra una dialogo en vez de una ventana lo que implica que le está preguntando algo al usuario. Puede tener sutiles diferencias en la forma en que funciona y cómo es mostrada al usuario. Estas diferencias varían en cada plataforma.

Además, la función openDialog puede tomar argumentos adicionales a los primeros tres. Estos argumentos son pasados al nuevo dialogo en un arreglo almacenado en la propiedad arguments de la nueva ventana. Puedes pasar tantos argumentos como sea necesario. Esta es una forma conveniente de pasar valores por defecto a los campos en el diálogo. 

var somefile=document.getElementById('enterfile').value;

window.openDialog("chrome://findfile/content/showdetails.xul","showmore",
                "chrome",somefile);

En este ejemplo se abrirá el diálogo showdetails.xul. Se le pasará un argumento, somefile, el cual fue tomado del valor de un elemento con id enterfile. En un script usado por el diálogo, podemos referirnos al argumento a través de la propiedad arguments. Por ejemplo: 

var fl=window.arguments[0];

document.getElementById('thefile').value=fl;

Es una forma efectiva para pasar valores a la nueva ventana. Puedes pasar valores desde la ventana abierta a la ventana original de dos maneras. Primero, podrías usar la propiedad window.opener la cual mantiene una referencia a la ventana que abrió el dialogo. Segundo, podrías pasar una función o un objeta como argumento, y luego llamar la función o modificar el objeto en el dialogo abierto.

[editar] El elemento Dialog

El elemento dialog (en) debería ser usado en vez del elemento window (en) cuando se crea un diálogo. Tiene la útil capacidad de construir hasta cuatro botones como el botón del dialogo para Aceptar, Cancelar y así sucesivamente. no es necesario incluir el XUL para cada botón pero si se debe proveer el código para manejar los botones. Este mecanismo es necesario porque las distintas plataformas tienen un orden específico con el cual muestran estos botones.

[editar] Ejemplo

Código Ver en funcionamiento 

<?xml version="1.0"?>

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

<dialog id="donothing" title="Do Nothing"
      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
      buttons="accept,cancel"
      ondialogaccept="return doOK();"
      ondialogcancel="return doCancel();">

<script>
function doOK()
{
alert("Has apretado el botón OK!");
return true;
}

function doCancel()
{
alert("Has apretado el botón Cancel!");
return true;
}
</script>

<description value="Select a button"/>

</dialog>

Cualquier elemento que quieras se pueden ubicar en un dialogo. El elemento dialogo tiene algunos atributos adicionales que el elemento ventana no tiene. El atributo botones (en) se usa para especificar cuales botones deberían aparecer en el diálogo. Se pueden usar los siguientes valores, separados por comas.

  • accept - un botón Aceptar
  • cancel - un botón Cancelar
  • help - un botón Ayuda
  • disclosure - un botón de acceso (disclosure), que es usado para mostrar información adicional

Puedes disponer cual código es ejecutado cuando los botones son presionados usando los atributos ondialogaccept, ondialogcancel, ondialoghelp y ondialogdisclosure. Si pruebas el ejemplo de arriba, te vas a encontrar que la función doOK() se llama cuando el botón Aceptar es presionado y la función doCancel() se llama cuando el botón Cancelar es presionado.

Cuando las dos funciones doOK() y doCancel() devuelven verdadero ('true') indican que el diálogo se debería cerrar. En el caso contrario, cuando devuelvan falso ('false'), el diálogo debería permanecer abierto. Esto se debería usar si se ha ingresado un valor inválido en los campos del diálogo.

Otros atributos útiles son:

Nota: Las atributos etiquetas ('label') son requeridos por los sitios remotos y son probablemente perdidos en los ejemplos superiores debido a bug 224996.

[editar] Ejemplo de dialogo con más características 

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>

<dialog id="myDialog" title="My Dialog"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        onload="window.sizeToContent();"
        buttons="accept,cancel"
        buttonlabelaccept="Set Favourite"
        buttonaccesskeyaccept="S"
        ondialogaccept="return doSave();"
        buttonlabelcancel="Cancel"
        buttonaccesskeycancel="n"
        ondialogcancel="return doCancel();">

<script>
function doSave(){
 //doSomething()
 return true;
}
function doCancel(){
  return true;
}
</script>

<dialogheader title="My dialog" description="Example dialog"/>
<groupbox flex="1">
  <caption label="Select favourite fruit"/>
  <radio id="orange" label="Oranges because they are fruity"/>
  <radio id="violet" selected="true" label="Strawberries because of colour"/>
  <radio id="yellow" label="Bananna because it pre packaged"/>
</groupbox>

</dialog>

Se accede a los elementos 'buttons' con el código java siguiente: 

// el botón aceptar
var acceptButt = document.documentElement.getButton("accept")

[editar] Más ejemplos

Dialogs and prompts (code snippets).

« Anterior Siguiente »

Obtenido de "http://developer.mozilla.org/es/docs/Tutorial_de_XUL:Creando_Di%C3%A1logos"