There is only XUL (VII)

(6 comentarios)

Vamos a hacer un inciso para hablar sobre RDF. RDF es un estándar de la W3C cuyo nombre deriva de las siglas de ‘Resource Description Framework’ y que es un subconjunto de XML, al igual que XUL, que nos sirve para expresar hechos (cosas que son ciertas, la información en forma de predicados que tenemos sobre el mundo real). Sería algo parecido a los predicados de Prolog. Por ejemplo, un predicado del tipo ‘A Linus le gustan los pingüinos’ en RDF podría expresarse como

<Description about=”Linus”>
<le-gustan>pingüinos</le-gustan>
</Description>

La etiqueta Description sirve para representar uno o mas hechos, con un atributo about para indicar sobre quien es ese hecho, es decir, el sujeto del hecho. Description puede contener una o varias etiquetas hijas siendo cada una de ellas un predicado.

<Description about=”Linus”>
<le-gustan>pingüinos</le-gustan>
<informatico>true</informatico>
<linuxero>true</linuxero>
<nacionalidad>finlandesa</nacionalidad>
</Description>

En este ejemplo definimos una serie de predicados sobre Linus, con una etiqueta definida por nosotros mismos para describir ese predicado y con el valor entre las etiquetas.

Ahora, ¿como expresaríamos el hecho de que a Linus le gustan además de los pingüinos los sombreros o los camaleones?. Podríamos usar varios predicados le-gustan pero RDF nos proporciona un método mejor. En RDF se definen tres etiquetas que sirven como contenedoras: <Bag>, que define un conjunto de items; <Seq>, que define un conjunto de items ordenados y <Alt>, que define un conjunto de elementos que son alternativos, es decir, que se consideran equivalentes. Los elementos de un contenedor se encierra entre <li> y </li> (li de list, lista, al igual que la etiqueta de HTML). Veamos un ejemplo:

<Description about=”Linus”>
<Bag ID=”Gustos”>
<li>pingüinos</li>
<li>sombreros</li>
<li>camaleones</li>
</Bag>
<informatico>true</informatico>
<linuxero>true</linuxero>
<nacionalidad>finlandesa</nacionalidad>
</Description>

Ahora tenemos una lista de los gustos de Linus usando un Bag que sería equivalente a un predicado con varios valores. Para identificar el predicado que define este Bag usamos el atributo ID. Seq y Alt serían similares, tan solo cambia su significado.

Para finalizar esta pequeña introducción a RDF vamos a ver un ejemplo completo para explicar un par de cosas que quedan en el tintero.

<RDF:RDF xmlns:RDF=”http://www.w3.org/1999/02/22-rdf-syntax-ns#”
xmlns:BEBIDAS=”http://www.caffeine.com/rdf#”>

<RDF:Bag about=”http://www.caffeine.com/tipos-de-bebida”>
<RDF:li>
<RDF:Description about=”http://www.caffeine.com/infusiones/te”>
<BEBIDAS:nombre>Te</BEBIDAS:nombre>
<BEBIDAS:precio>1,12</BEBIDAS:precio>
</RDF:Description>
</RDF:li>
<RDF:li>
<RDF:Description about=”http://www.caffeine.com/infusiones/tila”>
<BEBIDAS:nombre>Tila</BEBIDAS:nombre>
<BEBIDAS:precio>0,9</BEBIDAS:precio>
</RDF:Description>
</RDF:li>
<RDF:li>
<RDF:Description about=”http://www.caffeine.com/cafes/solo”>
<BEBIDAS:nombre>Cafe solo</BEBIDAS:nombre>
<BEBIDAS:precio>1,2</BEBIDAS:precio>
</RDF:Description>
</RDF:li>
</RDF:Bag>
</RDF:RDF>

Lo primero que tenemos que comentar es la línea con la que comienza el RDF. Esta es similar al window de XUL en el que definimos que espacio de nombres vamos a utilizar. Usaremos RDF que esta definida en tal URL y BEBIDAS que esta definido en tal otra. Relacionado con esto, el RDF: que aparece antes de las palabras clave de RDF o el BEBIDAS: que aparece antes de los nombres de los predicados indica el espacio de nombres que estamos utilizando, es decir, RDF:li por ejemplo significa que nos estamos refiriendo a la etiqueta li que está definida dentro de RDF.

