Este artigo tem como objetivo principal ser rápido, direto e ilustrar como criar um combobox (elemento select do HTML) de estados e no evento de onchange criar a lista de cidades a partir do estado.

Como configurar

A primeira coisa que deve ser feita é acessar o site do framework DWR (http://directwebremoting.org/dwr/index.html) após isso, baixe à última versão estável do framework, no momento da escrita deste artigo a versão é 2.0.5.

No próprio site do DWR, existe um tutorial Get Started que ensina passa a passo como instalar, configurar e ainda alguns exemplos do que pode ser feito e de como fazê-los. Neste artigo será feito um passo a passo mais resumido que o encontrado no site, caso queira mais detalhes, entre no site do framework. Abaixo segue um passo a passo do que deve ser feito:

1. Adicione a lib do DWR (dwr.jar) ao classpath da aplicação (copie o arquivo dwr.jar para a pasta WEB-INF/lib, por exemplo);

2. Adicione o seguinte trecho de código ao arquivo web.xml, que está dentro da pasta WEB-INF;

<servlet>

<servlet-name>dwr-invoker</servlet-name>

<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>

<init-param>

<param-name>debug</param-name>

<param-value>true</param-value>

</init-param>

</servlet>

<servlet-mapping>

<servlet-name>dwr-invoker</servlet-name>

<url-pattern>/dwr/*</url-pattern>

</servlet-mapping>

3. Crie dentro da pasta WEB-INF um arquivo chamado dwr.xml, adicione o seguinte conteúdo dentro dele (Este arquivo será explicado mais tarde);

<!DOCTYPE dwr PUBLIC

“-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN”

“http://getahead.org/dwr/dwr20.dtd”>

<dwr>

<allow>

<create creator=“new” javascript=“AjaxDwr”>

<param name=“class” value=“br.com.phpaulo.dwr.exemplo.util.AjaxDwr”/>

</create>

<convert converter=“bean” match=” br.com.phpaulo.dwr.exemplo.bean.Fornecedor” />

<convert converter=“bean” match=” br.com.phpaulo.dwr.exemplo.bean.Municipio” />

</allow>

</dwr>

4. Pronto! Sua aplicação já está utilizando o framework DWR.

Código Java e JavaScript

Para atingir o objetivo do artigo que é ser simples e direto, assumimos que o código Java e a página JSP da aplicação estão prontas e somente necessitem de ajustes para o DWR, caso precise de mais algum suporte, deixe um comentário ou mande um e-mail para o autor. Vamos à parte visual para este exemplo. Adicione na sua página JSP a chamada das bibliotecas JavaScript necessárias:

<script type=‘text/javascript’ src=‘<%=request.getContextPath() %>/dwr/engine.js’></script>

<script type=‘text/javascript’ src=‘<%=request.getContextPath() %>/dwr/util.js’></script>

Quando o arquivo dwr.xml foi criado, adicionamos o seguinte bloco de código:

<create creator=“new” javascript=“AjaxDwr”>

<param name=“class” value=“br.com.phpaulo.dwr.exemplo.util.AjaxDwr”/>

</create>

Este bloco significa que um novo arquivo JavaScript será criado e o nome desse arquivo será AjaxDwr, veja as opções no bloco acima, bem intuitivo não. O conteúdo desse arquivo será o mesmo que a classe Java que está mapeada no parâmetro value dentro da tag create, com todos os métodos dessa classe com uma função de retorno (callback).

Adicione na página que você deseja ter o suporte ao DWR a seguinte linha:

<script type=‘text/javascript’ src=‘<%=request.getContextPath() %>/dwr/interface/AjaxDwr.js’></script>

Esta linha poderá ser alterada, tudo dependerá do nome que você der ao JavaScript da classe. O <%=request.getContextPath() %> é apenas para referenciar o contexto da aplicação. Com esse processo feito agora só precisamos criar a função JavaScript que será executada no evento onchange do combo de estados, essa função pode ser vista abaixo:

1.function atualizaCombo() {

2.      var uf = dwr.util.getValue(”uf”);

3.      AjaxDwr.getCidades(uf, montaCombo);

4.}

5.

6.function montaCombo(data){

7.    dwr.util.removeAllOptions(”cidade”);

8.    dwr.util.addOptions(”cidade”, data, “idMunicipio”, “nmMunicipio”);

9.}

Repare na função, usamos variáveis do DWR. Abaixo é explicado linha a linha o que é feito no código acima:

Linha 1. Declara a função atualizaCombo, sem parâmetro;

Linha 2. Armazena o valor selecionado no combo cujo id seja igual a uf;

Linha 3. Invoca a classe AjaxDwr, definida no arquivo dwr.xml e chama o método getCidades passando como parâmetro o id do estado, através da variável uf definida na Linha 2 e chama uma função no callback da getCidades, chamar no callback, quer dizer que ela será executada quando o método getCidades da classe Java for concluído, no caso essa função chama montaCombo e deverá ser passada sem parâmetros, pois está implícito que ele recebe o retorno da função getCidades;

Linha 6. Declara a função montaCombo, recebendo como parâmetro a o retorno do método getCidades;

Linha 7. Remove todos os elementos <option> que o combo de tiver, essa função recebe como parâmetro o id do elemento que queremos remover as opções;

Linha 8. Adiciona toda a lista de elementos que vir de retorno do método getCidades, no caso, essas opções são as cidades, a assinatura do método é dwr.util.addOptions(id_do_elemento, conteúdo_de_retorno, campo_que_representa_o_value, campo_que_representa_o_texto_do_valor); Onde:

id_do_elemento: representa o id do combo que deve receber os dados;

conteúdo_de_retorno: representa o conteúdo que deve ser retornado pelo método, qualquer nome válido pode ser usado;

campo_que_representa_o_value: nome do atributo que está definido no bean que representa o id;

campo_que_representa_o_texto_do_valor: nome do atributo que está definido no bean que representa o texto a ser exibido no option.

Para mais informações de possibilidades de adicionar opções, veja o seguinte link http://directwebremoting.org/dwr/browser/util/lists.html.

O método getCidades da classe Java, deve ser um método simples, deve retornar uma lista de cidades, como o método abaixo:

public List<Cidade> getCidades(int idEstado){

List<Cidade> listaCidades = new ArrayList<Cidade>();

if( idEstado > 0 ) {

try {

listaCidades = new CidadeDAO().getMunicipios(idEstado);

} catch(SQLException e){

e.printStackTrace();

}

}

return listaCidades;

}

Um detalhe importante para que isso funcione é que criemos um converter no DWR para que ele saiba qual bean pode converter, o por isso dessa linha no arquivo dwr.xml.

<convert converter=“bean” match=” br.com.phpaulo.dwr.exemplo.bean.Fornecedor” />

Para cada bean que for utilizar crie um converter para o DWR saber em quais classes ele pode converter e dessa forma realizar a conversão de forma correta.

Conclusão

Da forma que foi exibido acima, você poderá criar um combo com uma lista de opções de qualquer classe e no evento onchange filtrar opções para o próximo combo.

Caso o erro “data is null” for exibido, verifique se não esqueceu de configurar o converter, ou reveja as opções definidas no método addOptions.

A idéia foi mostrar de forma clara e objetiva como criar o clássico caso de selecionar um estado e gerar a lista de cidades. Espero que aproveitem e que este artigo faça com que o seu trabalho fique mais produtivo.

Links

http://directwebremoting.org/

http://directwebremoting.org/dwr/introduction/getting-started.html

http://directwebremoting.org/dwr/browser/util/lists.html

http://www.devmedia.com.br/articles/viewcomp.asp?comp=3733

Esta API permite a criação de mapas com locais definidos, controle de zoom, tipos de mapa, geração de rotas, pesquisa por estabelecimentos, e muitas coisas mais.

Como começar

A primeira coisa que devemos fazer é acessar o link da página inicial da API (http://code.google.com/intl/pt-BR/apis/maps/signup.html), ler e aceitar o contrato, digitar a url do site que deseja usar a API e clicar no botão “Gerar chave da API”. (veja a figura 1)

Figura 1: Aceitando o contrato

Após isso, caso ainda não esteja logado com a sua “Google Account”, o Google pedirá para efetuar o login, nesse passo você obterá a chave para usar a API somente na url que digitou o site. Caso queira usar a API em outro site, deverá repetir esse processo para cada site que quiser. (Veja a figura 2)

Figura 2: Chave Gerada

Agora que já temos a chave, podemos usar a API no site. O Google disponibiliza alguns exemplos, para trabalhar com JavaScript, Flash, Serviço, etc..

Neste artigo abordaremos o uso da API para JavaScript e para isso devemos adicionar o seguinte script dentro do bloco head do HTML, no local “SUA_CHAVE”, você deve colocar a chave que o Google gerou para o site, veja o campo Your key is na figura 2.

<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=SUA_CHAVE“></script>

 O código de base para começar o aprendizado está abaixo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

                        <head>

                                               <title>Aprendendo a Usar a API Google Maps | Paulo Fernandes </title>

                                               <meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>

                                               <script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAAaVFxs6kNq7gWY59qf5XMxSec6s_uUscdbTyPSy8oWl8zYzqFRRanjFebOU60thMmEQQDEPx3A3y5Q”></script>

                                               <script>

                                                                       var map = null;

                                                                       var geocoder = null;

                                                                       function inicializa() {

                                                                                              if (GBrowserIsCompatible()) {

                                                                                                                      map = new GMap2(document.getElementById(”mapa_base”));

                                                                                                                      map.setCenter(new GLatLng(-22.9035393, -43.2095869), 13);

                                                                                                                      geocoder = new GClientGeocoder();

                                                                          }

                                                                       }

    </script>

                        </head>

                        <body>

                                               <div style=”width: 500px; height: 300px”></div>

                        </body>

</html>

Este código não está difícil de entender, explicaremos as partes mais importantes:

• No onload(), a função inicializa() verifica se o navegador do usuário é compatível com a API Google Maps, caso positivo, o método captura uma div com id igual a “mapa_base” e defini o mapa centralizado. O local padrão que escolhi foi à cidade do Rio de Janeiro, que é representada pelas seguintes coordenadas de latitude e longitude -22.9035393, -43.2095869, respectivamente. O número seguinte, 13 representa o zoom no mapa, quando menor esse número, menor o zoom.
• No onunload(), a função GUnload() serve para limpar as estruturas internas e liberar a memória.

Para mais informações sobre os métodos acesse a documentação em português, através do seguinte link: http://code.google.com/intl/pt-BR/apis/maps/documentation/reference.html. Essa documentação está interessante, e será a base para o artigo.

Exemplos Simples

No link a seguir podemos analisar diversos exemplos do poder desta API, http://code.google.com/intl/pt-BR/apis/maps/documentation/demogallery.html.

Para o artigo, colocaremos alguns exemplos interessantes para inserir um mapa personalizado no site.

• Descobrir qual a latitude e longitude do endereço: Isso é útil quando se pretende definir algum local como default ao entrar no site. Para isso faremos um formulário onde você digita o endereço e o mapa é carregado no endereço e exibe o posicionamento de latitude e longitude. O código JavaScript é esse:

function mostraEndereco(){

                                                var endereco = document.getElementById(”endereco”).value;

                                                if ( geocoder ) {

                                                                        geocoder.getLatLng(endereco,

                                                                                               function(point){

                                                                                                                       if ( !point ) {

                                                                                                                                              alert(endereco + ” não encontrado”);

                                                                                                                       } else {

                                                                                                                                              map.setCenter(point, 13);

                                                                                                                                              var marca = new GMarker(point);

                                                                                                                                              map.addOverlay(marca);

                                                                                                                                               marca.openInfoWindowHtml( endereco + “<br />” + point.toString() );

                                                                                                                       }

                                                                                               }

                                                                        );

                                                } else {

                                                                        alert(”GeoCoder não identificado”);

                                                }

}

E no HTML:

<form action=”#” method=”get”>

                                                <input size=”50” value=”São Paulo” />

                                                <input value=”Mostrar Latitude/Longitude”/>

</form>

• Definindo um evento: Para definir um evento precisamos utilizar o objeto GEvent. Seguindo a mesma linha do código, definiremos um evento, que será disparado toda vez que o marcador for clicado, fazendo com que a posição geográfica seja exibida, devemos colocar esse evento na função mostrarEndereco(), pois é nela que definimos o marcador.

GEvent.addListener(marca, “click”, function() {                                                                                                                                                                               marca.openInfoWindowHtml( endereco + “<br />” + point.toString() );                                                                        });

 

• Adicionando zoom no mapa: Para adicionar o controle de zoom, devemos adicionar um controle ao mapa, através do método addControl() e a esse controle devemos adicionar o controle do mapa, o mais correto é adicionar isso na função de inicialização: inicializa(), a linha completa que deve ser inserida é está:

map.addControl( new GSmallMapControl() );

• Adicionando forma de visualização: Podemos definir um controle para que o usuário possa ver o endereço na forma de mapa, hibrido ou satélite. Para isso devemos seguir a mesma linha de raciocínio para inserir o zoom, que seria adicionar um controle.

map.addControl( new GMapTypeControl() );

Exemplo Avançado

Para mostrar algo avançado que tal traçar a rota do ponto A ao ponto B? Para isso precisaremos que o usuário digite os valores dos pontos A e B. Para traçar a rota, vamos reescrever todo o exemplo, simplificando as configurações.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

                        <head>

                                               <title>Aprendendo a Usar a API Google Maps – Obter Rota | Paulo Fernandes </title>

                                               <meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>

                                               <script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAAaVFxs6kNq7gWY59qf5XMxSec6s_uUscdbTyPSy8oWl8zYzqFRRanjFebOU60thMmEQQDEPx3A3y5Q”></script>

                                               <script>

                                                                       var map = null;

                                                                       var geocoder = null;

                                                                       var from;

                                                                       var to;

                                                                       var directionsPanel = null;

                                                                       var directions = null;

                                                                      

                                                                       function inicializa() {

                                                                                              if (GBrowserIsCompatible()) {

                                                                                                                      map = new GMap2(document.getElementById(”mapa_base”));

                                                                                                                      map.setCenter(new GLatLng(-22.5489433, -46.6388182), 7);

                                                                                                                      geocoder = new GClientGeocoder();

                                                                                                                      map.addControl( new GSmallMapControl() );

                                                                                                                      map.addControl( new GMapTypeControl() );

                                                                                                                      directionsPanel = document.getElementById(”route”);

                                                                                                                      directions = new GDirections(map, directionsPanel);

                                                                                                                     

                                                                          }

                                                                       }

                       

                                                                       function gerarRota(){

                                                                                              from = document.getElementById(”partida”).value;

                                                                                              to = document.getElementById(”destino”).value;

                                                                                              if ( geocoder ) {

                                                                                                                      geocoder.getLatLng(from,

                                                                                                                                             function(point){

                                                                                                                                                                     if ( !point ) {

                                                                                                                                                                                            alert(from + ” não encontrado”);

                                                                                                                                                                     }

                                                                                                                                             }

                                                                                                                      );

                                                                                                                      geocoder.getLatLng(to,

                                                                                                                                             function(point){

                                                                                                                                                                     if ( !point ) {

                                                                                                                                                                                            alert(to + ” não encontrado”);

                                                                                                                                                                     }

                                                                                                                                             }

                                                                                                                      );

                                                                                                                     

                                                                                                                      var string = “from: ” + from + ” to: “+to;

                                                                                                                      directions.clear();

                                                                                                                      directions.load(string);

                                                                                                                      GEvent.addListener(directions, “error”, erroGetRoute);

                                                                                              } else {

                                                                                                                      alert(”GeoCoder não identificado”);

                                                                                              }

                                                                       }

                                                                      

                                                                       function erroGetRoute(){

                                                                                              alert(”Não foi possivel traçar a rota de: ” + from + ” para: ” + to );

                                                                       }

                                                                      

                                                                      

    </script>

                        </head>

                        <body>

                                               <form action=”#” method=”get”>

                                                                       <label for=”partida”>Partida</label>

                                                                       <input value=”São Paulo” size=”50″ />

                                                                       <br />

                                                                       <label for=”destino”>Destino</label>

                                                                       <input value=”Rio de Janeiro” size=”50″ />

                                                                       <br />

                                                                       <input value=”Obter Rota”/>

                                               </form>

                                               <div style=”width: 800px; height: 500px;”></div>

                                               <div style=”width: 300px; height: 500px; position: absolute; right: 0; top: 0;”></div>

                        </body>

</html>

Para mostrar a rota, tivemos que criar uma nova div com o id igual à “route”, é neste local que exibiremos o passo a passo da rota traçada. Essa captura do local foi feito nesta linha directionsPanel = document.getElementById(”route”); Para traçar a rota, devemos instanciar o objeto GDirections e informar para ele carregar a rota através do método directions.load(string);

No método load devemos passar os dois endereços escritos por extenso, antes o endereço de partida devemos atribuir from: e antes do endereço de destino to: , ficando a string completa from: São Paulo to: Rio de Janeiro , por exemplo.

Caso algum dos dois endereços não seja encontrado, o código exibirá um alert informando que a rota não pode ser traçada.

Conclusão

Com este artigo pudemos perceber o poder que a API nos dá, ela nos fornece outras diversas possibilidades que podem ser vistas na documentação oficial. O objetivo do artigo foi introduzir os principais conceitos e o que se pode utilizar no site de sua empresa, por exemplo.

Algo que devemos tomar cuidado é na declaração das variáveis, pois o local onde ela é declarada pode fazer com que a API se porte de forma indesejada. Por exemplo, quando declaramos uma marca, se tivemos declarado ela fora da função a cada novo endereço, a marca anterior seria perdida, mas repare que a informação de latitude e longitude é perdida, mantendo somente a ultima. Faça o teste, declare a variável fora do método, acredito que achará bem interessante.

Pode ser que exista outra forma de fazer o que demonstramos ou até que o que foi demonstrado esteja errado, mesmo que aparentemente funcionando.

O GWT (Google Web Toolkit) é um framework para desenvolvimento web que tem como objetivo facilitar a vida dos desenvolvedores, pois possui um conjunto de ferramentas, API e componentes visuais que facilitam a criação de modernas, ricas e dinâmicas interfaces.

A criação do código para geração da interface é escrita usando Java e não JavaScript, o que torna o desenvolvimento muito mais fácil, pois graças as IDEs (ferramentas que auxiliam o desenvolvimento, muita delas gratuitas e conhecidas), os erros podem ser descobertos em tempo de compilação, Java é fortemente tipada e é muito mais fácil encontrar desenvolvedores Java no mercado do que JavaScript.

No momento que a classe Java é compilada o GWT faz o papel de compilador JavaScript, fazendo com que o código Java seja convertido em JavaScript. O Hosted Mode é utilizado como debbuger do código facilitando a identificação dos erros devido ao seu console de administração.

Uma funcionalidade muito interessante é que com o GWT minimizamos ao máximo o tamanho do arquivo JavaScript, ao invés de fazer vários “IFs” no código para saber qual o navegador, qual o idioma, etc., ele gera um arquivo JavaScript para cada tipo de combinação de navegador e se por acaso sua aplicação for internacionalizada, o GWT gerará um arquivo JavaScript para cada tipo de idioma. O responsável por saber qual arquivo será utilizado na hora de exibição para o usuário é o servidor, tudo isso ocorre transparentemente para os usuários.

Começando

Para iniciarmos uma aplicação usando o GWT, precisamos fazer o download de suas bibliotecas que podem ser baixadas nesse link, http://code.google.com/intl/pt-BR/webtoolkit/. Além disso, precisaremos de uma IDE, usaremos o Eclipse IDE versão Ganymede que pode ser baixado neste link, http://www.eclipse.org/downloads/. Para facilitar ainda mais o desenvolvimento, devemos fazer o download do plugin do GWT para o Eclipse Ganymede, que pode ser encontrado neste link, http://code.google.com/intl/pt-BR/eclipse/docs/download.html.

Neste passo não vamos detalhar o processo de instalação, pois no site Google este passo está muito bem detalhado, veja este link, http://code.google.com/intl/pt-BR/eclipse/docs/install-eclipse-3.4.html

Para criar um novo projeto usando o Eclipse e o plugin, devemos clicar em File > New > Web Application Project. Preencha o campo Project name com o nome do projeto, no exemplo usaremos PucProjeto, o campo Package pode ser preenchido com o pacote que deseja que fique o raiz do projeto, no exemplo usaremos br.pucsp.pos.web. No campo Location definimos o workspace da aplicação, no campo Google SDKs definimos qual GWT devemos usar e qual a Engine devemos usar. Após isso clique em Finish.

Imagem 1 Artigo GWT

Após clicar em Finish uma aplicação de exemplo será criada, para testá-la, clique com o botão do lado direito sobre o projeto e depois Run As > Web Application, um console do Google será aberto e você ver a aplicação de teste em funcionamento.

Todo o código que é renderizado e mostrado para o usuário está na classe br.pucsp.pos.web.client.PucProjeto, que usa uma implementação da classe com.google.gwt.core.client.EntryPoint. O código que será compilado deve ficar dentro do método onModuleLoad(), caso queira editar este projeto que o plugin criou, pode excluir todas as classes exceto a br.pucsp.pos.web.client.PucProjeto, fazendo isso não teremos nenhum problema, pois somente com ela o GWT consegue compilar.

Na criação do projeto usando o plugin uma pasta chamada war foi criada, dentro dessa pasta existem dois arquivos, um com as configurações do CSS (Cascading Style Sheet), que são as folhas de estilo. Podemos criar as nossas classes e nossos IDs e depois usá-los no código Java do GWT citando o id com o seguinte comando:

closeButton.getElement().setId(”closeButton”);

ou citando a classe com o seguinte comando:

 closeButton.getElement().setClassName(”sendButton”);

No outro arquivo encontramos o layout da página HTML, todos os elementos que forem absolutos devem ser inseridos nessa página. Podemos definir áreas nesse código HTML que serão inseridas via a classe Java que estamos criando com o uso do framework GWT. No exemplo criado pelo plugin, o GWT criou uma página com uma tabela com duas colunas e definiu as colunas como áreas, para o nosso exemplo, altere o nome dessas áreas para os seguintes nomes, nameFieldContainer, aboutButtonContainer.            Para que algo seja inserido nessas áreas, devemos criar um tipo de painel, no exemplo usamos o SimplePanel e o DialogBox que são referenciadas no código Java através da seguinte linha de código:

      RootPanel.get(”nameFieldContainer”).add(psugBox);

      RootPanel.get(”aboutButtonContainer”).add(aboutButton);

Abaixo está o código completo da classe br.pucsp.pos.web.client.PucProjeto 

package br.pucsp.pos.web.client;

 

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.event.dom.client.ClickEvent;

import com.google.gwt.event.dom.client.ClickHandler;

import com.google.gwt.user.client.ui.Button;

import com.google.gwt.user.client.ui.DialogBox;

import com.google.gwt.user.client.ui.HTML;

import com.google.gwt.user.client.ui.Label;

import com.google.gwt.user.client.ui.MultiWordSuggestOracle;

import com.google.gwt.user.client.ui.RootPanel;

import com.google.gwt.user.client.ui.SimplePanel;

import com.google.gwt.user.client.ui.SuggestBox;

import com.google.gwt.user.client.ui.VerticalPanel;

 

public class PucProjeto implements EntryPoint {

 

       public void onModuleLoad() {

             final Button aboutButton = new Button(”Sobre”);

            

             final DialogBox about = new DialogBox();

             about.setText(”Sobre o Exemplo”);

             about.setAnimationEnabled(true);

             final Button closeButton = new Button(”Fechar”);

             closeButton.getElement().setId(”closeButton”);

             aboutButton.getElement().setClassName(”sendButton”);

            

             VerticalPanel dialogVPanel = new VerticalPanel();

             dialogVPanel.addStyleName(”dialogVPanel”);

             dialogVPanel.add(new HTML(”<b>Projeto Desenvolvido por:</b>”));

             dialogVPanel.add(new HTML(”<br><b>Paulo Fernandes [ paulofernandesjr@gmail.com ]</b>”));

             dialogVPanel.setHorizontalAlignment(VerticalPanel.ALIGN_RIGHT);

             dialogVPanel.add(closeButton);

             about.setWidget(dialogVPanel);

            

             /**

              * Essa é uma forma de fazer

              */

             class MyHandler implements ClickHandler {

                    public void onClick(ClickEvent event) {

                           aboutButton.setEnabled(false);

                           about.setText(”Sobre o Projeto”);

                           about.center();

                           closeButton.setFocus(true);

                    }

             }

             MyHandler handler = new MyHandler();

             aboutButton.addClickHandler(handler);

 

             /**

              * Essa é outra forma de fazer

              */

             closeButton.addClickHandler(new ClickHandler() {

                    public void onClick(ClickEvent event) {

                           about.hide();

                           aboutButton.setEnabled(true);

                           aboutButton.setFocus(true);

                    }

             });

 

             MultiWordSuggestOracle palavras = new MultiWordSuggestOracle();

             palavras.add(”abacate”);

             palavras.add(”abacaxi”);

             palavras.add(”acordar”);

             palavras.add(”aeromotor”);

              palavras.add(”agudo”);

             palavras.add(”alcool”);

             palavras.add(”algarismo”);

            

             SuggestBox suggestBox = new SuggestBox(palavras);

             suggestBox.setAnimationEnabled(true);

             suggestBox.setVisible(true);

 

             /**

              * painel para a caixa de sugestoes

              */

             VerticalPanel sugBox = new VerticalPanel();

             sugBox.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER);

             sugBox.add(new Label(”Digite a letra A”));

             sugBox.add(suggestBox);

             SimplePanel psugBox = new SimplePanel();

             psugBox.setWidget(sugBox);

            

             RootPanel.get(”nameFieldContainer”).add(psugBox);

             RootPanel.get(”aboutButtonContainer”).add(aboutButton);

                          

       }

}

