Desenvolvendo aplicações Java com os frameworks GWT e GXT

Uma das mais promissoras linguagens de programa��o ganhou mais for�a de uso com a cria��o de frameworks RAD, como � o exemplo do GXT que foi desenvolvido pelo Sencha e do outro lado est� o GWT (Google Web Toolkit). Essas duas ferramentas permitem o desenvolvimento de aplica��es web muito ricas de interface gr�fica e garantem um bom desempenho.

A Aplica��o

Para facilitar o desenvolvimento, a Google desenvolveu um plugin para o IDE Eclipse.

**Figura 1**. Download plugin GWT para Eclipse

Ap�s efetuar o donwload do plugin � preciso criar uma aplica��o Web: File > New > Web Application Project.

� preciso informar o nome do projeto e um pacote padr�o, no exemplo deste artigo n�o ser� utilizado o Google App Engine, ao clicar em Finish ser� criado o projeto com a estrutura padr�o do projeto.

O GWT trabalha de forma ass�ncrona e como toda aplica��o web precisa ser mapeado em um arquivo XML (web.xml). A separa��o das camadas d�-se pelos pacotes br.com, br.com.client, br.com.server e br.com.shared, tudo o que for referente � camada de vis�o da aplica��o dever� ser colocado dentro do pacote br.com.client. Por padr�o s�o gerados um arquivo HTML e um CSS, os dois s�o necess�rios para carregar o layout da aplica��o juntamente com o c�digo escrito em Java, que depois de compilado � transformado para JavaScript, o que aumenta ainda mais o desempenho da aplica��o.

Para trabalhar com GXT � preciso al�m do projeto web, criar um projeto Java comum que ir� conter o core da aplica��o, dessa forma podemos dividir os interesses de neg�cios e a vis�o, obedecendo o padr�o MVC. Dentro do projeto web dever�o ser criadas as classes contendo os mesmos atributos das classes feitas no core da aplica��o, essas classes dever�o herdar da classe BaseModel, pois � o tipo aceito pelo GXT, ou seja todo objeto �bean� dentro do projeto web dever� ser um BaseModel.

Criando o C�digo


package br.com.client.domain;
import java.io.Serializable;
import com.extjs.gxt.ui.client.data.BaseModel;

public class PersonG extends BaseModel implements Serializable {

	private static final long serialVersionUID = 1L;
	private Integer code;
	private String name;
	private String phone;
	private String cell;
	private String email;

	public Integer getCode() {
		return get("code");
	}

	public void setCode(Integer code) {
		set("code", code);
	}

	public String getName() {
		return get("name");
	}

	public void setName(String name) {
		set("name", name);
	}

	public String getPhone() {
		return get("phone");
	}

	public void setPhone(String phone) {
		set("phone", phone);
	}

	public String getCell() {
		return get("cell");
	}

	public void setCell(String cell) {
		set("cell", cell);
	}

	public String getEmail() {
		return get("email");
	}

	public void setEmail(String email) {
		set("email", email);
	}

}

Listagem 1. Classe estendendo BaseModel

N�o � preciso criar os atributos de refer�ncia de tipo primitivo, nem atributos do tipo String, por�m os de outros tipos dever�o ser explicitados dentro da classe. Os m�todos Getters() e Setters() s�o um pouco diferentes dos que normalmente s�o utilizados em uma aplica��o Java, justamente pelo fato de estender a classe BaseModel.

ASYNC Callback e mapeamento de Web.xml

O GXT � ass�ncrono, dessa forma � preciso criar elementos que suportem trabalhar dessa forma, boas pr�ticas de programa��o aconselham que o desenvolvimento da aplica��o seja feita orientada a interfaces. Seguindo essa ideia ser�o criadas duas interfaces que possibilitar�o trabalhar de forma ass�ncrona.


package br.com.client.application;

import br.com.client.domain.PersonG;

import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;

@RemoteServiceRelativePath ("personController")
public interface PersonApplication extends RemoteService{

	public void save(PersonG person);
	public void update(PersonG person);
	public PersonG findById(int id);
	public void delete(PersonG person);
}

Listagem 2. Criando a inteface


package br.com.client.application;

import br.com.client.domain.PersonG;

import com.google.gwt.user.client.rpc.AsyncCallback;

public interface PersonApplicationAsync {

	void save(PersonG person, AsyncCallback<Void> callback);

	void update(PersonG person, AsyncCallback<Void> callback);

	void delete(PersonG person, AsyncCallback<Void> callback);

	void findById(int id, AsyncCallback<PersonG> callback);

}

Listagem 3. Criando a interface ass�ncrona

Por padr�o o projeto web cria o arquivo web.xml que permite o mapeamento dos servlets da aplica��o (padr�o em toda aplica��o web). No arquivo web.xml ser� adicionado o servlet mapeado pela anota��o @RemoteServiceRelativePath ("personController").


