Arquivo → novembro - 2009
Escrevendo uma extensão de Twitter para o Google Chrome utilizando o Google Web Toolkit(GWT)
Estava olhando os exemplos de como criar extensões para o Chrome, e vi que assim como o no Firefox, as extensões não são nada mais que Javascript(mas no caso do Firefox tem os XUL envolvidos e etc…). Então pensei eu: “GWT gera Javascript, então ele deve funcionar para criar extensões”. Fiz uns testes básico e conclui. Funcionou. E aqui escrevo um tutorial dizendo como fiz para fazer isso funcionar. O objetivo desse tutorial não é ensinar GWT, é somente mostrar como configurar um projeto do GWT para rodar como uma extensão do Chrome.
Antes de tudo, vou dar um aviso que vai lhe poupar de alguns problemas: Salve todos os arquivos do exemplo com codificação UTF-8.
Como exemplo, criei uma aplicação para twitter bem simples, que só lê as últimas mensagens de um usuário qualquer.
Primeiramente criei uma aplicação no Eclipse chamada “ExtensaoChrome” com o pacote base chamado “com.serathiuk.chrome.extension.teste.client”.
Depois disso, alterei o arquivo ‘ExtensaoChrome.html’ da pasta war, deixando apenas com o seguinte HTML:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<link type=”text/css” rel=”stylesheet” href=”ExtensaoChrome.css”>
<div id=”intro_panel”></div>
<script type=”text/javascript” language=”javascript” src=”extensaochrome/extensaochrome.nocache.js”></script>
Na pasta war, coloquei o arquivo icon.png(o mesmo do exemplo oficial, link no final) e o arquivo manifest.json, que tem o seguinte conteúdo:
"name": "Leitor de Twitter",
"version": "1.0",
"description": "Exemplo de extensão para Chrome utilizando GWT do site serathiuk.com.",
"browser_action": {
"default_title": "Leitor de Twitter",
"default_icon": "icon.png",
"popup": "ExtensaoChrome.html"
},
"permissions": [
"http://www.twitter.com/"
]
}
Depois disso, apaguei aqueles arquivos que são criados pelo exemplo, deixando apenas o “ExtensaoChrome.java”, que é o Entry Point da aplicação. E no EntryPoint, apaguei todas aquelas informações do exemplo, e colocando o código para fazer a aplicação funcionar:
private TextBox txtLogin;
private FlexTable tableTwitter;
public void onModuleLoad() {
HorizontalPanel h = new HorizontalPanel();
txtLogin = new TextBox();
h.add(txtLogin);
Button btn = new Button("Carregar");
btn.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
carregarTwitts();
}
});
h.add(btn);
ScrollPanel align = new ScrollPanel();
align.setWidth("100%");
align.setHeight("320");
tableTwitter = new FlexTable();
tableTwitter.setCellPadding(1);
tableTwitter.setCellSpacing(1);
tableTwitter.setBorderWidth(1);
align.add(tableTwitter);
VerticalPanel v = new VerticalPanel();
v.add(h);
v.add(align);
RootPanel.get("intro_panel").add(v);
}
protected void carregarTwitts() {
String url = "http://twitter.com/statuses/user_timeline/"+txtLogin.getValue()+".json";
RequestBuilder req = new RequestBuilder(RequestBuilder.GET, URL.encode(url));
try {
req.sendRequest(null,
new RequestCallback() {
public void onResponseReceived(Request request, Response response) {
preencheValores(response.getText());
}
public void onError(Request request, Throwable exception) {
showError(exception);
}
}
);
} catch(RequestException e) {
showError(e);
}
}
protected void preencheValores(String jsonText) {
tableTwitter.removeAllRows();
JSONArray json = (JSONArray) JSONParser.parse(jsonText);
for(int i = 0; i < json.size(); i++) {
JSONObject obj = (JSONObject) json.get(i);
if(obj != null) {
JSONString str = (JSONString) obj.get("text");
tableTwitter.setText(i+1, 0, str.stringValue());
}
}
}
protected void showError(Throwable e) {
Window.alert(e.getMessage());
}
}
Agora é só compilar o projeto e adicionar a extensão ao Chrome. Para fazer isso, digite o endereço “chrome://extensions/”, clicar em “Load Unpacked Extension” e selecionar o diretório war da aplicação(ou o diretório onde está o manifest.json). Com isso a extensão estará rodando, é só clicar no ícone dela ao lado da barra de endereços.
Exemplo Oficial: http://code.google.com/chrome/extensions/getstarted.html
Código-Fonte deste exemplo: http://gwtchrome.googlecode.com/files/ExtensaoChrome.7z
Antes de tudo, vou dar um aviso que vai lhe poupar de alguns problemas: Salve todos os arquivos do exemplo com codificação UTF-8.
Como exemplo, criei uma aplicação para twitter bem simples, que só lê as últimas mensagens de um usuário qualquer.
Primeiramente criei uma aplicação no Eclipse chamada “ExtensaoChrome” com o pacote base chamado “com.serathiuk.chrome.extension.teste.client”.
Depois disso, alterei o arquivo ‘ExtensaoChrome.html’ da pasta war, deixando apenas com o seguinte HTML:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<link type=”text/css” rel=”stylesheet” href=”ExtensaoChrome.css”>
<div id=”intro_panel”></div>
<script type=”text/javascript” language=”javascript” src=”extensaochrome/extensaochrome.nocache.js”></script>
Na pasta war, coloquei o arquivo icon.png(o mesmo do exemplo oficial, link no final) e o arquivo manifest.json, que tem o seguinte conteúdo:
{
“name”: “Leitor de Twitter”,
“version”: “1.0″,
“description”: “Exemplo de extensão para Chrome utilizando GWT do site serathiuk.com.”,
“browser_action”: {
“default_title”: “Leitor de Twitter”,
“default_icon”: “icon.png”,
“popup”: “ExtensaoChrome.html”
},
“permissions”: [
"http://www.twitter.com/"
]
}
Depois disso, apaguei aqueles arquivos que são criados pelo exemplo, deixando apenas o “ExtensaoChrome.java”, que é o Entry Point da aplicação. E no EntryPoint, apaguei todas aquelas informações do exemplo, e colocando o código para fazer a aplicação funcionar:
public class ExtensaoChrome implements EntryPoint {
private TextBox txtLogin;
private FlexTable tableTwitter;
public void onModuleLoad() {
HorizontalPanel h = new HorizontalPanel();
txtLogin = new TextBox();
h.add(txtLogin);
Button btn = new Button(“Carregar”);
btn.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
carregarTwitts();
}
});
h.add(btn);
ScrollPanel align = new ScrollPanel();
align.setWidth(“100%”);
align.setHeight(“320″);
tableTwitter = new FlexTable();
tableTwitter.setCellPadding(1);
tableTwitter.setCellSpacing(1);
tableTwitter.setBorderWidth(1);
align.add(tableTwitter);
VerticalPanel v = new VerticalPanel();
v.add(h);
v.add(align);
RootPanel.get(“intro_panel”).add(v);
}
protected void carregarTwitts() {
String url = “http://twitter.com/statuses/user_timeline/”+txtLogin.getValue()+”.json”;
RequestBuilder req = new RequestBuilder(RequestBuilder.GET, URL.encode(url));
try {
req.sendRequest(null,
new RequestCallback() {
public void onResponseReceived(Request request, Response response) {
preencheValores(response.getText());
}
public void onError(Request request, Throwable exception) {
showError(exception);
}
}
);
} catch(RequestException e) {
showError(e);
}
}
protected void preencheValores(String jsonText) {
tableTwitter.removeAllRows();
JSONArray json = (JSONArray) JSONParser.parse(jsonText);
for(int i = 0; i < json.size(); i++) {
JSONObject obj = (JSONObject) json.get(i);
if(obj != null) {
JSONString str = (JSONString) obj.get(“text”);
tableTwitter.setText(i+1, 0, str.stringValue());
}
}
}
protected void showError(Throwable e) {
Window.alert(e.getMessage());
}
}
Agora é só compilar o projeto e adicionar a extensão ao Chrome. Para fazer isso, digite o endereço “chrome://extensions/”, clicar em “Load Unpacked Extension” e selecionar o diretório war da aplicação(ou o diretório onde está o manifest.json). Com isso a extensão estará rodando, é só clicar no ícone dela ao lado da barra de endereços.
Configurando o SmartGWT em um projeto do Eclipse
A muito tempo tinha falado em escrever um artigo sobre SmartGWT, mas acabei ‘se enrolando’ e isso nunca aconteceu. Mas nos últimos dias, tenho acompanhado as estatistícas do blog com mais atenção, pois configurei o Google Analytics. Por lá, que boa parte dos visitantes daqui do blog, chegam nele pelo Google, e atrás de artigos sobre SmartGWT. Eu sempre postei notícias sobre os lançamentos aqui, mas nunca tinha feito um artigo sobre. Esse é o primeiro, e acredito que será o início de uma série deles.
Irei mostrar como configurar um projeto já criado para funcionar com SmartGWT. Já escrevi um artigo a algum tempo mostrando como configurar o Eclipse com o plugin do Google e criar um projeto do Eclipse com ele. Esse artigo explica como utilizar o Google Plugin com o GWT 1.6, mas ele funciona muito bem com o 1.7.*, e também funciona com o GWT 2.0 MS2. E o artigo foi testado e escrito se baseando no SmartGWT 1.3.
Para configurar o SmartGWT em um projeto já criado, siga os seguintes passos:
- Baixe o SmartGWT do seguinte local: http://code.google.com/p/smartgwt/
- Descompacte o arquivo .zip e copie o arquivo smartgwt.jar para o diretório “war/WEB-INF/lib” do seu projeto.
- Dê um refresh em seu projeto (clique em cima do nome dele no Package Explorer e pressione F5).
- Vá em “Configure Build Path” (botão direito em cima do projeto no Package Explorer, Build Path, Configure Build Path).
- Vá em Libraries, clique em “Add Jar” e adicione o smartgwt.jar a lista de bibliotecas.
- Vá no arquivo de configuração do módulo (um que termina com a extensão *.gwt.xml) e adicione a seguinte linha: “<inherits name=’com.smartgwt.SmartGwt’/>”
- Vá no arquivo html(o que a aplicação carrega por padrão quando ela inicia) e adicione a seguinte linha dentro do HEAD: “<script> var isomorphicDir = “[NOME_DO_MODULO]/sc/”; </script>”. O “[NOME_DO_MODULO]” deve ser substituído pelo mesmo nome que está no arquivo “.gwt.xml”. Lá ele está no atributo rename-to da tag module.
Com isso o projeto já deve funcionar com o SmartGWT. Se quiser um exemplo pronto para teste, cole o seguinte conteúdo em seu EntryPoint, adicionando as linhas dentro do seu onModule.
Button btn = new Button("Clique");
btn.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
Window.alert((String) txt.getValue());
}
});
DynamicForm form = new DynamicForm();
form.setFields(txt);
VLayout v = new VLayout();
v.addMember(form);
v.addMember(btn);
v.draw();
Salve e tente rodar o exemplo. Caso funcionar corretamente, irá aparecer uma caixa de texto com um botão. Quando clicar no botão, irá aparecer em um alert o que foi digitado no campo de texto.