Ajaxman » Xul

[Javascript-Songbird] Manipulando nuestra musica con Javascript y Songbird

ajaxman — Thu, 06 Mar 2008 19:10:40 +0000

Cuando deseamos escuchar musica, y vemos que reprodutor usar, mucha gente suele utilizar Windows Media, otra gran mayoria suele usar iTunes, alguinos mas usan Winamp, que son los mas usados.

Sin embargo la fundacion Mozilla, esta desarrollado desde hace bastante tiempo una alternativa bastante interesante, que se llama Songbird, de el cual hace algunos posts les platique.

Ahora van en la version 0.4

Tiene muchas cosas que talvez en muchos otros podremos encontrar sin embargo algo que no podemos ver como algo importante es que es “Open source”, y que ademas se puede personalizar a nuestros gusto.

Pero hay algo aun mas interesante, como esta desarrollado con XUL, se puede manipular con Javascript, claro que para esto debemos adentrarnos un poco con XUL y con SongBird.

Keisuke, Desarrollo un script el cual, valga la redundacia esta escrito en Javascript, muuy simple y sencillo que nos permite mostrar en forma de un nube de tags nuestra biblioteca.

solo basta introducir la url del script y Songbird nos pedira confirmacion para ejecutar dicho script y listo ya tenemos nuestra nube de tags.

El codigo de la pagina que se ejecuta es el siguiente


  
    TagCloud Library View
    
    
  

  
    

      Genres
      Artists
      Albums
      Years

Y el contenido de el archivo tagcloud.js es el siguiente

var cloudDiv;
var clouds = new Object();
var listcache = new Array();
var siteLib = songbird.siteLibrary;
var mainLib = songbird.mainLibrary;
const SB_NS = "http://songbirdnest.com/data/1.0#";

/*****************************************************************************
 *
 *  This example has 2 steps to it.
 *  1) The first step is the fetching of the cloud of items for
 *     a given 'menu' item (from tagCloud.html) - Genre, Artist, Album, Year.
 *     The entry point is setCloud() and it creates a LibraryCloud object and
 *     caches it in the clouds object for performance reasons. Currently there
 *     is a downside to this caching that means newly added tracks won't
 *     appear in the cloud until the page is re-loaded.
 *
 *     The visual output of the cloud is the final phase of this step and is
 *     generated by the dumpCloud() method which outputs the html anchor
 *     elements containing the values in the cloud.
 *
 *  2) The second step covers the clicking of an item in the cloud. That
 *     action triggers a call to setWebPlaylist. That method pulls some data
 *     from the anchor element itself to populate a medialist that contains
 *     all the tracks that match that property/value pairing. These medialists
 *     are cached in the listCache array and suffer the same downside of lack
 *     of refresh.
 *
 ****************************************************************************/

function load() {
  cloudDiv = document.getElementById("cloud");
}

function unload() {
  // remove all the garbage we just created.
  siteLib.clear();
}

// debugging
function dump(stuff) {
  cloudDiv.appendChild(document.createTextNode(stuff));
  cloudDiv.appendChild(document.createElement("br"));
}

// converts a percentage to a number that will be used to define the class
// so it matches the class names in tagCloud.css
function percentToClassNum( aPercent ) {
    var classNum = 0;
    if (aPercent >= 99)
      classNum = 1;
    else if (aPercent >= 70)
      classNum = 2;
    else if (aPercent >= 60)
      classNum = 3;
    else if (aPercent >= 50)
      classNum = 4;
    else if (aPercent >= 40)
      classNum = 5;
    else if (aPercent >= 30)
      classNum = 6;
    else if (aPercent >= 20)
      classNum = 7;
    else if (aPercent >= 10)
      classNum = 8;
    else if (aPercent >= 5)
      classNum = 9;

    return classNum;
}

function LibraryCloud( aPropertyName ) {
  this.propName = aPropertyName;
  this.values = new Array();
  this.numItems = 0;
  this.populateCloud();
}

// A cloud is the data representation for a particular property (propName)
// and all the values (and their frequency) in the main library.
LibraryCloud.prototype = {
  SB_NS: "http://songbirdnest.com/data/1.0#",
  propName: "",
  values: null,

  // this method gets all the possible values for a property and then
  // counts the occurences of each. It then uses the count to generate
  // a class number that will correspond to css which will size the display.
  populateCloud: function() {
    var valueEnum =
      mainLib.getDistinctValuesForProperty( this.SB_NS + this.propName );
    while ( valueEnum.hasMore() ) {
      var propValue = valueEnum.getNext();
      this.currentPropValue = propValue;
      this.values[propValue] = new Array();
      this.values[propValue].name = propValue;
      this.values[propValue].numItems = 0;
      mainLib.enumerateItemsByProperty( this.SB_NS + this.propName,
                                        propValue, this, 1 );
    }
    for each ( var item in this.values ) {
      item.percentage =
        Math.floor(( item.numItems / this.numItems ) * 100);
      item.classNum = percentToClassNum(item.percentage);
    }
  },

  // implementation of enumeration listener to count the items
  onEnumerationBegin: function() {
  },
  onEnumeratedItem: function(list, item) {
    this.values[this.currentPropValue].numItems += 1;
    this.numItems += 1;
  },
  onEnumerationEnd: function() {
  }
}

// Generate anchor DOM elements for all the values in a library cloud
// and push them into the specified div.
function dumpCloud( aLibraryCloud, aCloudDiv ) {
  aCloudDiv.innerHTML = "";
  for each ( var item in aLibraryCloud.values ) {
    var span = document.createElement("span");
    span.innerHTML = " " +
                     item.name +
                     " ";
    aCloudDiv.appendChild(span);
  }
}

// builds up the medialist to display - we're taking items from the main
// library and adding them to a mediaList from the site library so we can't
// test to see if they exist already because that does a GUID check and the
// item will never match because at the data model we are referring to 2
// different items.
var listener = {
  _list: null,
  onEnumerationBegin: function() {
    // XXXredfive - name of list really should be the propkey
    //              but that is causing duplicate items in the list because
    //              we can't compare across libraries for containment.
    this._list = siteLib.createSimpleMediaList(Date());
  },
  onEnumeratedItem: function(list, item) {
    if ( this._list ) {
      // XXXredfive - should check to see if item is in list before adding but
      //              the item is mainLib and the list is siteLib
      this._list.add(item);
    }
  },
  onEnumerationEnd: function() {
  }
};

