Clique aqui para instalar o Silverlight*
BrasilAlterar|Todos os sites da Microsoft
MSDN
|Developer Centers|Biblioteca|Downloads|Assinaturas MSDN
Pesquisa rápida


Construindo Gadgets para o Windows Vista

Parte 1: Introdução aos Windows Gadgets

Publicado em: 23 de novembro de 2006
*

O que são os Windows Gadgets?

Os Windows Gadgets são miniaplicativos do novo Windows Vista que estão sempre disponíveis na área de trabalho para o usuário, e são exibidos por sobre as aplicações tradicionais ou acoplados à Barra Lateral (ou, em inglês, "Sidebar").

Os Gadgets são chamados de "miniaplicativos" exatamente por serem versões simples, focadas e pequenas em tamanho, que irão exibir informações que trarão maior produtividade aos seus usuários. Um cenário possível de uso de um Gadget pode ser o de exibir dados de controle relacionados a atividades diárias de um executivo, por exemplo dados que necessitem de monitoramento em tempo real para a tomada de decisões. Os Gadgets também podem ser utilizados para a criação de outras aplicações casuais e de uso mais amplo (como o que exibe dados da previsão do tempo e que está previamente instalado com o Windows Vista). A aplicabilidade dos Windows Gadgets vai além destes exemplos, mas sempre com foco em trazer maior produtividade e mais eficiência para seus usuários.