There is only XUL (VI)

(0 comentarios)

Antes de empezar con cosas mas serias vamos a ver como se implementan los menús en XUL.

<?xml version=”1.0″?>
<?xml-stylesheet href=”chrome://global/skin” type=”text/css”?>
<window xmlns=”http://www.mozilla.org/keymaster/gatekeeper/ there.is.only.xul”>
<menubar>
<menu label=”Archivo”>
<menupopup>
<menuitem label=”Nuevo”/>
<menuseparator/>
<menuitem label=”Abrir”/>
<menuitem label=”Salvar”/>
<menuitem label=”Cerrar”/>
</menupopup>
</menu>
<menu label=”Editar”>
<menupopup>
<menuitem label=”Deshacer”/>
<menuseparator/>
<menuitem label=”Copiar”/>
<menuitem label=”Cortar”/>
<menuitem label=”Pegar”/>
</menupopup>
</menu>
<menu label=”Ver”>
<menupopup>
<menuitem label=”Regla”/>
<menu label=”Fuente”>
<menupopup>
<menuitem label=”Arial”/>
<menuitem label=”Verdana”/>
</menupopup>
</menu>
<menu label=”Color”>
<menupopup>
<radiogroup>
<radio label=”Rojo”/>
<radio label=”Azul”/>
<radio label=”Negro”/>
<radio label=”Verde”/>
</radiogroup>
</menupopup>
</menu>
<menuitem label=”Pantalla Completa”/>
</menupopup>
</menu>
</menubar>
</window>

menubar define la barra de menús. Dentro de menubar tenemos un conjunto de etiquetas menu que son las que definen las entradas de menú en si. Si al pulsar sobre el menú se va a desplegar una lista de submenús, entonces utilizamos menupopup y menuitem para cada uno de los submenús. En el caso de que no hubieramos agrupado los submenús (menuitems) en un menupopup se habrían mezclado todas las entradas en una sola, que no es lo que queremos. Además tenemos otro elemento que es menuseparator, que introduce una línea para dividir el menú en partes. Notar también que los submenús también pueden ser menús con varias entradas como vemos en el caso de fuente en que definimos un nuevo menú y no un menuitem. Como último comentario decir que en lugar de menuitems o menús, como entradas dentro de los menús también podríamos tener otros elementos como checkboxes o radiobuttons como vemos en el caso del menú color.

There is only XUL (V)

(0 comentarios)

Esta vez vamos a terminar de ver los widgets básicos de XUL, junto con los botones, las cajas de texto o las etiquetas que ya vimos anteriormente. El código del programa ejemplo es el siguiente:

<?xml-stylesheet href=”chrome://global/skin/” type=”text/css”?>
<window xmlns=”http://www.mozilla.org/keymaster/gatekeeper/ there.is.only.xul”>

<tabbox orient=”vertical”>
<tabs orient=”horizontal”>
<tab label=”Radiobuttons”/>
<tab label=”Checkboxes”/>
<tab label=”Listbox”/>
<tab label=”Imagenes”/>
</tabs>

<tabpanels>
<radiogroup orient=”vertical”>
<radio label=”Cafe solo”/>
<radio label=”Cafe con leche”/>
<radio label=”Descafeinado”/>
</radiogroup>
<box>
<checkbox label=”Donuts”/>
<checkbox label=”Croisants”/>
<checkbox label=”Caracolas”/>
</box>
<image src=”file://C:widgetsmozilla.png”/>
</tabpanels>
</tabbox>

</window>

