Artigo Java Magazine 64 - Conhecendo o GWT-Ext

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (2)

Artigo da Revista Java Magazine Edição 64.

Esse artigo faz parte da revista Java Magazine edição 64. Clique aqui para ler todos os artigos desta edição

Conhecendo o GWT-Ext

Como criar uma interface web rica

Utilize o poder dessa biblioteca de componentes para gerar interfaces web ricas escrevendo apenas código Java

De que se trata o artigo:

O artigo apresenta a biblioteca GWT-Ext e demonstra o desenvolvimento de uma aplicação de exemplo, apresentando através de um CRUD o potencial da biblioteca.

Para que serve:

Este artigo serve para mostrar a utilização da biblioteca GWT-Ext de maneira simples e produtiva, facilitando a vida do desenvolvedor na criação de aplicações web com interface rica utilizando apenas código Java.

Em que situação o tema é útil:

Para o desenvolvimento de aplicações web com interfaces ricas e interativas é necessária a utilização de uma diversidade de tecnologias, como JavaScript, DHTML Ajax, etc. dificultando assim a vida do desenvolvedor, que precisa conhecer várias linguagens, trabalhar com as diferentes sintaxes e limitações de cada uma delas. O GWT-Ext permite a criação de interfaces ricas e interativas utilizando apenas a linguagem Java, propondo uma maior produtividade e oferecendo um conjunto amplo de componentes sofisticados advindos do ExtJS e a facilidade da programação para a geração desses componentes advindos do GWT.

 

Conhecendo o GWT-Ext:

A biblioteca GWT-Ext consiste na integração das tecnologias GWT e ExtJS, proporcionando uma poderosa biblioteca de widgets que provê ricos componentes de interface, tais como: grids com ordenação, paginação e filtro; árvores com suporte a drag and drop; comboboxes altamente customizáveis; tab panels; menus; tollbars; forms; entre outros. O GWT consiste em um conjunto de ferramentas open source que permitem aos desenvolvedores criarem aplicações Ajax na linguagem Java. O ExtJS, por sua vez, é uma biblioteca de JavaScripts para a criação de componentes de interface web com alta interatividade. GWT apenas, não oferece um conjunto de componentes tão amigáveis quanto os oferecidos pelo ExtJS, enquanto este necessita que o desenvolvedor conheça outra linguagem além do Java para a construção de aplicações. O GWT-Ext surge como um meio de se criar componentes tão ricos como os apresentados pelo ExtJS usando apenas linguagem Java como proposto pelo GWT.

 

O desenvolvimento de aplicações web sempre teve como vantagem principal a independência do cliente para a interação com o sistema. Máquinas clientes com os mais diversos tipos de configurações são beneficiadas pelo processamento no servidor, servindo apenas como ponto de interação com o usuário final das aplicações. À medida que esse tipo de desenvolvimento foi se difundindo e novas tecnologias foram surgindo, usuários e desenvolvedores passaram a ficar mais exigentes e seletivos no desejo de criar interfaces mais ricas. Porém, não era possível construir tais interfaces utilizando apenas a linguagem de programação empregada no sistema, ou seja, era necessário uma linguagem para desenvolvimento e outras para criação de layout, como JavaScript, HTML, DHTML, Flash, etc. O surgimento do Ajax (Asynchronous JavaScript And XML) permitiu a criação de páginas mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações e iniciando assim uma nova geração de aplicações web.

A partir daí novas bibliotecas surgiram para melhorar a interatividade do usuário utilizando Ajax. Uma delas é o ExtJS, uma biblioteca JavaScript open source para construção de aplicações web ricas com interfaces gráficas sofisticadas e com alto grau de interatividade com o usuário. O ExtJS é detalhado no artigo: Introdução ao Framework ExtJS (Edição 60).

Outra solução foi o GWT (Google Web Toolkit), um conjunto de ferramentas open source que permitem aos desenvolvedores criarem aplicações Ajax na linguagem Java. O compilador GWT traduz código Java para um JavaScript equivalente, que manipula programaticamente o HTML no web browser usando técnicas de DHTML. O GWT trouxe uma grande facilidade para os desenvolvedores Java que normalmente brigavam com o JavaScript para desenvolver interfaces ricas no lado cliente. Outras vantagens de usar a linguagem Java pelo GWT é que ele proporciona um código melhor estruturado, além de facilitar o desenvolvimento RPC cliente-servidor para Java, e ainda elimina a necessidade de bibliotecas como DWR (Direct Web Remoting) para construir pontes entre o serviço Java e os clientes JavaScript. Como desvantagem, o GWT não possui um conjunto de componentes sofisticados como o ExtJS. Para saber mais sobre GWT leia o artigo: Ajax avançado com GWT (Edição 39).

