El sidebar de Windows Vista es para mí uno de esos features que al prinicipio te parecen “curiosos” pero que después de usarlos por un par de días los extrañas. A través de los gadgets de Vista podemos convertir monedas, ver el pronóstico meteorológico, contemplar el valor de nuestras acciones y un sin fín de cosas.
Pero como buenos desarrolladores que somos, seguramente no estamos contentos con los gadgets que vienen incluídos. De entrada se pueden descargar muchos del galería online. Pero, ¿por qué mejor no hacemos uno nosotros mismos?
Crear un gadget desde cero es cosa muy sencilla. Para empezar, están basados en html + javascript + css, por lo que la curva de aprendizaje es muy baja. Y además, Windows Vista ya viene con el código fuente de todos los gadgets incluídos (revisen en C:\Program Files\Windows Sidebar\Gadgets), así que justo en nuestro disco duro tenemos una fuente de inspiración y de resolución de problemas.
Para este ejemplo vamos a crear un gadget con la capacidad de mandar actualizaciones de nuestro status de Twitter. Lo primero que vamos a hacer es crear la estructura general de folders y archivos, los cuales después iremos llenando. Esta estructura consiste de lo siguiente:
- gadget.xml – los metadatos de nuestro gadget
- gadget.html – código html de la pantalla principal del gadget
- settings.html – código html de la pantalla de configuración del gadget
- css/gadget.css – el estilo de la página principal
- css/settings.css – el estilo de la página de configuración
- js/gadget.js - la funcionalidad de la página principal
- js/settings.js - la funcionalidad de la página de configuración
- images/logo.png – el logo del gadget
gadget.xml
Este archivo contiene información sobre el gadget, tal como su nombre, el autor y el sitio web, así como información más técnica, tal como el nombre del archivo html inicial y el archivo que servirá de logo. A continuación les muestro un gadget.xml completo, el cual pueden usar como un template para el de sus propios gadgets. Sólo recuerden una cosa, cambien los valores pero no las etiquetas.
<?xml version="1.0" encoding="utf-8"?>
<gadget>
<name>Twitter Gadget</name>
<namespace>microsoft.windows</namespace>
<version>1.0.0.0</version>
<author name="Ramiro Berrelleza">
<info url="http://alfador.com.mx" text="alfador en punto net"/>
</author>
<copyright>alfador en punto net © 2008</copyright>
<description>Actualiza tu status de twitter desde el sidebar!</description>
<icons>
<icon height="41" width="175" src="images\twitter.png"/>
</icons>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="gadget.html"/>
<permissions>Full</permissions>
<platform minPlatformVersion="1.0"/>
<defaultImage src="images\twitter.png"/>
</host>
</hosts>
</gadget>
gadget.html
Este archivo es un archivo simple de html, el cual contiene un text area (para poner el nuevo status), una etiqueta (que marcará cuantos caracteres hemos escrito) y un botón (para enviar la actualización.). Lo único diferente a un html convencional es el uso de la etiqueta <g:image> para mostrar una imágen. Esta es una etiqueta especial, la cual proviene del API de Windows Vista Sidebar.
settings.html
Este archivo es, al igual que gadget.html, un archivo html. En este caso cuenta con dos cajas de texto, una para que el usuario del gadget ponga su usuario de twitter y la otra para que ponga su password. Le pedimos estos valores al usuario dado que, de acuerdo al API de Twitter, son necesarios para poder enviar actualizaciones de status.
gadget.js
Este es el archivo más importante de nuestro gadget, pues es el que contiene el código necesario para implementar la funcionalidad deseada. En el caso de nuestro gadget, este archivo contiene 3 funciones:
-
document.onreadystatechange – Esta función es invocada cada que se carga la página del gadget. Utiliza el api de Windows Vista Sidebar para asignarle una página de configuración al gadget, y para obtener el nombre de usuario y el password (los cuales son provistos por el usuario en la página de configuración).
document.onreadystatechange = function()
{
System.Gadget.settingsUI = "settings.html";
username = System.Gadget.Settings.read('username');
password = System.Gadget.Settings.read('password');
xmlHttp = new XMLHttpRequest();
}
-
UpdateCount – Esta función es invocada cada que se modifica un caracter del textarea en gadget.html. Escrita en javascript plano, se encarga de actualizar el contador de caracteres restantes.
function UpdateCount()
{
document.getElementById('left').innerHTML = (140 - document.getElementById('status').value.length);
}
-
UpdateStatus – Esta función es invocada al presionar el botón en gadget.html. También escrita en javascript plano, se encarga de enviar la actualización a través del API de Twitter. Utiliza la función encodeURIComponent para codificar caracteres que pudieran ser inválidos dentro de un URL, y XMLHttpRequest para hacer la llamada (dentro del método open para como parámetros el usario y password para que se realize la autenticación requerida).
function UpdateStatus()
{
var status = encodeURIComponent(document.getElementById('status').value);
var url = "http://twitter.com/statuses/update.xml?status=" + status;
xmlHttp.open("POST", url,false, username, password);
xmlHttp.send();
document.getElementById('status').value = "";
UpdateCount();
}
setttings.js
Este archivo implementa la funcionalidad de la página de configuración, a través también, de 3 funciones:
- document.onreadystatechange – Esta función es invocada cada que se carga la página de configuración del gadget. Utiliza el API de Windows Vista Sidebar para asignar que función será invocada cuando se cierre la pantalla de configuración (lo cual nos servirá para guardar los valores escritos por el usuario).
document.onreadystatechange = function()
{
if(document.readyState=="complete")
{
System.Gadget.onSettingsClosing = SettingsClosing;
}
}
- SettingsClosing – Esta función es invocada cuando se cierra la pantalla de configuración. A través del API de Windows Vista Sidebar guardamos los valores de usuario y password, a modo de que puedan ser utilizados después por el código en gadget.js
function SettingsClosing(event)
{
if(event.closeAction == event.Action.commit)
{
System.Gadget.Settings.write("username", username.value);
System.Gadget.Settings.write("password", password.value);
}
event.cancel = false;
}
- LoadSettings – Esta función es también invocada cuando se carga la página de configuración. Usa el API de Windows Vista para cargar los valores de usuario y password previamente ingresados por el usuario.
function loadSettings()
{
var uname = System.Gadget.Settings.read('username');
var pwd = System.Gadget.Settings.read('password');
username.value = uname;
password.value = pwd;
}
deployment
Una vez que tienen su código listo, hay que comprimirlo en una carpeta zip, y renombrarlo como NombreGadget.gadget. Aquí hay que tener mucho cuidado, porque no hay que comprimir la carpeta que contiene los archivos, sino que hay que comprimir a partir de donde están los primeros archivos, como en la siguiente imágen:
Ya que se tiene el archivo con terminación .gadget, sólo hay que darle doble click para que se instale y así forme parte del catálogo de gadgets de nuestro equipo.
Como pueden ver es muy sencillo escribir un gadget de Windows Vista. Ahora sí que sólo resta que dejemos volar la imaginación y veamos que otros gadgets interesantes se nos pueden ocurrir.
¿A tí qué gadget se te occure?
El código aquí demostrado lo pueden bajar aquí.
- Ramiro