Las pestañas se declaran mediante la etiqueta tabbox. orient nos dice si la orientación, en este caso de las pestañas, será horizontal o vertical. Cada una de las pestañas esta compuesta por dos componentes diferenciados, las pestañas en si, que vienen definidas por una serie de etiquetas tab dentro de un elemento tabs y el contenido de las pestañas que se define dentro de tabpanels. Dentro de tabpanels habrá tantos elementos como pestañas definamos en tabs (esto no es necesariamente cierto pero vamos a simplificar) y se seguirá una correspondecia por orden de declaración a la hora de asignar el contenido que corresponde a cada pestaña. En este caso, por ejemplo, en la pestaña 1 tenemos un elemento radiogroup compuesto por varios elementos radio, en la pestaña 2 tenemos una serie de checkboxes que agrupamos en un box para que sea un solo elemento y en la tercera pestaña tenemos una imagen.

Veamos ahora los otros widgets. En primer lugar, en la primera pestaña tenemos radiobuttons, que representan opciones excluyentes. Un grupo de radiobuttons se define con radiogroup y cada uno de los radiobuttons con radio, como podemos ver. Los checkboxes son opciones no excluyentes que se definen con la etiqueta checkbox. Por último las imágenes se definen con la etiqueta image que tiene como atributo la ruta a la imagen (src de source, fuente).

There is only XUL (IV)

(0 comentarios)

En este tercer ejemplo sobre XUL vamos a construir una versión mas elegante del Hola Mundo que nos permita introducir el texto que queremos que salga en el alert. El código del programa es el siguiente:

<?xml version=”1.0″?>
<window id=”ventana-principal” title=”Caffeine” xmlns=”http://www.mozilla.org/keymaster/gatekeeper/ there.is.only.xul”>
<vbox>
<hbox><label value=”Texto a mostrar”/><textbox id=”miTexto” maxlength=”10″/></hbox>
<button label=”Mostrar” onclick=”var texto=document.getElementById(‘miTexto’);alert(texto.value);”/>
</vbox>
</window>

Ejecutad el programa y lo primero que vereis es que la ventana no ocupa todo el espacio del escritorio aún cuando no hemos especificado un ancho y un alto. Esto es así por el layout manager de XUL que se encarga de calcular la posición y el tamaño de los elementos de la interfaz de forma que no halla problemas cuando el usuario cambie el tamaño de las ventanas, por ejemplo. El layout manager de XUL se basa en dos etiquetas principalmente que son <vbox> y <hbox>. Con vbox lo que hacemos es indicar al gestor que posicione los elementos que van a estar dentro de <vbox></vbox> uno debajo de otro; con hbox, que es equivalente al <box> que hemos usado en ejemplos anteriores, le indicamos que los coloque de izquierda a derecha. Combinando estas dos etiquetas, espaciadores y los elementos flexibles podemos crear layouts complejas.

Si echamos un vistazo al código además de un vbox y un hbox de los que ya hemos hablado vemos dos cosas nuevas, el widget label y el widget textbox. Un label o etiqueta sirve para mostrar un texto en pantalla (un texto corto, para textos largos usariamos description) y el textbox o caja de texto para dar la posibilidad de escribir al usuario. El atributo value de label indica el texto que se mostrará. En el caso del textbox le damos un nombre con id, miTexto, ya que lo necesitaremos en el código javascript para obtener el texto que escribió el usuario en él. Además usamos el atributo maxlenght para indicarle que el máximo número de caractéres que pueden introducirse es 10.

Como último apunte un vistazo al onclick del botón ya que aquí es donde ocurre toda la magia. Como ya vimos en el ejemplo del ‘Hola Mundo’, onclick define una acción que se ejecutará cuando se haga click sobre ese elemento; en este caso cuando se presione el botón mostrar se ejecutará el código javascript que le pasamos. No es el objeto de estas entradas el explicar javascript pero basta con saber que se declara una variable llamada texto que apunta al elemento de la interfaz cuyo nombre es ‘miTexto’ y después se crea una ventana alert con el texto que contenga este.

There is only XUL (III)

(2 comentarios)

