Gadgets Paso a Paso - udias.com · 2011-04-12 · • Archivo HTML: Define el cuerpo del Gadget y...

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ónEn este documento se hará una introducciónpráctica al mundo de los Microsoft Gadgets.Al finalizar el curso y tan solo teniendo unospocos conocimientos de HTML, Javascript oVBScript, usted podrá construir fácilmenteaplicaciones ingeniosas y útiles para ejecutaren su sistema operativo Windows Vista.

¿Qué son los Microsoft Gadgets?Los Microsoft Gadgets son aplicaciones queofrecen una gran variedad de usos posiblesexplotando al máximo las capacidades deWindows Vista y la conectividad a ServiciosWeb, RSS y otros recursos disponibles enInternet. Usted podrá desarrollar su Gadget amedida y obtener fácilmente la informaciónque necesite desde su escritorio, como porejemplo, los datos del tiempo, noticiasactualizadas, mapas de tráfico ytransmisiones de radio, entre infinitasposibilidades.

Por otro lado, muchas de las aplicacionesque se ejecutan en su sistema operativoWindows Vista pueden ser consumidas porun Gadget e interactuar con el usuario pormedio de una interfaz visual novedosa yadaptada a las necesidades puntuales que sequieran satisfacer.

Siempre que se hable de Gadgets seescuchará de Windows Sidebar (la barralateral de Windows Vista), un panel que seencuentra disponible en el escritorio deWindows Vista, cuya funcionalidad es

Creando un Gadget: Paso a Paso

organizar los Gadgets y facilitar el acceso a ellos, así como la Bandeja de acceso rápido enWindows (Quick Launch) es la zona de la pantalla reservada para colocar los accesosdirectos que al usuario le resulta práctico tener a mano.

Windows Sidebar es el complemento ideal para los monitores de pantalla panorámica yfunciona 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 deinteractuar poderosamente con Windows Vista y ejecutarse como una aplicación en elescritorio 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 elusuario podrá interactuar desde su escritorio.

• Archivo HTML de configuración: Es una interfaz gráfica que expone lasconfiguraciones del Gadget para que puedan ser modificadas por el usuario.

• Imágenes, Script y Hojas de Estilo: Encapsulan las directivas gráficas y decomportamiento que serán utilizadas desde las interfaces HTML con las que interactúael 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 HTMLde la interfaz de usuario, pero para dimensionar al máximo el potencial de estasaplicaciones y lograr un codificación de fácil mantenimiento, se sugiere la utilización detodos 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 conel Gadget. Puede usar Microsoft Notepad o, si lo desea, algún otro editor concapacidades 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 conalgú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 paraempezar 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 elfuncionamiento completo del Gadget.

1. Determinar la disponibilidad del Gadget

Con la tecla Windows + R, abra la ventana “Run” y ejecute la siguiente sentencia deacuerdo a la visibilidad que desea que tenga el aplicativo.

a. Si se desea que el Gadget esté disponible para un usuario específico de laPC, debe localizar el directorio donde se creará el Gadget con la siguientesentencia:

b. Si se desea que el Gadget esté disponible para todos los usuarios de la PC,entonces escriba la siguiente sentencia:

Al ingresar la instrucción antes mencionada, el explorador de Windows se abrirá en eldirectorio que contiene los Gadgets disponibles para el usuario especificado o paratodos los usuarios de la PC, respectivamente.

2. Generar un directorio para el Gadget

\Users\%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets

\Program Files\Windows Sidebar\Shared Gadgets

Se creará un directorio con el formato NombreDeGadget.gadget en la carpeta deGadgets localizada en el punto 2 (donde NombreDeGadget debe ser reemplazado por elnombre que hayamos asignado a nuestro Gadget, por ejemplo: Noticias.gadget,FotosEnLinea.gadget, etc). Es importante que el nombre de la carpeta termine con laextensión .gadget para que el aplicativo sea reconocido por Windows Sidebar y sepueda acceder desde allí posteriormente.

