Criando mini-aplicativos para o Windows Vista

Introdução

Com a introdução do Windows Vista, um novo tipo de aplicação para o desktop foi criado: os mini-aplicativos. Neste artigo você aprenderá mais sobre eles, e sobre como fazer seus próprios mini-aplicativos para o Windows Vista.

O que é um mini-aplicativo?

Os mini-aplicativos ou gadgets são pequenos programas que ficam na barra lateral ou sobre o desktop do Windows Vista e que trazem pequenas funções que auxiliam o usuário. Alguns exemplos de mini-aplicativos que vêm com o Windows são o calendário, previsão do tempo, monitor de performance, entre outros. Há também outro tipo de mini-aplicativos, para o site Live.com, chamado de Live Gadgets. Neste artigo, daremos ênfase aos mini-aplicativos do Windows Vista.

Figura 1 – Área de trabalho do Windows Vista com a barra lateral e mini-aplicativos

As características principais de um mini-aplicativo são:

· Instalado localmente: Todos os mini-aplicativos residem no computador onde eles foram instalados. Eles podem ser distribuídos por meio de arquivos comprimidos no formato .gadget, que após instalados se localizam na pasta de configurações do usuário atual (%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets) ou na pasta Arquivos de Programas (%programfiles%\Windows Sidebar\Gadgets).

· Várias instâncias: Cada mini-aplicativo pode ser aberto várias vezes pelo usuário para que ele possa, por exemplo, ver a previsão do tempo para dois lugares distintos.

· Interação com o usuário: Os mini-aplicativos interagem de alguma forma com o usuário, seja por meio de lugares ‘clicáveis’, pela possibilidade de configurar alguma função, ou mesmo ao arrastar o mini-aplicativo pela área de trabalho.

Como os mini-aplicativos funcionam

Um mini-aplicativo nada mais é que um HTML e um script. Este script é um Javascript comum, com algumas funcionalidades adicionais, como acesso a objetos e variáveis do ambiente e maior flexibilidade em relação à segurança. Um mini-aplicativo também pode ter imagens, um estilo CSS e um ícone, para identificá-lo na tela de “Adicionar mini-aplicativo”. Esta tela é mostrada na Figura 2.

Figura 2 – Tela de seleção de mini-aplicativos

Arquivos de um mini-aplicativo

A estrutura por trás de um mini-aplicativo é uma pasta contendo os seguintes arquivos:

· Gadget Manifest: Um arquivo XML contendo informações como o nome, versão, descrição e localização dos arquivos do código.

· Arquivo HTML: O arquivo que contém o mini-aplicativo.

· Arquivo de Configuração (opcional): HTML que é mostrado quando o usuário clica no ícone de configuração ao lado do mini-aplicativo. Nele, o usuário deve poder personalizar opções do mini-aplicativo.

· Arquivos de script, imagens, estilo CSS: Contêm o código que é executado. Estes arquivos são chamados diretamente pelo HTML.

· Ícone: Para a tela de seleção.

Criando um mini-aplicativo

Primeiramente criaremos um mini-aplicativo simples, o famoso “Olá, mundo!”. Para começar, crie uma pasta na qual todos os arquivos do mini-aplicativo ficarão, com o nome OlaMundo.Gadget (esta extensão .Gadget é um indicativo de que o conteúdo da pasta constitui um mini-aplicativo). Começaremos pelo arquivo Gadget Manifest:

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

<name>Ola, Mundo!</name>

<namespace>NomeExemplo.OlaMundo</namespace>

</author>

<description>Mostra uma mensagem ao usuario.</description>

<hosts>

</host>

</hosts>

</gadget>

Note a estrutura do Manifest contém elementos que descrevem o mini-aplicativo. Por exemplo, o elemento name contém o nome do mini-aplicativo, o elemento base apresenta o tipo (type) e a localização (src) do arquivo de código do mini-aplicativo, e assim por diante. Nele também está o namespace, que representa o contexto do mini-aplicativo. Salve esse arquivo na pasta que você criou, com o nome gadget.xml.

Agora vamos para o arquivo principal. Este é um arquivo HTML comum, que pode conter imagens ou scripts:

<html>

<head>

<title>Olá, Mundo!</title>

<style>

body { width:150; height:50; }

#conteudo { font-family: "Segoe UI", sans-serif; }

