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

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 -->

   <servlet>

      <servlet-name>Faces Servlet</servlet-name>

      <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>

      <load-on-startup>1</load-on-startup>

   </servlet>

   <listener>

      <listener-class>

         org.apache.myfaces.webapp.StartupServletContextListener

      </listener-class>

   </listener>

 

   <!-- Configuração do RichFaces Filter -->

   <filter>

      <description>Rich Faces Filter</description>

...

Quer ler esse conteúdo completo? Tenha acesso completo