|
Rádio Gadget: Um exemplo Passo a Passo
Criaremos um Gadget que ofereça a possibilidade de escutar rádio via Internet e permita ao usuário configurar ao menos cinco estações de rádio favoritas.
Recordaremos os 5 passos definidos anteriormente.
• Passo 1: Criar o diretório que conterá os arquivos de desenvolvimento do Gadget
• Passo 2: Criar o arquivo XML para o manifesto do Gadget
• Passo 3: Criar a interface gráfica do Gadget
• Passo 4: Programar a funcionalidade desejada
• Passo 5: Testar, Depurar e Instalar o Gadget no Windows Sidebar
Passo 1: Criar o diretório que conterá os arquivos de desenvolvimento do Gadget
Tendo acesso ao diretório de Gadgets da maneira especificada, criaremos o diretório
Radio.gadget. Dentro do mesmo, para distribuir ordenadamente os arquivos que dispõem o Gadget, criaremos os sub diretórios css, js e imagens.
Passo 2: Criar o arquivo XML para o manifesto do Gadget
Com o editor de código que decidimos utilizar, criamos um arquivo XML manifesto chamado gadget.xml. Este arquivo deve ser gerado na raiz do diretório Radio.Gadget que criamos no passo anterior.
Gadget.xml deverá possuir a seguinte informação:
<?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>Escute rádio a partir de sua área de trabalho do 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>
|
O arquivo deve estar com codificação UTF-8.
Passo 3: Criar a interface gráfica do Gadget
Este é o momento de criar a interface visual com a qual o usuário terá acesso às funcionalidades e configurações do Gadget que está sendo desenvolvido.
Criar a tela principal do Gadget
Na raiz do diretório Radio.gadget será criado um arquivo chamado Radio.html que oferecerá a principal funcionalidade ao usuário: escutar sua rádio favorita.
Na seção <head> da página Radio.html se fará referência ao arquivo que manipula a lógica da aplicação (logica.js) e ao arquivo que armazena suas características visuais (style.css). Estes arquivos serão analizados em detalhes mais a frente.
<html>
<head>
<title>Rádio</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>
... |
Ao ser disparado o evento playstatechange
do objeto mPlayer que representa o Windows Media Placer em nossa página, será executada a função CambioEstado
armazenada no arquivo logica.js
Na página Radio.html também será escrito código para representar os botões que permitam armazenar as rádios favoritas, subir e baixar o volume e reproduzir ou parar a transmissão. Da mesma forma será necessário colocar o objeto do Windows Media Player para obter o serviço 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>
|
Criar a tela de Configuração do Gadget
Na raiz do diretório Radio.gadget será criado um arquivo chamado Settings.html. Este arquivo permitirá ao usuário configurar cada uma de suas rádios favoritas.
Neste arquivo definiremos todas as configurações de nosso gadget. Basicamente, usaremos 2 métodos:
• variableName = System.Gadget.Settings.read("variableName")
Para ler configurações armazenadas
•System.Gadget.Settings.write("variableName",
variableName) Para escrever uma dada configuração
<html>
<head>
<style>
body
{
width:350;
height:320;
}
</style>
<script>
//Função que é executada ao abrir a janela de configuração
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;
}
//Com System.Shell.chooseFile abro a janela para explorar e selecionar os arquivos
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;
}
}
//Aqui, especifico que método será usado para o evento onSettingsClosing, ou seja, logo antes que se feche a janela de configuração.
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>
|
Manter a ordem entre seus arquivos
Na folha de estilo, armazenada em css\style.css serão definidas as dimensões da interface do gadget (Radio.HTML), as margens e a imagem de fundo 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 os ícones e imagens que vem com este Passo a Passo (ou podemos modificá-las por outras) em uma dos subdiretórios que criamos no ponto 3 (imagens).
Passo 4: Programar a funcionalidade desejada
A lógica do gadget estará no arquivo js\logica.js, cujo código é o seguinte:
var nombreRadioActual = "";
var mmsRadioActual = "";
var imagenActual = "imagenes/fondo.png";
//Método que é executado ao abrir o gadget
window.onload = function()
{
//Especifico que método será executado quando é terminado de fechar a janela de configuração
System.Gadget.onSettingsClosed = SettingsClosed;
//Especifico como se chama o arquivo de configuração (é ele que é ativado ao clicar com o botào direito sobre o gadget e é selecionada a opção 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 do controle do Windows Media que é executado cada vez que se muda o estado dele.
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;
}
}
|
Passo 5: Testar, Depurar e Instalar o Gadget no Windows Sidebar
Já temos o Gadget finalizado e pronto para instalar! Para poder vê-lo em funcionamento, uma vez anexado ao Windows Sidebar, simplesmente clicamos com o botão direito sobre ele e selecionamos Options. Será aberto uma janela que contém o arquivo settings.html criado no ponto 3 (Criar a janela de Configuração do Gadget) para que carreguemos nossas rádios favoritas.
REFERÊNCIAS
• 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
|
