Drag&Drop problem
Hi !
I'm a new seam user and I'm having some trouble doing drag and drop stuff. I've already looked for old posts but found nothings. Here's the problem:
I have some servers (hot spots), which contain antennas (dongles) and I want to attach files to dongles. In my first approach, I did something like the following, and worked great:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
template="layout/template.xhtml">
<style>
.panelc {
width:25%;
vertical-align:top;
}
.dropTargetPanel {
width: 90%;
}
.footerClass {
text-align: center;
padding-top: 5px;
}
</style>
<ui:define name="body">
<rich:dragIndicator id="indicator" />
<h:form id="form">
<h:panelGrid columnClasses="panelc" columns="4" width="100%">
<rich:panel style="width:133px">
<f:facet name="header">
<h:outputText value="Source List" />
</f:facet>
<h:dataTable id="src" columns="1" value="#{fileList.resultList}"
var="_file" footerClass="footerClass">
<h:column>
<a4j:outputPanel style="width:100px;border:1px solid gray;padding:2px"
layout="block">
<rich:dragSupport dragIndicator=":indicator"
dragType="file" dragValue="#{_file}">
<rich:dndParam name="label" value="#{_file.name}" />
</rich:dragSupport>
<h:outputText value="#{_file.name}"></h:outputText>
</a4j:outputPanel>
</h:column>
</h:dataTable>
</rich:panel>
<h:dataTable id="servertable" columns="1" var="_server"
value="#{hotSpotList.resultList}">
<h:column>
<rich:panel styleClass="dropTargetPanel">
<f:facet name="header">
<h:commandLink value="#{_server.name}" action="#{fileAssignationBean.getDongles(_server.id)}" />
</f:facet>
<rich:dropSupport id="php" dropValue="#{_server}"
dropListener="#{fileAssignationBean.processDropServer}" acceptedTypes="file" reRender="dongletable">
</rich:dropSupport>
</rich:panel>
</h:column>
</h:dataTable>
<h:dataTable id="dongletable" columns="1" var="_dongle"
value="#{dongleList.resultList}">
<h:column>
<rich:panel styleClass="dropTargetPanel">
<f:facet name="header">
<h:outputText value="#{_dongle.name}" />
</f:facet>
<rich:dropSupport id="php" dropValue="#{_dongle}"
dropListener="#{fileAssignationBean.processDrop}" acceptedTypes="file" reRender="dongletable">
</rich:dropSupport>
<h:dataTable id="filetable" columns="1" value="#{_dongle.fileList}" var="_f">
<h:column>
<h:outputText value="#{_f.name}"></h:outputText>
<h:commandLink value="delete" action="#{fileAssignationBean.remove(_f.id, _dongle.id)}" />
</h:column>
</h:dataTable>
</rich:panel>
</h:column>
</h:dataTable>
</h:panelGrid>
</h:form>
<a4j:outputPanel ajaxRendered="true">
<h:messages></h:messages>
</a4j:outputPanel>
</ui:define>
</ui:composition>After that, I improved the view by showing each server with the dongles inside, using a rich panel and wrote the following:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
template="layout/template.xhtml">
<style>
.panelc {
width:25%;
vertical-align:top;
}
.dropTargetPanel {
width: 90%;
}
.footerClass {
text-align: center;
padding-top: 5px;
}
</style>
<ui:define name="body">
<rich:dragIndicator id="indicator" />
<h:form id="form">
<h:panelGrid columnClasses="panelc" columns="3" width="100%">
<rich:panel style="width:150px">
<f:facet name="header">
<h:outputText value="Source List" />
</f:facet>
<h:dataTable id="src" columns="1" value="#{fileList.resultList}"
var="_file" footerClass="footerClass">
<h:column>
<a4j:outputPanel style="width:100px;border:1px solid gray;padding:2px"
layout="block">
<rich:dragSupport dragIndicator=":indicator"
dragType="file" dragValue="#{_file}">
<rich:dndParam name="label" value="#{_file.name}" />
</rich:dragSupport>
<h:outputText value="#{_file.name}"></h:outputText>
</a4j:outputPanel>
</h:column>
</h:dataTable>
</rich:panel>
<h:panelGrid id="dongletablecontainer" columns="3" width="100%" columnClasses="tpanels,tpanels,tpanels">
<ui:repeat value="#{hotSpotList.resultList}" var="_server">
<rich:simpleTogglePanel opened="false" switchType="client" label="#{_server.name}" height="100px" width="500px">
<rich:panel styleClass="dropTargetPanel" id="serverdrop">
<rich:dropSupport dropValue="#{_server}"
dropListener="#{fileAssignationBean.processDropServer}" acceptedTypes="file" reRender="dongletablecontainer">
</rich:dropSupport>
<f:facet name="header" >
<h:outputText value="Todas las antenas de #{_server.name}"></h:outputText>
</f:facet>
</rich:panel>
<ui:repeat value="#{_server.dongleList}" var="_dongle">
<rich:panel styleClass="dropTargetPanel" id="#{_dongle.name}_dongleDrop" >
<f:facet name="header">
<h:outputText value="#{_dongle.name}" />
</f:facet>
<rich:dropSupport dropValue="#{_dongle}"
dropListener="#{fileAssignationBean.processDrop}" acceptedTypes="file" reRender="dongletablecontainer">
</rich:dropSupport>
<h:dataTable columns="3" value="#{_dongle.fileList}" var="_f">
<h:column>
<h:outputText value="#{_f.name}"></h:outputText>
<h:commandLink value="delete" action="#{fileAssignationBean.remove(_f.id, _dongle.id)}" />
</h:column>
</h:dataTable>
</rich:panel>
</ui:repeat>
</rich:simpleTogglePanel>
</ui:repeat>
</h:panelGrid>
</h:panelGrid>
</h:form>
<a4j:outputPanel ajaxRendered="true">
<h:messages></h:messages>
</a4j:outputPanel>
</ui:define>
</ui:composition>the problem resides in the
<h:commandLink value="delete" action="#{fileAssignationBean.remove(_f.id, _dongle.id)}" />where in the remove method I get the dongle id without any problem, but the file id is 0, I've also tried getting the whole file but it says it's null. What confuses me the most, is the fact the file list with their names are shown alright, so the file is not null in the xhtml...
I'll be looking for an answer.
Thanks in advance,
Ivan.