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