↓ Arquivo ↓

Posts Tagged → tutorial

13/março/2010

Utilizando Javascript no GWT/Google Web Toolkit com JSNI (Parte 1)

Muitas vezes os desenvolvedores precisam de um novo componente para sua aplicação, e esse componente a maioria das vezes é desenvolvido em Javascript. Quem conhece o GWT, sabe que a framework permite desenvolver aplicações RIA sem saber Javascript, mas sim desenvolvendo em Java de uma forma muita parecida como a que se desenvolve em Swing ou SWT. Você não tem contato direto com o Javascript, pois ele é gerado na compilação. Mas como então se faz para utilizar um componente Javascript no GWT?
O GWT tem uma funcionalidade que se chama JSNI(Javascript Native Interface). Ela é baseada no JNI(Java Native Interface), que permite aos desenvolvedores Java utilizarem recursos específicos do sistema operacional. No JNI são métodos na classe Java escritos em C. No JSNI são métodos na classe Java que utilizam Javascript. Mas a forma em que eles são escritos é muito parecida, tanto que é possível utilizar parte da documentação do JNI como referência para o JSNI.
Vamos primeiramente criar o já conhecido “Hello World!”, para que começar a se familizar com o JSNI:

public class JSNI implements EntryPoint {
    public void onModuleLoad() {
        Button btn = new Button("Clique aqui");
        btn.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                alert("Hello World!");
            }
        });
        RootPanel.get().add(btn);
    }

    //Dê uma atenção especial a este método
    public native void alert(String txt) /*-{
        $wnd.alert(txt);
    }-*/;
}

Quando esse código for executado, dará para ver um botão, que você clica e mostra um alert com o “Hello World!”. Mas este alert é feito utilizando Javascript, como dá para ver. È criado um método nativo(“public native void alert”) que recebe uma String. O bloco de código é delimitado por “/*-{” e “}-*/” em vez de um simples par de chaves. E dentro do bloco de código é executado um “$wnd.alert(txt);”, que seria o correspondente a “window.alert(txt)” ou a apenas “alert(txt)”. O GWT precisa que tudo que seja referente a janela(window) seja chamado com o “$wnd” no início, pois internamente ele utiliza alguns iframes e algumas coisas que não vem ao caso, e ele precisa disso para não se perder na compilação. Da mesma forma, quando você precisar utilizar um “document.“, você utilizará “$doc.“. Resumindo:

document = $doc
window = $wnd

Vamos fazer um exemplo utilizando o “$doc” agora.

public class JSNI implements EntryPoint {
    public void onModuleLoad() {
        TextBox txt = new TextBox();
        txt.setName("campoTexto");
        RootPanel.get().add(txt);
        Button btn = new Button("Clique aqui");
        btn.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                mostraTextoTextBox();
            }
        });
        RootPanel.get().add(btn);
    }

    public native void mostraTextoTextBox() /*-{
        var txt = $doc.getElementById("campoTexto");
        $wnd.alert(txt.value);
    }-*/;
}

Neste exemplo, é criado um campo TextBox e um botão. Quando se clica no botão, é mostrado em um alert o texto do TextBox. Mas é utilizado Javascript para isso. È utilizado um “$doc.getElementById” para pegar a instância do TextBox(que no fundo no fundo é um “input text” HTML), e retornar o valor. Pode ver que é feita a mesma coisa que seria feita com um campo de texto HTML. A diferença é que se utiliza o $doc ao invés do “document” no getElementById.
A partir disso dá para ver que dá para fazer muita coisa com o JSNI. Esse é o básico do básico do que a ferramenta pode fazer. No próximo artigo irei explicar como utilizar objetos Java no Javascript e fazer com que métodos Java sejam visíveis para Javascript’s externos. Qualquer dúvida, tire nos comentários. :)

Por Ricardo Serathiuk • Enviado em google, google web toolkit, gwt, internet, java, tecnologia • 4 comentários
21/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:

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 &lt; 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

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:
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.

