Introducción. Requisitos para la creación de un Gadget. Creando un Gadget Paso a Paso. Tips. Radio Gadget: Un ejemplo Paso a Paso.

Transcripción

1 Creando un Gadget: Paso a Paso Introducción Requisitos para la creación de un Gadget Creando un Gadget Paso a Paso Tips Radio Gadget: Un ejemplo Paso a Paso Referencias Introducción En este documento se hará una introducción práctica al mundo de los Microsoft Gadgets. Al finalizar el curso y tan solo teniendo unos pocos conocimientos de HTML, Javascript o VBScript, usted podrá construir fácilmente aplicaciones ingeniosas y útiles para ejecutar en su sistema operativo Windows Vista. Qué son los Microsoft Gadgets? Los Microsoft Gadgets son aplicaciones que ofrecen una gran variedad de usos posibles explotando al máximo las capacidades de Windows Vista y la conectividad a Servicios Web, RSS y otros recursos disponibles en Internet. Usted podrá desarrollar su Gadget a medida y obtener fácilmente la información que necesite desde su escritorio, como por ejemplo, los datos del tiempo, noticias actualizadas, mapas de tráfico y transmisiones de radio, entre infinitas posibilidades. Por otro lado, muchas de las aplicaciones que se ejecutan en su sistema operativo Windows Vista pueden ser consumidas por un Gadget e interactuar con el usuario por medio de una interfaz visual novedosa y adaptada a las necesidades puntuales que se quieran satisfacer. Siempre que se hable de Gadgets se escuchará de Windows Sidebar (la barra lateral de Windows Vista), un panel que se encuentra disponible en el escritorio de Windows Vista, cuya funcionalidad es

2 organizar los Gadgets y facilitar el acceso a ellos, así como la Bandeja de acceso rápido en Windows (Quick Launch) es la zona de la pantalla reservada para colocar los accesos directos que al usuario le resulta práctico tener a mano. Windows Sidebar es el complemento ideal para los monitores de pantalla panorámica y funciona a la perfección en pantallas estándar. Para ubicar Windows Sidebar haga Clic en el botón Start, luego en All Programs, diríjase a Accessories y por último a Windows Sidebar Componentes de un Gadget Un Gadget funciona como una página HTML corriente, con el agregado funcional de interactuar poderosamente con Windows Vista y ejecutarse como una aplicación en el escritorio del usuario. Los archivos que se sugieren para su funcionamiento son los siguientes: Archivo manifiesto: Es el archivo XML que define las propiedades del Gadget, incluyendo nombre, icono y descripción. Archivo HTML: Define el cuerpo del Gadget y contendrá la interfaz gráfica con la que el usuario podrá interactuar desde su escritorio. Archivo HTML de configuración: Es una interfaz gráfica que expone las configuraciones del Gadget para que puedan ser modificadas por el usuario. Imágenes, Script y Hojas de Estilo: Encapsulan las directivas gráficas y de comportamiento que serán utilizadas desde las interfaces HTML con las que interactúa el usuario. Icono: Es el icono que aparecerá en la galería de Gadgets de la barra lateral de

3 Windows. Si no lo establecemos, se creará uno genérico. Nota: Un Gadget podría funcionar simplemente con el archivo Manifiesto y el archivo HTML de la interfaz de usuario, pero para dimensionar al máximo el potencial de estas aplicaciones y lograr un codificación de fácil mantenimiento, se sugiere la utilización de todos los componentes antes mencionados. El escritorio de Windows Vista con Windows Sidebar y sus Gadgets. Requisitos para la creación de un Gadget Para desarrollar sus propios Gadgets necesitará cumplir con los siguientes requerimientos: Tener una PC con Windows Vista como sistema operativo instalado Contar con algunos conocimientos de Javascript o VBScript y HTML. Elegir un aplicativo para desarrollar los archivos que componen e interactúan con el Gadget. Puede usar Microsoft Notepad o, si lo desea, algún otro editor con capacidades avanzadas de diseño como Visual Studio 2005.

