4 Replies Latest reply on Jan 30, 2013 11:56 PM by sridhar89

Richfaces drag and drop not working

sridhar89 Jan 28, 2013 2:31 AM

I'm working on Rich faces 4. I am trying to use richfaces drag and drop component.

I am using

WELD,

JSF 2.0 as specifications.

when i am trying to use the Example program in my environment the dropListener is not working.

The code snippets this is not working

xhtml:

<rich:panel style="width:133px">

<f:facet name="header">

<h:outputText value="Source List" />

</f:facet>

<a4j:outputPanel layout="block">

<h:dataTable id="src" columns="1" value="#{dragDropBean.source}"

var="fm" footerClass="footerClass">

<h:column>

<a4j:outputPanel layout="block" styleClass="rf-ind-drag">

<rich:dragSource type="#{fm.family}" dragValue="#{fm}" />

<h:outputText value="#{fm.name}"></h:outputText>

</a4j:outputPanel>

</h:column>

<f:facet name="footer">

<a4j:commandButton action="#{dragDropBean.reset}"

value="Start Over" render="src,phptable,cftable,dnettable" />

</f:facet>

</h:dataTable>

</a4j:outputPanel>

</rich:panel>

<rich:panel style="width:133px">

<f:facet name="header">

<h:outputText value="Target List" />

</f:facet>

<a4j:outputPanel layout="block">

<a4j:outputPanel layout="block"

style="width:100px;height:100px; border: 1px solid;">

<rich:dropTarget acceptedTypes="@all" dropValue="PHP"

immediate="true" dropListener="#{dragDropEventBean.processDrop}"

render="phptable, src" />

<h:dataTable id="ssss" columns="1"

value="#{dragDropBean.targetPHP}" var="fm">

<h:column>

<h:outputText value="#{fm.name}"></h:outputText>

</h:column>

</h:dataTable>

</a4j:outputPanel>

</rich:panel>

DragDropEventBean.java

@Named

@ViewScoped

