Skip to content

Como fazer um simples Widget javascript usando Jquery

22 julho 2014

Esse artigo mostra como fazer um simples widget javascript usando jquery para mostrar o ip do usuário.

Ele pega o IP buscando os dados via JSON com uma consulta Ajax ao site http://ip.jsontest.com/.

Depois ele irá gerar um simples HTML com a informação requisitada e substituirá na página web.

1-Estrutura básica

No seu HTML, insira um

onde irá seu widget:

<html>
...
<div id="meuwidget"></div>
...
</html>

No seu JS, crie a estrutura básica do seu Widget:

IPWidget = {
url: 'http://ip.jsontest.com/',
init: function () {
//Inicia o Widget
return this;
},
render: function () {
//Cria HTML do widget
},
refresh: function () {
//Pega os dados com Jquery
}
};

Ainda no seu JS, crie seu Widget com:

var MeuIPWidget = Object.create(IPWidget).init({});

Debugando esse código no console JS, teremos um objeto chamado MeuIPWidget, que tem os métodos init(), render() e refresh().

1
Esses métodos não fazem nada agora, vamos reve-los depois, agora é interessante ver a estrutura do seu objeto JS.

2- Init()

Nosso widget tem uma propriedade fixa chamada url, ou seja, todos os filhos desse widget levarão essa informação na sua estrutura.
Mas é interessante customizar o widget, passar parâmetros específicos para cada um, iremos fazer isso no método init().

IPWidget = {
url: 'http://ip.jsontest.com/',
init: function (config) {
//Inicia o Widget
this.config = config; //Guarda config no objeto
return this;
},
...

init() agora recebe o hash ‘config’, que será o objeto que guardará as configurações individuais de cada widget.
Ao criar cada objeto chamando o init(), iremos guardar nesse novo objeto (this.config) o objeto que passaremos (config).

O init() servirá pra isso, guardar em cada objeto instanciado informações específicas daquele objeto.

2

3- render()

O método render() do nosso widget irá criar uma estrutura em HTML.

Criaremos um <div> com um <span> dentro dele para nosso widget, uma estrutura bem simples, mas que servirá ao propósito desse exemplo.
Logo em seguida, iremos jogar essa estrutura HTML lá no <div> que criamos no passo 1.
Para isso usaremos o Jquery para substituir o html do div(que no momento é vazio) pelo seu novo conteúdo.
Chamaremos o render() ainda no init() para renderizar o widget no mesmo momento que iniciarmos o objeto.

IPWidget = {
url: 'http://ip.jsontest.com/',
init: function (config) {
//Inicia o Widget
this.config = config; //Guarda config no objeto
this.render();
return this;
},
render: function () {
//Cria HTML do widget
var html = '<div id="ipwidget">Seu ip é: <span id="ipwidget-ip"></span></div>';
$("#" + this.config.id).html(html);
},
refresh: function () {
//Pega os dados com Jquery
}
};

Porém, para sabermos qual <div> iremos usar, precisaremos instanciar o nosso objeto passando o id desse <div>, no caso ficará assim:

var MeuIPWidget = Object.create(IPWidget).init({
id: "meuwidget"
});

4- refresh()

O método refresh() irá fazer a consulta ajax e irá atualizar a estrutura HTML do widget com as informações recebidas:

IPWidget = {
url: 'http://ip.jsontest.com/',
init: function (config) {
//Inicia o Widget
this.config = config; //Guarda config no objeto
this.render();
return this;
},
render: function () {
//Cria HTML do widget
var html = '<div id="ipwidget">Seu ip é: <span id="ipwidget-ip"></span></div>';
$("#" + this.config.id).html(html);
this.refresh();
},
refresh: function () {
//Pega os dados com Jquery
var obj = this;
$.ajax({
url: obj.url,
cache: false,
dataType: 'json',
success: function (data) {
$("#ipwidget-ip").text(data.ip);
}
});
}
};

Note que eu adicionei a chamada ao refresh() logo ao fim do render(), isso não é obrigatório, no caso do nosso widget, ele irá fazer a consulta e atualizar o widget logo que for criado.

5-Working!

Para ver esse código funcionando, acesse http://jsfiddle.net/a2vxX/

2 Comentários
  1. as mulheres u00e9 q u00f1 convem demorarem-se nas compras, estu00e3o sujeitas a…. Click https://twitter.com/moooker1

  2. Man, passa um contato seu alguma coisa… estamos desenvolvendo e precisamos de um help sobre Widgets…

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: