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

21 comentarios en «There is no data. There is only XUL (II)»

  1. 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 ?

  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.

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

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

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

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

  6. 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!

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

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

  9. 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!

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

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

  11. 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++;
    }
    «;

    1. 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++;
      }
      «;

  12. 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 a lifalone Cancelar respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.