Eai filhotes tudo bem? Hoje vou complementar um pouco o assunto de gadgets, só para fechar os comandos básicos. Antes de mais nada, segue os links dos outros posts, já que estou considerando que vocês já leram eles:

Introdução: Criando Gadgets para o Windows 7
Criando pagina de Configuração dos Gadgets

Beleza, vamos lá! O meu objetivo hoje é mostrar como adicionar um flyout ao gadget. Para isso vou criar um “mini-rss“, um gadget que lê as 3 primeiras noticias do 100loop e quando você aperta em um link a noticia aparece em um flyout.

O que é um FlyOut?

FlyOut como o nome diz são telas que “voam para fora” dos gadgets, ou seja, quase um popup.

IC4332

Porque quase um popup?  Bom, um flyout tem algumas características especiais:

Um flyout some automaticamente quando perde o foco, o que significa que apenas um flyout fica ativo por vez.

A Biblioteca

As funcionalidades do flyout são expostas pela biblioteca System.Gadget.Flyout, sendo que os seus membros são:

Eventos:

onHide – Evento disparado quando o gadget se esconde.

onShow – Evento disparado quando o gadget aparece.

Propriedades:

file – Nome do arquivo HTML do flyout.

show – Seta quando o flyout esta visível ou não.

document – Retorna o objeto DOM do flyout. Ou seja, você tem acesso aos elementos da pagina de Flyout de qualquer pagina do seu gadget.

Criando o Gadget

Estou usando como base o nosso código antigo, mas alterei o design um pouco para ficar menos feio. No final do post tem um link para download do projeto final.
A primeira coisa a se fazer é criar os links para as noticias, então vamos adicionar isso a pagina principal (inicio.html):

<div id="dvUndocked"> <img src="images\logo.png"  />  <a id="lnk1" > <span id="nm1"> Noticia </span> </a> <br /> <a id="lnk2"><span id="nm2"> Noticia </span></a> <br /> <a id="lnk3"> <span id="nm3"> Noticia </span> </a></div>

Percebam que estamos usando links vazios (iremos adicionar funcionalidade neles dinamicamente) dentro do div dvUndocked que no nosso caso é o div que aparece quando o gadget esta maximizado.

Depois iremos criar nossa pagina de flyout, que é uma pagina HTML normal com os seus próprios JS (se necessário):

<html>
<head>
</head>
<frameset style="height:600px;width:600px">
   <frame id="fram" src="" />
<frame>
</html>

Estou chamando ela de 100loop_page.htm. Como vocês podem ver, é apenas uma pagina com um frame, nem coloquei JS.

Agora vou determinar essa pagina como o flyout do gadget além de criar as funções para aparecer as noticias no próprio flyout, ou seja, uma função que irá alterar o SRC do frame do flyout, para fazer isso vamos colocar esses códigos no gadget.js:

var page;

//
// Função que ocorrerá sempre que a pagina for carregada
//
function pageLoad(){

        // Vincula a nossa função as ações de Dock e Undock
        System.Gadget.onDock = dockChanged;
        System.Gadget.onUndock = dockChanged;

        // Vincula a pagina menu.html como pagina de configuração
        //System.Gadget.settingsUI="menu.html";
        // Determino qual o arquivo de flyout
        System.Gadget.Flyout.file = "100loop_page.html";

        // Seta os métodos do Flyout
        System.Gadget.Flyout.onShow = showFlyout;
    //    System.Gadget.Flyout.onHide = hideFlyout;
}

// Abre o Flyout
function OpenPage(url){

    page = url;
    // Se o Flyout ja estiver aberto ele só chama a função
    if (System.Gadget.Flyout.show)
    { showFlyout(); }
    else
    // Faz aparecer o Flyout
    System.Gadget.Flyout.show = true;

}
// Função que ocorre quando o Flyout aparece.
function showFlyout()
{
    // Pega o objeto frame do flyout e altera
    System.Gadget.Flyout.document.getElementById("fram").src = page;
}

Ops… não reparem nos códigos comentados, é porque estou usando o nosso ultimo código como modelo, então deixei ai comentado só para referência. Como podemos ver eu usei a biblioteca do flyout para setar as configurações dele, e criei uma função (OpenPage) para fazer a noticia aparecer no flyout. Agora só falta duas coisas, ler o RSS e alterar os nossos links para os links certos.

Lendo o RSS

Como vocês sabem o RSS é um arquivo XML, vocês podem ver a sintaxe do RSS do 100loop entrando no https://100loop.com.br/rss/. Precisamos ler esse arquivo para poder mostrar os links e os títulos das noticias, para isso vamos criar uma classe JS que faz isso vou chamar ela de xml_reader.js:

var xmlDoc;

    // Carrega o XML da pagina do 100loop
    function loadxml()
    {
      xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
      xmlDoc.async = false;
      xmlDoc.onreadystatechange = readXML;
      xmlDoc.load("https://100loop.com/rss");

      readXML();
    }
    // Le o XML do RSS
    function readXML()
    {
        // De 0 a 2 ( 3 noticias)
        for (i=0;i<=2;i++)
        {
        // Adiciona o titulo da noticia no SPAN
        document.getElementById("nm" + (i+1)).innerText = xmlDoc.getElementsByTagName("item").item(i).childNodes(0).text.substring(0,45) + "...";
        // Chama a função Open Page passando o Link da pagina
        document.getElementById("lnk"+(i+1)).onclick = new Function("OpenPage('" + xmlDoc.getElementsByTagName("item").item(i).childNodes(2).text +"')");
        }
       }

Depois basta adicionar a referência desse arquivo na pagina principal e chamar o evento loadxml no onload do body. E o resultado deve ser algo assim:

image

 

image

Claro que o RSS ideal deve fazer com que a noticia apareça no browser, para melhor visualização. Mas como disse o objetivo hoje era só mostrar a funcionalidade do flyout.

Para baixar o código todo: http://www.megaupload.com/?d=71G7YPQE

Abraços e até a próxima!