4 Creando un Gadget Paso a Paso Crear un Gadget es tan simple como crear una página Web y añadirle funcionalidad con algún lenguaje de Scripting. A continuación se explican los pasos necesarios para lograrlo, que serán complementados con un ejemplo práctico que podrá servirle de referencia para empezar a crear sus propios Gadgets. Paso 1: Crear el directorio contenedor de los archivos de desarrollo del Gadget Se debe crear un directorio para almacenar los archivos que serán desarrollados para el funcionamiento completo del Gadget. 1. Determinar la disponibilidad del Gadget Con la tecla Windows + R, abra la ventana Run y ejecute la siguiente sentencia de acuerdo a la visibilidad que desea que tenga el aplicativo. a. Si se desea que el Gadget esté disponible para un usuario específico de la PC, debe localizar el directorio donde se creará el Gadget con la siguiente sentencia: \Users\%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets b. Si se desea que el Gadget esté disponible para todos los usuarios de la PC, entonces escriba la siguiente sentencia: \Program Files\Windows Sidebar\Shared Gadgets Al ingresar la instrucción antes mencionada, el explorador de Windows se abrirá en el directorio que contiene los Gadgets disponibles para el usuario especificado o para todos los usuarios de la PC, respectivamente. 2. Generar un directorio para el Gadget

5 Se creará un directorio con el formato NombreDeGadget.gadget en la carpeta de Gadgets localizada en el punto 2 (donde NombreDeGadget debe ser reemplazado por el nombre que hayamos asignado a nuestro Gadget, por ejemplo: Noticias.gadget, FotosEnLinea.gadget, etc). Es importante que el nombre de la carpeta termine con la extensión.gadget para que el aplicativo sea reconocido por Windows Sidebar y se pueda acceder desde allí posteriormente. Dentro de este directorio y con el objetivo de mantener el orden dentro del desarrollo, se podrán generar 3 nuevos subdirectorios llamados css, js e imágenes, que serán utilizados posteriormente.

6 Paso 2: Crear el archivo XML para el manifiesto del Gadget En la raíz del directorio creado en el paso 1 con el nombre NombreDeGadget.gadget, genere un nuevo archivo llamado gadget.xml, que servirá como manifiesto del Gadget. El nombre del archivo debe ser obligatoriamente gadget.xml para que cumpla su propósito. El archivo manifiesto del Gadget almacena las configuraciones que serán utilizadas por el aplicativo. Es un archivo de texto plano con formato XML que se puede modificar fácilmente. <?xml version="1.0" encoding="utf-8"?> <gadget> <name>nombre del Gadget</name> <namespace>namespace.ejemplo</namespace> <version>1.0</version> <author name="nombre del autor"> <info url=" /> <logo src="logo.png"/> </author> <copyright> 2007</copyright> <description>aquí va la descripción del Gadget</description> <icons> <icon height="48" width="48" src="iconodelgadget.png" /> </icons> <hosts> <host name="sidebar"> <base type="html" src="interfazvisualdelgadget.html" /> <permissions>full</permissions> <platform minplatformversion="1.0" /> <defaultimage src="drag.png" /> </host> </hosts> </gadget> Se destacan los siguientes elementos para configurar correctamente la aplicación Elemento <name> <author> <description> <base> Descripción En este elemento se define el nombre del Gadget Dentro de este elemento se definen los datos del autor del Gadget. Tiene sub elementos que permiten destacar el sitio web y el logo del autor. Este elemento permite brindar una descripción sobre la funcionalidad del Gadget Su atributo Src indica a Windows Sidebar qué archivo HTML contiene la interfaz de usuario del Gadget

7 Paso 3: Crear la interfaz gráfica del Gadget El usuario podrá interactuar con el Gadget de dos maneras: Utilizando los servicios que brinde el aplicativo desde su pantalla principal. Configurando las características y el funcionamiento para permitir una parametrización desde una pantalla dispuesta para tal fin. Estas interfaces serán soportadas por archivos HTML que pueden contener cualquiera de los elementos comúnmente permitidos por los mismos. La interfaz gráfica con el usuario puede estar basada en elementos simples del estándar HTML como listas desplegables, casillas de selección simple o múltiple, cajas de texto, etc. o bien puede estar desarrollada con un sofisticado diseño en flash, o una combinación de ambos métodos, por mencionar algunas opciones. En cualquier caso, estas páginas harán uso de las funciones Javascript necesarias para interactuar con el modelo de objetos Gadget (del que se hablará más adelante) para brindar los servicios deseados al usuario. Siguiendo con los pasos necesarios para hacer funcionar un Gadget realizaremos las siguientes acciones 1- Crear la pantalla del Gadget En la raíz del directorio NombreDeGadget.gadget generado en el paso 1, donde ya existe el archivo gadget.xml, genere el archivo HTML de interfaz gráfica que brindará los servicios al usuario y será accedido desde Windows Sidebar como un Gadget 2- Crear la pantalla de Configuración del Gadget En la misma ubicación, puede generar el archivo un archivo HTML para que el usuario realice las configuraciones funcionales necesarias que usted, como desarrollador, desee exponer 3- Mantener el orden entre sus archivos Es una buena práctica centralizar las configuraciones visuales de los archivos HTML que se exponen al usuario en uno o varios archivos de hoja de estilo en cascada (con extensión.css). En ese caso se pueden almacenar en el directorio css que hemos generado en el primer paso para tal fin De la misma manera, las imágenes que sean utilizadas por las pantallas HTML que se hayan creado, pueden ser almacenadas dentro del directorio imágenes, también creado durante el primer paso

