Gadgets Paso A Paso

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
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

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.
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

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.
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="http://www.webdelautor.com" />
<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 Descripción
<name> En este elemento se define el nombre del Gadget
Dentro de este elemento se definen los datos del autor del Gadget.
<author> Tiene sub elementos que permiten destacar el sitio web y el logo
del autor.
Este elemento permite brindar una descripción sobre la
<description>
funcionalidad del Gadget
Su atributo Src indica a Windows Sidebar qué archivo HTML
<base>
contiene la interfaz de usuario del Gadget
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
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
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:
• \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)
Tips
¾ 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.
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>1.0.0.1</version>
<author name="">
<info url="www.microsoftgadgets.com" />
<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>
<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" />
<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')">
</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>
</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>
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>
body
width:350;
height:320;
</style>
<script>
//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
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

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.
System.Gadget.onSettingsClosing = SettingsClosing;
function SettingsClosing(event)
if (event.closeAction == event.Action.commit)
event.cancel = false;
</script>
</head>
<body onload="init()">
<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="">
<option value="">
</select>
</span>
<div style="font-family: Tahoma; font-size: 10pt; position:absolute; left:20; top:80;">
.Estación:
<div><input id="txtNombreRadio" size="30"></div>
</div>
.URL:
<div><input id="txtMMSRadio" size="30"></div>
</div>
.Imagen:
<div>
<input id="txtImagen" size="30">
<input type="button" onclick="SeleccionarImagen()"

name="btnSeleccionar"
id="btnSeleccionar" value="...">
</div>
<div style="position:absolute; top:50;">
<input type="button" onclick="Guardar()" name="btnGuardar"

id="btnGuardar" value="Guardar">
</div>
<div style="position:absolute; top:120;">
+ Radios Online ->
<a href="http://www.windowsmedia.com/radiotuner/Myradio.asp">
<img src="imagenes/logoWindowsRadio.png" border="0"
style="position:absolute; top:-8;"
alt="Sintonizador de radio de WindowsMedia">
</a>
</div>
</div>
</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()
{
//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");
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;
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"};
btn02.src = "imagenes/btn02.png";
btn02.onmouseleave = function(){btn02.src="imagenes/btn02.png"};
break;
case('2'):
break;
case('3'):
break;
case('4'):
break;
case('5'):
break;
}
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)
{
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;
}
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.
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

Gadgets Paso A Paso

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Gadgets Paso A Paso

Enviado por

Direitos autorais:

Formatos disponíveis

Creando un Gadget: Paso a Paso

Requisitos para la creación de un Gadget

Creando un Gadget Paso a Paso

Radio Gadget: Un ejemplo Paso a Paso

¿Qué son los Microsoft Gadgets?

Por otro lado, muchas de las aplicaciones

Siempre que se hable de Gadgets se

Windows Sidebar es el complemento ideal para los monitores de pantalla panorámica y

Los archivos que se sugieren para su funcionamiento son los siguientes:

• Archivo HTML de configuración: Es una interfaz gráfica que expone las

• Imágenes, Script y Hojas de Estilo: Encapsulan las directivas gráficas y de

• Icono: Es el icono que aparecerá en la galería de Gadgets de la barra lateral de

El escritorio de Windows Vista con Windows Sidebar y sus Gadgets.

Requisitos para la creación de un Gadget

• Tener una PC con Windows Vista como sistema operativo instalado

• Contar con algunos conocimientos de Javascript o VBScript y HTML.

Paso 1: Crear el directorio contenedor de los archivos de desarrollo del Gadget

1. Determinar la disponibilidad del Gadget

Con la tecla Windows + R, abra la ventana “Run” y ejecute la siguiente sentencia de

a. Si se desea que el Gadget esté disponible para un usuario específico de la

\Program Files\Windows Sidebar\Shared Gadgets

Al ingresar la instrucción antes mencionada, el explorador de Windows se abrirá en el

2. Generar un directorio para el Gadget

En la raíz del directorio creado en el paso 1 con el nombre NombreDeGadget.gadget,

<?xml version="1.0" encoding="utf-8" ?>

Se destacan los siguientes elementos para configurar correctamente la aplicación

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

1- Crear la pantalla del Gadget

En la raíz del directorio NombreDeGadget.gadget generado en el paso 1, donde ya

2- Crear la pantalla de Configuración del Gadget

3- Mantener el orden entre sus archivos

Además de tener la posibilidad de programar el comportamiento de los elementos

1. Generar funciones de Scripting

2. Interactuar con un modelo de objetos poderoso y extendido

Como todo desarrollo pequeño o grande, debemos probar la consistencia y funcionalidad de

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

• Hacer doble Clic en el Gadget

¾ Es recomendable especificar siempre tanto el ancho como el largo del Gadget,

Recordamos los 5 pasos definidos anteriormente

¾ Paso 1: Crear el directorio contenedor de los archivos de desarrollo del Gadget

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

Paso 2: Crear el archivo XML para el manifiesto del Gadget

Gadget.xml deberá tener la siguiente información:

<?xml version="1.0" encoding="utf-8" ?>

El archivo debe guardarse con codificación UTF-8.

Paso 3: Crear la interfaz gráfica del Gadget

Crear la pantalla principal del Gadget

En la raíz del directorio Radio.gadget se creará un archivo llamado Radio.html que

En la sección <head> de la página Radio.html se hará referencia al archivo que maneja la

Al dispararse el evento playstatechange del objeto mPlayer que representa a Windows

<OBJECT id="mPlayer" width="0" height="0"

En la raíz del directorio Radio.gadget se creará un archivo llamado Settings.html. Este

En este archivo definiremos todas las configuraciones de nuestro gadget. Básicamente,

- variableName = System.Gadget.Settings.read("variableName") Para leer

//Funcion que se ejecuta al abrir la ventana de configuración

var texto = "NombreRadio_" + i.toString();

var tiposArchivos = "JPEG File:.jpg:BMP File:.bmp:PNG File:*.png:GIF