Olá filhotes! Vou fazer uma pequena introdução sobre como criar um gadget para o Windows 7! Um gadget é basicamente composto de um arquivo XML e arquivos HTML, claro, podendo conter css, javascript e vbscript, por isso não iremos usar o Visual Studio hoje, mas apenas o bloco de notas!
Mas um gadget é composto de arquivos HTML?  Sim, pode não parecer mas o gadget é carregado em uma janela do Internet Explorer controlado pela Sidebar do Windows.
Agora vamos ver como criar um gadget do zero:

Primeiro passo é criar a pasta para o nosso “projeto”, para isso vamos em arquivos de programas (na partição que tem o Windows instalado), Windows Sidebar e depois na pasta Gadgets (ou C:\Program Files\Windows Sidebar\Gadgets ). Você pode ver que há uma pasta para cada gadget do Windows, inclusive se formos dentro de cada uma, veremos também o código fonte (html, js, css, etc…) delas.
Vamos criar uma pasta para o nosso gadget aqui, vou chamar de nossogadget.Gadget (lembre que precisa ter .Gadget no final).
Pronto! A segunda parte é o manifest (um XML de configuração do Gadget). Lembrando que podemos usar o Manifest de outro gadget como modelo (se estivermos em duvida com relação as propriedades que precisamos).

O Manifest:

O manifest fica as informações como Nome do gadget, informações do produtor, ícones, pagina principal, etc… Resumindo, são as informações de configuração do Gadget. Vamos ao exemplo:

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name> Gadget de Teste </name>
<version>1.0.0.0 </version>
<description>Apenas um gadget de teste.</description>
<author name="100loop">
    <info url="100loop.com.br" text="100loop.com"/>
    <logo src="images/logo.png"/>
  </author>
 <icons>
    <icon width="130" height="67" src="images/vs_icon.jpg"/>
  </icons>
<hosts>
<host name="sidebar">
<base type="HTML" apiversion="1.0.0" src="inicio.html" />
<permissions>FULL</permissions>
<platform minPlatformVersion="1.0" />
 <defaultImage src="images/vs_drag.png"/>
</host>
</hosts>
</gadget>

São vários elementos, mas vou falar apenas de alguns específicos, já que muitos não tem utilidade ainda ou só aceitam um tipo de valor. Primeiro vamos dar uma olhada no elemento Author: Como vocês devem ter notado ele agrega as informações do autor, podendo pôr até uma logomarca. Essas informações aparecem na parte de detalhes (assim, como description) na hora de adicionar um gadget, como mostrado na figura abaixo:

image

O Elemento Icon determina qual o ícone que irá aparecer na tela de seleção de gadgets.

image

e a propriedade src do elemento BASE dentro de Host mostra qual a pagina principal do nosso gadget (sem isso, não existe o gadget):

<hosts>
<host name="sidebar">
<base type="HTML" apiversion="1.0.0" src="inicio.html" />
<permissions>FULL</permissions>
<platform minPlatformVersion="1.0" />
 <defaultImage src="images/vs_drag.png"/>
</host>
</hosts>

DefaultImage determina a imagem do nosso gadget quando estamos arrastando ele para o desktop.

image

Aconselho a todos acessarem o link abaixo para mais informações sobre o manifest:

http://msdn.microsoft.com/en-us/library/bb508509%28VS.85%29.aspx

O Arquivo HTML:

Agora vamos criar o nosso arquivo HTML (inicio.html). Ele será um arquivo HTML igual à outro qualquer:

<html>
<head>
<script src="js/gadget.js" type="text/javascript"></script>
</head>
<body>
<div>
NOSSO GADGET
</div>
</body>
</html>

Detalhe, estou colocando uma referencia para o arquivo gadget.js, mas eu ainda nem criei esse arquivo. Só para me poupar trabalhar. 😉

Pronto! Só de você ter o Manifest e o arquivo HTML do seu gadget você já pode colocar ele no desktop, basta acessar o Menu de Gadgets (botão direito na área de trabalho e depois gadgets) e veremos o nosso gadget lá.

image

Um detalhe importante: Se você especificou uma imagem no ICON que não existe, o seu gadget não irá aparecer no menu.

Quando adicionamos o gadget a área de trabalho, podemos reparar que ele fica apenas como uma telinha branca.

image

Isso acontece porque nós temos que definir o tamanho inicial do gadget. Podemos definir isso apenas usando um estilo css no body do nosso html:

<body style="height:80px; width:130px" >

Ou então você pode fazer via javascript, igual faria com uma pagina normal:

document.body.style.height = "80px";
document.body.style.width = "130px";

Eu estou usando css nesse nosso exemplo. Pronto, agora nosso gadget tem uma forma melhorzinha:

image

Beleza! Como eu havia dito antes, um gadget é uma pagina HTML, mas contém varias funções especificas que uma pagina em HTML não tem:

image

Ele pode ser Maximizado/Minimizado além de poder ter uma tela de configuração:

image

Maximizado / Minimizado (Undocked / Docked)

Quando o gadget esta minimizado nós falamos que ele esta docked e quando esta maximizado nós chamamos de undocked.

Agora vamos fazer o nosso gadget ser maximizado e minimizado, para isso nós usaremos a biblioteca System.Gadget, não precisamos importar nada para usar essa biblioteca, basta chamar-la no código. Usaremos os eventos System.Gadget.onDock e System.Gadget.onUndock que são chamados logo quando o usuário apertar o botãozinho de alterar o tamanho, e também usaremos a propriedade System.Gadget.docked que como o nome sugere, é um booleano que mostra se o gadget esta docked ou não.

Vamos ao código:

Primeiro vamos alterar um pouco nossa pagina inicial, colocando agora duas divs no html só para mostrar valores diferentes dependo do estado do gadget.

<body style="height:80px; width:130px" >
<div id="dvDocked"> Minimizado </div>
<div id="dvUndocked"> Maximizado </div>
</body>

Agora vamos ao nosso gadget.js (lembrando que lá em cima definimos que ele esta dentro da pasta js):

function pageLoad(){

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

//Faço minha função é vinculada ao OnLoad da pagina
window.attachEvent("onload", pageLoad);

//
// Essa função controlará a ação de dock/Undock do nosso gadget
//
function dockChanged()
{
    // Se estiver minimizado
    if (System.Gadget.docked)
    {
        //Muda o tamanho do body
        document.body.style.height = "80px";
        document.body.style.width = "130px";
        // Muda a visibilidade das divs
        document.getElementById("dvDocked").style.display = '';
        document.getElementById("dvUndocked").style.display = 'none';
    }
    else
    {
        //Muda o tamanho do body
        document.body.style.height = "150px";
        document.body.style.width = "220px";
        // Muda a visibilidade das divs
        document.getElementById("dvDocked").style.display = 'none';
        document.getElementById("dvUndocked").style.display = '';
    }
}

Tentei comentar bastante o código para ficar um pouco mais claro. Bom, só de você vincular uma função no onDocked / onUndock o seu gadget terá a opção de maximizar:

image

Claro, se não tiver nada na sua função dockChanged o seu gadget iria travar a primeira vez que você tentasse maximizar ele! 😉

Bom filhotes, meu objetivo hoje foi só fazer uma introdução aos gadgets e mostrar que não são um bicho de sete de cabeças. A próxima vez eu mostro como fazer as configurações do gadgets e chamar outras paginas, resumindo: como fazer o gadget ficar realmente funcional!

Abraços!

Update 30/05: Você pode baixar os arquivos clicando aqui , e pode ver o segundo post clicando aqui.