Technè

Tecnologia & Experiência do Usuário no C.E.S.A.R

Como Criar um Widget em 3 Passos

Posted by Daniel Ferreira On outubro - 21 - 2010

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.

Até o próximo! (:

Categorias: Geral

19 Responses to “Como Criar um Widget em 3 Passos”

  1. Ótimo post, fácil e objetivo, parabéns e continue com as postagens!

  2. cleverton says:

    ONDE FAÇO TODO ESSE PROCEDIMENTO DE CRIAÇÃO, É EM “BLOCO DE NOTAS” DO WINDOWS OU TEM ALGUM PROGRAMA ESPECIFICO PARA A CRIAÇÃO???

  3. cleverton says:

    obrigado pela atenção.

  4. Olá Cleverton,

    Como são páginas HTML, você pode usar o bloco de notas do windows também. Eu porém gosto muito de usar o Notepad++. Para desenvolver widgets para celulares Samsung, existe um site específico para isso, com ferramentas, exemplos, forúms, etc. Neste você pode achar por exemplo, um plug-in para o Eclispse que facilita bastante o desenvolvimento de widgets. Segue o site: http://tinyurl.com/324z8yk. Abraços.

  5. cleverton says:

    Olá Daniel, venho aqui por mais uma vez te fazer uma pergunta. com a sua experiência em widgets é possível criar um widget do msn e do orkut, como se fosse um atalho na tela do celular. o meu aparelho é o “samsung star tv” e no ato da compra desse aparelho, veio com os widgets do msn e do orkut, eu troquei o firmware e eles acabaram sumindo, queria recupera-los,já procurei em todos os sites possíveis, mas não achei… dou aula o dia todo, ñ tenho muito tempo disponível para me dedicar isso, pensei que era mais fácil, mas como ñ tenho experiência no assunto acaba se tornando difícil para mim. se caso vc saiba onde possa encontrar esse widgets mencionados,vou te agradecer muito. háá´!! tem alguns colegas de trabalho que estão com esse problema, te indiquei e acho que eles vão acabar te importunando um pouco. Obrigado mais uma vez esse seu trabalho de esclarecimento é muito bom e vc esta de parabéns por compartilhar seus conhecimentos, tenho certeza que um dia vou aprender e vc me ajudou muito. OBRIGADO E PARABÉNS.

  6. cleverton says:

    OLÁ DANIEL,
    QUERIA SABER SE É POSSÍVEL CRIAR UM WIDGET DO MSN E DO ORKUT, OU SE VC SABE DE ALGUM SITE QUE POSSA SER ENCONTRADO, O MEU APARELHO É O I6220(SAMSUNG STAR TV) LE VEIO COM ESSES DOIS WIDGETS, MAS ACABEI TROCANDO O FIRMWARE E ELES SUMIRAM… QUERIA RECUPERA-LOS. DOU AULA O DIA TODO E NÃO TENHO MUITO TEMPO PARA ME DEDICAR A ISSO, PARECE NÃO SER DIFÍCIL CRIAR OS WIDGETS, MAS COMO NÃO TENHO EXPERIÊNCIA NA ÁREA, ACABA SE TORNADO DIFÍCIL, OBRIGADO MAIS UMA VEZ E VC ESTA DE PARABÉNS POR COMPARTILHAR SEU CONHECIMENTOS, É UM BELO TRABALHO, OBRIGADO E QUE DEUS TE PROTEJA.
    TEM ALGUNS COLEGAS MEUS QUE ESTA COM ESSES MESMOS PROBLEMAS E TE INDIQUEI PELO SEU EXCELENTE TRABALHO E ACHO QUE ELES VÃO TE IMPORTUNAR UM POUCO.

  7. Olá cleverton, obrigado pels comentários.
    Sobre sua dúvida, geralmente esses widgets são disponibilizados diretamente pela Samsung, porque são embarcados no aparelho, então acredito que não tenha disponível para baixar em algum site não. Mas se quiser, você pode criar um widget estilho “atalho” como você mesmo mencionou. Para isso, no evento de clique do botão (onClick), basta chamar a função nativa dos celulares samsung: widget.openURL(“http://www.orkut.com”); trocando a URL do Orkut por outra qualquer que você desejar. Abraços.

  8. Bem, fiquei interessado na parada!

    Mas, tenho algumas dúvidas que com certeza você terá as respostas, seguem;

    1 – Inserimos o campo [ Digite seu lembrete ]
    2 – Clicamos no botão [ Salvar ]
    3 – Não foi definido nenhum campo onde salvar… ENVIAR…
    4 – Qual o foco deste Widget? Internet ou aparelho móvel?

    Página em favorito, AGUARDO RETORNO…

    SEM MAIS.

  9. Olá Visitante Alpha!
    Por enquanto o widget não salva em lugar algum, ele simplesmente exibe o novo lembrete na tela principal do widget. No próximo post mostrarei como salvar na memória do telefone para que a informação não se perca ao desligar o telefone. Por enquanto não tem acesso a internet. Aguarde os próximos posts.
    Abraços!

  10. Raphael says:

    Bom dia Daniel!
    Primeiramente gostaria de dizer que seu artigo foi muito bem explicativo e grande ajuda.
    Uma pergunta lhe faço:
    Usar php nem sonhando neh?
    Ou existe algum micro servidor de paginas php para dispositivos moveis?
    Abraços

  11. Olá Raphael, valeu!!
    Quanto a sua pergunta, não, nem pensar. O widget deve ser feito apenas com HTML e Javascript. Alguns aparelhos já suportam HTML5 e CSS3, o que já dá pra incrementar bastante coisa no widget. O que você pode fazer é ter um servidor web e hospedar alguma página PHP, ASPX, etc, e fazer com que o widget acesse essa página para obter alguns dados por exemplo. Vou fazer um post brevemente de como acessar esses dados “externos” através do widget.
    Abraços!

  12. Raphael says:

    Vlw pela resposta!
    Tipo, desenvolvi um widget para acessar o sistema de busca da documentacao do php net.
    quando eu abro com a pagina sem instalar/ executar como widget ele funciona, só que quando instalo ele, o widget abre certinho mas não dispara para o SEARCH da pagina do php.
    Me add no hotmail pra nós conversamos melhor sobre este widget simples mas que ajuda bastante.
    OBS: sei que existe um widget desta naturezza mas baixei ele e ele ta todo bugado.
    Abcs

  13. Raphael says:

    O jeguinho aki não adicionou o hotmail
    ancillasamedi@hotmail.com

  14. Guilherme says:

    Opa amigo gostaria de saber com se faz para um widget acessar uma aplicação em java…
    Exemplo: Tenho um Samsung Star TV, e costumo usar bastante o Opera Mini e queria de alguma forma encurtar o caminho até a aplicação, sem ter que ficar abrindo pastas e sub-menus, usando um widget para abrir o aplicativo.
    Desde já Obrigado
    Parabéns pelo Post.

  15. Guilherme says:

    Daniel,
    Você saberia me dizer como se faz para um widget abrir outras aplicações do próprio celular, como jogos e aplicativos?

    Obrigado.

  16. Vinicius says:

    Primeiramente Parabén, belo trabalho rapaz.

  17. Vinicius says:

    Cara, eu novamente, rs
    Seguinte, o exemplo funcionou perfeitamente, mas ele fica vinculado ao navegador Opera, creio que por causa da extensão .wgt.
    Porém eu gostaria de fazer o mesmo com o navegador chrome, mas parece que a extensão do pacote para o chrome é .crx. Mas tem um porém, a estrutura de widgets para o Google Chrome é diferente, sendo que ele utiliza json ao invés de xml. Poderia dar um pequeno exemplo?

    abraços

  18. Cigano says:

    Caro Danyel, eu não entendi esse parte aqui

    [quote]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.[/quote]

    O que tem que colocar e onde ???

  19. Leonardo says:

    Olá queria saber como se faz um widget para celular, para abrir o meu blog. Tipo um atalho…

    Desde já agradeço!

Leave a Reply