Artigo Java Magazine 64 - Conhecendo o GWT-Ext

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;

3.     Abrir uma janela de interpretador de linha de comandos a partir do diretório ExemploGWTExt e criar a estrutura do projeto eclipse utilizando o toolkit através do seguinte comando:

        GWT_HOME/projectCreator –eclipse ExemploGWTExt

Nesse ponto, são criados os arquivos de configuração de projeto eclipse, .classpath, .project, e os diretórios src e test;

4.     No mesmo diretório ExemploGWTExt, gerar os arquivos iniciais necessários para uma aplicação GWT através do seguinte comando:

        GWT_HOME/applicationCreator –eclipse ExemploGWTExt exemplogwtext.client.ExemploGWTExt

O primeiro parâmetro consiste no nome do projeto e o segundo corresponde ao nome completo da classe principal da aplicação. Nesse momento são criados os seguintes pacotes e arquivos:

·         src/exemplogwtext/client: Esse pacote deve conter todas as classes que irão rodar na parte cliente da aplicação; ...