Construção de gadgets no Windows Vista

Gadgets também são chamados de mini-aplicativos em português. Para quem não sabe são aqueles ícones que ficam em uma barra lateral transparente do Windows Vista. Os gadgets já são conhecidos de outras plataformas, no Linux por exemplo, acredito que o primeiro gerenciador de janelas a utilizar esse recurso foi o Window Maker, que trazia a possibilidade de se fazer “docks”. No Mac OS também já existe esse recurso há algum tempo.

Para quem pensa que a Microsoft somente agora resolveu “copiar” a idéia, está enganado. Desde Office 97 já vem sendo discutida a introdução desse conceito, mas somente agora ele se consolidou.

O que são gadgets?

Existem 3 tipos diferentes de gadgets

• Gadgets do Vista
• Gadgets do Live.com ou Windows Live Spaces
• Gadgets SideShow

Nesse post iremos falar apenas dos gadgets para Windows Vista, que são aqueles que ficam na barra lateral, na área de trabalho.

Os gadgets para Windows Live Spaces, são gadgets para rodar na web, e os SideShow, são para dispositivos com vídeo secundário, como laptops, que tem um visor na tampa que exibem algumas informações, controles remotos, celulares etc.

Um gadget de barra lateral do Vista, pode ser definido de forma simplória como uma pagina HTML rodando em uma janela do Internet Explorer. A visualização na área de trabalho é provida por uma instancia do IE, sem borda e com tamanho pré definido.

O gadget pode estar acoplado ou desacoplado da barra lateral. Quando está acoplado a dimensão padrão recomendada pela Microsoft é 130 X 130px. Sendo que ao estar acoplado a largura máxima é 130px mas a altura pode variar.

Quando está desacoplado essas dimensões podem ser modificadas .

Por que usar gadgets?

• Aplicações leves
• Customização da Área de Trabalho
• Aumento da produtividade
  • Dados vindos de outras aplicações
  • Informações atualizadas
  • Simplicidade no acesso a informações

O que preciso para desenvolver um gadget?

Para desenvolver um bom gadget você precisa saber apenas HTML, CSS e Java Script. Por ser executado sempre pelo Internet Explorer, o desenvolvedor não precisa se preocupar com compatibilidade entre browsers ao desenvolver seu gadget. Também é possível a utilização de controles específicos do IE e controles ActiveX, que podem propiciar por exemplo o controle de recursos do Windows como, Windows Media Player, Microsoft Office e etc...

Você também pode escrever seu próprio controle ActiveX. Existe também os objetos da própria barra lateral, que você pode usar para fazer diversas manipulações que facilitam muito o desenvolvimento.

Para iniciar seu primeiro aplicativo você irá precisar apenas de um arquivo HTML e um arquivo de configuração XML que irá abrigar algumas informações e definições sobre o seu aplicativo.

Para publicar o seu gadget você pode fazê-lo de varias formas, vou falar apenas das formas mais rápidas e fáceis. Na pasta Program Files -> WindowsSidebar -> Gadgets ficam os gadgets globais, que servem para todos os usuários do sistema operacional. Temos também os gadgets locais que servem apenas para o usuário especifico, C:\Users\JOAOBOSCO\appdata\local\microsoft\windows sidebar\gadgets

No local onde tem JOAOBOSCO, você irá substituir pelo seu usuário.

Para criar um gadget basta dentro dessas pastas cria uma pasta com uma “extensão”  .gadget

Por exemplo, crie uma pasta com o nome, “Demonstração.gadget”, dentro dela coloque seus arquivos e você já terá seu gadget publicado, bastando apenas ir a barra lateral do Windows e clicar no botão de adicionar novo gadget, na lista exibida já irá aparecer seu novo gadget.

Outra maneira simples é criar todo seu mini-aplicativo numa pasta, zipar a pasta e depois renomear o arquivo zipado, tirando a extensão .zip e colocando a extensão .gadget.

Fazendo isso o Windows reconhece automaticamente a extensão do arquivo e você precisa apenas dar 2 cliques no arquivo para que ele seja executado e adicionado a barra lateral.

 

Exemplo de gadget

Vamos agora ao nosso Hello World.

Começaremos pelo nosso arquivo de manifesto, o gadget.xml

Nesse arquivo ficam definições de autoria, nome, ícones, versão descrição e etc.

Segue um exemplo do arquivo:

<?xml version="1.0" encoding="utf-8" ?>

<gadget>

< name>Gadget IT Extreme</ name>

< namespace>IT Extreme</ namespace>

< version>1.0.0.0</ version>

<author name ="Joao Bosco">

< info url="http://joaoboscoseixas.spaces.live.com " text="Gadgets " />

< logo src="logo.jpg" />

</author >

< copyright>© 2007</ copyright >