<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
              http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
         version="2.5"
         xmlns="http://java.sun.com/xml/ns/javaee">

  <!-- Servlets -->
  <servlet>
    <servlet-name>personService</servlet-name>
    <servlet-class>br.com.server.PersonApplicationImpl</servlet-class>
  </servlet>
  
  <servlet-mapping>
    <servlet-name>personService</servlet-name>
    <url-pattern>/gwtproj/personController</url-pattern>
  </servlet-mapping>
  
  <!-- Default page to serve -->
  <welcome-file-list>
    <welcome-file>GWTProj.html</welcome-file>
  </welcome-file-list>
</web-app>

Listagem 4. Arquivo web.xml

O arquivo web.xml dever� estar contido do diret�rio WEB-INF contida na pasta war dentro do projeto.

Para utilizar o GWT � preciso criar classes que servir�o de conversor das classes do projeto Java para o projeto web. Esse conversor ser� utilizado tanto para as transa��es de persist�ncia quanto para as transa��es de busca entre a aplica��o web e a aplica��o core.


package br.com.client.converter;
import br.com.client.domain.PersonG;
import br.com.domain.Person;

public class PersonConverter {

	private Person person;
	private PersonG personG;
	
	public Person personConverterG(PersonG personG){
		person = new Person();
		person.setCode(personG.getCode());
		person.setName(personG.getName());
		person.setEmail(personG.getEmail());
		person.setPhone(personG.getPhone());
		person.setCell(personG.getCell());
		return person;
	}
	
	public PersonG personConverter(Person person){
		personG = new PersonG();
		
		personG.setCode(person.getCode());
		personG.setName(person.getName());
		personG.setPhone(person.getPhone());
		personG.setCell(person.getCell());
		personG.setEmail(person.getEmail());
		return personG;
	}
}

Listagem 5. Criando o conversor

Para este artigo utilizamos o conversor constru�do de forma manual, por�m j� existem artefatos como por exemplo o Jazon utilizado para efetuar o papel de convers�o dos objetos de forma autom�tica.


package br.com.server;
import br.com.client.application.PersonApplication;
import br.com.client.converter.PersonConverter;
import br.com.client.domain.PersonG;
import br.com.database.impl.PersonRepositoryImpl;
import br.com.domain.Person;
import br.com.domain.PersonRepository;

import com.google.gwt.user.server.rpc.RemoteServiceServlet;

