A estas alturas, seguramente ya te habrás convencido de las bondades y ventajas de Dashboard y en especial de algún que otro widget que hacen que el trabajo diario sea un poquito más fácil. Y seguramente más de uno habrá visto que están apareciendo cientos de widgets y que en la gran mayoría de los casos pueden ser descargados gratuitamente. Viendo la espectacularidad de muchos de ellos uno se pregunta cómo un desarrollador puede ofrecer gratuitamente algo aparentemente tan complejo.

La respuesta está en gran medida en que gran parte de lo que hacen los widgets, es parte del Mac OS X y más importante aún, las tecnologías usadas para el desarrollo de los mismos son las mismas que se aplican para el desarrollo de páginas y aplicaciones web facilitando con ello mucho su desarrollo.

Esto no significa que no existan algunos widgets realmente complejos y admirables pero lo que es cierto es que para crear un widget, no es necesario aprender tecnologías ni lenguajes nuevos si ya has desarrollado alguna página web y has utilizado JavaScript. En este artículo vamos a dar una visión general de los conceptos de programación de widgets. Si ya tienes conocimiento de las citadas tecnologías web, te sorprenderá lo fácil que es y si aún no lo has hecho no te preocupes porque iremos paso a paso y verás que la curva de aprendizaje es bastante suave.

Primeros pasos

Un widget es una mini-aplicación que corre dentro de Dashboard. Esto tiene dos connotaciones o diferencias apreciables con una aplicación normal. Por un lado, Apple especifica que a la hora de desarrollar un widget es importante tener en cuenta que este sólo deberá hacer una tarea muy específica frente a aplicaciones más complejas. La segunda diferencia es que los widgets no contienen código compilado, ejecutable directamente por el sistema operativo, sino que contiene una serie de archivos de texto e imágenes a los que podemos acceder fácilmente y que definen su aspecto y funcionamiento. Con tener un simple editor de textos tipo TextEdit nos basta.

A más de uno le sorprenderá oír que un widget no es más que una carpeta que contiene una serie de archivos. Esa carpeta lleva un extensión específica “.wdgt” que hace que el sistema operativo la identifique como widget y la haga aparecer en el Finder como si se tratase de un archivo.

Tecnologías básicas

Para la creación de Dashboard y los widgets, Apple optó por las tecnologías web como base del desarrollo de los widgets. Un widget es realmente una ventana de Safari (sin bordes ni barra de menú) que carga una página web. Así las cosas, un widget utiliza HTML para definir la interfaz gráfica y sus elementos básicos, CSS para definir la apariencia de la interfaz, y JavaScript para implementar las funciones que ejecutará. Adicionalmente se sirve de XML para crear archivos que contienen los parámetros de configuración y del formato de imágenes PNG para incluir la imagen de fondo y el icono.

En la práctica

Vamos a ver en teoría cual es la estructura de un widget y luego veremos un ejemplo práctico. Como ya hemos apuntado, lo primero que deberemos hacer es crear una carpeta nueva, dando en este momento igual su localización. Dentro de ella crearemos un archivo HTML que defina la interfaz. Igualmente crearemos un archivo CSS con los estilos y que será cargado por el HTML. Un tercer archivo contendrá el JavaScript que dará la funcionalidad al widget. Además necesitaremos una imagen en formato png que define la apariencia del widget (es la que se muestra mientras se arrastra el widget a Dashboard) y otra en el mismo formato con el icono que aparecerá en el dock de Dashboard. Finalmente incorporaremos un archivo tipo plist que contendrá en XML ciertos parámetros que le indicarán a Dashboard características que tiene el widget, como por ejemplo su tamaño en la pantalla o los nombres de los ficheros HTML, CSS, JavaScript y las imágenes.

Vamos a desarrollar un simple widget de ejemplo para ilustrar lo que hemos explicado anteriormente. Se tratará de una calculadora muy básica que contendrá dos campos para entrar sendos números, un desplegable para elegir la operación, un campo de resultado y un botón para realizar el cálculo.

Para que no tengas que teclear todo el código puedes descargarte el widget entero aquí: www.basasoft.com/widgets/CalculadoraMW.zip

Empezaremos creando una carpeta nueva que se llame “CalculadoraMW”. Por ahora no le añadiremos la extensión para poder acceder a su interior. No obstante una vez que lo hayamos hecho y queramos volver a acceder a su contenido podremos quitar la extensión desde la ventana de obtener información del Finder o pinchar en el icono pulsando la tecla Control y seleccionando del menú emergente ver contenido de paquete. Ahora abriremos nuestro editor de texto y crearemos un documento HTML con el siguiente código (cuadro 1):

Con este código creamos la interfaz de usuario definiendo los campos y demás elementos que la compondrán. Hemos incluido comentarios en el mismo que ayudan a identificar cada uno de estos elementos. Hay que notar que lo que no hace el fichero es dar formato a los elementos. Esto lo haremos mediante una hoja de estilos CSS en un fichero aparte como veremos a continuación.

Crearemos en la carpeta anterior otro archivo con el nombre “CalculadoraMW.css” y escribiremos el siguiente código (cuadro 2):

Con esto hemos dado tamaño y posición a los elementos creados en HTML y ajustamos algunas propiedades como los tipos de letra y tamaño de los mismos.

Para poder hacer un primer testeo en Safari (aunque aún no como widget) nos falta el JavaScript. De nuevo creamos un archivo en nuestra carpeta de widget, ésta vez con el nombre “CalculadoraMW.js”. Escribiremos en él lo siguiente (cuadro 3):

De nuevo el código está comentado para facilitar su comprensión.

Ahora ya podremos hacer nuestras primeras pruebas para ver si todo ha ido bien hasta aquí. Para ello sólo tendremos que abrir el fichero HTML en Safari. Esto podremos hacerlo fácilmente arrastrándolo sobre su icono del Dock. Veremos una ventana como en la imagen y podremos testear que se realizan correctamente los cálculos.

Si todo ha ido bien podemos completar los pasos para convertir lo que tenemos en widget. Sólo nos falta crear la imagen de fondo, el icono y el archivo plist de configuración. Para crear las imágenes hay múltiples posibilidades y seguramente que aquellos que dominen el diseño gráfico puedan hacer cosas muy creativas. Aquí sólo queremos mostrar una forma básica de hacerlo.

Crearemos una captura de la ventana de Safari que contiene el widget. Lo ideal será darle un tamaño de 200 x 200 pixeles. Hecho esto, guardaremos la imagen en nuestra carpeta con exactamente el nombre “Default.png”, teniendo cuidado de respetar mayúsculas. De la misma imagen podremos crear el icono, reduciendo su tamaño a 70 x 70 y guardándolo como “Icon.png”.

Lo último será crear un archivo con el nombre “Info.plist” cuyo contenido será (cuadro 4):

Básicamente lo que hace el archivo es definir el nombre interno del widget y que tiene que ser único (CFBundleIdentifier), el nombre a mostrar en el Dock de Dashboard (CFBundleName), la posición del cuadro de