Artigo Java Magazine 52 - Drag and Drop com JSF e Ajax

Drag and Drop com JSF e Ajax

Usando a biblioteca de componentes RichFaces

Até alguns anos atrás, por trás de uma aplicação web com drag and drop certamente havia um grande especialista em JavaScript. E mesmo com alguma “componentização” do códigoJavaScript em arquivos .js, o reuso, a manutenibilidadee o suporte de ferramentas era baixo, deixando operações simples como esta muito complexas no ambiente web. Mas com bibliotecas JSF e a tecnologia Ajax, esse problema se torna quase trivial. Veremos neste artigo como implementar drag and drop em aplicações web, utilizando componentes JSF da biblioteca RichFaces.

A aplicação de exemplo

Iremos construir uma aplicação onde será apresentada uma lista de cursos disponíveis, de onde o usuário poderá arrastar itens e soltá-los numa lista de cursos selecionados. Para desenvolver e executar o exemplo, vamos precisar instalar a biblioteca RichFaces e configurar o projeto para utilizar esta biblioteca. Depois vamos criar a camada de modelo da aplicação e declarar um managed bean. Concluímos o exemplo criando uma página JSP que implementa o drag and drop.

Para execução da aplicação, será necessário configurar o ambiente de desenvolvimento com o JDK 5.0 ou superior. Utilizamos o IDE NetBeans pela facilidade no manuseio de projetos web e também por já incluir a instalação do Tomcat, que será utilizado como host da aplicação. Mas é possível utilizar qualquer outro IDE, como o Eclipse (neste caso será necessário fazer download do container web à parte).Utilizamos também a implementação de JSF MyFaces (no lugar da implementação de referência da Sun).

Download e instalação direta

O pacote de download para este artigo, disponível no site da Java Magazine, contém todo o código-fonte do exemplo, quevoce pode usar para iniciar rapidamente. Descompacte o ZIP e abra o projetoutilizando o seu IDE (o projeto está prédefinido para NetBeans) e configure as bibliotecas necessárias para utilização do RichFaces e do MyFaces (estão todas na pasta lib do projeto).

Você pode também preparar o ambiente por conta própria, como mostramos a seguir.

RichFaces

Faça o download da biblioteca RichFaces (a versão mais recente no momento de escrita era richfaces-ui-3.1.2.GA-bin.zip) no site labs.jboss.com/jbossrichfaces/downloads. Trata-se apenas de um ZIP, com os JARs disponíveis na pasta lib. Descompacte em um diretório de sua preferência e configure estes três JARs no seu projeto no IDE: richfaces-api-3.1.2.GA.jar, richfaces-impl-3 .1.2.GA.jar e richfaces-ui-3.1.2.GA.jar.

MyFaces

Devemos fazer download do arquivo myfaces-1.1.x.zip, que está disponível no site myfaces.apache.org/download.html, e configurar as seguintes bibliotecas no projeto no IDE: commons-beanutils.jar, commons-codec.jar, commons-collections.jar, commons-digester-1.6.jar, commons-lang-2- .1.jar, myfaces-api.jar, myfaces-impl.jar.

Configurando o deployment descriptor

No arquivo web.xml temos que incluir o filtro do RichFaces para interceptar as requisições recebidas. Este filtro distingue requisições Ajax de requisições tradicionais. Veja na Listagem 1, na seção “Configuração do Richfaces”, a configuração desse filtro. (Outras partes do "