// called by the link from one of the property values in the cloud
function setWebPlaylist(aAnchor) {
  var prop = SB_NS + aAnchor.getAttribute("propName");
  var propkey = aAnchor.getAttribute("propKey");

  // use the cached list if there is one - it never gets refreshed
  if ( typeof( listcache[propkey] ) != "undefined" ) {
    songbird.webPlaylist.mediaList = listcache[propkey];
    return;
  }

  // populate the list by iterating over the items with the property/value
  // value that we're asking for. listener does the work
  mainLib.enumerateItemsByProperty( prop, aAnchor.innerHTML, listener, 1 );

  // Cache the mediaList for quick access on subsequent loads.
  listcache[propkey] = listener._list;

  // Set the list as the web playlist.
  songbird.webPlaylist.mediaList = listcache[propkey];
}

// entry point from the 'menu' links
function setCloud( aPropertyName, aPropertyEnumName ) {
  // Cache the clouds for quick look-up. Property values won't get seen until
  //   a refresh of the page.
  if ( typeof( clouds[aPropertyName] ) == "undefined" )
    clouds[aPropertyName] = new LibraryCloud(aPropertyName);
  // XXXredfive - could be an else case here that does a refresh on the cloud
  //              to make sure it has all the current values for the property

  // Display the tag cloud of values for the property name.
  dumpCloud( clouds[aPropertyName], cloudDiv );

}

Les deje el codigo para que vean como es muy sencillo hacer grandes cosas con Javascript,Ajax y Xul.

Gracias a Mozilla por darnos tanto poder usando solo Javascript

Mas Informacion de estos temas sobre Songbird en | Blog de Songbird en ingles

[Manual]Programando aplicaciones con XUL: Botones

ajaxman — Wed, 21 Nov 2007 06:34:14 +0000

Capitulo 2:

Bien continuemos con nuestro manual de XUL, ya sabemos como hacer un Hola mundo, en Xul, así que hagamoslo mas interesante.

Ahora vamos a trabajar con botones(~~recuerden que aqui no hay visual studio jaja~~).

Botones en XUL

Para que podamos interactuar con nuestro entorno es necesario disponer de botones, como cualquier otro lenguaje de programación, de la misma forma que HTML, tambien XUL, dispone de una serie de etiquetas para crear los elementos de las interfaces de los usuarios.

Estos botones estan basados en la mas basica de estas etiquetas, esta es llamada Plantilla:XULElem que nos servira para crear un boton.

Cada elemento de tipo Boton, tiene dos propiedades asociadas label e image, mutuamente compatibles, se pueden tener un boton con imagen y/o con etiqueta

La etiqueta Plantilla:XULElement usa la siguiente sintaxis

<button id="identificador">
 label="Aceptar"
 image="imagenes/imagen.jpg"
 disabled="true"
 accesskey="t"/>

Cabe mencionar que todos estos atributos son opcionales y aceptan los siguientes datos.

id:Un identificador único (dentro de la página actual) que represente de forma inequívoca al botón. Es muy útil para referirse al botón desde una hoja de estilos CSS o desde un script de código, por ejemplo. Es recomendable rellenar este atributo en todas las etiquetas que uno declare.
class: Este atributo se refiere a que a un boton se le puede asignar una clase, con la cual le aplicaremos cierto estilo, usando CSS, como si fuera HTML, aunque no es necesario usar una clase, para poder aplicar estilos en los botones.
label: Este atributo se refiere a el texto que mostrara nuestro boton, si lo dejamos en blanco, simplemente no tendra texto.
image: El atributo image nos indica que imagen aparecera dentro del boton, claro si deseamos usar alguna imagen, si no se le indica alguna imagen simplemente nos aparecera sin ella, tambien se le puede especifiar una imagen a un boton mediante una hoja de estilos usando list-style-image.
disabled: Esta opcion creo que ya todos (o casi) la conocemos, esta opcion se refiere a que si la indicamos como true, el boton estara deshabilitado (no respondera a los click’s), y si lo ponemos como false el boton estara habilitado, si no se indica, el boton siempre estara habilitado.
acceskey: con este atributo, le podemos indicar que reaccione a cierta tecla de atajo (o tecla de acceso directo), con la cual le pasaremos el foco, a este elemento , que en este caso es el boton.

Aqui tenemos un ejemplo, de como quedaria nuestro archivo main.xul

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

</button>

Recuerden usar los ejemplos de los capitulos anteriores para poder ir armando sus aplicaciones.

Les dejo el ejemplo, como siempre funcionando.

Ejemplos de botones en XUL

Basado en | Desarrollo con xul mozilla

[Manual]Programando aplicaciones con XUL capitulo 1

ajaxman — Sun, 21 Oct 2007 19:00:30 +0000

Ahora si empezaremos con lo bueno de XUL, haber hasta donde logramos llegar.

Ya sabemos que es XUL, y a pesar de servir para hacer extensiones para Firefox, Thunderbird, Songbird, etc. Nosotros lo usaremos para realizar aplicaciones de escritorio primero sencillas aprendiendo los controles y posteriormente aplicaciones mas profesionales.

Empecemos.

CREACION DE UN HOLA MUNDO EN WINDOWS (XP, no probado en vista).

Recomendacion: De preferencia no uses windows vista, ya que Xulrunner, no lo he probado en ese sistema y es probable que te de fallos, usa XP en este caso.

Bien primero necesitamos bajarnos el Xul Runner, que viene siendo algo asi como la maquina virtual de java, pero en este caso es para ejecutar aplicaciones xul.

Para bajarlo iremos a la siguiente dirección web http://developer.mozilla.org/es/docs/XULRunner, y desde ahi podemos bajarnos el XUlRunner que en este caso corresponde a la versión 1.0.8.1, version conocida como pre-version estable, esta disponibles hasta el momento 3 opciones de descarga.

Para Linux, Windows y Mac OSx, si desean las cosas mas rapidamente aqui les pongo los enlaces de descarga directa.

Descargar XulRunner para Windows: Aqui
Descargar XulRunner para Linux: Aqui
Descargar XulRunner para Mac OS X: Aqui

Bien ya que lo tenemos descargado procedemos a descomprimirlo, en mi caso lo realizare en la unidad D:

Quedando de esta forma en D:xulrunner, los siguientes archivos.

[source:java]
Directorio de D:xulrunner

21/10/2007 11:24 a.m.

.
21/10/2007 11:24 a.m. ..
26/01/2006 08:42 a.m. 8,314 AccessibleMarshal.dll
21/10/2007 11:24 a.m. chrome
21/10/2007 11:24 a.m. components
21/10/2007 11:24 a.m. defaults
26/01/2006 08:37 a.m. 48 dependentlibs.list
26/01/2006 08:39 a.m. 10,894 GenerateJavaInterfaces.exe
21/10/2007 11:24 a.m. greprefs
26/01/2006 08:40 a.m. 4,825 javaxpcom.jar
26/01/2006 08:42 a.m. 8,826 javaxpcomglue.dll
26/01/2006 08:42 a.m. 414,303 js3250.dll
05/10/1999 07:14 p.m. 30,869 LICENSE
26/01/2006 08:42 a.m. 194,686 mozctl.dll
26/01/2006 08:42 a.m. 7,814 mozctlx.dll
26/01/2006 08:42 a.m. 155,750 nspr4.dll
26/01/2006 08:42 a.m. 364,638 nss3.dll
26/01/2006 08:42 a.m. 237,669 nssckbi.dll
26/01/2006 08:42 a.m. 28,779 plc4.dll
26/01/2006 08:42 a.m. 24,678 plds4.dll
21/10/2007 11:24 a.m. plugins
12/03/2004 10:25 p.m. 9,542 README.txt
21/10/2007 11:24 a.m. res
21/10/2007 11:24 a.m. sdk
26/01/2006 08:42 a.m. 106,594 smime3.dll
26/01/2006 08:42 a.m. 476 softokn3.chk
26/01/2006 08:42 a.m. 364,646 softokn3.dll
26/01/2006 08:42 a.m. 110,686 ssl3.dll
26/01/2006 08:34 a.m. 123,004 updater.exe
26/01/2006 08:42 a.m. 7,778 xpcom.dll
26/01/2006 08:34 a.m. 63,598 xpicleanup.exe
26/01/2006 08:42 a.m. 7,133,797 xul.dll
26/01/2006 08:41 a.m. 9,839 xulrunner-stub.exe
26/01/2006 08:41 a.m. 81,001 xulrunner.exe

[/source]

Una vez teniendo esto vamos a escribir nuestro proyecto “holamundo”, nuevamente trabajare en D: ,les recomiendo ampliamente que trabajen en raiz ya sea en C:, D: , e: etc, pero no en el escritorio o en mis documentos ya que esto les confundira con las rutas o paths que usaremos.

Hagamos Una carpeta en D: llamada XUL, no es necesario que se llame asi pero si es muy recomendable.

Una vez ahi creamos nuestra carpeta del proyecto la cual debera llevar el mismo nombre que el nombre de la aplicacion en este caso se llamara holamundo.

Dentro de la carpeta anterior (holamundo) crearemos 2 carpetas mas una llamada “chrome” y otra “defaults“, en este caso estas carpetas si son necesarias y obligatorias, ademas crearemos tambien un archivo llamado “applicacion.ini” este lo creamos con el block de notas o algo similar, revisen que el archivo realmente tenga la extension .ini.

De esta forma tenemos.

Ahora veamos que contendra el archivo application.ini.

Nota: para poner comentarios en el archivo application.ini es necesario poner punto y coma (;) la pricipio de la linea

[source:java]

[App]
; Nombre de la organizacion que distribuira la aplicacion , no es necesario pero es recoemndable ponerlo
;opcional
Vendor=Ajaxman
;
; Nombre de la aplicacion
; Requerido
Name=holamundo
;
; Version de la aplicacion
;Opcional
Version=1.0
;
; Campo de fecha de creacion el cual sirve como ID esta en formato “timestamp” , es requerido
;
BuildID=20060101
;
; Derechos de la aplicacion
; opcional
Copyright= Creative commons

[Gecko]
;
; Este campo dice que version de motor Gecko (XulRunner) necesitaremos para ejecutar la aplicación
; Requerida
MinVersion=1.8
;
; Este campo dice que version sera la maxima version que aceptara nuestra aplicacion en este caso es opcionaly no la pondre
;
;
;MaxVersion=1.8

[/source]

Bien ahora dentro de la carpeta “chrome”, creamos un archivo llamado “chrome.manifest” , es obligatorio tambien crear este archivo.
el cual contendra lo siguiente

content holamundo file:content/

Con esto le indicamos que el archivo Xul que usara estara en la carpeta content, dentro de nuestra aplicacion XUL.
Obviamente necesitaremos crear tambien la carpeta “content”, y dentro de esta carpeta crearemos nuestro archivo XUL.

El archivo se llamara “main.xul” y ahora agregemos el contendido

[source:xml]

[/source]

Como vemos basicamente se trata de un XML, lo unico que destacaremos que es para crear una ventana necesitamos usar la TAG window, por el momento no entraremos en mas detalles podemos ir experimentando posteriormente pero de momento lo dejaremos asi.
y le agrege tambien un tag “caption label” que no hara otra cosa mas que mostarnos dentro de nuestra ventana XUL, el texto “Hola mundo”

Ahora en en la carpeta “defaults” que creamos anteriormente, creamos otroa carpeta llamada “preferences”

Y dentro de esta carpeta creamos un archivo llamado “prefs.js” el cual contendra lo siguiente