Por Ricardo Serathiuk • Enviado em artigos, coisas legais, google, google web toolkit, gwt, internet, java, softwares, tecnologia, twitter • 1 comentário
8/novembro/2009

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:

  1. Baixe o SmartGWT do seguinte local: http://code.google.com/p/smartgwt/
  2. Descompacte o arquivo .zip e copie o arquivo smartgwt.jar para o diretório “war/WEB-INF/lib” do seu projeto.
  3. Dê um refresh em seu projeto (clique em cima do nome dele no Package Explorer e pressione F5).
  4. Vá em “Configure Build Path” (botão direito em cima do projeto no Package Explorer, Build Path, Configure Build Path).
  5. Vá em Libraries, clique em “Add Jar” e adicione o smartgwt.jar a lista de bibliotecas.
  6. 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’/>”
  7. 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.

final TextItem txt = new TextItem("nome", "Nome");

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.

Por Ricardo Serathiuk • Enviado em artigos, google, google web toolkit, gwt, java, smargwt, smartclient, tecnologia • 4 comentários
8/abril/2009

Utilizando Google Web Toolkit(GWT) 1.6 com o Eclipse Ganymede

Como prometido em janeiro, começo a série de tutorias sobre GWT. Faz tempo que tinha postado que iria começar a postar sobre, mas resolvi esperar sair a versão 1.6 do GWT. Demorou mais que eu esperei essa versão, mas saiu e com algumas novidades bacanas e coisas que eu nem esperava. Eu já tinha um esboço pronto deste primeiro tutorial. Mas tinha escrito ele para utilizar GWT 1.5 com Cypal Studio. Mas o Google lançou um plugin próprio para utilizar GWT no Eclipse. Então resolvi reescrever o tutorial. Tentei deixar o mais simples e objetivo possível. Acredito eu que consegui atingir isso. Estou levando em conta que você já possui o Eclipse Ganymede(3.4) em sua máquina. Caso não possua, vá em http://www.eclipse.org/downloads e baixe o  ‘Eclipse IDE for Java EE Developers’.

Instalando o Google Plugin

  1. Com o Eclipse aberto, vá em Help/Software Updates
  2. Entre na aba ‘Avaliable Software’
  3. Clique em ‘Add Site’
  4. Coloque o endereço http://dl.google.com/eclipse/plugin/3.4 e clique em OK

    Tela Cadastro Plugin Eclipse

    Tela Cadastro Plugin Eclipse

  5. Marque todos os item como na imagem e clique no botão Install.

    Tela Seleção Modulos Plugin GWT

    Tela Seleção Modulos Plugin GWT

  6. Espere ele verificar e baixar os requisitos e pendências (esta parte pode demorar)

    Tela Procurando Pendencias GWT

    Tela Procurando Pendencias GWT

  7. Depois disso é só dar um Next, aceitar os termos(faça de conta que você leu) e clique em Finish.
  8. Depois disso ele vai instalar o plugin e acabou aí. Reinicie o Eclipse e o plugin já vai estar disponível para uso.

Criando e testando um projeto GWT

  1. Com o Eclipse aberto, vá em File / New / Other
  2. No item Google, selecione ‘Web Application Project’ e clique em Next.

    Seleção Tipo Projeto GWT

    Seleção Tipo Projeto GWT

  3. Em Project Name coloque o nome do projeto(utilizei ProjetoTeste) e em Package preencha o pacote da Aplicação(utilizei com.serathiuk.teste.projetoteste). Deixe tudo marcado como está e clique em Finish.

    Tela Configuração Projeto GWT

    Tela Configuração Projeto GWT

  4. Pronto.  O projeto está criado. Vamos testa-lo.
  5. Para testa-lo, vá em Run / Run Configuration
  6. Selecione o item com o nome do projeto em Web Application.

    Tela Rodar Aplicação GWT

    Tela Rodar Aplicação GWT

  7. Clique em Run.
  8. Se funcionar tudo ok, irá aparecer uma janela como a da imagem.

    Tela Hosted Mode GWT

    Tela Hosted Mode GWT

Considerações finais

Este artigo tinha como intuito dar o primeiro pontapé no GWT. Não foi feito nada demais, só rodamos um exemplo já existente. Mas no próximo pretendo escrever como fazer um formulário simples acessando dados do servidor. Mas é isso. Espero que tenham gostado e critiquem a vontade nos comentários.

Por Ricardo Serathiuk • Enviado em artigos, google, google web toolkit, gwt, internet, java, tecnologia • 7 comentários