8 Paso 4: Programar la funcionalidad deseada Una vez que se ha definido la interfaz gráfica, podrá hacer uso de su talento como programador Javascript o VBScript para dar vida a sus Gadgets. Además de tener la posibilidad de programar el comportamiento de los elementos dispuestos en las páginas HTML del Gadget, podrá hacer uso del modelo de objetos extendido que provee Windows Vista para lograr grandes funcionalidades. 1. Generar funciones de Scripting Deberá desarrollar toda la funcionalidad que se desee para interactuar con la interfaz HTML creada. Se podrá codificar en VBScript o Javascript para acceder al modelo de objetos expuesto por DHTML y brindar al usuario los servicios definidos para el Gadget 2. Interactuar con un modelo de objetos poderoso y extendido El modelo de objetos DHTML se ve extendido en Windows Vista para interactuar con los objetos y eventos de Windows Sidebar e interactuar con el sistema operativo, accediendo, entre otras, a las funcionalidades de: System.Display System.Environment System.Globalization System.Machine System.Net.NetworkInformation System.Shell

9 Paso 5: Probar, Depurar e Instalar el Gadget en Windows Sidebar. Como todo desarrollo pequeño o grande, debemos probar la consistencia y funcionalidad de nuestro Gadget antes de distribuirlo. Si queremos instalar el Gadget en una PC podemos seguir los siguientes pasos: 1. Abrir Windows Sidebar Hacer Clic en el signo + ubicado en la parte superior de la Windows Sidebar 2. Agregar el Gadget a Windows Sidebar En la Galería de Gadgets se podrá visualizar el Gadget creado. Para agregarlo, existen tres posibilidades: Hacer doble Clic en el Gadget Hacer Clic derecho en el Gadget y seleccionar Add Arrastrar el Gadget hasta la misma Sidebar. La Galería de Gadgets reconoce todos los Gadgets que están ubicados en las siguientes direcciones: Tips \Users\%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets (gadgets propios de cada usuario) \Program Files\Windows Sidebar\Shared Gadgets (gadgets que a los que pueden acceder todos los usuarios de la computadora) \Program Files\Windows Sidebar\Gadgets (gadgets que ya vienen instalados con Windows Vista) ¾ El ancho de nuestros Gadgets no deben superar los 130px. ¾ Es recomendable especificar siempre tanto el ancho como el largo del Gadget, para que no se vea deforme en la Windows Sidebar. ¾ Se puede crear un paquete de instalación de nuestro Gadget para que, sólo con un doble clic, se instale y se agregue en la Sidebar. Para ello, seleccionamos y comprimimos todos los archivos y carpetas que forman nuestro Gadget. Dado que el ZIP quedará con el formato NombreDeGadget.gadget.zip, le quitamos la extensión zip. Con solo darle doble clic al archivo comprimido se instalará nuestro Gadget.

