Drag and drop does not work with composite component

KingdomHeart · 05 Jul 2012, 15:24

I have a example of drag and drop from one dataTable to another dataTable. Without the composite component, the code works so I will not display that piece of code here. But when I use composite component, then the drag and drop does not work anymore. Here is the simple, concise, reproducible codes. Please take a look.

Here is the JSF code:

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ez="http://java.sun.com/jsf/composite/ezcomp">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form id="myForm">
            <ez:custom id="compositec" listOptions="#{myBean.sourceList}"/>
        </h:form>
        <h:form>
            <br/>
            <p:panel id="destContainer">
                <p:dataTable id="destList" value="#{myBean.destList}" var="item">
                    <p:column>
                        <h:outputText value="#{item}"/>
                    </p:column>            
                </p:dataTable>
                <p:droppable  tolerance="touch" activeStyleClass="ui-state-highlight"
                             datasource=":myForm:compositec:myTab:srcList" >
                    <p:ajax listener="#{myBean.onCarDrop}" update=":myForm:compositec:myTab:srcList destList" />
                </p:droppable>
            </p:panel>            
        </h:form>        
    </h:body>
</html>

Here is my composite component

Code: Select all

    <!-- INTERFACE -->
    <cc:interface>     
        <cc:attribute name="listOptions" />
    </cc:interface>

    <!-- IMPLEMENTATION -->
    <cc:implementation>
        <p:tabView id="myTab">
            <p:tab title="Tom">
                <p:dataTable id="srcList" value="#{cc.attrs.listOptions}" var="item">
                    <p:column>
                        <h:outputText id="dragIcon" styleClass="ui-icon ui-icon-arrow-4"/>
                        <p:draggable for="dragIcon" revert="true"/>
                    </p:column>
                    <p:column>
                        <h:outputText value="#{item}"/>                    
                    </p:column>
                </p:dataTable>
            </p:tab>
        </p:tabView>
    </cc:implementation>

Here is my ManagedBean

Code: Select all

@ManagedBean
@ViewScoped
public class MyBean implements Serializable {

    private List<String> sourceList;
    
    private List<String> destList;
    
    public MyBean() {
        
    }
    
    @PostConstruct
    public void init(){
        sourceList = new ArrayList<String>();
        destList = new ArrayList<String>();
        sourceList.add("Pasta");
        sourceList.add("Egg Roll");
        sourceList.add("Soup");
        sourceList.add("Beef Stew");
        sourceList.add("Fried Rice");        
    }

    public void onCarDrop(DragDropEvent ddEvent) {  
        String food = (String) ddEvent.getData();  
  
        destList.add(food);  
        sourceList.remove(food);  
    } 
    
    public List<String> getDestList() {
        return destList;
    }

    public void setDestList(List<String> destList) {
        this.destList = destList;
    }

    public List<String> getSourceList() {
        return sourceList;
    }

    public void setSourceList(List<String> sourceList) {
        this.sourceList = sourceList;
    }        
}

What funny is that in my composite component, if I bind directly using

Code: Select all

<p:dataTable id="srcList" value="#{myBean.sourceList}" var="item">

instead of

Code: Select all

<p:dataTable id="srcList" value="#{cc.attrs.listOptions}" var="item">

then the drag and drop work perfectly. It is definitely something to do with composite component binding. Please take a look

KingdomHeart · 06 Jul 2012, 15:19

Here is the submitted bug report: http://code.google.com/p/primefaces/iss ... il?id=4313

kukeltje · 06 Jul 2012, 16:19

have you tried a newer version of mojarra? I've eead there were some issues regarding cc's

KingdomHeart · 06 Jul 2012, 16:43

I use this maven entry

Code: Select all

<dependency>
            <groupId>javax.faces</groupId>
            <artifactId>javax.faces-api</artifactId>
            <version>2.1</version>
            <scope>provided</scope>
</dependency>

which is show on http://javaserverfaces.java.net/download.html

Should I use another maven entry?

KingdomHeart · 06 Jul 2012, 16:45

I actually I switch to this maven entry

Code: Select all

<dependency>
            <groupId>org.glassfish</groupId>
            <artifactId>javax.faces</artifactId>
            <version>2.1.10</version>
</dependency>

and the problem still persist

Drag and drop does not work with composite component

Who is online