Vamos a ver algún nuevo concepto sobre XUL. El programa que veremos esta vez es un poco mas complejo que el que vimos en la anterior entrega. Para empezar creamos una carpeta para el programa, por ejemplo c:caffeine con una imagen de tipo gif con nombre aceptar y creamos nuestro fichero caffeine.xul dentro de ese directorio con el siguiente texto:

<?xml version=”1.0″?>
<window id=”ventana-principal” title=”Ventana” width=”400″ height=”200″ screenX=”20″ screenY=”20″ xmlns=”http://www.mozilla.org/keymaster/gatekeeper/ there.is.only.xul”>
<box>
<button id=”boton1″ class=”dialog” label=”Aceptar” image=”file://c:caffeineaceptar.gif” accesskey=”a”/>
<button image=”file://c:caffeineaceptar.gif” disabled=”true” accesskey=”c”/>
<button/>
</box>
</window>

Como veis tenemos la primera línea que indica que el documento es un documento XML. Al crear la nueva ventana en la siguiente línea vemos algún atributo que no conociamos aún: width que indica el ancho de la ventana en pixels, height que hace lo propio con el alto y screenX y screenY que nos da la posición inicial de la ventana en pixels.

Dentro de la ventana como vemos se defininen tres botones. En el primer botón que declaramos, boton1, tenemos un atributo class que indica la clase de botón que es boton1 (nos sirve para definir estilos distintos en la hoja de estilo, si no sabes css no te interesa); un atributo image, para mostrar una imagen en el botón y el atributo acceskey que asocia un acelerador con el botón.

El segundo botón que creamos tiene la peculiaridad de que no tiene texto (no tiene un atributo label), sino que simplemente tiene una imagen. Además esta deshabilitado con el atributo disabled y tiene como tecla de acceso directo ‘c’. Por último el tercer botón ilustra el que se puede crear objetos que no tengan atributos. En este caso dado que no definimos un texto a mostrar y tampoco una imagen el botón estará vacio.

Si hacemos doble click sobre el archivo caffeine.xul veremos algo parecido a esto:

Como último apunte, fijaros en que he comentado que tenemos que abrir el archivo haciendo doble click sobre el en lugar de hacerlo desde Archivo->Abrir. Esto es así por que si lo hicieramos de la segunda forma tendríamos una ventana dentro de la ventana de nuestro navegador, con lo cual no se vería el efecto de cambiar el tamaño de la ventana o cambiar el título. Además como apunte, si utilizais Mozilla Firefox y al hacer doble click sobre el archivo .xul os dice algo parecido a ‘c is not a registered protocol’ teneis que cambiar la asociacion para los archivos xul de firefox.exe -chrome “%1” que será seguramente lo que tengais a firefox.exe -chrome “file://%1”.

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

(21 comentarios)

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

There is no data. There is only XUL

(2 comentarios)

Mi nuevo pasatiempo en los últimos días, aparte del estudio intensivo y cualquier excusa que me permita alejarme del estudio intensivo, ha sido aprender un poco sobre XUL, un lenguaje basado en XML para el desarrollo de interfaces de usuario multiplataforma del que se dice será la pesadilla de .NET de Microsoft.

Su nombre deriva de las siglas de XML-based User-interface Language y fue creado por la gente del proyecto Mozilla apoyándose en su motor de renderizado, Gecko, que se encarga tanto del visualizado de webs como de la construcción de la interfaz de usuario.

Si quereis saber más sobre XUL, podeis encontrar una lista de sus principales ventajas en el documento ‘The Joy of XUL’ y algún tutorial en sitios como XUL-Planet.

Acelerar el comienzo de Eclipse

(0 comentarios)

Un pequeño apunte para probar cuando tenga tiempo. En el blog de Jesús M. Rodriguez describen un truco para hacer que Eclipse, posiblemente el mejor IDE para Java, tarde la mitad de tiempo en arrancar. Consiste simplemente en ejecutar la aplicación con los siguientes parámetros:

-vmargs -Xverify:none -XX:+UseParallelGC -XX:PermSize=20M
-XX:MaxNewSize=32M -XX:NewSize=32M -Xmx160m -Xms160m

Página 28 de 28« Primero...2425262728