There is no data. There is only XUL (II)

Para que veais por encima la estructura de un programa en XUL vamos a escribir un programa de tipo ‘Hola Mundo’, aunque como todos los programadores que se creen originales y rebeldes en lugar de un ‘Hola Mundo’ nuestro programa mostrará alguna frase geek; por ejemplo ‘I know kung foo’.

Usando un editor de texto cualquiera (¿que tal vim?) escribimos lo siguiente, teniendo cuidado con las mayúsculas y las minúsculas, ya que XML es case sensitive, y lo guardamos como foobar.xul por ejemplo:

<?xml version=”1.0″?>
<?xml-stylesheet href=”chrome://global/skin/” type=”text/css”?>
<!–Esto es una ventana–>
<window id=”ventana-principal” title=”The Kung Foo Style” xmlns=”http://www.mozilla.org/keymaster/gatekeeper/ there.is.only.xul”>
<box>
<button label=”Matrix has you” onclick=”alert(‘I Know Kung Foo’);” />
</box>
</window>

Si abrimos Mozilla o Firefox, nos vamos a Archivo->Abrir y seleccionamos nuestro fichero foobar.xul veremos algo similar a esto

Ahora que ya habeis visto la sencillez de XUL vamos a ir línea por línea para ver que es cada cosa. Con la primera línea, <?xml version=”1.0″?> lo que hacemos es declarar este archivo como un archivo xml. Un documento XUL siempre tiene que empezar con esta línea, no tiene mas importancia.

La segunda línea <?xml-stylesheet href=”chrome://global/skin/” type=”text/css”?> nos permite indicar que hoja de estilo queremos utilizar para definir el aspecto de la aplicación. Estamos hablando de documentos css como los que se utilizan para definir el estilo de una página web, si; mientras XUL define que widgets vamos a utilizar en nuestra aplicación se usa css para definir el aspecto que tendrán estos. En este ejemplo en concreto estamos importando global.css referenciado por chrome://global/skin/ (chrome:// es un tipo especial de URL, podríamos haber utilizado una hoja de estilos creada por nosotros si quisieramos tal como si fuera un documento HTML).

En la tercera línea tenemos un comentario. Los comentarios siempre tienen que estar entre <!– y –> como define XML y es ignorado al interpretar el documento XUL.

Debajo, en la cuarta línea, estamos creando una ventana nueva con <window>, cuyos atributos son id para darle un nombre y poder referenciarla mas tarde, title que indica el texto a mostrar en la barra de título y xmlns que indica el espacio de nombres a utilizar. Un espacio de nombres indica los elementos que se reconocen como válidos a la hora de interpretar el fichero; en este caso en concreto solo se reconocerán los elementos definidos en XUL, eso es lo que hace la URL http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul (notar el there is only xul).

En la sexta línea tenemos una etiqueta box, por box model, el modelo de gestión del layout (como se colocan los objetos dentro de la ventana) que utiliza XUL. Probad a eliminar el <box> y </box>, vereis que la interfaz se descoloca.

Dentro del box utilizamos la etiqueta button para crear un botón que tendrá como texto a mostrar ‘Matrix has you’, definido por el atributo label. Ese onclick le sonará a la gente que utilice javascript; lo que hace es que al pulsar sobre nuestro botón (onclick) muestre un alert con el texto que le pasamos como argumento. Como habreis imaginado esto completa el cuadro de las aplicaciones XUL (por ahora): XUL define los widgets de la aplicación, con css definimos el aspecto de estos y con javascript su funcionamiento.

Por último cerramos la etiqueta window con </window>, tal como se hace con las etiquetas de HTML (XHTML es un subconjunto de XML, como lo es XUL, de ahí las semejanzas).