< description>Gadget de exemplo para o IT Extreme</ description>

<icons>

< icon width="64" height="64" src ="logo.jpg" />

</icons >

<hosts >

<host name ="sidebar">

< base type="HTML" apiVersion="1.0.0" src ="gadget.html" />

< permissions>full</ permissions>

< platform minPlatformVersion="0.3" />

</host >

</hosts >

</gadget >

Temos varias tags, todas agrupadas dentro da tag <gadget>. Temos tags para definição de nome do aplicativo, versão, autor, logo, ícone, descrição e etc.

A tag mais importante é a <base>. Nela é definida o arquivo que será executado, no caso desse XML, ele está apontando para gadget.html

Nesse exemplo vamos usar um HTML bem simples para fazer essa demonstração.

<html>

<head>

            <title>Meu Primeiro Gadget</title>

            <style>

                        body{

                                   width: 130px;

                                   height: 80px;

                        }

            </style>

</head>

<body>

            <span>Hello World!!!</span>

</body>

</html>

A parte de estilo poderia estar normalmente num arquivo .CSS, mas nesse caso para simplificar mais ainda, estou colocando no HTML para facilitar a vida de quem não conhece. Dessa mesma forma num arquivo .css você poderia fazer qualquer formatação, fonte, cor etc., exatamente como numa aplicação web normal.

Se você leu a primeira parte do artigo, então já sabe como publicar o seu gadget, em qual pasta ele deve ficar ou a forma de publicar ele como um arquivo zip.

Publique e veja o resultado.

Agora vamos colocar algum código com Java Script no gadget para tratar os eventos de dock e undock. Esses eventos são responsáveis pelas ações que acontecerão ao anexar ou desanexar o gadget da barra lateral.

 <html>

<head>

            <title>Meu Primeiro Gadget</title>

            <style>

                        body{

                                   width: 130px;

                                   height: 80px;

                        }

            </style>

<script>

            function main()

            {

                        System.Gadget.onUndock = verificarEstado;

                        System.Gadget.onDock = verificarEstado;

}

function verificarEstado()

{

            if(!System.Gadget.docked){

                        setUndockedSize();

}

else{

            setDockedSize();

}

}

function setUndockedSize(){

            document.body.style.width = “280px”;

            document.body.style.height = “180px”;

            gadgetContent.innerHTML = ‘<h1> DESANEXADO </h1>’;

}         

function setDockedSize(){

            document.body.style.width = “130px”;

            document.body.style.height = “130px”;

            gadgetContent.innerHTML = ‘Anexado a barra lateral ’;

}         

</script>

</head>

<body onload=”main()”>

            <span id=”gadgetContent” >Hello World!!!</span>

</body>

</html>

Pelo código você pode notar que a depender do conteúdo retornado pelo método System.Gadget.docked, que retorna um boolean, você poderá saber se o gadget está anexado a barra lateral ou não, com isso ele vai ser redimensionado para um determinado tamanho e o texto exibido se modificará.

Como eu sei que existe um método System.Gadget.docked ?

Na verdade eu tenho super poderes, e me comunico com maquinas, então foi fácil, eu simplesmente perguntei para API do Windows Sidebar, qual era o método que me retornava se a aplicação estava anexada ou não a barra lateral.

Mas caso você não tenha os mesmos super-poderes que eu, você pode encontrar todas essas informações e muito mais na pagina oficial da documentação no MSDN.

http://msdn2.microsoft.com/en-us/library/aa965850.aspx

Nessa pagina você encontrará vários métodos muito úteis para construção dos seus gadgets, com exemplos que ensinam a aplicar os métodos.

Existem métodos que verificam as medidas de processador e memória, das interfaces wireless e etc.

Esse é o material de referencia. Tudo está lá, desde a referencia do arquivo de manifesto XML até os métodos que podem ser usados.

Esse é um exemplo BEEEMM básico. Você pode e deve aprender como se faz telas de configurações e flyouts para melhorar o seu gadget.

Flyouts são as expansões que provêem uma visualização diferenciada quando você passa o mouse sobre o gadget. Por exemplo, num gadget que exibe noticias você pode ter a noticia passando de forma rotativa como se fosse um letreiro e ao passar o mouse sobre a noticia, seria aberto um flyout com um resumo da noticia.

Já no arquivo de configuração você pode fazer modificação do visual do gadget por exemplo.

Enfim, as possibilidades são infinitas, basta deixar sua criatividade agir.

Você pode pegar por exemplo dados de alguma pagina web para exibir no seu gadget na sua área de trabalho. Você pode ter um software que grava sua agenda de contatos em um arquivo XML e o seu gadget vai ler esse arquivo XML e mostrar a você os seus contatos.

Possibilidades infinitas, então… Mãos a obra!