martes, 30 de junio de 2009

Creación de un gadget para la Sidebar de Windows II

Hace unos meses publiqué un post en el que expliqué como programar e instalar un gadget para la Sidebar de Windows Vista. Dado el éxito que tuvo, he decidido realizar otro post, programando otro gadget, pero esta vez para Windows 7:

http://www.windowstecnico.com/archive/2009/04/05/creaci-243-n-de-un-gadget-para-la-sidebar-de-windows.aspx

¿Qué diferencias hay entre programar un gadget para Vista o 7?

En la etapa de programación no hay ninguna diferencia. El único punto donde varía el proceso es durante la instalación, ya que como sabrán los usuarios que han tenido la oportunidad de probar las betas de Windows 7, en el nuevo sistema operativo no hay una sidebar como tal, sino que los gadgets podrán ser colocados por el escritorio en cualquier lugar. Aún así la tarea es bastante sencilla.

Creación del gadget

Como antes comenté el proceso de programación del gadget para Windows 7 es exactamente el mismo que para Vista y se basa en la estructura que tenéis en el post anterior:

· Documento XML de manifiesto

· Documento HTML

· Documento HTML de configuración

· Imágenes

· Fichero js

· Hojas de Estilo CSS

Para el nuevo gadget he decidido realizar un pequeño programa que convierta un símbolo a su equivalente ASCII, al igual que le ocurrirá a muchos desarrolladores o usuarios como a mí, de vez en cuando nos toca buscar por internet una tabla ASCII para ver un símbolo concreto, por lo que nunca está de más tener un convertidor a mano.

Ya que el proceso completo lo tenéis indicado en el primer post, voy a omitir toda la parte común y voy a ir directo al apartado de la generación del fichero HTML, que es el que ejecutará y contendrá los elementos de nuestro programa:

<html>

<head>

<title>ascii</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body text="white">

<center>

<br/><br/>

<form name="box">

<input name="box2" style="background:blue;color:white" size="1" type="text"/>

<input type="button" style="background:transparent;color:white" onclick="ascii()" value="Go" >

</form>

<script>

function ascii()

{

var x = document.box.box2.value;

document.box.box2.value = x.charCodeAt(0);

}

</script>

</center>

</body>

</html>

Cómo veis el código es bastante sencillo, simplemente tendremos un cuadro de texto, en el que escribiremos un símbolo, y un botón, que cada vez que sea pulsado ejecutará la función “ascii”, que se encargará de sustituir el símbolo inicial en el cuadro por su equivalente ascii.

Para modificarle el aspecto visual, he creado un nuevo fondo de pantalla con un editor de imágenes.

Tras finalizar el proceso, deberíais tener lo siguiente:

clip_image002

Al igual que en Windows Vista, en Windows 7 los gadget se almacenan en la ruta:

C:\Program Files\Windows Sidebar\Gadgets

Por lo que en ese lugar será donde debéis dejar la carpeta raíz del gadget con todos los elementos que la contienen.

clip_image004

Una vez agregada la carpeta iremos al escritorio. Haremos click derecho con el ratón y pulsaremos en la opción “gadget”. Se nos abrirá la siguiente ventana, en la que podremos ver nuestro nuevo gadget con la descripción que escribimos en el fichero XML de configuración.

clip_image006

clip_image007

Si hacemos doble click sobre el icono del gadget, nos aparecerá en el escritorio, donde podremos colocarlo en cualquier lugar:

clip_image011

clip_image009

 

2 comentarios:

Pión dijo...

joer muchas gracias justo lo que buscaba me has sacado de un marron colega

www.ipion.es --->>one smart blog

Juan Antonio Calles dijo...

De nada un placer @Pion!, disculpa por el retraso de la respuesta, me pilló en vacaciones y hasta ahora no la habia visto...:S

un saludo!