El día de hoy quiero mostrarles como pueden cosntruir un Gadget simple para el SideBar de Windows Vista.
Antes de empezar quiero definir algunos terminos:

  • SideBar: Es un nuevo elemento que se encuentra en el escritorio de windows vista, y nos permite manejar aplicaciones denominadas Gadgets, esta barra no debe ser vista como un navegador.
  • Gadget: Son pequeñas aplicaciones para windows vista, que no se encuentran disponibles en el menú inicio, no son aplicaciones que podemos cambiar con alt+tab, no las podemos maximizar ni minimizar, se desarrollan utilizando tecnologias web, pero no son aplicaciones web completas.

 Los Gadgets se adicionan o eliminan de la SideBar de Windows Vista y estan formados por:

  • Archivo de descripción (Gadget.xml)  donde podemos encontrar:
    • Icono
    • Versión
    • Información del Tipo de Gadget
    • Requerimientos de Seguridad
  • Interfaz
  • Recursos (Imágenes, …)
  • Código fuente (Archivos JavaScript)
  • Un icono de presentación del Gadget

Cuando programamos Gadgets podemos manejar eventos propios, propiedades, permite interactuar con el sistema,
y usan una funcionalidad un conjunto de funcionalidades dentro del API de windows vista como son los namespaces:

  • System.Display
  • System.Environment
  • System.Globalization
  • System.Machine
  • System.Net.NetworkInformation
  • System.Shell.[Item/Drive/Metadata/RecycleBin]

Es decir que la arquitectura permite trabajar con un modelo de Objetos.

Bueno despues de tener en claro estos detalles, vamos a ir a contruir un gadget que se conecte con un sitio web pasando un parametros que el usuario debe introducir en una caja de texto, en este caso le vamos pedir al usuario un codigo de un estudiante y le vamos a mostrar sus notas, manos a la obra:

Debemos crear un archivo de configuración (gadget.xml), aquí un ejemplo:

    <?xml version=”1.0″ encoding=”utf-8″ ?>
      <gadget>
        <name>Notas Unicauca</name>
        <namespace>Celula</namespace>
        <version>0.0.1.1</version>
        <author name=”Jaime Lopez”>
          <info url=”jaimelopezvivas.wordpress.com” />
          <logo src=”images/logo.png” mce_src=”images/logo.png”/>
        </author>
        <copyright>Doing Software 2007</copyright>
        <description>Muestra las notas de un Estudiante en Unicauca.</description>
        <icons>
          <icon height=”100″ width=”125″ src=”images/logo.png” mce_src=”images/logo.png”/>
        </icons>
        <hosts>
          <host name=”sidebar”>
            <base type=”HTML” apiVersion=”1.0.0″ src=”contenido.html” mce_src=”contenido.html” />
            <permissions>Full</permissions>
            <platform minPlatformVersion=”1.0″ />
            <defaultImage src=”images/dragIcon.png” mce_src=”images/dragIcon.png”/>
          </host>
        </hosts>
      </gadget>

Este archivo contiene la información de configuración del Gadget y miren bien  esta etiqueta <base type=”HTML” apiVersion=”1.0.0″ src=”contenido.html” mce_src=”contenido.html” /> ahi se muestra que el archivo fuente del gadget es contenido.html, es en este archivo donde debemos ubicar la pagina de presentación de nuestro gadget.

Ejemplo:

<html>
   <head>
    <script type=”text/javascript” src=”js/gadget.js”></script>
   </head>
   <body style=’position: absolute;left: -50; top: -15; width:130px; height:76px;’ background=”images/fondo.png”>
      <div>
         <form id=”Formulario”>
             <span style=”font-size: 8pt; font-family: Arial”><span style=”color: #ffffff”><strong>
                 Notas</strong></span><br />
             </span>
             <input id=”Codigo” type=”text” style=”font-size: 8pt; font-family: Arial; width: 77px;” /><img id=”Envio” style=’position: absolute;left: 90; top: 31;’  src=”images/btn.png” onClick=”VerNota(Codigo.value);”/>
         </form>
      </div>
   <body>
</html>

En este archivo se tiene definido un formulario con una caja de texto Codigo y una imagen llamada Envio, cuando se presione el esta imagen se llama a una funcion VerNota, la cual se encuentra implentada en “js/gadget.js”, esta es la apariencia gráfica del gadget:

Gadget Unicauca

El archivo “js/gadget.js” contiene el codigo java script necesario para hacer un funcionar nuestra aplicación, recuerden que este archivo maneja un modelo de Objetos.

En nuestro caso este archivo lo unico que hace es lanzar el navegador web con una URL, que tiene como paramentro GET, el codigo que la persona coloco en la caja de texto el archivo js contiene:

function VerNota(dato)
{
 System.Shell.execute(“http://www.unicauca.edu.co/notas/notas.php?codigo=”+ dato);
}

Esta funcion dentro del archivo gadget.js, usa el paquete System.Shell y por medio de la funcion “execute”, lanza la dirección URL que sera desplegada en un navegador. Ojo, esta funcion puede ejercutar cualquier comando del sistema operativo, es decir, un gadget se puede volver una vulnerabilidad en el sistema.

Espero les sirva, cualquier duda no duden en hacer el respectivo comentario.