Em junho de 2007, Sanjiv Jivan propôs no seu blog a integração do GWT e ExtJS. Seu objetivo é permitir que desenvolvedores Java possam criar interfaces web ricas como as do ExtJS usando apenas a linguagem Java, como proposto pelo GWT. Dessa forma, foi criada a biblioteca GWT-Ext, uma poderosa biblioteca de widgets que provê ricos componentes de interface, tais como grids com ordenação, paginação e filtro, árvores com suporte a drag and drop, comboboxes altamente customizáveis, tab panels, menus, tollbars, forms e muitos outros componentes poderosos com uma API muito fácil de usar. Além disso, é possível construir portlets facilmente, fazer integração com mapas (utilizando o google maps) e ainda a integração com gráficos (utilizando o google charts).

A versão mais atual do GWT-Ext é a 2.0.5, lançada em setembro de 2008. Ela utiliza o ExtJS na versão 2.0.2 e o GWT na versão 1.5.2. A Figura 1 ilustra a diversidade de componentes oferecidos pela biblioteca apresentados no ShowCase Demo da biblioteca.

 

Figura 1. Vários tipos de widgets disponíveis para o GWT-Ext.

Desenvolvendo uma aplicação

Para ilustrar o uso da biblioteca GWT-Ext apresentaremos um exemplo que consiste em um sistema de controle de pessoal para uma empresa multinacional. Iremos ilustrar o módulo de cadastro de funcionários através das operações CRUD. A idéia é mostrar o potencial da biblioteca através da utilização dos seguintes componentes:

  • BorderLayout: Utilizado na organização do layout da aplicação, disponibilizando o painel de título no norte, a barra de status no sul, o painel de menu na esquerda e o painel de informação no centro;
  • TreePanel: Presente na construção da árvore com os menus da aplicação;
  • GridPanel: Grid contendo a lista de funcionários de acordo com o país selecionado no menu. Esse grid já contém implicitamente um mecanismo de ordenação;
  • Window: Janela que contém o formulário de criação e atualização de funcionário;
  • FormPanel: Formulário com os campos para inserir e atualizar funcionários na aplicação.

 

Além da utilização dos componentes visuais propriamente ditos, apresentaremos também alguns recursos adicionais da biblioteca, como: preenchimento automático de formulário a partir de um registro selecionado no grid e validação de campos do formulário no cliente.

Nossa proposta principal é demonstrar os componentes visuais da biblioteca. Com isso, toda implementação de acesso ao serviço remoto e persistência de dados está fora do escopo de nosso exemplo.

 

Figura 2. Tela da aplicação exemplo.

  O exemplo ilustrado na  Figura 2 apresenta um menu lateral de funcionários da multinacional por país. Ao clicar em um país, o grid apresenta os funcionários a este associado. Logo acima do grid foi adicionado um toolbar contendo os botões de criação, atualização e exclusão de funcionários. Para atualização e exclusão é necessária a seleção de uma linha no grid. A Figura 3 ilustra o painel de formulário para a criação e atualização de um funcionário. Note que o visual da aplicação se aproxima bastante de uma aplicação desktop.

 

Figura 3. Formulário para criação e atualização de funcionário.

Criando o projeto GWT

Vamos agora apresentar um passo-a-passo de como criar um projeto GWT no eclipse. Após a criação do projeto o desenvolvedor estará apto a implementar a solução e executá-la utilizando o ambiente do eclipse.

1.     Baixar do site oficial do projeto, a distribuição binária mais recente do GWT e descompactá-la em qualquer diretório, que será referenciado daqui para frente como GWT_HOME (ver o endereço do GWT em Links);

2.     Criar a pasta ExemploGWTExt. Ela será utilizada posteriormente para armazenar todo o conteúdo do projeto GWT;

"

A exibição deste artigo foi interrompida :(
Este post está disponível para assinantes MVP

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?