Imagem 2 Artigo GWT

Concluindo

No seguinte link http://code.google.com/intl/pt-BR/webtoolkit/doc/1.6/DevGuide.html está o guia para os desenvolvedores que quiserem se aperfeiçoar mais com este excelente framework.  Neste outro link tem uma aplicação de exemplo que o pessoal do Google fez para vermos mais um pouco do poder do GWT http://gwt.google.com/samples/Mail/Mail.html.

Com este artigo descobrimos o quanto podemos melhorar nossas aplicações usando o GWT, para quem já desenvolve para web, sabe que para fazer o que fizemos neste exemplo, daria um trabalho um tanto quanto complexo, imagine só essa aplicação de e-mail que está no link acima.

Fontes

http://code.google.com/intl/pt-BR/webtoolkit/

http://www.gwt.com.br/

http://www.comp.ufscar.br/~bruno_abrahao/Trabalhos/Tutorial%20GWT.pdf

Introdução

Neste artigo explicarei como manipular documentos do Microsoft Word 97-2003, utilizando uma excelente API chamada Jakarta POI [http://poi.apache.org/]. Neste artigo falarei somente até a versão 2003 do Microsoft Word, pois na versão 2007 ele trabalha de uma forma diferente.

Problema

Vamos simular uma situação onde a esta aplicação poderia ser utilizada. Tenho um contrato que é padrão para todos os clientes, mas eu preciso inserir em cada contrato, o nome, o valor do contrato e o valor em porcentagem da multa e enviar para efeito de teste, salvar o contrato com o nome da empresa em formato pdf. Outra possibilidade do problema seria criar um e-mail marketing e enviar por e-mail para uma lista de usuários cadastrados.

A API Jakarta POI

Esta API é fantástica, tem diversas funções e não serve apenas para trabalhar com arquivos do Microsoft Word, serve também para arquivos do Microsoft Excel, Microsoft Visio, Microsoft PowerPoint, entre outros, a versão estável até o momento da escrita deste artigo era a versão 3.2. Os desenvolvedores estão trabalhando na versão 3.5 que suportará arquivos Microsoft Office 2007. No exemplo do projeto eu explicarei algumas das funções da API, pode até ser que eu fuja um pouco da solução do problema, porém creio que ficará fácil para entender como trabalhar com a API.

Solução

A solução para o problema não é tão complexa, basta você abrir o arquivo Microsoft Word desejado, encontrar os trechos onde deseja que sejam as palavras sejam substituídas, e substituí-las. Para isso eu colocarei no meio do meu arquivo contrato.doc umas “TAGS PERSONALIZADAS”, estas TAGS poderiam ser quaisquer palavras, eu adotei um padrão para não correr o risco de alterar algo que não quisesse que fosse alterado. O padrão utilizado foi o seguinte:

                  #NOME_DO_CAMPO#

As minhas variáveis ficaram da seguinte forma no arquivo contrato.doc

                  #NOME_EMPRESA#

                  #VALOR_CONTRATO#

                  #VALOR_MULTA#

Sobre o contrato, ele não é especifico para o que vou demonstrar, ele foi retirado do site http://www.sitecontabil.com.br/modelos_contrato.htm e o link para download do contrato de exemplo é esse aqui:  http://www.sitecontabil.com.br/modelos_contrato/0338.htm. Utilizei apenas alguns espaços que não são exatamente para o que deveria, mas como o objetivo deste artigo é mostrar a aplicação funcionando, não vi muita necessidade em ter um exemplo que se encaixe perfeitamente com o artigo.

Código

Como o objetivo é mostrar o funcionamento da API Jakarta POI, e não sobre SWING ou Desenvolvimento WEB, fiz um código, que em minha opinião está bem didático e comentado, facilitando o entendimento. O código do projeto pode ser baixado do link a seguir:

                  http://www.phpaulo.com.br/artigo/1/artigo1-word-to-java.zip

Para o desenvolvimento foi necessário o download da biblioteca Jakarta POI, que está no link download do site da API, também está no arquivo do projeto.

No exemplo mostro como extrair o texto de duas possibilidades:

1ª usando o WordExtractor: fará com que você pegue a o conteúdo e armazene em uma String, no exemplo eu usei, StringBuilder, por ela ser mais rápida que a String o que facilitará ainda mais a substituição.

2ª usando o Range: que tem um método, muito eficiente que faz a modificação do texto através do método replaceText(String parametroABuscar, String parametroASubstituir).

Apenas para efeito de demonstração da API, adicionarei um parágrafo no começo e no final do Arquivo contendo os meus dados. Com isso o exemplo não só mostrará como substituir, mas também como adicionar conteúdo.

Como o objetivo não é como mostrar a geração de PDF, a parte do PDF está muito simples, deveria ser melhorada, mas isso é para outro artigo.

O exemplo foi desenvolvido utilizando Java 6, Eclipse Ganymede e NetBeans 6.5.

Conclusão

Esta API não se restringe apenas a arquivos Microsoft Word, como mencionei acima pode ser usada com outros formatos também, para maiores informações acesse o site do projeto: http://poi.apache.org/

Com isso encerro aqui o meu artigo, caso tenham alguma dúvida, podem me enviar um e-mail, que na medida do possível estarei respondendo, estou aberto a sugestões para próximos artigos.

Até o próximo pessoal.