FANDOM


Un sencillo ejemploEditar

Para comenzar a ver las posibilidades de XUL, nada mejor que un sencillo ejemplo:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <label value="¡Hola, mundo!" />
</window>

VentanasEditar

Además de cuadros de diálogo estándar, es posible crear ventanas, como en el siguiente ejemplo:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  id="prueba"
  title="Esto es una prueba"
  width="400"
  height="200"
  screenX="100"
  screenY="100"
  />

EtiquetasEditar

Las etiquetas son un elemento pasivo pero realmente importante, puesto que proporcionan información vital sobre el funcionamiento de las etiquetas. XUL permite utilizarlas:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
  xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  id="prueba"
  title="Etiquetas"
  width="400"
  height="200"
  screenX="100"
  screenY="100">
  <label value="Soy una etiqueta"/>
</window>

Cuadros de textoEditar

Como no podía ser de otra forma, XUL permite utilizar cuadros de texto:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
  xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  id="prueba"
  title="Cuadros de texto"
  width="400"
  height="200"
  screenX="100"
  screenY="100">
  <label value="Cuadro de texto:"/>
  <textbox id="text1" value="Una sóla línea."/>
  <label value="Más de una línea:"/>
  <textbox id="text1" multiline="true" rows="1"
    value="Más de una
línea."/>
  <label value="Contraseña:"/>
  <textbox id="text1" type="password" value="contraseña"/>
</window>

Casillas de verificaciónEditar

Otro elemento imprescindible son las casillas de verificación:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
  xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  id="prueba"
  title="Casillas de verificación"
  width="400"
  height="200"
  screenX="100"
  screenY="100">
  <label value="Género:"/>
  <checkbox id="genero_drama" checked="true" label="Drama"/>
  <checkbox id="genero_comedia" label="Comedia"/>
  <checkbox id="genero_aventuras" label="Aventuras"/>
  <checkbox id="genero_romance" label="Romance"/>
  <checkbox id="genero_cifi" label="Ciencia Ficción"/>
</window>

Botones de opciónEditar

XUL permite la creación de botones de opción de la siguiente forma:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
  xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  id="prueba"
  title="Botones de opción"
  width="400"
  height="200"
  screenX="100"
  screenY="100">
  <label value="Calificación:"/>
  <radiogroup>
    <radio id="calificacion_0" value="0"
      label="Lo peor"/>
    <radio id="calificacion_1" value="1"
      label="Mala"/>
    <radio id="calificacion_3" value="2"
      label="Regular"/>
    <radio id="calificacion_4" value="3" selected="true"
      label="Buena"/>
    <radio id="calificacion_5" value="4"
      label="Imprescindible"/>
    <radio id="calificacion_5" value="5"
      label="Obra maestra"/>
  </radiogroup>
</window>

BotonesEditar

Aunque aún no permiten realizar ninguna acción, el siguiente código sirve para crear un par de botones:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
  xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  id="prueba"
  title="Botones"
  width="400"
  height="200"
  screenX="100"
  screenY="100">
  <button id="aceptar" label="Aceptar"/>
  <button id="cancelar" default="true" label="Cancelar"/>
</window>

AccionesEditar

Vamos a enlazar el primer ejemplo que vimos con la creación de una acción que ocurra al pulsar un botón:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
  xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  id="prueba"
  title="Botones y acción"
  width="400"
  height="200"
  screenX="100"
  screenY="100">
  <script src="09-accion.js"/>
  <button id="aceptar" label="Aceptar" onclick="boton_aceptar()"/>
  <button id="cancelar" default="true" label="Cancelar" onclick="boton_cancelar()"/>
</window>

El código que se ejecutará al hacer clic en los botones es el siguiente:

function boton_aceptar(){
  alert("Ha aceptado.");
}
function boton_cancelar(){
  alert("Ha cancelado.");
}

Ejemplo terminadoEditar

El siguiente código se puede utilizar como base para crear una aplicación para la gestión de una base de datos de películas:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
  xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  title="Nueva película">

  <script src="11-filmoteca.js"/>

  <vbox>
  
    <hbox>
    
      <groupbox>
        <caption label="Personal"/>
        <label value="Título:"/>
        <textbox id="titulo"/>
        <label value="Director:"/>
        <textbox id="director"/>
        <label value="Productor:"/>
        <textbox id="productor"/>
        <label value="Guionista:"/>
        <textbox id="guionista"/>
        <label value="Protagonista:"/>
        <textbox id="protagonista"/>
      </groupbox>
      
      <vbox>
        <label value="Género:"/>
        <checkbox id="genero_drama"
          checked="true" label="Drama"/>
        <checkbox id="genero_comedia"
          label="Comedia"/>
        <checkbox id="genero_aventuras"
          label="Aventuras"/>
        <checkbox id="genero_romance"
          label="Romance"/>
        <checkbox id="genero_cifi"
          label="Ciencia Ficción"/>
      </vbox>
    
      <vbox>
        <label value="Calificación:"/>
        <radiogroup>
          <radio id="calificacion_0" value="0"
            label="Lo peor"/>
          <radio id="calificacion_1" value="1"
            label="Mala"/>
          <radio id="calificacion_3" value="2"
            label="Regular"/>
          <radio id="calificacion_4" value="3"
            selected="true"
            label="Buena"/>
          <radio id="calificacion_5" value="4"
            label="Imprescindible"/>
          <radio id="calificacion_5" value="5"
            label="Obra maestra"/>
        </radiogroup>
      </vbox>
          
    </hbox>

    <hbox align="right">

      <button
        id="aceptar"
        label="Aceptar"
        default="false"
        onclick="boton_aceptar()"/>
  
      <button
        id="cancelar"
        label="Cancelar"
        default="true"/>

    </hbox>

</vbox>
  
</window>

También será necesario el siguiente código:

function boton_aceptar(){

  var xXML = "";
  var sPrologo = "<?xml version=\"1.0\" encoding=\"iso-8859-15\"?>\n";
  var sPeliculaInicio = "<pelicula>\n";
  var sPeliculaCierre = "</pelicula>\n";
  var sTituloInicio = "<titulo>\n";
  var sTituloCierre = "</titulo>\n";

  var sTitulo = document.getElementById("titulo").value + "\n";

  sXML =
    sPrologo +
    sPeliculaInicio +
    sTituloInicio +
    sTitulo +
    sTituloCierre +
    sPeliculaCierre;

  alert(sXML);

}

Enlaces interesantesEditar

Puede que encuentres interesantes los siguientes enlaces relacionados con este capítulo:

El contenido de la comunidad está disponible bajo CC-BY-SA a menos que se indique lo contrario.