public class DragDropEventBean implements DropListener, Serializable {

/**

private static final long serialVersionUID = 7396109085314436722L;

@ManagedProperty(value = "#{dragDropBean}")

private DragDropBean dragDropBean;

public void setDragDropBean(DragDropBean dragDropBean) {

this.dragDropBean = dragDropBean;

}

public void processDrop(DropEvent event) {

dragDropBean.moveFramework((Framework) event.getDragValue());

}

but when i am putting the target in the same datatable it is atleast calling the drop listner but still that is throwing the null pointer exception that is :

xhtml :

<rich:panel style="width:133px">

<f:facet name="header">

<h:outputText value="Source List" />

</f:facet>

<a4j:outputPanel layout="block">

<h:dataTable id="src" columns="1" value="#{dragDropBean.source}"

var="fm" footerClass="footerClass">

<h:column>

<a4j:outputPanel layout="block" styleClass="rf-ind-drag">

<rich:dragSource type="#{fm.family}" dragValue="#{fm}" />

<h:outputText value="#{fm.name}"></h:outputText>

</a4j:outputPanel>

</h:column>

<h:column>

<a4j:outputPanel layout="block"

style="width:100px;height:100px;border: 1px solid;">

<rich:dropTarget acceptedTypes="@all" dropValue="PHP"

immediate="true"

dropListener="#{dragDropEventBean.processDrop}"

render="phptable, src" />

<h:dataTable id="phptable" columns="1"

value="#{dragDropBean.targetPHP}" var="fm">

<h:column>

<h:outputText value="#{fm.name}"></h:outputText>

</h:column>

</h:dataTable>

</a4j:outputPanel>

</h:column>

<h:column>

<a4j:outputPanel layout="block"

style="width:100px;height:100px; border: 1px solid;">

<rich:dropTarget acceptedTypes="@all" dropValue="PHP"

immediate="true"

dropListener="#{dragDropEventBean.processDrop}"

render="phptable, src" />

<h:dataTable id="ssss" columns="1"

value="#{dragDropBean.targetPHP}" var="fm">

<h:column>

<h:outputText value="#{fm.name}"></h:outputText>

</h:column>

</h:dataTable>

</a4j:outputPanel>

</h:column>

<f:facet name="footer">

<a4j:commandButton action="#{dragDropBean.reset}"

value="Start Over" render="src,phptable,cftable,dnettable" />

</f:facet>

</h:dataTable>

</a4j:outputPanel>

</rich:panel>

I don know why it is not calling when the target is diff panel then why it is dragDropBean is null in second case . Please help ?

1. Re: Richfaces drag and drop not working

jjamrich Jan 28, 2013 11:31 AM (in response to sridhar89)
Hi,
I tried simulate your issue, but without success.

Assume you modified richfaces showcase demo - DnD sample
I tried apply your modification you've posted above, (second case since you wrote it don't work for you).

Firstly, I'm not sure how exactly looks like rest of xhtml file (if there other richPanels [with "dropTargetPanel" styleClass] remained in xhtml file, or you removed them, since you moved dropTarget into table rows) - so I removed them for this problem simulation.

Second problem is that you use the same variable name for inner table (with droppins, id="phptable") as the enclosing table (with id="src") variable for rows ("fm").
So I renamed variable in inner table to "fmPHP"

Third problem: accepting @all causes strange behavior because dropListener impl move dropped item into list where belongs, but then it doesn't in output since both "target" columns just render "php" frameworks... so I added thirs column for CF framework and updated second column to show dotNet frameworks.

Next, inner tables with droppings doens't follow convention for ID, so then rerender is invoked on non-existing elements, so I renamed inner tables IDs as expected: phptable, cftable, dnettable. This fixed problem that dropped objects sometimes not appears in target lists.

At the end, I'm still not sure what your example shoud do, what is logic behind, because in common demo in RichFaces Showcase items from source list disappears from this list after sucesful drop. But in your example it don't disappears since it is created for every row... So this code snippet behave a little bit strange.

I was not able to simulate your problem.

Can you please provide full files which should replace existing to simulate it? Thanks

File with source code (my changes) attached.

dragDrop-sample.xhtml.zip 1.1 KB

1 of 1 people found this helpful
Actions
2. Re: Richfaces drag and drop not working

just-greg Jan 30, 2013 2:52 PM (in response to sridhar89)
I encountered something somewhat similar awhile back when using trees + dnd objects.

Try this before you go too much farther...
Add an 'execute' to your dropTarget that points to one of the dragSource objects(or their parents) it doesn't seem to actually matter which, just needs to trigger it.

I use something like this for mine(unneeded stuff removed).

{code:xml}
<rich:dropTarget acceptedTypes="loop segment" execute="loopPanelDragId @this"
        dropListener="#{tb.processDropMove}" render="@form"
      dropValue="#{item}"
    </rich:dropTarget>
{code}

and my source is something like:

{code:xml}
<a4j:outputPanel id="loopPanelDragId"   >

   <rich:dragSource type="loop" dragValue="#{item}" />
</a4j:outputPanel> {code}

Hope this helps (don't get me started on the drama with IE + Mojarra though! *heh*)

- Greg C
1 of 1 people found this helpful
Actions
3. Re: Richfaces drag and drop not working

healeyb Jan 30, 2013 5:50 PM (in response to just-greg)

Hi, I think the solution is to add explicit id= attributes to (can't remember) either the dragSource or the dropTarget. There will be a post
from me in here with more details.

Regards,
Brendan.
Actions
4. Re: Richfaces drag and drop not working

sridhar89 Jan 30, 2013 11:56 PM (in response to sridhar89)

Hi all ,

I revamped the whole page and changed my templete.xhtml . I was using <body> changing that to <h:body> . Also I was using Weld so i had some problem in INJECT bean.

Now I am able to drag and drop successfully . Thanks all for ur reply and timely help
1 of 1 people found this helpful
Actions

Go to original post