10 Radio Gadget: Un ejemplo Paso a Paso Crearemos un Gadget que ofrezca la posibilidad de escuchar radio vía Internet y permita al usuario configurar al menos cinco estaciones de radio favoritas. Recordamos los 5 pasos definidos anteriormente Paso 1: Crear el directorio contenedor de los archivos de desarrollo del Gadget Paso 2: Crear el archivo XML para el manifiesto del Gadget Paso 3: Crear la interfaz gráfica del Gadget Paso 4: Programar la funcionalidad deseada ¾ Paso 5: Probar, Depurar e Instalar el Gadget en Windows Sidebar Paso 1: Crear el directorio contenedor de los archivos de desarrollo del Gadget Accediendo al directorio de Gadgets de la manera especificada, crearemos el directorio Radio.gadget. Dentro de la mismo, para distribuir ordenadamente los archivos que conforman el Gadget, crearemos los sub directorios css, js e imágenes. Paso 2: Crear el archivo XML para el manifiesto del Gadget Con el editor de código que hayamos decidido utilizar, creamos un archivo XML manifiesto llamado gadget.xml. Este archivo debe ser generado en la raíz del directorio Radio.Gadget que creamos en el paso anterior. Gadget.xml deberá tener la siguiente información: <?xml version="1.0" encoding="utf-8"?> <gadget> <name>radio</name> <namespace>microsoft.windows</namespace> <version> </version> <author name=""> <info url=" /> <logo src="imagenes/logo.png" /> </author> <copyright> 2006</copyright> <description>escucha la radio desde tu escritorio de Windows Vista.</description> <icons> <icon src="imagenes/icono.png" /> </icons> <hosts> <host name="sidebar"> <base type="html" apiversion="1.0.0" src="radio.html" /> <permissions>full</permissions>

11 <platform minplatformversion="0.1" /> </host> </hosts> </gadget> El archivo debe guardarse con codificación UTF-8. Paso 3: Crear la interfaz gráfica del Gadget Es momento de crear la interfaz visual con la cual el usuario accederá a las funcionalidades y configuraciones del Gadget que se está desarrollando. Crear la pantalla principal del Gadget En la raíz del directorio Radio.gadget se creará un archivo llamado Radio.html que brindará la principal funcionalidad al usuario: escuchar su radio favorita. En la sección <head> de la página Radio.html se hará referencia al archivo que maneja la lógica de la aplicación (logica.js) y al archivo que almacena sus características visuales (style.css). Estos archivos se analizarán en detalle más adelante. <html> <head> <title>radio</title> <script language="javascript" src="js/logica.js" type="text/javascript"></script> <script for="mplayer" event="playstatechange(newstate)">cambioestado(newstate);</script> <link rel="stylesheet" type="text/css" href="css/style.css"> </head>... Al dispararse el evento playstatechange del objeto mplayer que representa a Windows Media Placer en nuestra página, se ejecutará la función CambioEstado almacenada en el archivo logica.js En la página Radio.html también se escribirá código para representar los botones que permitan almacenar las radios favoritas, subir y bajar el volumen y reproducir o detener la transmisión. Así mismo será necesario colocar el objeto de Windows Media Player para obtener el servicio requerido. <body> <g:background id="fondodinamico" />

12 <div> </div> <div id="favoritos" style="position:absolute; left:8; top:65.5;"> <img id="btn01" src="imagenes/btn01.png" onmouseenter="btn01.src='imagenes/btn01hover.png'" onmouseleave="btn01.src='imagenes/btn01.png'" onclick="sintonizar('1')"> <img id="btn02" src="imagenes/btn02.png" onmouseenter="btn02.src='imagenes/btn02hover.png'" onmouseleave="btn02.src='imagenes/btn02.png'" onclick="sintonizar('2')"> <img id="btn03" src="imagenes/btn03.png" onmouseenter="btn03.src='imagenes/btn03hover.png'" onmouseleave="btn03.src='imagenes/btn03.png'" onclick="sintonizar('3')"> <img id="btn04" src="imagenes/btn04.png" onmouseenter="btn04.src='imagenes/btn04hover.png'" onmouseleave="btn04.src='imagenes/btn04.png'" onclick="sintonizar('4')"> <img id="btn05" src="imagenes/btn05.png" onmouseenter="btn05.src='imagenes/btn05hover.png'" onmouseleave="btn05.src='imagenes/btn05.png'" onclick="sintonizar('5')"> </div> <div id="control" style="position:absolute; left:7; top:8;"> <img id="btnprincipal" src="imagenes/play.png" alt="reproducir" onmousedown="btnprincipal.src='imagenes/playdown.png'" onmouseup="btnprincipal.src='imagenes/playhover.png'" onmouseenter="btnprincipal.src='imagenes/playhover.png'" onmouseleave="btnprincipal.src='imagenes/play.png'" onclick="radioplay()"> </div> <div id="volumenmas" style="position:absolute; right:9; top:7;"> <img id="btn" src="imagenes/mas.png" alt="volumen (+)" onclick="masvolumen()"> </div> <div id="volumenmenos" style="position:absolute; right:9; top:25;"> <img id="btn" src="imagenes/menos.png" alt="volumen (-)" onclick="menosvolumen()"> </div> <div id="texto" style="position:absolute; right:12; top:49; font-size:12;"> Listo </div> <OBJECT id="mplayer" width="0" height="0" style="position:absolute; left:0;top:0;" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject"> <PARAM NAME="SendPlayStateChangeEvents" VALUE="True"> <PARAM NAME="AutoStart" VALUE="False"> <PARAM name="uimode" value="invisible"> </OBJECT> </body> </html>