Apesar de terem cenários de uso geralmente específicos, os Gadgets são aplicações instaladas na estação Windows Vista do usuário, logo são ricas quanto aos recursos locais que podem acessar e oferecem uma excelente experiência de uso, com interfaces poderosas que podem ser criadas tanto através de recursos de desenvolvimento geralmente utilizados para a criação de aplicações web (como DHTML e javascript) quanto com o uso de controles criados em código gerenciado (através de ActiveX criados, por exemplo, em C#).

Fig. 01 - Windows Sidebar e exemplos de Gadgets (em close)

Estrutura Básica de um Gadget

A estrutura mais elementar para um Gadget é bem simples: devemos começar por criar um diretório (neste exemplo, "TutorialGadgetBrasil") e nele acrescentar um arquivo chamado "gadget.xml", que corresponde ao arquivo de manifesto do Gadget.

Podemos comparar o arquivo de manisfesto a um arquivo .INI, pois é nele que são indicadas as primeiras informações necessárias ao seu funcionamento, tais como o ícone, nome e descrição do Gadget (a ser exibido na janela "Galeria de Gadgets") e (muito importante!) o nome do arquivo HTML que será usado como página principal do Gadget quando em funcionamento.

Neste momento não é necessário o uso de nenhuma ferramenta de desenvolvimento em especial: você pode criar o diretório e adicionar o arquivo xml utilizando qualquer editor de texto, como o Notepad. Este arquivo deverá conter a seguinte estrutura:

			<?xml version="1.0" encoding="utf-8"?>
			<gadget>
			  <name>Exemplo Brasil</name>
			  <namespace><!--_locComment_text="{Locked}"-->microsoft.windows</namespace>
			  <version><!--_locComment_text="{Locked}"-->1.0.0.0</version>
			  <author name="Microsoft Brasil">
			      <info url=" http://www.msdnbrasil.com.br" text=" http://www.msdnbrasil.com.br"/>
			      <logo src="logo.png"/>
			  </author>
			  <copyright><!--_locComment_text="{Locked}"-->© 2006</copyright>
			  <description>Exemplo criado para o tutorial de gadgets - Brasil</description>
			  <icons>
			    <icon height="48" width="48" src="brasil.png"/>
			  </icons>
			  <hosts>
			    <host name="sidebar">
			      <base type="html" apiVersion="1.0.0" src="default.html"/>
			      <permissions><!--_locComment_text="{Locked}"-->full</permissions>
			      <platform minPlatformVersion="1.0"/>
			      <defaultImage src="brasil.png"/>
			    </host>
			  </hosts>
			</gadget>
			

Arquivo "gadget.xml"

No exemplo acima, o Gadget será exibido na "Galeria de Gadgets"com o título "Exemplo Brasil" e com as informações gerais indicadas em <author>, <copyright> e <description>, além de ser representado pela imagem "brasil.png" que corresponde ao seu ícone. A tabela a seguir mostra uma descrição das principais tags do arquivo "gadget.xml":

TagDescrição

<name>

Nome dado para o Gadget e exibido na galeria de seleção.

<author>

Nome do autor (pessoa ou empresa) que criou o gadget. Estas informações são exibidas ao selecionarmos o botão "Exibir Detalhes" (em inglês, "Show Details"), no painel que se abrirá na seqüência. Note que também é possível informar uma URL e um ícone relacionado ao autor em tags internas (<info> e <logo>).

<copyright>

Informações de direitos autorais.

<description>

Uma breve descrição do gadget e sua funcionalidade, também para exibição no painel de detalhes.

<icon>

Ícone do gadget que será exibido na janela da "Galeria". Se um ícone não for informado, uma imagem padrão será exibida para o gadget.

<host name="sidebar">

Esta tag não deve ser alterada, já que estamos falando de gadgets para serem executados usando a barra lateral ("Sidebar") como "host" da aplicação.

<base src="default.html">

Nesta tag indicamos qual a página principal que deverá ser exibida quando o gadget estiver adicionado à barra lateral. Neste exemplo, utilizamos o nome "default.html", mas o arquivo pode ter outro nome, desde que tenha a extensão .html.

Como em nosso exemplo estamos usando as imagens "brasil.png" e "logo.png", as adicionamos também ao diretório em que estão os arquivos "gadget.xml" e "default.html" (que contém um parágrafo básico com o texto "Olá Brasil"). Para finalizar esta estrutura inicial, adicionei um diretório para incluirmos o arquivos de folha de estilo "css" referenciado pelo "default.html":

			<html>
			<head>
			    <title>Meu Primeiro Gadget</title>
			    <link href="css/styles.css" rel="stylesheet" type="text/css" />
			</head>
			<body>
			    <div id="gadgetContent">
				<p>Olá Brasil</p>
			    </div>
			</body>

			</html>
			

Fig. 02 -Estrutura inicial de diretórios e arquivos do Windows Gadget

Pronto! Criamos um gadget com os elementos mínimos para sua exibição e funcionamento. Mas como faço para visualizá-lo na Barra Lateral?

Instalando Gadgets

Os gadgets, quando instalados (vide fig.03), podem estar localizados em dois diretórios distintos:

(drive):\Program Files\Windows Sidebar\Gadget; ou

(drive):\Users\(seu login)\AppData\Local\Microsoft\Windows Sidebar\Gadgets

Ao acessar o primeiro endereço, você irá encontrar uma série de diretórios com o final ".Gadget" em seus nomes, e deve reconhecer que estes são os Gadgets que já vêm instalados com o seu Windows Vista (como "Clock.Gadget" e "Weather.Gadget"). Estes gadgets estão disponíveis para quaisquer usuários que acessem a estação, por isso são chamados de “gadgets globais”.

Fig. 03 -Galeria de Windows Gadgets

Observe, porém, que se você criar qualquer conteúdo neste primeiro endereço, vai receber a janela que solicita a "elevação" de permissões administrativas, pois este trata-se de um diretório protegido pelo sistema. Isso ocorre porque o Windows Vista introduz a política de “Controle de Contas de Usuário” (ou, em inglês, “User Account Control” – UAC), que faz com que todas as operações feitas sob o contexto de um determinado login sejam executas com as permissões de um usuário padrão, mesmo que este faça parte do grupo “Administradores”. Na prática não há restrições no uso deste diretório para a instalação do seu gadget feito sob medida, mas tenha em mente que será necessário ter permissões administrativas para fazer a escrita de novo conteúdo e a alteração de arquivos existentes. Esta política pode ser uma boa prática de gestão de gadgets em ambientes corporativos, em que os usuários geralmente (ou, idealmente) não fazem parte de grupos com permissões administrativas e portanto não poderão fazer alterações nestes conteúdos.

Dica: Para mais informações sobre “Controle de Contas de Usuário” do Windows Vista, consulte os links ao final deste documento.

No segundo endereço estão localizados todos os gadgets que instalamos para cada conta de usuário e por isso chamados de “gadgets locais”. A instalação de gadgets neste diretório não requer uma conta com permissões administrativas, porém é possível restringir a instalação e mesmo a execução de gadgets locais através do uso de políticas de grupo (ou “group policies”).

O processo de instalação de um gadget local é simples: vamos “zipar” o conteúdo do diretório “TutorialGadgetBrasil” (que contém os arquivos do Gadget – fig. 04a) e, após zipado, renomear o pacote de “TutorialGadgetBrasil.zip” para “TutorialGadgetBrasil.gadget”, como na fig. 04b. (Atenção: Não “zipe” diretamente o diretório, pois os arquivos devem ficar na “raiz” do pacote zip e, conseqüentemente, do gadget extraído na instalação).

Note que o ícone do pacote é alterado e o arquivo já é reconhecido pelo Windows Vista como um arquivo do tipo “Windows Gadget” (fig. 04c). Ao darmos duplo clique no pacote, a janela de notificação de segurança é exibida (fig. 04d), indicando que estamos executando a instalação de um pacote cujo conteúdo não está assinado digitalmente e que o gadget deve ser instalado apenas se confiarmos no autor e origem do programa. Clicamos em “Instalar” (ou “Install”) e um diretório com o nosso conteúdo é criado, além do gadget ser automaticamente adicionado à barra lateral.

Para fazer alterações no conteúdo instalado (e vê-las refletidas em seu gadget ao longo do processo de desenvolvimento) não é necessário repetir este procedimento de empacotamente e instalação múltiplas vezes: você pode trabalhar diretamente com o conteúdo copiado para o (drive):\Users\(seu login)\<...>\Gadgets, adicionando e alterando arquivos, apenas removendo o gadget da barra lateral e readicionando-o para ver as alterações refletidas. Por este motivo o uso do gadget instalado localmente é o recomendado para ambientes de desenvolvimento.

Podemos ainda aumentar a segurança na distribuição do gadget em ambientes de produção, utilizando “Windows Cabinet Files” (“.cab”) ao invés do pacote “.zip”. Um “cab” pode ser assinando digitalmente com um certificado que garanta a origem do conteúdo. Há algumas ferramentas que auxiliam a assinatura de assemblies (como o “signtool.exe” do Visual Studio 2005) e a geração de certificados para testes e uso em ambiente de intranet (“makecert.exe”). O processo é o mesmo realizado para a distribuição de ActiveX por sites web.

Grupo 04 - Processo de criação do "pacote de instalação" de um Gadget

Observação: A exibição da janela "Notificação de Segurança" é um procedimento padrão que ajuda a garantir que somente conteúdo autorizado seja instalado, minimizando riscos de instalação de conteúdo mal-intencionado com um Gadget. Devemos, porém, observar para os Gadgets as mesmas políticas de segurança e cuidados na instalação que tomamos para a instalação de qualquer outro programa em nossas máquinas: assim como não executamos programas ".exe" de fontes desconhecidas, não devemos executar nenhum ".gadget" cuja procedência não esteja devidamente comprovada.

Para fazer alteração no conteúdo instalado (e vê-lo refletido em seu gadget ao longo do processo de desenvolvimento) não é necessário repetir este procedimento de empacotamente e instalação múltiplas vezes: você pode trabalhar diretamente com o conteúdo copiado para o (drive):\Users\(seu login)\<...> \Gadgets, adicionando e alterando arquivos, apenas removendo o Gadget da barra lateral e readicionando-o para ver as alterações refletidas.

E aqui fica outra dica de uma prática que tenho, particularmente, usado: apesar de não termos (ainda) um projeto no Visual Studio 2005 para nos auxiliar na criação de gadgets, você pode criar uma "Blank Solution" e adicionar os itens do seu gadget a ela, apontando direto para o diretório em que o Gadget se encontra instalado. Assim podemos ter uma visão conjunta de todos os arquivos que compõem o projeto e nos utilizar dos recursos de intellisense e auxílio em modo design do Visual Studio 2005, mesmo para desenvolvimento com DHTML e javascript.

Fig. 05 - Gadget "Exemplo Brasil" e informações exibidas a partir do arquivo de manifesto "gadget.xml"

Demais Componentes de Um Gadget

O arquivo HTML principal ("default.html") é um arquivo com uma estrutura padrão, que suporta o uso de CSS e javascript, além de DTHML com acesso ao modelo de objetos da barra lateral. Além do arquivo principal, um gadget pode ter uma página de configurações (ou "settings") e esta é uma das propriedades que configuramos em um Gadget utilizando seu modelo de objetos.

Adicionamos o arquivo "general.js" ao nosso Gadget, referenciando-o no cabeçalho do "default.html", da forma como fazemos normalmente em um código HTML:

			<script language="javascript"src="general.js" type="text/javascript"></script>
			

E, no "general.js", vamos incluir a seguinte lógica:

			System.Gadget.settingsUI = "settings.html";
			

O comando acima está atribuindo à propriedade "settingsUI"o nome do arquivo HTML que será exibido quando clicarmos no ícone da ferramenta ou selecionarmos "Options" em um Gadget. Note que, uma vez criada e atribuída uma página de configurações a um Gadget, o ícone para acesso à página de configurações é exibido automaticamente ao passarmos com o mouse sobre o Gadget. Os botões "OK" e "Cancel" da página de configurações também são exibidos automaticamente (fig. 06) sem que seja necessário nenhuma intervenção extra do desenvolvedor, e veremos na segunda parte deste tutorial alguns dos eventos que conseguimos tratar para estes e outros elementos de um Gadget.

Fig. 06 - Página de Configurações (botões "OK" e "Cancel" adicionados sem a interveção do desenvolvedor)

Podemos ainda aumentar a segurança na distribuição do gadget em ambientes de produção, utilizando “Windows Cabinet Files” (“.cab”) ao invés do pacote “.zip”. Um “cab” pode ser assinando digitalmente com um certificado que garanta a origem do conteúdo. Há algumas ferramentas que auxiliam a assinatura de assemblies (como o “signtool.exe” do Visual Studio 2005) e a geração de certificados para testes e uso em ambiente de intranet (“makecert.exe”). O processo é o mesmo realizado para a distribuição de ActiveX por sites web.

Voltando à página principal do nosso Gadget, podemos especificar, utilizando o arquivo css relacionado, novos estilos de fonte, dimensões e até de imagens de fundo (com transparência) para o Gadget. Neste exemplo, adicionamos como estilo para o "body" do documento:

			body
			{
			    margin: 10px;
			    font-family: Segoe UI, Tahoma, Sans-Serif;
			    font-weight: bold;
			    font-size: 11px;
			    background: url(../images/blue_back.png) no-repeat;
			    color: #ffffff;
			    width:130;
			    height:67;
			}
			

O que nos dará um Gadget com o seguinte estilo:

Fig.07 - Gadget "Exemplo Brasil" após as alterações de estilo

Dica: O arquivo de fundo para o Gadget deste exemplo ("blue_back.png") é retangular, porém com transparência para a área externa à borda da imagem, o que dá o efeito "arrendondado" para os cantos da imagem. Utilize imagens com transparência para a criação de Gadgets com formatos não-retangulares (como é feito com os relógios do "Clock.Gadget", nativo do Windows Vista).

Próximos Tópicos e Mais Informações

Nosso exemplo já tem uma estrutura básica definida e se encontra instalado na barra lateral do Windows Vista, porém ainda não oferece nenhuma funcionalidade prática, certo? No próximo documento do tutorial "Construindo Gadgets para o Windows Vista"("Parte 2: Utilizando DHTML e o Modelo de Objetos do Windows Sidebar"), vamos acrescentar resultados de uma consulta a um repositório remoto de informações, além de mostrar exemplos de uso dos objetos do novo modelo para acesso a recursos locais. E no documento "Parte 3: Criando Windows Gadgets como ActiveX", vamos criar Gadgets que utilizem código gerenciado, pré-compilado e registrado em nossas soluções.

Além deste material em português, recomendo a consulta dos seguintes links (em inglês) onde podemos encontrar mais informações e exemplos:

Tutoriais:

"Scripting in Windows Vista":

http://www.microsoft.com/technet/scriptcenter/topics/vista/gadgets-pt1.mspx

"Gadget Development Overview"

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/sidebar/sidebar/overviews/gdo.asp

Modelo de Objetos da Sidebar e Referências DHTML (serão links muito necessários para nos apoiar nos próximos documentos):

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/sidebar/sidebar/reference/refs.asp

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp

Blogs Microsoft e Grupos de Discussão:

AeroXperience - Windows Vista Developer Community

http://www.aeroxp.org/board/index.php?showforum=47

Time de Desenvolvimento Microsoft da Windows Sidebar:

http://blogs.msdn.com/sidebar

Blog do Brian Teutsch (com tutoriais para Gadgets em C++):

http://galactic-patrol.spaces.live.com

Blog de Jaime Rodriguez:

http://blogs.msdn.com/jaimer

Blog do Karsten Januszewski:

http://blogs.msdn.com/karstenj

É isso aí! Até o próximo artigo e boa diversão!

Aline Rokutan - http://alinefmrk.spaces.live.com


 

©2016 Microsoft Corporation. Todos os direitos reservados. Entre em contato |Nota Legal |Marcas comerciais |Política de Privacidade
Microsoft