Fala filhotes! Desculpa a ausência, tive meio ocupado. Mas então, vou finalmente completar o post sobre os gadgets. Se você não leu o primeiro ainda, entre em https://100loop.com/destaque/introducao-criando-gadgets-no-windows-7/ já que não criaremos outro gadget, mas complementaremos o primeiro.

Vamos ao que interessa! Primeiro vamos fazer o nosso gadget ter um menu de configuração:

Adicionando uma página de configuração

image

O primeiro passo é criar uma página HTML que irá servir como menu. Vou criar o menu.html e adicionar alguns textbox para o usuário poder adicionar valores (ou configurações):

<html>
<head>

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

  <style type="text/css">
     body {
    width: 278px;
    height: 210px;
}
</style>
</head>

<body>
Arquivo de configurações:
</br></br>
Nome: <input type="text" id="txtNome"> </br>
Cidade: <input type="text" id="txtCidade"> </br>
Idade: <input type="text" id="txtIdade"> 

</body>
</html>

Perceba que estou colocando uma referência para o arquivo settings.js que ainda não existe, por isso vamos criá-lo na pasta js, um arquivo em branco mesmo, daqui a pouco nós iremos usa-lo. Pronto, mas falta uma coisa! Precisamos vincula-lo ao gadget, ou seja, definir que essa pagina é a pagina de configuração do gadget. Mas como fazer isso? Bom, é muito simples: Basta setar a propriedade System.Gadget.settingsUI no nossos códigos da pagina principal! No nosso caso seria o arquivo gadget.js :

//
// 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";
}

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

E pronto. Quando adicionarmos o gadget na área de trabalho ele já terá a opção de configurações:

image

E quando abrimos as configurações:

image

Perceberam os botões OK e Cancel? Pois é, por padrão os dois botões aparecem nas paginas de configuração, mesmo não tendo nenhum botão na nossa.

Agora vamos a parte de gravar as informações que o usuário digitou.

Métodos readString e writeString

Nós podemos gravar e ler configurações usando os métodos readString e writeString passando apenas o nome da configuração e o valor ( se estiver adicionando) :

// Grava o valor "André" na config "nome"
  System.Gadget.Settings.writeString("nome", "André");
  // Lê o valor da config "nome"
  document.getElementById("txtNome").value = System.Gadget.Settings.readString("nome");

Realmente muito simples. Agora vamos encaixar isso na nossa página!  Vamos abrir o arquivo settings.js (que tínhamos acabado de criar).

Primeiro vamos adicionar um método PageLoad para ser executado quando a página é carregada (como fizemos no gadget.js):

//
// Função que ocorre toda vez que a pagina for aberta!
//
function pageLoad(){

}

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

Pronto. O próximo passo é fazer as configurações serem salvas, para isso teremos que chamar o método writeString no evento do botão OK. Ué, como a gente faz isso? bom, podemos usar chamar um método no evento System.Gadget.onSettingsClosing, e nesse método chamar o writeString:

//
// Função que ocorre toda vez que a pagina for aberta!
//
function pageLoad(){
// Delegate para evento de fechar a janela.
System.Gadget.onSettingsClosing = SettingsClosing;
}

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

//
// Ocorre quando a pagina de Menu é fechada, recebe o evento como parametro.
//
function SettingsClosing(event)
{
    // Checa se a ação enviada foi a de salvar
    if (event.closeAction == event.Action.commit)
    {
        // Grava os valores do Textbox
        System.Gadget.Settings.writeString("nome", document.getElementById("txtNome").value);
        System.Gadget.Settings.writeString("cidade", document.getElementById("txtCidade").value);
        System.Gadget.Settings.writeString("idade", document.getElementById("txtIdade").value);

    }
    // Se o cancel for true então a tela não é fechada, se for false a tela é fechada.
    event.cancel = false;
}

Meio complicado? Não né? Só fizemos o que estamos acostumados a fazer com os gadgets! Mas espera ai, ele esta salvando, mas não esta relendo as configurações, então sempre que você entra na página ela vai estar vazia. Opa vamos fazer ela ler a config então! Vamos adicionar o readString na função PageLoad do settings.js:

// Restaura as configurações, atribuindo-as aos textboxs
document.getElementById("txtNome").value = System.Gadget.Settings.readString("nome");
document.getElementById("txtCidade").value = System.Gadget.Settings.readString("cidade");
document.getElementById("txtIdade").value = System.Gadget.Settings.readString("idade");

Agora vamos fazer a página inicial ler as configurações! Basta fazer a mesma coisa! Vamos fazer isso na nossa pagina principal para você ver, primeiro vamos alterar um pouco o HTML da nossa pagina principal (inicio.html):

<div id="dvDocked"> O Gadget está Minimizado!</div>
<div id="dvUndocked"> Olá <span id="spNome" ></span>! O Gadget está Maximizado! </div>

Vamos fazer o nome aparecer nesse campo. Para isso vamos na gadget.js (o código da nossa pagina principal) e adicionar o evento onSettingsClosed:

// Delegate para evento de fechar a janela.
System.Gadget.onSettingsClosed = SettingsClosed;

// Lê as configurações
function SettingsClosed(event)
{
    // Lê o nome do usuário
    document.getElementById("spNome").innerText = System.Gadget.Settings.readString("nome");
}

Quando a pagina de configuração for fechada as configurações serão atualizadas. Simples assim.

Informações Adicionais

* Além do readString e writeString, você também pode usar os métodos read ou write para gravar valores que não são string.

*  As configurações de gadget são gravadas dentro de %userprofile%\AppData\Local\Microsoft\Windows Sidebar\Settings.ini

 

Filhotes, por hoje é só, irei fazer pelo menos mais um post falando sobre mais funções de um gadget. Caso queiram, vocês podem baixar os arquivos criados como referência clicando aqui.

Update 30/05 /12: Alterado o link do arquivo. Lembrando que para instalar você tem que colocar a pasta nossogadget.gadget em “C:\Program Files\Windows Sidebar\Gadgets”

Abraços,