13 Crear la pantalla de Configuración del Gadget En la raíz del directorio Radio.gadget se creará un archivo llamado Settings.html. Este archivo permitirá al usuario configurar cada una de sus radios favoritas. En este archivo definiremos todas las configuraciones de nuestro gadget. Básicamente, usaremos 2 métodos: - variablename = System.Gadget.Settings.read("variableName") Para leer configuraciones almacenadas - System.Gadget.Settings.write("variableName", variablename) Para escribir una configuración dada <html> <head> <style> </style> <script> body width:350; height:320; //Funcion que se ejecuta al abrir la ventana de configuración function init() for(i = 1; i <= 5; i = i + 1) var texto = "NombreRadio_" + i.tostring(); if(system.gadget.settings.read(texto)!= "") cboradio.options[i-1].text = System.Gadget.Settings.read(texto); else

14 cboradio.options[i-1].text = "Favorito " + i.tostring(); texto = "MMS_" + i.tostring(); cboradio.options[i-1].value = System.Gadget.Settings.read(texto); CambioSeleccion(); function CambioSeleccion() var indice = cboradio.selectedindex + 1; txtnombreradio.value = cboradio.options[cboradio.selectedindex].text; txtmmsradio.value = cboradio.options[cboradio.selectedindex].value; txtimagen.value = System.Gadget.Settings.read("Imagen_" + indice.tostring()); function Guardar() var indice = cboradio.selectedindex + 1; System.Gadget.Settings.write("NombreRadio_" + indice.tostring(), txtnombreradio.value); System.Gadget.Settings.write("MMS_" + indice.tostring(), txtmmsradio.value); System.Gadget.Settings.write("Imagen_" + indice.tostring(), txtimagen.value); init(); cboradio.selectedindex = indice - 1; //Con System.Shell.chooseFile abro la ventana de exploración y selección de archivos function SeleccionarImagen() var tiposarchivos = "JPEG File:*.jpg:BMP File:*.bmp:PNG File:*.png:GIF

15 File:*.gif:All Files:*.*::"; var oshellitem = System.Shell.chooseFile(true, tiposarchivos, "c:\\", ""); if(oshellitem) txtimagen.value = oshellitem.path; //Aquí, especifico que método se usara para el evento onsettingsclosing, osea, justo antes que se cierre la ventana de configuración. </head> System.Gadget.onSettingsClosing = SettingsClosing; function SettingsClosing(event) if (event.closeaction == event.action.commit) </script> <body onload="init()"> event.cancel = false; <span id="myspan" style="font-family: Tahoma; font-size: 10pt;">.Seleccione radio:<br> <select name="cboradio" id="cboradio" style="width: 230;" onchange="cambioseleccion()"> <option value=""> <option value=""> <option value=""> <option value=""> </select> <option value="">

16 </span> <div style="font-family: Tahoma; font-size: 10pt; position:absolute; left:20; top:80;"> </div>.estación: <div><input id="txtnombreradio" size="30"></div> <div style="font-family: Tahoma; font-size: 10pt; position:absolute; left:20; top:120;"> </div>.url: <div><input id="txtmmsradio" size="30"></div> <div style="font-family: Tahoma; font-size: 10pt; position:absolute; left:20; top:160;">.imagen: <div> <input id="txtimagen" size="30"> <input type="button" onclick="seleccionarimagen()" name="btnseleccionar" </div> id="btnseleccionar" value="..."> <div style="position:absolute; top:50;"> <input type="button" onclick="guardar()" name="btnguardar" id="btnguardar" value="guardar"> </div> </div> <div style="position:absolute; top:120;"> </div> + Radios Online -> <a href=" </a> <img src="imagenes/logowindowsradio.png" border="0" style="position:absolute; top:-8;" alt="sintonizador de radio de WindowsMedia">

