|
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')">
<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.
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>
<div style="font-family: Tahoma;
font-size: 10pt; position:absolute;
left:20; top:120;">
.URL:
<div><input id="txtMMSRadio"
size="30"></div>
</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"
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");
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;
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"};
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;
case('2'):
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"};
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;
case('3'):
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";
btn04.onmouseleave = function(){btn04.src="imagenes/btn04.png"};
btn05.src = "imagenes/btn05.png";
btn05.onmouseleave = function(){btn05.src="imagenes/btn05.png"};
break;
case('4'):
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"};
btn05.src = "imagenes/btn05.png";
btn05.onmouseleave = function(){btn05.src="imagenes/btn05.png"};
break;
case('5'):
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;
}
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
• Windows
Sidebar Reference
• Gadget
Development Overview
• Using
Atlas to make web services calls from Sidebar
Gadget
• HTML
and Script development
• Windows
Vista – Windows Sidebar and Gadgets
DESAFIO GADGET
|