pref(“toolkit.defaultChromeURI”, “chrome://holamundo/content/main.xul”);

este archivo tiene las preferencias en este caso es donde tenemos nuestro achivo de inicio XUL

Ahora bien ejecutemos nuestra aplicacion

En la carpeta que guardara nuestra aplicacion el nombre debe ser con minusculas no usen mayusculas si no, no jalara ejemplo. usen holamundo en lugar de Holamundo y similares

Para correrlo nos pasamos a la carpeta xulrunner y desde ahi lo ejecutamos de la siguiente manera.

D:xulrunnerxulrunner.exe D:XULholamundoapplication.ini

De esta forma nos mostrara nuestra primera aplicacion xul ,y notaran que se trata de una ventana estandar de Windows, la cerramos y listo ya creamos nuestra pirmera aplicacion con XUL.

Pueden Descargar el ejemplo que use desde aqui Hola mundo en XUL

Xul parte 2: Estructura XUL

ajaxman — Fri, 28 Sep 2007 15:07:39 +0000

Ahora veremos como se procesara xul por parte de Mozilla ….

Cómo se procesa XUL

En Mozilla, XUL se procesa en forma similar al procesamiento de HTML y otros tipos de contenido. Cuando el usuario escribe la URL de una página HTML en el campo de dirección del navegador, éste busca el sitio web y descarga su contenido. El motor de presentación de Mozilla toma el contenido en el formato HTML y lo transforma en un árbol de documento. Este árbol se convierte en un conjunto de objetos que pueden mostrarse en la pantalla. Los estilos CSS, imágenes y otras tecnologías son usados para controlar la presentación. El procesamiento de XUL es muy similar.

De hecho, en Mozilla, todos los tipos de documento, sin importar si son HTML, XUL o aún SVG son procesados por el mismo código. Esto significa que las mismas propiedades CSS pueden usarse para definir el estilo tanto del HTML como de XUL, y muchas de las características pueden compartirse entre ambos. Sin embargo, hay características que son específicas del HTML como son los formularios, y otras que son específicas de XUL como son los overlays (revestimientos). Ya que XUL y HTML se procesan de la misma forma, se pueden cargar desde el sistema de archivos local del usuario, desde una página web, desde una extensión del navegador o desde una aplicación XULRunner.

El contenido de fuentes remotas, como por ejemplo: http://localhost/~username/, sin importar si es HTML, XUL o cualquier otro tipo de documento, está limitado en la clase de operaciones que pueden realizar, por razones de seguridad. Por este motivo, Mozilla proporciona un método para instalar contenido en forma local y registrar los archivos instalados para que formen parte del sistema chrome. Esto permite usar una URL especial llamada la URL chrome://. Al acceder a un archivo usando la URL chrome, éstos reciben privilegios para acceder a archivos locales, preferencias, marcadores de página y ejecutar otras operaciones privilegiadas. Obviamente, las páginas web no obtienen estos privilegios, a menos que estén firmadas con un certificado digital y el usuario dé el permiso para ejecutar estas operaciones.

Este registro en el paquete chrome es la forma en la que las extensiones de Firefox pueden añadir características al navegador. Las extensiones son pequeños paquetes con archivos XUL, Javascript, hojas de estilo e imágenes empaquetados en un sólo archivo. Este archivo puede crearse usando una utilidad ZIP. Cuando el usuario descarga la extensión, ésta es instalada en su máquina. La extensión se ensambla en el navegador usando una característica especial de XUL llamada overlay (revestimiento), la cual permite que se combinen el XUL de la extensión y el XUL del navegador. Para el usuario, puede parecer que la extensión ha modificado al navegador, pero en realidad el código está separado y la extensión se puede desinstalar fácilmente.

Por supuesto, no es necesario que los paquetes registrados usen revestimientos. Si no los usan, no se puede acceder a ellos desde la interfaz del navegador, pero sí por medio de la URL chrome, si se sabe cuál es.

Las aplicaciones XUL autónomas (que no necesitan el navegador) pueden incluir código XUL de la misma forma, pero este código se incluirá como parte de la instalación, en lugar de tener que instalarse de forma separada como una extensión. Sin embargo, este código XUL debe ser registrado en el sistema chrome de tal forma que las aplicaciones puedan mostrar la UI.

Vale la pena anotar que el navegador Mozilla realmente es un conjunto de paquetes que contienen archivos XUL, JavaScript y hojas de estilo. Estos paquetes son accesibles usando una URL chrome, tienen privilegios ampliados y trabajan como cualquier otro paquete. Por supuesto, el navegador es más grande y más sofisticado que la mayoría de las extensiones. Firefox, Thunderbird y muchos otros componentes también están escritos en XUL y se puede acceder a ellos usando la URL chrome. Se puede examinar estos paquetes mirando el directorio chrome donde Firefox o cualquier otra aplicación XUL esté instalada.

La URL chrome siempre comienza por ‘chrome://’. De la misma forma que la URL 'http://' se refiere a sitios web remotos accesibles por medio de HTTP y la URL 'file://' siempre se refiere a archivos locales, la URL 'chrome://' se refiere a los paquetes y extensiones instalados. En la próxima sección veremos con detalles la sintaxis de la URL chrome. Es importante anotar que si se accede a un contenido a través de una URL chrome, éste gana los privilegios ampliados que se han mencionado anteriormente y que otras clases de URL no tienen. Por ejemplo, una URL HTTP no tiene ningún privilegio especial, y ocurrirá un error si la página web intenta leer un archivo local. Sin embargo, un archivo cargado por medio de una URL chrome podrá leer archivos sin restricciones.

Esta diferenciación es importante. Significa que hay ciertas cosas que el contenido de las páginas web no puede hacer, tales como leer los marcadores de página del usuario. Esta diferenciación no está basada en la clase de contenido a ser mostrado, sólo en el tipo de URL empleada. Tanto el HTML como el XUL colocados en un sitio web no tienen permisos adicionales, sin embargo si el HTML o el XUL son cargados por medio de una URL chrome tendrán permisos ampliados.

Si Ud. va a usar XUL en un sitio web, debe colocar el archivo XUL en el sitio web tal como lo haría con un archivo HTML, y luego cargar su URL en el navegador (http://localhost/xul.php). Debe asegurarse que el servidor web esté configurado para enviar los archivos XUL con el tipo de contenido de application/vnd.mozilla.xul+xml (con PHP sería: header('content-type: application/vnd.mozilla.xul+xml');). Este tipo de contenido permite a Mozilla diferenciar entre HTML y XUL. Mozilla no usa la extensión del archivo, a menos que esté leyendo archivos del disco local, pero se debería usar la extensión .xul para todos los archivos XUL. Es posible abrir archivos XUL desde el navegador o el gestor de archivos.
Recuerde que los archivos XUL remotos tienen restricciones significativas sobre lo que pueden hacer.

Tipos de documentos: HTML XML XUL CSS
Mozilla emplea una clase totalmente diferente de objeto de documento (DOM) para el HTML y el XUL, aunque compartan mucha funcionalidad. En Mozilla existen tres tipos principales de documentos: HTML, XML y XUL. Naturalmente, el documento HTML se usa para los documentos HTML, el documento XUL se utiliza en los documentos XUL y el documento XML se emplea para otros tipos de documentos XML. Ya que el formato XUL también es XML, el documento XUL es una subclase del documento XML que es más genérico. Existen diferencias sutiles de funcionalidad. Por ejemplo, mientras los controles de un formulario en HTML es accesible por medio de la propiedad document.forms, en los documentos XUL no está disponible ya que XUL no tiene formularios en el mismo sentido que HTML. De otro lado, características específicas de XUL como los revestimientos y las plantillas sólo están disponibles en los documentos XUL.

La distinción entre documentos es importante. Es posible usar muchas características de XUL en documentos HTML o XML ya que no son específicas al tipo de documento, sin embargo, otras características requieren un tipo de documento específico. Por ejemplo, se pueden usar los tipos de disposición de XUL en otros documentos ya que no dependen del tipo de documento XUL para funcionar.

Para resumir los puntos expuestos anteriormente:

Mozilla muestra el HTML y el XUL con el mismo motor de resultado y emplea CSS para especificar su presentación.
XUL puede cargarse desde un sitio remoto, desde el sistema de archivos local o ser instalado como un paquete y ser accesible con una URL chrome. Esto es lo que hacen las extensiones del navegador.
Las URL chrome sirven para acceder a los paquetes instalados y abrirlos con privilegios ampliados.
HTML, XML y XUL cada uno representa un diferente tipo de documento. Algunas características se pueden usar en cualquier tipo de documento, mientras que otras son específicas de un tipo de documento.

En las próximas secciones describiremos la estructura básica de un paquete chrome que será instalado dentro de Mozilla. Sin embargo, si desea comenzar a construir una aplicación simple, puede saltar a creando una ventana y volver más tarde.

Organización del paquete

Mozilla está organizado de tal forma que te permite tener tantos componentes pre-instalados como quieras. Cada extensión es, además, un componente con un chrome URL distinto. Además tendrá un componente para cada tema o configuración regional instalado. Cada uno de estos componentes o paquetes, está compuesto de un conjunto de ficheros que describen la interfaz de usuario para cada uno. Por ejemplo, el componente de mensajería tendrá descripciones de la ventana de listado de mensajes de correo, la ventana de composición y los cuadros de la libreta de direcciones.

Los paquetes que vienen con Mozilla están localizados en la carpeta chrome, que puedes encontrar en el directorio donde instalaste Mozilla. La carpeta chrome es donde encontrarás todos estos archivos que describen la interfaz de usuario para el navegador Mozilla, el cliente de correo y para otras aplicaciones. Habitualmente pondrás todos los archivos XUL para una aplicación en esta carpeta, excepto para las extensiones, que serán instaladas en la carpeta de extensiones de un usuario concreto. El simple hecho de copiar un archivo XUL a la carpeta ‘chrome’ no proporcionará al archivo ningún permiso extra ni será accesible a través de chrome URL. Para conseguir estos privilegios extras, tendrás que crear un archivo manifest y ponerlo en la carpeta chrome. Este archivo es fácil de crear, y habitualmente sólo contiene un par de líneas de código. Se usa para enlazar un chrome URL a un archivo o ruta de una carpeta del disco donde están los archivos XUL. Detalles de cómo crear este archivo serán vistos en la siguiente sección.

La única forma de acceder a contenido a través de una URL chrome es crear un paquete como se describe en las siguientes secciones. Esta carpeta se denomina ‘chrome’ porque parece ser un nombre conveniente para el directorio donde se mantienen los paquetes chrome que se incluyen con Mozilla.

Para agrandar la confusión, hay otros dos sitios donde la palabra chrome puede aparecer. El primero es el argumento ‘-chrome’, y el segundo el modificador chrome para la función window.open(). La llamada de estas características no otorga privilegio alguno. Son usadas para abrir una nueva ventana arriba del todo sin el menú o la barra de herramientas del navegador. Habitualmente se usará esta característica en aplicaciones XUL donde no se quiera que aparezca las diferentes barras del navegador alrededor de los cuadros de diálogo.

Los archivos para un paquete son normalmente unidos en un simple archivo JAR. Un archivo JAR debe ser creado y examinado usando una aplicación ZIP. Por ejemplo, puedes abrir un archivo JAR en la carpeta chrome de Mozilla para ver la estructura básica de un paquete. Aunque es normal unir los archivos en un archivo JAR, los paquetes pueden ser accesibles de forma expandida en un directorio. No es habitual distribuir un paquete de esta forma, pero es práctico durante su desarrollo, ya que puedes editar el archivo directamente para después recargarlo sin tener que volver a empaquetar o reinstalar los archivos.

Por defecto, las aplicaciones Mozilla analizan los archivos XUL y los scripts, y guardan una versión pre-compilada en la memoria para mejorar el resto de la sesión. Esto mejora la ejecución. Sin embargo, por culpa de esto, el archivo XUL no será recargado aún cuando el archivo fuente haya cambiado. Para desactivar este mecanismo, es necesario cambiar las preferencia nglayout.debug.disable_xul_cache. En Firefox, ésta preferencia se puede añadir a las preferencias del usuario poniendo “about:config” en la barra de dirección y cambiar ese valor por verdadero (true). O manualmente editando el archivo de preferencias user.js y añadiéndole la siguiente línea:

[source:java]

pref(“nglayout.debug.disable_xul_cache”, true);

[/source]

Habitualmente hay tres partes distintas en un paquete chrome, aunque son opcionales. Cada parte está almacenada en una carpeta distinta. Estas tres partes son el contenido, la piel (skin) y la configuración regional, explicados más abajo. Un paquete particular debe proporcionar una o más pieles (skins) y locales, pero un usuario puede reemplazarlos con los suyos propios. Además, el paquete debe incluir varias aplicaciones distintas cada una accesible a través de diferentes chrome URLs. El sistema de paquetes es suficientemente flexible por lo que puedes incluir todas las partes que necesites y permitir que otras partes, como el texto para diferentes idiomas, sean descargadas de forma separada.

Los tres tipos de paquetes chrome son:

Contenido – ventanas y scripts.
Las declaraciones de las ventanas y los elementos de la interfaz de usuario contenidos con ellos. Se almacenan en archivos XUL, que tienen extension .xul. Un paquete de contenido puede tener múltiples archivos XUL, pero la ventana principal debe tener el mismo nombre de archivo que el nombre del paquete. Por ejemplo, el paquete ‘editor’ tendrá un archivo que se llamará editor.xul. Los scripts están situados en archivos separados junto a los archivos XUL.
Aspecto (skin) – Hojas de estilo, imágenes y otros archivos específicos al tema.
Las hojas de estilo describen detalles de la apariencia de una ventana. Se almacenan de forma separada a los archivos XUL para facilitar modificar el aspecto (skin o tema) de una aplicación. Algunas imágenes usadas también se almacenan aquí.
Configuración regional – Archivos locales específicos.
Todo el texto que se muestra en una ventana se almacena de forma separada. De esta forma, un usuario puede tener un conjunto para su propio idioma.

Paquetes de contenido

El nombre de un archivo JAR debe describir lo que contiene, pero no se puede asegurar el contenido si no se mirar a dentro. Vamos a usar el paquete del navegador incluido con Firefox como ejemplo. Si extraemos los archivos de browser.jar, nos encontraremos con una jerarquía de directorios similar a la que se muestra a continuación:

[source:java]

content
browser
browser.xul
browser.js
– otros ficheros XUL y JS van aquí –
bookmarks
– los archivos de marcadores, aquí –
preferences
– los archivos de preferencias, aquí –
.
.
.
[/source]
Ésto es fácilmente reconocible como un paquete de contenido, ya que el directorio superior se llama content. Para aspectos(skins) esta carpeta normalmente será denominada skin y para configuración regional se le llamará locale. Este esquema de nombres no es necesario pero es una práctica habitual para hacer más claras las partes de un paquete. Algunos paquetes deben incluir una sección de contenidos, una piel (skin) y un locale. En este caso, encontraremos un sub-directorio para cada tipo. Por ejemplo, Chatzilla está distribuido de esta forma.

La carpeta content/browser contiene un número de archivos con extensiones .xul y .js. Los archivos XUL son los que tienen la extensión .xul. Los archivos con extensiones .js son archivos JavaScript que contienen los scripts que se encargan de la funcionalidad de una ventana. Muchos archivos XUL tienen un archivo script asociado con ellos, y muchos deben tener más de uno.

En el listado superior, dos archivos han sido vistos. De hecho hay otros, pero para simplificar no serán vistos. El archivo browser.xul es el archivo XUL que describe la ventana principal del navegador. La ventana principal para un paquete de contenido debe tener el mismo nombre que el paquete con una extensión .xul. En este caso, el nombre del paquete es “browser”, por eso esperaremos encontrarnos con browser.xul. Algunos de los otros archivos XUL describen ventanas distintas. Por ejemplo, el archivo pageInfo.xul describe el cuadro de información de la página.

Muchos paquetes incluirán un archivo contents.rdf que describe el paquete, su autor y el revestimiento que usa. Sin embargo, este archivo está obsoleto y ha sido reemplazado con un mecanismo más simple. Este nuevo método es el archivo manifest mencionado anteriormente, y encontraremos estos archivos con la extensión .manifest en el directorio chrome. Por ejemplo, browser.manifest describe el paquete del navegador.

Varias subcarpetas, como son marcadores y preferencias (bookmarks y preferences), describen secciones adicionales del navegador. Están ubicadas en diferentes carpetas sólo para mantener los archivos más organizados.

Aspectos (skins) o Temas
Al código subyacente de Mozilla se le llama aspectos (skins), aunque a la interfaz de usuario se la llama temas, pero ambos se refieren a la misma cosa. El archivo classic.jar describe el tema por defecto que viene con Firefox. La estructura es similar a los paquetes de contenido. Por ejemplo, examinando classic.jar:
[source:java]

skin
classic
browser
– browser skin files go here –
global
contents.rdf
– global skin files go here –.
.
.
[/source]
Nuevamente, esta estructura de carpetas no es necesaria y es usada por comodidad. Realmente puedes colocar todos los archivos en una carpeta arriba del todo y no usar subcarpetas. Sin embargo, para aplicaciones mayores, las subcarpetas son usadas para separar los diferentes componentes. En el ejemplo anterior, una carpeta es para los archivos del tema para el navegador y otra para los archivos del tema global. La carpeta global contiene archivos de la piel (skin) que son comunes a todos los paquetes. Estos archivos se aplicarán a todos los componentes y serán incluídos para tus aplicaciones autónomas. La parte global define el aspecto de todos los chismes comunes XUL, mientras que las otras carpetas contienen archivos que son específicos de estas aplicaciones. Firefox incluye tanto los archivos del tema global como los del navegador en un archivo, pero ambos pueden ser incluídos por separado.

Una piel (skin) se compone de archivos CSS y de un número de imágenes usadas para definir el aspecto y la interfaz. El archivo browser.css es usado por browser.xul y contiene estilos que definen el aspecto de varias partes de la interfaz del navegador. Nuevamente, nótese como el archivo browser.css tiene el mismo nombre que el paquete. Cambiando los archivos CSS, puedes ajustar el aspecto de una ventana sin cambiar su función. De esta forma puedes crear un nuevo tema. La parte XUL continúa igual pero la parte de la piel (el skin) cambia independientemente.

Configuración regional El archivo en-US.jar describe la información del idioma para cada componente, en este caso para US English. Como las pieles (skins), cada idioma contendrá archivos que especifican texto usado por el paquete pero para un idioma concreto. La estructura para la configuración regional es similar a las otras, por eso no será explicada aquí. El texto de idioma es almacenado en dos tipos de archivos: archivos DTD y archivos de propiedades. Los archivos DTD tienen una extensión .dtd y contienen declaraciones de identidad, una para cada cadena de texto usada en una ventana. Por ejemplo, el archivo browser.dtd contiene declaraciones de identidad para cada comando del menú. Además, los atajos de teclado para cada comando también están definidos, ya que pueden ser diferentes en cada idioma. Los archivos DTD son usados por los archivos XUL por eso, en general, tendrás uno por cada archivo XUL. La parte de configuración regional también contiene archivos de propiedades, que son similares, pero son usados por archivos script. El archivo browser.properties contiene algunas cadenas de idioma. Esta estructura nos permite traducir Mozilla o un componente a un idioma distinto sólo añadiendo una nueva configuración regional para ese idioma. No tienes que cambiar la parte de XUL. Además, otra persona puede proporcionar un paquete separado que aplica una piel (skin) o configuración regional a tu parte de contenido, proporcionando soporte de esta manera a un nuevo tema o idioma sin tener que modificar el paquete original. Otros paquetes Hay un paquete especial llamado toolkit (o global). Vimos anteriormente el directorio global para skins (pieles). El archivo toolkit.jar contiene el contenido correspondiente para ello. Contiene algunos diálogos globales y definiciones. Además, define la apariencia por defecto y la funcionalidad de varios chismes XUL comunes como son los cuadros de texto y los botones. Los archivos localizados en la parte global de un paquete skin contienen la apariencia por defecto para todos los elementos de la interfaz XUL. El paquete toolkit es usado por todas las aplicaciones XUL. [editar] Añadiendo un paquete Mozilla coloca los paquetes incluidos con la instalación en la carpeta chrome. Sin embargo, no es necesario colocarlos aquí. Si tienes otro paquete instalado, puede ser colocado en cualquier parte del disco, siempre que un archivo manifest apunte a él. Es una práctica frecuente colocar los paquetes en la carpeta chrome simplemente por ser conveniente, sin embargo sólo funcionarán correctamente desde otro directorio o desde algún lugar de tu red local. No puedes almacenarlos en un lugar remoto, a no ser que el sitio remoto sea montado a través del sistema de ficheros local. Hay dos carpetas chrome usadas para las aplicaciones XUL, una está instalada en el mismo sitio donde las aplicaciones están instaladas, y la otra es parte del perfil del usuario. La primera permite a los paquetes ser compartidos por todos los usuarios, mientras que la segunda permite la creación de paquetes sólo por un usuario o grupo específico. Las extensiones, cuando son instaladas en una carpeta de extensiones diferente, son también normalmente específicas del usuario. Cualquier archivo manifest situado en cualquier carpeta chrome será examinado para ver que los paquetes instalados. Fuente | Tutorial de XUL:Estructura XUL

Xul parte 1: Introduccion ajaxman — Sat, 22 Sep 2007 16:16:31 +0000 Como les comente estoy trabajando en un par de proyectos que juntos harán uno solo, estos proyectos serán aplicaciones que estarán construidas sobre xul, js css y quizas algo de python. Por ello he empezado a leer y a hacer pruebas con xul, y para que no digan lo estoy haciendo en mi Debian Etch y mis primeros ejemplos funcionan de maravilla, sin embargo muchos diran y bueno que es xul, por ello he decidido postear este tema extraido de Tutorial de XUL:Introducción. Esta es solo la introduccion aburrida a los pormenores y todo lo que podemos hacer con Xul, pues empecemos. Este tutorial lo conducirá al aprendizaje de XUL (XML Lenguaje de Interfaz de Usuario) el cual es un lenguaje múltiplataforma para describir la interfaz de usuario de aplicaciones. ¿Qué es XUL y porque fue creado? XUL (se pronuncia “sul”? y rima con “cool”?) fue creado para facilitar y acelerar el desarrollo del navegador Mozilla. Es un lenguaje XML, por lo tanto todas las características del XML están también en XUL. La mayoría de las aplicaciones necesitan ser desarrolladas usando características de una plataforma específica, convirtiendo el desarrollo de aplicaciones múltiplataformas en una tarea costosa y que consume mucho tiempo. Esto podrá no importarle a algunas personas, pero el usuario podría querer usar la aplicación en otros dispositivos, como equipos de bolsillo. En el pasado se desarrollaron muchas soluciones multiplataforma. Por ejemplo, Java tiene como un punto fuerte de venta la soportabilidad. XUL es un lenguaje diseñado específicamente para construir interfaces soportables. Desarrollar una aplicación toma mucho tiempo incluso si es sólo para una plataforma. El tiempo requerido para compilar y depurar también puede ser muy largo. Con XUL, una interfaz puede ser implementada y modificada de forma fácil y rápida. XUL tiene todas las ventajas de otros lenguajes XML. Por ejemplo, XHTML u otros lenguajes XML como MathML o SVG se pueden usar junto a él. Además, el texto que se muestra con XUL es fácilmente localizable, lo que significa que puede ser traducido a otros idiomas con poco esfuerzo. Se pueden aplicar hojas de estilo para modificar la apariencia de la interfaz de usuario (muy parecido a las funcionalidades de aspectos o temas presentes en Winamp o algunos gestores de ventanas). ¿Que tipo de interfaz se puede hacer con XUL? XUL proporciona la habilidad de crear la mayoría de los elementos encontrados en las interfaces gráficas modernas. Es tan general que este puede ser aplicado a las necesidades específicas de ciertos dispositivos y tan poderoso que los desarrolladores pueden crear sofisticadas interfaces con éste. Algunos elementos que pueden ser creados son: Controles de entrada tales como cuadros de texto y cajas de chequeo Barra de herramientas con botones u otros contenidos Menús en barras de menú o menú emergente Pestañas de diálogo Árbol de información jerárquica o tabulada Teclas de accesos directo El contenido mostrado puede ser creado desde el contenido de un archivo XUL o con datos de una fuente de datos. En Mozilla, tales fuentes de datos son utilizadas para los mensajes de una cuenta de correo, los marca-páginas y los resultados de búsqueda. El contenido de los menúes, árboles y otros elementos pueden ser llenados con estos datos, o con sus propios datos suministrados en un archivo RDF. Existen varios casos en los cuales aplicaciones XUL son creadas: Extensión de Firefox: una extensión suma funcionalidades al navegador mismo, a menudo barra de herramientas suplementaria, menúes contextuales o una interfaz de personalización del navegador. Para conseguir eso una funcionalidad XUL llamada overlay es usada. Permite hacer fusionar una interfaz existente como el navegador Firefox con una interfaz de usuario de la extensión. Unas extensiones pueden igualmente ser aplicadas a otros productos de Mozilla tal como Thunderbird. Aplicación XULRunner autónoma: XULRunner es una versión empaquetada de una plataforma Mozilla permitiendo crear aplicaciones XUL autónomas. No se necesita ningún navegador para arrancar éstas aplicaciones ya que contienen sus propios archivos ejecutables. Paquete de XUL: a medio camino entre las dos otras se encuentran aplicaciones creadas de la misma manera que una extensión pero funcionando como una aplicación independiente en una ventana separada. Estos paquetes se emplean cuando no se desea una imponente aplicación completa XULRunner pero tampoco implica la instalación de un navegador Mozilla. Aplicación XUL remota: se puede también colocar solamente código XUL en un servidor web y abrirlo con un navegador, como cualquier página web. Sin embargo este método es limitado, por razones de seguridad sobre que acciones se permiten, como la apertura de otras ventanas. Los tres primeros tipos necesitan cada uno su instalación en la máquina del usuario. Por lo cual, estos tipos de aplicaciones no tienen restricciones de seguridad, pueden acceder a los archivos locales y leer y escribir las preferencias, por ejemplo. El contenido XUL es normalmente cargado desde un paquete instalado dentro de Mozilla. Los archivos XUL, “scripts” asociados e imágenes de una aplicación podrán ser empaquetados dentro de un simple archivo, descargados e instalados por el usuario. Mozilla proporciona una manera de tener estos paquetes instalados y registrados sin tener que escribir un montón de códigos complejos. Además, estos paquetes pueden incorporarse al navegador u otras aplicaciones para adicionarles características; esta es la forma en que trabajan las extensiones de Firefox. También es posible abrir directamente archivos XUL desde el sistema de archivos o desde un sitio web remoto, sin embargo ellos estarán restringidos en el tipo de operaciones que puedan hacer, y algunas características de XUL no trabajarán. En cambio, si Ud. quiere cargar el contenido XUL desde un sitio remoto, el servidor web debe estar configurado para enviar archivos XUL con contenidos de tipo ‘application/vnd.mozilla.xul+xml’. El XUL es usualmente almacenado en archivos con una extensión .xul. Ud. puede abrir un archivo XUL con Mozilla tal como abre otros archivos, usando el comando Abrir Archivo desde el menú de Archivo o escribiendo la URL en la barra de dirección. ¿Que necesita conocer para utilizar este tutorial? Debe tener conocimentos de HTML y por lo menos, conocimientos básicos de XML y CSS. Aquí se exponen algunas reglas que debe tener en mente: Los elementos en XUL y sus atributos deben introducirse en minúsculas, ya que XML distingue entre mayúsculas/minúsculas (a diferencia de HTML). Los valores de los atributos en XUL, deben colocarse entre comillas, aunque sean números. Los archivos XUL por lo general se dividen en cuatro ficheros, uno para la disposición de los elementos, otro para la definición del estilo, otro para declarar las entidades (usadas en las localizaciones) y otro para los “script”. Además se pueden tener archivos para las imágenes o para datos específicos de una plataforma. XUL está soportado en Mozilla y otros navegadores basados en el motor Gecko, tales como Netscape 6 o posteriores y Mozilla Firefox. Debido a los diversos cambios que ha tenido la sintaxis de XUL en el tiempo, tener la última versión de su navegador permitirá que los ejemplos trabajen adecuadamente. La mayoría de los ejemplos deben funcionar en Mozilla 1.0 o posteriores. XUL es bastante similar en Firefox y los otros navegadores, aunque tiene algunas diferencias específicas como el soporte de barras de herramientas personalizables. Este tutorial intenta cubrir gran parte de la funcionalidad de XUL, no obstante, no trata todas las características. Una vez se haya familiarizado con el lenguaje XUL puede utilizar la referencia de elementos del lenguaje XUL (en) para encontrar otras características soportadas por elementos específicos del lenguaje. Songbird El reproductor de musica de la fundacion Mozilla. ajaxman — Tue, 11 Sep 2007 04:45:05 +0000 Cada día me sorprende la cantidad de aplicaciones que surgen para Linux. Cuando busque un buen reproductor para musica en linux, use Rhythmbox, luego use muy poco xmms, sin embargo niguno satisfacia plenemente mis necesidades; por desgracia aun uso windows,por algunas cuestiones, y tambien queria un buen reproductor, ya me habia hartado estar usando iTunes. Asi fue como di con SongBird. A songbird la wikipedia lo define asi. Songbird es una alternativa de código abierto a iTunes que está actualmente en desarrollo. Está construido en la plataforma XULRunner de Mozilla. Gracias a ello, Songbird funciona en aquellos ordenadores con Windows, Mac OS X, y Linux. El motor principal de Songbird, mig, ha revelado que Songbird utiliza el plugin del cliente VideoLAN (VLC) para la reproducción multimedia, y SQLite como motor de almacenamiento para la biblioteca multimedia. El lanzamiento de la primera versión pública de Songbird, con número de versión 0.1, tiene el nombre código “Hilda,” y fue lanzada el 8 de febrero de 2006. Songbird es un reproductor multimedia, que corre sobre Xul, esta desarrollado por la fundación mozilla, entre sus características: podemos encontrar. Compatibilidad multiplataforma con Microsoft Windows, en sus versiones 2000, XP así como Mac OS X (PPC, Intel) y Linux (Intel). Capacidad de reproducir archivos de múltiples formatos, como MP3, AAC, Ogg Vorbis, FLAC y Windows Media Audio. Una interfaz personalizable. Los archivos multimedia almacenados en páginas web se muestran como archivos reproducibles en Songbird. Descarga de archivos MP3 y suscripciones RSS incorporadas. La capacidad de suscribirse a Blogs de mp3 así como listas de reproducción. Favoritos creados por el usuarios. Capacidad de construir mezclas personalizadas. Capacidad de escanear el computador del usuario en busca de archivos de audio para agregarlos a la librería local. Una interfaz gráfica de usuario configurable y plegable, así como el modo de mini-reproductor. Atajos del teclado y teclados multimedia soportados. Actualizaciones automáticas. Actualmente hay 39 idiomas disponibles. Funciona en Microsoft Windows, Mac OS X y Linux. Fuente | wikipedia Yo lo tengo instalado tanto en windows como en GNU/Linux Debian Etch , y dejenme decirles que es muy bueno , claro tiene fallas, pero muy pocas, recordemos que la ultima versión que esta para la descarga es la 0.2.5 Developer Preview. todaia no es ni beta. Sin duda deberían echarle un vistazo. Enlace a la pagina oficial | Songbird