public class PersonApplicationImpl extends RemoteServiceServlet 
implements PersonApplication{

	private static final long serialVersionUID = 1L;
	private PersonConverter pConverter;
	private PersonRepository pRep;
	private Person person;
	
	public PersonApplicationImpl() {
		pConverter = new PersonConverter();
		pRep = new PersonRepositoryImpl();
	}
	
	@Override
	public void save(PersonG personG) {
		person = pConverter.personConverterG(personG);
		pRep.save(person);
	}

	@Override
	public void update(PersonG person) {
		// TODO Auto-generated method stub
	}

	@Override
	public PersonG findById(int id) {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public void delete(PersonG person) {
		// TODO Auto-generated method stub
	}
}

Listagem 6. Implementando a interface

Para este artigo ser� mostrado somente como persistir um objeto em um banco de dados, por�m a l�gica para as demais fun��es podem ser implementadas seguindo a mesma estrutura l�gica.

Dom�nio da Aplica��o

A aplica��o Java Project ser� utilizada para receber os objetos convertidos da aplica��o web e efetuar a l�gica de persist�ncia no banco. Para o exemplo deste artigo foi utilizado o framework JPA.


package br.com.domain;

import java.io.Serializable;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.SequenceGenerator;
@Entity (name="tb_person")
public class Person implements Serializable {

	private static final long serialVersionUID = 1L;

	@Id
	@SequenceGenerator (initialValue = 1, allocationSize=1, 
	sequenceName="person_seq", name="person_seq")
	@GeneratedValue (generator="person_seq", strategy=GenerationType.AUTO)
	@Column (nullable=false)
	private Integer code;
	private String name;
	private String email;
	private String phone;
	private String cell;

	public Integer getCode() {
		return code;
	}

	public void setCode(Integer code) {
		this.code = code;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

	public String getPhone() {
		return phone;
	}

	public void setPhone(String phone) {
		this.phone = phone;
	}

	public String getCell() {
		return cell;
	}

	public void setCell(String cell) {
		this.cell = cell;
	}
}

Listagem 7. Bean do dom�nio

Para efetuar as funcionalidades de transa��o com o banco de dados, ser� utilizada a interface PersonRepository contendo as assinaturas dos m�todos de transa��o.


package br.com.domain;
public interface PersonRepository {
	public void save(Person person);
	public void update(Person person);
	public Person findById(int id);
	public void delete(Person person);
}

Listagem 8. Interface contendo assinaturas dos m�todos de persist�ncia

O JPA utilizado na aplica��o cont�m o arquivo persistence.xml obrigatoriamente contido na pasta WEB-INF dentro de SRC do projeto.


<?xml version="1.0" encoding="UTF-8"?>
<persistence version="2.0" 
xmlns="http://java.sun.com/xml/ns/persistence" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://java.sun.com/xml/ns/persistence 
http://java.sun.com/xml/ns/persistence/persistence_2_0.xsd">
  <persistence-unit name="JPAUnit">
      
    <class>br.com.domain.Person</class>
    
    <properties>
      <property name="hibernate.dialect" 
      value="org.hibernate.dialect.PostgreSQLDialect"/>
      <property name="hibernate.connection.url" 
      value="jdbc:postgresql://localhost:5432/persondb"/>
      <property name="hibernate.connection.driver_class" 
      value="org.postgresql.Driver"/>
      <property name="hibernate.connection.password" value="123456"/>
      <property name="hibernate.connection.username" value="postgres"/>
      <property name="hibernate.hbm2ddl.auto" value="update"/>
    </properties>
  </persistence-unit>
</persistence>

Listagem 9. Persistence.xml

Para efetuar a conex�o com o banco de dados � preciso criar uma f�brica de conex�es que inicia a transa��o com o banco.


package br.com.database;

import javax.persistence.EntityManager;
import javax.persistence.EntityManagerFactory;
import javax.persistence.Persistence;
import org.hibernate.Session;

public class ConnectionFactory {
	private static EntityManagerFactory emf = Persistence
			.createEntityManagerFactory("JPAUnit");
	private static EntityManager entityManager;

	public static EntityManager getEntityManager() {
		entityManager = emf.createEntityManager();
		return entityManager;
	}

	public static Session getSession() {
		return (Session) entityManager.getDelegate();
	}
}

Listagem 10. Classe de conex�o com banco de dados

Para implementar a interface que cont�m as assinaturas dos m�todos de persist�ncia e utilizar a f�brica de transa��es, ser� preciso criar a classe que implementa a interface PersonRepository, que ir� conter a l�gica de persist�ncia.


package br.com.database.impl;

import javax.persistence.EntityManager;
import br.com.database.ConnectionFactory;
import br.com.domain.Person;
import br.com.domain.PersonRepository;

public class PersonRepositoryImpl implements PersonRepository{

	private EntityManager em;
	
	public PersonRepositoryImpl() {
		em = ConnectionFactory.getEntityManager();
	}
	
	@Override
	public void save(Person person) {
		em.getTransaction().begin();
		em.persist(person);
		em.getTransaction().commit();
		em.close();
	}

	@Override
	public void update(Person person) {
		// TODO Auto-generated method stub
	}
	@Override
	public Person findById(int id) {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public void delete(Person person) {
		// TODO Auto-generated method stub
	}
}

Listagem 11. Classe para implementar PersonRepository

O m�tod save() recebe um objeto Person, inicia a transa��o com o banco de dados e persiste o objeto, logo ap�s a transa��o com o banco � finalizada.

Cria��o de tela de cadastro com o GXT

Ap�s toda a l�gica de neg�cios estar criada, � preciso exportar a aplica��o de dom�nio para dentro da pasta lib da aplica��o web, a pasta lib pode ser encontrada dentro da pasta WEB-INF contida na pasta war do projeto.

A cria��o da interface gr�fica no GXT pode ser feita utilizando c�dgio Java, para isso ser�o necess�rios a biblioteca do GXT, o �gxt-2.2.5-gwt22.jar� e o �gwt-servlet.jar�. Ao criar o projeto exemplo do GXT, a classe conhecida como EntryPoint � criada automaticamente, essa classe � utilizada para ser o ponto de partida da aplica��o, � uma esp�cie de main da aplica��o, essa classe implementa a interface EntryPoint, que cont�m o m�todo onModuleLoad(), � necess�rio tamb�m criar pelo menos um m�dulo para que a aplica��o seja executada com sucesso, o m�dulo � um arquivo xml criado no pacote principal do projeto, onde cont�m o link das bibliotecas que ser�o utilizadas na aplica��o.


<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='gwtproj'>
	<!-- Inherit the core Web Toolkit stuff.                        -->
	<inherits name='com.google.gwt.user.User'/>

	<!-- Inherit the default GWT style sheet.  You can change       -->
	<!-- the theme of your GWT application by uncommenting          -->
	<!-- any one of the following lines.                            -->
	<inherits name='com.google.gwt.user.theme.clean.Clean'/>
	<inherits name="com.google.gwt.resources.Resources" />
	<inherits name="com.google.gwt.http.HTTP" />
	<inherits name="com.extjs.gxt.ui.GXT" />
	<!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
	<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
	<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->

	<!-- Other module inherits                                      -->

	<!-- Specify the app entry point class.                         -->
	<entry-point class='br.com.client.GWTProj'/>

	<!-- Specify the paths for translatable code                    -->
	<source path='client'/>
	<source path='shared'/>

</module>

Listagem 12. Criando o M�dulo


package br.com.client;

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

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class GWTProj implements EntryPoint {

	@Override
	public void onModuleLoad() {
		RootPanel.get().add(new PessoaView());
	}
}

Listagem 13. Classe EntryPoint

A classe RootPanel cont�m os m�todos get() e add() est�ticos e s�o utilizados para receber uma inst�ncia de qualquer objeto que estenda um UIObject, e assim poder renderizar a tela.


package br.com.client;

import br.com.client.application.PersonApplication;
import br.com.client.application.PersonApplicationAsync;
import br.com.client.domain.PersonG;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.AsyncCallback;

public class PessoaView extends Window{

	private PersonApplicationAsync app = GWT.create(PersonApplication.class);
	
	private TextField<String> fieldName = new TextField<String>();
	private TextField<String> fieldEmail = new TextField<String>();
	private TextField<String> fieldPhone = new TextField<String>();
	private TextField<String> fieldCell = new TextField<String>();
	
	private PersonG person;
	
	private Button btSave = new Button("Salvar");
	
	private FormPanel fp = new FormPanel();
	public PessoaView() {
		setHeading("Incluir Pessoa");
		setMinimizable(false);
		setSize(350, 175);
		configure();
		configureBtSave();
	}
	
	private void configure(){
		fp.setHeaderVisible(false);
		fieldName.setFieldLabel("Nome");
		fp.add(fieldName);
		
		fieldEmail.setFieldLabel("Email");
		fp.add(fieldEmail);
		
		fieldPhone.setFieldLabel("Fixo");
		fp.add(fieldPhone);
		
		fieldCell.setFieldLabel("Celular");
		fp.add(fieldCell);
		add(fp);
		
		fp.add(btSave);
		add(fp);
		layout();
	}
	
	private PersonG getPerson(){
		person = new PersonG();
		
		person.setName(fieldName.getValue());
		person.setEmail(fieldEmail.getValue());
		person.setPhone(fieldPhone.getValue());
		person.setCell(fieldCell.getValue());
		return person;
	}
	
	private void configureBtSave(){
		btSave.addListener(Events.OnClick, new Listener<ButtonEvent>() {

			@Override
			public void handleEvent(ButtonEvent be) {
				app.save(getPerson(), new AsyncCallback<Void>() {
					
					@Override
					public void onSuccess(Void result) {
						Info.display("Sucesso","");
					}
					
					@Override
					public void onFailure(Throwable caught) {
						Info.display("Falha","");
					}
				});
			}
		});
	}
}

Listagem 14. Criando o layout

Por fim a interface gr�fica ser� criada utilizando os componentes da biblioteca do GXT, componentes como TxtField, que cria uma caixa de texto contendo um Label e um Button, que cria um bot�o que receber� as a��es da tela. O FormPanel � utilizado para alinhar os componentes dentro de um formul�rio, contendo um tamanho configur�vel em pixels e uma barra de t�tulos, por a classe estender de Window, o m�todo setHeading() inclui um t�tulo na janela.

Ap�s executar a aplica��o a tela de cadastro ser� exibida e estar� pronta para persistir um objeto do tipo Person. Ap�s mandar executar a aplica��o um link ser� gerado.

Conclus�o

Desenvolver aplica��es utilizando o framework GXT foi um salto e tanto para o desenvolvimento utilizando a linguagem Java, dessa forma podem ser utilizado v�rios outros frameworks para auxiliar na execu��o de uma aplica��o robusta como por exemplo o Spring, dessa forma pode-se construir aplica��es ricas para a web diminuindo o esfor�o e seguindo todos os padr�es de engenharia de software.

Tecnologias:

Confira outros conte�dos:

Introdu��o ao JDBC

Novidades do Java

Teste unit�rio com JUnit

Assista grátis a nossa aula inaugural

Perguntas frequentes

Quem somos?

Por que a programação se tornou a profissão mais promissora da atualidade?

Como faço para começar a estudar?

Em quanto tempo de estudo vou me tornar um programador?

Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!

O que eu irei aprender estudando pela DevMedia?

Principais diferenciais da DevMedia

Qual o investimento financeiro que preciso fazer para me tornar um programador?

Como funciona a forma de pagamento da DevMedia?

Por Yrineu Em 2012

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso

Desenvolvendo aplica��es Java com os frameworks GWT e GXT

Veja neste artigo como desenvolver aplica��es na linguagem Java, utilizando os frameworks GXT da Sencha e GWT (Google Web Toolkit), persistindo os dados em um banco PostgreSQL.