Como Criar um Widget em 3 Passos

Quem nunca viu um adolescente com um celular na mão, rodeado de amigos e mostrando alguma coisa bacana que seu celular faz, deixando todos de boca aberta ou fazendo “uau!”? Geralmente ele está mostrando algum pequeno aplicativo que toca um som engraçado ou que apenas faz uma bolinha girar quando você balança o aparelho. Essas pequenas aplicações que ficam rodando no celular, leves, discretas e que não demandam muito processamento do aparelho, é o que chamamos de widgets. Na verdade os widgets estão cada vez ganhando mais espaço, não apenas nos celulares, como também mais variados dispositivos, desde PCs, televisores, passando por carros, geladeiras, entre outros.

Falando tecnicamente agora, widgets nada mais são do que pequenas aplicações web (páginas HTML) que rodam utilizando um browser! Então qualquer dispositivo que dê suporte a navegadores teoricamente consegue rodar widgets também, aí vai depender da boa vontade do fabricante. O W3C especifica um padrão para este tipo de aplicação e caso deseje saber mais detalhes, acesse http://www.w3.org.

Neste artigo, mostrarei de forma simples e em apenas 3 passos, como criar um widget e colocar no celular ou em outro dispositivo que o suporte. Claro que existem outras abordagens, arquiteturas e formas de fazer, mas tentarei ser o mais didático possível para não complicar muito.

Para testar nosso widget, podemos utilizar qualquer browser, mas aqui utilizarei o Opera por ser um navegador que mostra os widgets como se fossem aplicações reais (ficam flutuando), e não dentro da sua área normal de visualização do browser.

Passo 1: Criando a Estrutura do Widget

Como já mencionei, widgets são apenas aplicações web com páginas HTML mesmo. Na verdade mesmo, os widgets são constituídos apenas de 1 página HTML, e todas as telas que desejar ter no seu widget devem ser estruturadas para serem exibidas nesta mesma página. Então como fazer para exibir e esconder as telas, de forma que apenas uma seja exibida por vez? Para isso vamos contar com a ajuda do velho e bom Javascript, mas isso é em outro passo.

Vamos primeiro então, montar a estrutura do nosso HTML, que é a etapa que considero mais trabalhosa. Para nosso exemplo, vamos criar um widget que simule um post-it, onde poderemos escrever lembretes e deixá-los visíveis! Então a estrutura do nosso HTML ficará dessa forma:

Perceba que para resolver o problema das várias telas no mesmo HTML, a prática que se utiliza é criar elementos div para cada tela, sendo exibidas e ocultadas dependendo da necessidade. No nosso exemplo, vamos precisar basicamente de 2 telas. Uma para exibir o texto e outra para editar o nosso post-it. Para isso, criei as telas TEXT (linha 10) e EDIT (linha 11).

A tela TEXT não tem nada, é uma div vazia que vai conter o texto digitado pelo usuário. No nosso exemplo já deixei um texto digitado para quando o usuário iniciar o widget pela primeira vez. A tela EDIT contém um elemento textarea para permitir ao usuário digitar o texto e criei outra div que vai servir como o botão de salvar (linha 13).

Você poderia estar perguntando por que não usei um elemento button do HTML para o botão Salvar. É que alguns componentes de formulário HTML dão problemas e não são mostrados corretamente em alguns devices, então para garantir, evitamos esses elementos nas nossas telas. O button é um desses elementos.

Pronto, a estrutura do nosso widget está feita. Agora você pode criar um documento CSS que dê vida ao widget e deixá-lo do jeito que você quiser. Neste ponto não tem mistério, formate como uma página HTML normal mesmo e do jeito que preferir. Só lembre-se que as dimensões precisam estar de acordo com o aparelho que você quer colocar seu widget. Por exemplo, se a tela do seu aparelho tem uma resolução de 240×400, a largura e altura do widget devem respeitar esse tamanho também.  Fiz algo bem simples mesmo, nem usei imagens. Vejam como ficou meu arquivo CSS:

Não se esqueçam de referenciar seu arquivo CSS no cabeçalho do HTML. Para testar, basta abrir seu HTML no browser. Vocês verão algo desse tipo:

Percebam que a outra tela está HTML mas no momento não é exibida, porque está escondida. Para esconder as divs, basta ver na linha 11 que colocamos a marcação CSS style=display:none na div que queremos ocultar.

Passo 2: Definindo os Comportamentos

Agora que nossa estrutura está pronta, precisamos definir as ações e comportamentos do nosso widget. Para isso, criamos um arquivo javascript à parte que irá contar as ações que iremos usar. Para nosso widget, vamos precisar de 3 métodos:
Primeiro um método para ocultar o texto (div text) e fazer aparecer a tela oculta de edição (div edit), que contém o textarea e o botão salvar. Fiz isso criando o método edit():

Agora criamos outro método para salvar. No nosso caso, o salvar apenas recupera o valor do textarea, coloca no lugar do texto (div text) e faz o inverso do método edit(), ou seja, oculta a tela de edição e exibe o texto novamente:

Por fim, criei apenas um método auxiliar chamado $, que substitui a chamada padrão de javascript document.getElementById que utilizamos nos métodos anteriores, apenas para deixar o código um pouco mais elegante.

Pronto, todo o comportamento do nosso widget já está pronto. Voltando ao HTML, agora basta colocar a chamada dos métodos nos lugares corretos (evento onClick das divs). Na div text colocamos a chamada para o método edit() (linha 10) e na div que representa o botão Salvar, colocamos a chamada para o método save() (linha 13). Já tínhamos feito isso quando montamos a estrutura do HTML, então basta dar uma olhada na primeira imagem lá em cima.

Nosso widget está quase pronto. Para testar mais uma vez, basta abrir seu HTML no browser. Ao clicar no texto “Digite seu lembrete aqui”, deverá ser exibida a tela de edição, como mostrado abaixo:

E ao clicar no botão salvar, o widget deverá voltar para a tela anterior com o texto alterado para o texto que usuário digitou.

Passo 3: Empacotando seu widget

Todo o widget já está pronto, mas o que temos até agora é apenas um arquivo HTML, outro arquivo CSS e outro javascript. Para que isso tudo vire um widget, agora precisamos empacotar tudo num arquivo só. Mas antes de empacotar, precisamos incluir os arquivos da lista abaixo:

• icon.png: Arquivo de imagem que representa o ícone do seu widget, que deve estar no mesmo diretório do arquivo HTML. Vamos usar aqui o tamanho de 50×50 que é o mais comum, mas geralmente este tamanho depende do aparelho que o widget será instalado.
• config.xml: Neste arquivo deverá conter, em formato XML, algumas definições do seu widget, como tamanho, nome, autor, entre outros. Vamos dar uma olhada no arquivo do nosso widget e nos parâmetros que ele precisa:

Explicando cada um dos parâmetros:

• widgetname: Nome do seu widget;
• description: Pequena descrição do que o widget faz;
• icon: Nome do arquivo do ícone que você criou;
• access network: Você deve informar se seu widget acessa a internet para obter alguma informação. No nosso caso não.
• width: largura, em pixels do widget
• height: altura, em pixels, do widget
• id: identificação do widget. Esse ID precisa ser único no aparelho que for instalado o widget.
• version: Versão do widget.
• author: Nome e outras informações do autor do widget.

Este arquivo config.xml também varia um pouco de device para device, mas este é o formato mais geral. Com todos esses arquivos na mesma pasta, a estrutura do seu widget deve ser parecida com esta:

Agora para empacotar o seu widget, pasta selecionar todos os arquivos e compactá-los, gerando um arquivo postit.zip. Lembre-se que a compactação deve ser com ZIP. Agora basta mudar a extensão do seu arquivo para a extensão de widgets, que é a WGT, ficando: postit.wgt.

Pronto, seu widget está preparado para ser instalado em qualquer dispositivo que suporte widgets!

Para testá-lo, vamos usar o Opera, que como eu falei, faz com que o seu widget seja exibido como uma aplicação, e não como uma página HTML. Para isso, basta arrastar seu widget para dentro do Opera. Aparecerá a seguinte mensagem perguntando se você quer instalar o widget:

No próximo artigo irei mostrar como melhorar um pouco este widget persistindo as informações para que não se percam quando o widget for reiniciado.

Posted in: Blogs