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 web.xml serão analisadas ao longo do artigo.)

Listagem 1 web.xml.

<?xml version=”1.0” encoding=”UTF-8”?>

<web-app ...>

   <!-- Configuração do JSF -->

"

ATENÇÃO! A exibição deste artigo foi interrompida.

  Este é um post disponível para assinantes MVP

Este post também está disponível para assinantes da Java Magazine DIGITAL ou para quem possui Créditos DevMedia.  Clique aqui para saber mais!

Saiba como acessar este post através de Créditos DevMedia:

Assinatura de Créditos – Aqui este post custa R$ 1,47
Com esse plano você compra R$ 180,00 em créditos e ganha, em média, 80% de desconto no preço do post.  
Assine agora

Plano ocasional - Aqui este post custa: R$ 1,96 (assinante) ou R$ 2,45 (não-assinante)
Você compra um mínimo de R$ 60,00 em créditos e ganha, em média, 50% de desconto no preço do post.  
Compre agora

Plano conveniência – Neste plano este post custa R$ 4,90
Neste plano você compra somente um post, pagando seu preço sem desconto.  
Compre agora