</style>

</head>

<body>

<span id="conteudo">Olá, Mundo!</span>

</body>

</html>

Este arquivo mostra o texto “Olá, Mundo”. Note que o estilo de apresentação do texto está incluído na página HTML, na tag style, mas este poderia também estar num arquivo .css (Cascading Style Sheets) separado. Salve o arquivo como OlaMundo.html.

O seu primeiro mini-aplicativo já está pronto! Para testá-lo, copie esta pasta OlaMundo.Gadget para a pasta de Gadgets do seu usuário (%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets). Abra o selecionador de mini-aplicativos (Figura 2), clicando na barra lateral com o botão direito do mouse e selecionando “Add gadgets...” (Adicionar Mini-aplicativos...), e escolha o mini-aplicativo “Olá, Mundo!” na lista de opções.

Figura 3 – Mini-aplicativo “Olá, Mundo!” executando na Sidebar

Incrementando o mini-aplicativo

Agora iremos alterar algumas propriedades do mini-aplicativo e adicionaremos um arquivo de configurações, onde o usuário poderá escolher o que será mostrado na mensagem. Faremos também com que o nosso mini-aplicativo assuma como nome padrão o nome de usuário atual do sistema.

Primeiro, alteraremos o fundo do mini-aplicativo. O fundo de um mini-aplicativo fica transparente se a propriedade background do elemento body for um PNG com transparência “alpha” igual a 100%. Para o nosso aplicativo, usaremos um fundo simples. Crie uma pasta chamada “imagens” na pasta do mini-aplicativo. Lá, copie a imagem que você deseja usar, com o nome de “fundo.png”.

Edite o arquivo OlaMundo.html, adicionando a seguinte linha:

<html>

<head>

<title>Olá, Mundo!</title>

<style>

body { width:150; height:50;

background: url("imagens\fundo.png"); }

#conteudo { font-family: "Segoe UI", sans-serif; }

</style>

</head>

<body>

<span id="conteudo">Olá, Mundo!</span>

</body>

</html>

Você pode precisar alterar a largura (width) ou a altura (height) da página para que ela se ajuste à imagem. A Figura 4 mostra o resultado:

Figura 4 – Mini-aplicativo com fundo transparente

Para configurar o mini-aplicativo, precisamos fazer algumas alterações no código, de maneira que ele possa obter o conteúdo de uma variável (“nome”). Outra alteração que deve ser feita é dizer qual é o arquivo de configuração que será usado pelo mini-aplicativo:

<html>

<head>

<title>Olá, Mundo!</title>

<style>

body { width:150; height:50;

background: url("imagens\fundo.png"); }

#conteudo { font-family: "Segoe UI", sans-serif; }

</style>

<script>

var nome = "Mundo";

function alteraConteudo() {

conteudo.innerText = "Olá, " + nome + "!";

}

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

</script>

</head>

<span id="conteudo">Olá, Mundo!</span>

</body>

</html>

Neste passo, adicionamos uma função (alteraConteudo), que altera o conteúdo do span conteudo, e configuramos ela como manipulador do evento onLoad da página, na tag body. A propriedade settingsUI do objeto System.Gadget, especifica qual é o arquivo que contém o arquivo de configuração do mini-aplicativo. Este arquivo é outro arquivo HTML com um script que tem acesso às variáveis do mini-aplicativo configurado por ele. Vamos agora criar o arquivo de configuração:

<html>

<head>

<style>

body { width:250; height:75; }

#conteudo { font-family: "Segoe UI", sans-serif; }

</style>

function init() {

var nomeAtual = System.Gadget.Settings.read("nome");

if (nomeAtual != "")

txtNome.innerText = currentSetting;

}

System.Gadget.onSettingsClosing = Gadget_SettingsClosing;

function Gadget_SettingsClosing(event)

{

if (event.closeAction == event.Action.commit) {

nome = txtNome.value;

System.Gadget.Settings.write("nome", nome);

}

event.cancel = false;

}

</script>

</head>

</body>

</html>

O objeto System.Gadget.Settings armazena as configurações do mini-aplicativo por meio dos métodos read, write, readString e writeString. Além disso, os mini-aplicativos têm acesso a eventos relevantes do objeto System.Gadget, como o abrir ou fechar das configurações (onShowSettings, onSettingsClosing e onSettingsClosed) ou o momento onde ele é anexado à barra ou liberado (onDock e onUndock)

