RichFaces - DragSupport e DropSupport - Exemplo funcional

Boa noite,

Gostaria de postar um exemplo funcional, inspirado do http://livedemo.exadel.com, onde utilizo rich:dragSupport e rich:dropSupport, ou seja, arrastando componentes de um panel para outro.
Quem não conhece pode ajudar e todos, criticar.

Uso:
Versão do produto: NetBeans IDE 6.8 (Build 200912041610)
Java: 1.6.0_07; Java HotSpot™ Client VM 10.0-b23
Sistema: Windows Vista versão 6.0 executando em x86; Cp1252; pt_BR (nb)
Apache Tomcat 6.0.20

Arquivo: drop.jsp (uso: *.jsf no web.xml)

<%@page contentType="text/html" pageEncoding="windows-1252"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="rich" uri="http://richfaces.org/rich" %>
<%@taglib prefix="a4j" uri="http://richfaces.org/a4j"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<f:view>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
            <title>JSP Page</title>
        </head>
        <body>
            <rich:dragIndicator id="indicator" />

            <h:form id="form">
                <h:panelGrid columns="2" id="panelGlobal">
                    <rich:panel style="width:400px">
                        <f:facet name="header">
                            <h:outputText value="Usuários"/>
                        </f:facet>
                        <rich:dataTable id="src" value="#{usuariosDragBean.usuariosDragList}" var="usuarios" width="300px"
                                        columns="2">
                            <rich:column sortBy="#{usuarios.nomeUsuario}">
                                <f:facet name="header">
                                    <h:outputText value="Nome"/>
                                </f:facet>                                
                                <rich:dragSupport dragIndicator=":indicator" dragType="usuarios"
                                                  dragValue="#{usuarios}" 
                                                  dragListener="#{usuariosDragBean.processDrag}"
                                                  reRender="src, droped">
                                        <rich:dndParam name="label" value="#{usuarios.nomeUsuario}" />                                        
                                </rich:dragSupport>
                                <h:outputText value="#{usuarios.nomeUsuario}"/>                                
                            </rich:column>
                        <rich:column>
                            <f:facet name="header">
                                <h:outputText value="CPF"/>
                            </f:facet>                                                            
                            <h:outputText value="#{usuarios.cpfUsuario}"/>
                        </rich:column>
                        </rich:dataTable>
                        <rich:column>
                            <rich:panel>
                                <f:facet name="header">
                                    <h:outputText value="Zona Drop"/>
                                </f:facet>                                
                                <rich:dropSupport id="usuariosDrop" acceptedTypes="usuarios" 
                                                  typeMapping="{usuarios:text_for_accepting}"
                                                  reRender="src">
                                    <rich:dndParam name="text_for_accepting" value=">>>"/>
                                </rich:dropSupport>
                                <rich:dataTable id="droped" value="#{usuariosDragBean.usuariosDropList}" var="usuariosDrop"
                                                width="300px" columns="2" >
                                    <rich:column sortBy="#{usuariosDrop.nomeUsuario}">
                                        <f:facet name="header">
                                            <h:outputText value="Nome"/>
                                        </f:facet>
                                        <h:outputText value="#{usuariosDrop.nomeUsuario}"/>
                                    </rich:column>
                                    <rich:column>
                                        <f:facet name="header">
                                            <h:outputText value="CPF"/>
                                        </f:facet>
                                        <h:outputText value="#{usuariosDrop.cpfUsuario}"/>
                                    </rich:column>
                                    <f:facet name="footer">
                                        <a4j:commandButton action="#{usuariosDragBean.reset}" value="Reset"
                                               reRender="src, droped"/>
                                    </f:facet>
                                </rich:dataTable>
                            </rich:panel>
                        </rich:column>
                    </rich:panel>
                </h:panelGrid>
            </h:form>
        </body>
    </html>
</f:view>

Classe: UsuariosDrag.java

package org.drag;
public class UsuariosDrag {
    private String cpfUsuario;
    private String nomeUsuario;

    public UsuariosDrag() {}

    public UsuariosDrag(String cpfUsuario, String nomeUsuario) {
        this.cpfUsuario = cpfUsuario;
        this.nomeUsuario = nomeUsuario;
    }
    //Getters e setters omitidos    
}

Classe: UsuariosDragBean.java

package org.drag;
import java.util.ArrayList;
import java.util.List;
import javax.faces.model.DataModel;
import javax.faces.model.ListDataModel;
import org.richfaces.event.DragEvent;
import org.richfaces.event.DropEvent;

public class UsuariosDragBean implements org.richfaces.event.DragListener, org.richfaces.event.DropListener {
    private List<UsuariosDrag> usuariosDragList = new ArrayList<UsuariosDrag>();
    private List<UsuariosDrag> usuariosDropList = new ArrayList<UsuariosDrag>(); 
    //private DataModel dataModelUsuariosDrag;

    public void processDrop(DropEvent de) {
        throw new UnsupportedOperationException("Nesse exemplo não implementado");
    }

    public void processDrag(DragEvent de) {
        UsuariosDrag usuarios = (UsuariosDrag)de.getDragValue();        
        this.usuariosDropList.add(usuarios);
        this.usuariosDragList.remove(usuarios);
    }

    public void reset() {
        this.usuariosDropList.clear();
        this.usuariosDragList.clear();
        inicialize();
    }

    public void inicialize() {
        UsuariosDrag uDrag = new UsuariosDrag("[telefone removido]", "James Bond");
        this.usuariosDragList.add(uDrag);
        uDrag = new UsuariosDrag("[telefone removido]", "Bruce Wayne");
        this.usuariosDragList.add(uDrag);
        uDrag = new UsuariosDrag("[telefone removido]", "Bach");
        this.usuariosDragList.add(uDrag);
    }
 
    public UsuariosDragBean() {
        this.inicialize();
        //Usei lista para facilitar, pode ser tranquilamente de um banco.
    }

    //Getters e setters omitidos    
}

Lembrando de inserir no faces-config.xml

<managed-bean>
        <managed-bean-name>usuariosDragBean</managed-bean-name>
        <managed-bean-class>org.drag.UsuariosDragBean</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
    </managed-bean>

Não sou exatamente um expert do fórum, mas espero ter ajudado.
Se alguém fizer alguma pergunta para mim não sei quando poderei responder, estou no meio do nada e amanhã tem trabalho.

Abraços,
James

Topicos relacionados