Comentarios
  1. jodido_por_akismet

    Primero: Copiar y pegar directamente en, por ejemplo, un editor tan sencillo como el Notepad no me ha acarreado más que problemas. La doble coma no era aceptada por el validador de XML del Mozilla, no he encontrado si debía guardar el documento como UTF-8, UNICODE, ANSII, etc., la línia en la que hay el comentario de “Esto es una ventana” tampoco era aceptada por el XML.
    Segundo: Me ha sido imposible descargar el ejecutable del VIM de la web oficial del programa.
    Tercero: El copiar y pegar directamente del código que has puesto aquí al UltraEdit-32 me ha dado problemas en los guiones, los apóstrofes, la doble coma …
    En fin, que no he pasado del código y ya llevo más de 10 pruebas con el foobar.xul. Podrías actualizar el post para hablar o especificar estas nimiedades que no me han traído más que dolor de cabeza, porfavor ?

    Responder

  2. Lo siento, es culpa de WordPress, que sustituye las comillas simples y dobles (y otras cosas) por lo que le da la gana. Así que sustituyelos por sus versiones correctas a mano.

    En su día esto estaba escrito usando un plugin de código que lo mostraba resaltado, con barra de desplazamiento y con los caractéres como dios manda, pero lo borre para aligerar la carga del sitio. Algún día tengo que volver a instalarlo.

    Responder

  3. lifalone

    Puse el codigo fuente en esta direccion para los que hayan tenido problemas

    http://snipplr.com/view/12440/ejemplo-1-xul/

    Zootropo si te molesta lo retiro

    Responder

  4. Naugthall

    Solo una nota, para dejar comentarios sin que te marque error (por lo menos en mi caso)

    El comentario deberá ir entre <!– y –> si lo hago entre me marca error en la primera letra (o número o símbolo) que ponga.

    Un saludo

    Responder

  5. Naugthall

    Vaya que no me sale ja ja ja ja ja

    Bueno que en lugar de un guion en cada lado debo de poner 2…

    Responder

    • Sí, en realidad el texto de la entrada tiene 2 guiones, pero WordPress, el software que utilizo para la bitácora, tiene una función que hace esta clase de modificaciones absurdas por defecto.

      Responder

  6. Gustavo

    Hola, Exelente ejemplo amoigo, pero me gustaria colocar ese mismo boton en la barra de herramientas del navegador, de manera que siempre este activo sin importar la pagina que visito. Tienen alguna idea de como hacerlo?
    Saludos

    Responder

  7. leonard

    pues para los que no les funciona es cuestion de averiguar donde vive el que hixo este tutorial e irle a jaja no no es cierto
    se debe a que copiamos y pegamos pero las comillas que utilizza no son validas segun vi debemos irlas cambiando por shift + 2 y con eso se arreglan, nota se hace donde hayan comillas

    Responder

  8. Emanuel

    Lo que pasa con los que no les funciona es lo siguiente:

    El comentario lleva doble guion alto

    Y los doble apostrofe son otros, se arregla con poner Shift+2.

    Tambien hay un error en una comilla simple donde dice “I know Kung Foo”, se arregla con la comilla siemple que esta a la derecha del cero.

    Saludos!

    Responder

  9. Felcor

    Hey, una pregunta, al abrir el archivo desde Firefox me aparece el botón, sin embargo cuando hago click en el nada pasa… Alguna idea de que pude haber echo mal?

    Responder

  10. Cigodo

    La cuestión es que son lenguajes o estandares estrictos, y con un pequeño error por puntuación o espacios no lo interpretara de la manera aduacuad, chequen el codigo, las comillas tambien suelen ser el problema, lo ideal es transcribir, y si copian y pegan cehcar las comillas, ya que al copiar y pegar en ocasiones el estandar cambia

    Responder

  11. Sneik

    Buenas Noches,

    Estoy intentando correr el ejemplo en la versión 7.01 de Mozilla y me sale el siguiente error.

    XUL remoto
    Esta página usa una tecnología no admitida que ya no está disponible por defecto en Firefox.
    Por favor, contacte con los propietarios del sitio web para informarles de este problema.

    Alguna idea de cómo solucionar este problema? Gracias de antemano!

    Responder

    • carlos

      A mi me sale lo mismo

      Responder

    • Luis Constante

      Debes instalar el complemento

      Remote XUL Manager

      luego en consola del desarrollador lo buscas y adicionas el dominino de tu aplicacion, por ej:
      si estas ejecutando en tu misma pc el servidor apache tu dominio seria localhost.

      Responder

  12. PocoMonto

    instala una versión anterior de Fírefox o utiliza applets de Java para crear la extensión pues antes o despues tendrías el mismo problema de compatibilidad con diversos navegadores, cosa que se puede corregir en la mayoria de los casos.

    Responder

  13. Luis Constante

    Hola una ayuda, me sale este error.

    El error sale con los caracteres & y i)
    var registro=filas[i].split(‘_separador_’);
    document.getElementById(‘txtCodigo’).value=registro[1];
    i++;
    }
    “;

    Responder

    • Luis Constante

      Error Completo:

      Error de lectura XML: mal formado
      Ubicación: http://localhost/phpAvanzado/
      Número de línea 190, columna 59:
      var purl=’./executeStore.php?store=’+store+’&parametro=’+parametro;

      Responder

    • Luis Constante

      Codigo que sale error del evento button.onclick
      onClick=”
      var store=’spc_TblClienteSiguiente’;
      var parametro=”;
      store=base64_encode(store);
      parametro=base64_encode(parametro);
      var purl=’./executeStore.php?store=’+store+’&parametro=’+parametro;
      var content=getContent(purl);
      var filas=content.split(‘_separadorRegistro_’);
      var i=0;
      while ((filas.length-1)>i)
      {
      var registro=filas[i].split(‘_separador_’);
      document.getElementById(‘txtCodigo’).value=registro[1];
      i++;
      }
      “;

      Responder

  14. Robyir Loreto

    Buen día.. podrían subir un videotutorial a youtube paso a paso de cómo hacer un hola mundo con xulrunner y html? … es confusa la documentación que se consigue en la web..Gracias

    Responder

Deja un comentario