Dentro de este directorio y con el objetivo de mantener el orden dentro del desarrollo, sepodrán generar 3 nuevos subdirectorios llamados css, js e imágenes, que seránutilizados 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. Elnombre 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 elaplicativo. 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

<author>Dentro de este elemento se definen los datos del autor del Gadget.Tiene sub elementos que permiten destacar el sitio web y el logodel autor.

<description>Este elemento permite brindar una descripción sobre lafuncionalidad del Gadget

<base>Su atributo Src indica a Windows Sidebar qué archivo HTMLcontiene 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 unaparametrización desde una pantalla dispuesta para tal fin.

Estas interfaces serán soportadas por archivos HTML que pueden contener cualquiera delos elementos comúnmente permitidos por los mismos.

La interfaz gráfica con el usuario puede estar basada en elementos simples del estándarHTML 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 deambos métodos, por mencionar algunas opciones.

En cualquier caso, estas páginas harán uso de las funciones Javascript necesarias parainteractuar con el modelo de objetos Gadget (del que se hablará más adelante) para brindarlos servicios deseados al usuario.

Siguiendo con los pasos necesarios para hacer funcionar un Gadget realizaremos lassiguientes acciones

1- Crear la pantalla del Gadget

En la raíz del directorio NombreDeGadget.gadget generado en el paso 1, donde yaexiste 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 usuariorealice las configuraciones funcionales necesarias que usted, como desarrollador, deseeexponer

3- Mantener el orden entre sus archivos

Es una buena práctica centralizar las configuraciones visuales de los archivos HTMLque se exponen al usuario en uno o varios archivos de hoja de estilo en cascada (conextensión .css). En ese caso se pueden almacenar en el directorio css que hemosgenerado en el primer paso para tal fin

De la misma manera, las imágenes que sean utilizadas por las pantallas HTML que sehayan creado, pueden ser almacenadas dentro del directorio imágenes, también creadodurante 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 comoprogramador Javascript o VBScript para dar vida a sus Gadgets.

Además de tener la posibilidad de programar el comportamiento de los elementosdispuestos en las páginas HTML del Gadget, podrá hacer uso del modelo de objetosextendido 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 interfazHTML creada. Se podrá codificar en VBScript o Javascript para acceder al modelo deobjetos 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 losobjetos 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 denuestro 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, existentres 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 lassiguientes 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 conun doble clic, se instale y se agregue en la Sidebar. Para ello, seleccionamos ycomprimimos todos los archivos y carpetas que forman nuestro Gadget. Dadoque el ZIP quedará con el formato NombreDeGadget.gadget.zip, le quitamos laextensió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 alusuario 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 directorioRadio.gadget. Dentro de la mismo, para distribuir ordenadamente los archivos queconforman 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 manifiestollamado gadget.xml. Este archivo debe ser generado en la raíz del directorio Radio.Gadgetque 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 funcionalidadesy 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 quebrindará 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 laló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 WindowsMedia Placer en nuestra página, se ejecutará la función CambioEstado almacenada en elarchivo logica.js

En la página Radio.html también se escribirá código para representar los botones quepermitan almacenar las radios favoritas, subir y bajar el volumen y reproducir o detener latransmisión. Así mismo será necesario colocar el objeto de Windows Media Player paraobtener 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')"><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>

</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. Estearchivo 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 leerconfiguraciones almacenadas- System.Gadget.Settings.write("variableName", variableName) Para escribir unaconfiguració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, justoantes 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 lainterfaz 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 podemoscambiarlas 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 deconfiguración

System.Gadget.onSettingsClosed = SettingsClosed;

//Especifico como se llama el archivo de configuraciones (es el que se accede alhacer 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 deeste.

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 yseleccionamos Options. Se abrirá una ventana que contiene el archivo settings.htmlcreado en el punto 3 (Crear la pantalla de Configuración del Gadget) para que carguemosnuestras 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 - udias.com · 2011-04-12 · • Archivo HTML: Define el cuerpo del Gadget y...

Documents

Transcript of Gadgets Paso a Paso - udias.com · 2011-04-12 · • Archivo HTML: Define el cuerpo del Gadget y...