17 </body> </html> Mantener el orden entre sus archivos En la hoja de estilo, almacenada en css\style.css se definirán las dimensiones de la interfaz del gadget (Radio.HTML), los márgenes y la imagen de fondo inicial. Body width:135px; height:100px; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-image:url('../imagenes/fondo.png'); Colocamos los iconos e imágenes que vienen con este Paso a Paso (o podemos cambiarlas por otras) en una de las subcarpetas que creamos en el punto 3 (imágenes). Paso 4: Programar la funcionalidad deseada La lógica del gadget estará en el archivo js\logica.js, cuyo código es el siguiente: var nombreradioactual = ""; var mmsradioactual = ""; var imagenactual = "imagenes/fondo.png"; //Metodo que se ejecuta al abrirse el gadget window.onload = function()

18 //Especifico que método se ejecuta cuando se termino de cerrar la ventana de configuración System.Gadget.onSettingsClosed = SettingsClosed; //Especifico como se llama el archivo de configuraciones (es el que se accede al hacer clic derecho sobre el gadget y se selecciona Options) System.Gadget.settingsUI = "Settings.html"; function SettingsClosed() btn01.alt = System.Gadget.Settings.read("NombreRadio_1"); btn02.alt = System.Gadget.Settings.read("NombreRadio_2"); btn03.alt = System.Gadget.Settings.read("NombreRadio_3"); btn04.alt = System.Gadget.Settings.read("NombreRadio_4"); btn05.alt = System.Gadget.Settings.read("NombreRadio_5"); function RadioPlay() if(mmsradioactual!= "") btnprincipal.src = "imagenes/stop.png"; btnprincipal.alt = "Detener"; btnprincipal.onmousedown = function()btnprincipal.src="imagenes/stopdown.png"; btnprincipal.onmouseup = function()btnprincipal.src="imagenes/stophover.png"; btnprincipal.onmouseenter = function()btnprincipal.src="imagenes/stophover.png"; btnprincipal.onmouseleave = function()btnprincipal.src="imagenes/stop.png"; btnprincipal.onclick = function()radiostop(); mplayer.url = mmsradioactual;

19 mplayer.controls.play(); else texto.innerhtml = "(Defina URL)"; function RadioStop() btnprincipal.src = "imagenes/play.png"; btnprincipal.alt = "Reproducir"; btnprincipal.onmousedown = function()btnprincipal.src="imagenes/playdown.png"; btnprincipal.onmouseup = function()btnprincipal.src="imagenes/playhover.png"; btnprincipal.onmouseenter = function()btnprincipal.src="imagenes/playhover.png"; btnprincipal.onmouseleave = function()btnprincipal.src="imagenes/play.png"; btnprincipal.onclick = function()radioplay(); fondodinamico.src = "../imagenes/fondo.png"; mplayer.controls.stop(); function Sintonizar(numFavorito) RadioStop(); switch(numfavorito) case('1'): btn01.src = "imagenes/btn01hover.png"; btn01.onmouseleave = function()btn01.src="imagenes/btn01hover.png";

20 case('2'): btn02.src = "imagenes/btn02.png"; btn02.onmouseleave = function()btn02.src="imagenes/btn02.png"; btn03.src = "imagenes/btn03.png"; btn03.onmouseleave = function()btn03.src="imagenes/btn03.png"; btn04.src = "imagenes/btn04.png"; btn04.onmouseleave = function()btn04.src="imagenes/btn04.png"; btn05.src = "imagenes/btn05.png"; btn05.onmouseleave = function()btn05.src="imagenes/btn05.png"; break; btn01.src = "imagenes/btn01.png"; btn01.onmouseleave = function()btn01.src="imagenes/btn01.png"; btn02.src = "imagenes/btn02hover.png"; btn02.onmouseleave = function()btn02.src="imagenes/btn02hover.png"; case('3'): btn03.src = "imagenes/btn03.png"; btn03.onmouseleave = function()btn03.src="imagenes/btn03.png"; btn04.src = "imagenes/btn04.png"; btn04.onmouseleave = function()btn04.src="imagenes/btn04.png"; btn05.src = "imagenes/btn05.png"; btn05.onmouseleave = function()btn05.src="imagenes/btn05.png"; break; btn01.src = "imagenes/btn01.png"; btn01.onmouseleave = function()btn01.src="imagenes/btn01.png"; btn02.src = "imagenes/btn02.png"; btn02.onmouseleave = function()btn02.src="imagenes/btn02.png"; btn03.src = "imagenes/btn03hover.png"; btn03.onmouseleave = function()btn03.src="imagenes/btn03hover.png"; btn04.src = "imagenes/btn04.png";