No nosso caso, este arquivo de configurações executa duas ações:

1. Inicializa lendo o nome da variável que está guardada no System.Gadget.Settings com o nome de “nome”.

2. Manipula o evento SettingsClosing que é disparado quando o arquivo está sendo fechado, salvando o nome se o botão clicado for o OK (ou seja, se o parâmetro do evento tiver como ação o valor Action.commit).

Agora só precisamos fazer mais uma alteração no arquivo OlaMundo.html, para que ele atualize o conteúdo quando a configuração for alterada:

<html>

<head>

<title>Olá, Mundo!</title>

<style>

body { width:150; height:50;

background: url("imagens\fundo.png"); }

#conteudo { font-family: "Segoe UI", sans-serif; }

</style>

var nome = "Mundo";

function alteraConteudo() {

conteudo.innerText = "Olá, " + nome + "!";

}

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

System.Gadget.onSettingsClosed = SettingsClosed;

function SettingsClosed() {

nome = System.Gadget.Settings.read("nome");

alteraConteudo();

}

</script>

</head>

<span id="conteudo">Olá, Mundo!</span>

</body>

</html>

Este manipulador do evento SettingsClosed atualiza o conteúdo quando as configurações forem fechadas.

Pronto! Para testar o mini-aplicativo, feche-o (se estiver aberto) e adicione-o novamente. Clique no ícone de “ferramenta” ao lado do mini-aplicativo para abrir as configurações, altere o nome e confirme para ver os resultados.

Figura 5 – Mini-aplicativo com texto alterado, com o ícone de “ferramenta” ao lado

Finalmente, alteraremos o mini-aplicativo para que ele assuma como padrão o nome do usuário atual. Os mini-aplicativos têm acesso a algumas variáveis do sistema, utilizando os objetos System.ContactManager, System.Environment, System.Machine, System.Network.Wireless, System.Shell, System.Sound e System.Time, entre outros. No nosso exemplo, utilizaremos o System.Environment.getVariableName para acessar o nome do usuário atual. Abra novamente o arquivo OlaMundo.html e altere a linha que define o nome padrão:

<html>

<head>

<title>Olá, Mundo!</title>

<style>

body { width:150; height:50;

background: url("imagens\fundo.png"); }

#conteudo { font-family: "Segoe UI", sans-serif; }

</style>

var nome = System.Environment.getEnvironmentVariable("USERNAME");

function alteraConteudo() {

conteudo.innerText = "Olá, " + nome + "!";

}

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

System.Gadget.onSettingsClosed = SettingsClosed;

function SettingsClosed() {

nome = System.Gadget.Settings.read("nome");

alteraConteudo();

}

</script>

</head>

<span id="conteudo">Olá, Mundo!</span>

</body>

</html>

A figura abaixo mostra o resultado final:

Figura 6 – Mini-aplicativo mostrando o nome de usuário atual do ambiente

E está pronto! Se você desejar enviar o arquivo para outra pessoa instalar, basta colocar a pasta OlaMundo.Gadget em um arquivo .zip e renomeá-lo para OlaMundo.gadget. Este arquivo é instalado automaticamente quando o usuário dá um clique duplo nele.

Estas são apenas algumas possibilidades que você tem com os mini-aplicativos. Você pode, por exemplo, depurar o código utilizando um depurador compatível, como o Visual Studio, se você desabilitar a configuração “Desabilitar depuração de script” nas Opções de Internet, dentro do Painel de Controle.

Você pode também localizar o seu mini-aplicativo de acordo com a cultura do sistema. Para isso, basta que seja criada uma pasta com o nome da cultura (ex.: pt-br para Brasil, ou en-us para Estados Unidos) e os arquivos desta pasta serão aplicados automaticamente. No arquivo anexo, o mini-aplicativo está configurado para as culturas pt-br, en-us, e es-es.

Figura 7 – Mini-aplicativo mostrando localizado para a cultura en-us.

Conclusões

Os mini-aplicativos são uma nova forma de criar pequenos programas interligados, com a mesma facilidade de criar de uma página web, mas com uma flexibilidade maior. Neste artigo, você aprendeu um pouco sobre como eles funcionam, e como criá-los. Espero que você tenha gostado!

Faça o download do código.