21 case('4'): btn04.onmouseleave = function()btn04.src="imagenes/btn04.png"; btn05.src = "imagenes/btn05.png"; btn05.onmouseleave = function()btn05.src="imagenes/btn05.png"; break; btn01.src = "imagenes/btn01.png"; btn01.onmouseleave = function()btn01.src="imagenes/btn01.png"; btn02.src = "imagenes/btn02.png"; btn02.onmouseleave = function()btn02.src="imagenes/btn02.png"; btn03.src = "imagenes/btn03.png"; btn03.onmouseleave = function()btn03.src="imagenes/btn03.png"; btn04.src = "imagenes/btn04hover.png"; btn04.onmouseleave = function()btn04.src="imagenes/btn04hover.png"; case('5'): btn05.src = "imagenes/btn05.png"; btn05.onmouseleave = function()btn05.src="imagenes/btn05.png"; break; btn01.src = "imagenes/btn01.png"; btn01.onmouseleave = function()btn01.src="imagenes/btn01.png"; btn02.src = "imagenes/btn02.png"; btn02.onmouseleave = function()btn03.src="imagenes/btn02.png"; btn03.src = "imagenes/btn03.png"; btn03.onmouseleave = function()btn03.src="imagenes/btn03.png"; btn04.src = "imagenes/btn04.png"; btn04.onmouseleave = function()btn04.src="imagenes/btn04.png"; btn05.src = "imagenes/btn05hover.png"; btn05.onmouseleave = function()btn05.src="imagenes/btn05hover.png"; break;

22 nombreradioactual = System.Gadget.Settings.read("NombreRadio_" + numfavorito); mmsradioactual = System.Gadget.Settings.read("MMS_" + numfavorito); imagenactual = System.Gadget.Settings.read("Imagen_" + numfavorito); if(mmsradioactual == "") nombreradioactual = ""; texto.innerhtml = "(disponible)"; else texto.innerhtml = nombreradioactual; fondodinamico.src = imagenactual; function MasVolumen() now_vol = mplayer.settings.volume; now_vol = now_vol + 10; mplayer.settings.volume = now_vol; function MenosVolumen() now_vol = mplayer.settings.volume; now_vol = now_vol - 10; mplayer.settings.volume = now_vol; //Evento del control de Windows Media que se ejecuta cada vez que se cambia el estado de este. function CambioEstado(newstate)

23 switch (newstate) case 1: //Stopped texto.innerhtml = "Detenido"; break; case 2: //Paused texto.innerhtml = "Pausado"; break; case 3: //Playing texto.innerhtml = nombreradioactual; break; case 6: //Buffering texto.innerhtml = "Almacenando..."; break; case 7: //Waiting texto.innerhtml = "Espere..."; break; case 8: //Media Ended texto.innerhtml = "Fin"; break; case 9: //Transitioning texto.innerhtml = "Conectando..."; break; case 10: //Ready texto.innerhtml = "Listo"; break;

24 Paso 5: Probar, Depurar e Instalar el Gadget en Windows Sidebar Ya tenemos el Gadget terminado y listo para instalar! Para poder verlo en funcionamiento, una vez agregado a Windows Sidebar, simplemente hacemos clic derecho sobre éste y seleccionamos Options. Se abrirá una ventana que contiene el archivo settings.html creado en el punto 3 (Crear la pantalla de Configuración del Gadget) para que carguemos nuestras radios favoritas.

25

26 REFERENCIAS 9 Windows Sidebar Reference 9 Gadget Development Overview 9 Using Atlas to make web services calls from Sidebar Gadget 9 HTML and Script development 9 Windows Vista Windows Sidebar and Gadgets