Problem with Statusimage of dragIndicator

[thoemmes86]

Hallo!

I have a small problem with the dragIndicator of Richfaces.
The Drag and Drop funktion works fine but i want so see a Statusimage when I move to the finishdatatable. In the example of richfaces it works fine but in my application...

Here you can see my dragIndicator code i don't know why there is no image shown.

<htm:table width="100%" rendered="#{FoBean.MKonfigurationsManager.portalHeute}">
 <htm:tr>
 <htm:br/>
 <htm:td width="1px" colspan="3">
 <h:outputText value="#{language.modulaufbauVonPortalHeute}:" styleClass="TextLabelFo" style="font-weight:bold"/>
 </htm:td>
 </htm:tr>
 <htm:tr>
 <htm:td rowspan="3" width="1px" valign="top">
 <rich:dragIndicator id="indicator">
 <f:facet name="accept">
 <h:graphicImage value="/images/animationen/iwm_process.gif"/>
 </f:facet>
 <f:facet name="reject">
 <h:graphicImage value="/images/animationen/iwm_stoped.gif"/>
 </f:facet>
 <f:facet name="default">
 <h:graphicImage value="/images/animationen/iwm_stoped.gif"/>
 </f:facet>
 </rich:dragIndicator>

 <rich:panel style="width:200px">
 <f:facet name="header">
 <h:outputText value="Module" />
 </f:facet>
 <h:dataTable id="src" value="#{FoBean.MKonfigurationsManager.konfigBean.MAPortalHeuteBereiche}" var="fm" >
 <h:column>
 <a4j:outputPanel style="border:1px solid gray;padding:2px;" layout="block">
 <rich:dragSupport dragIndicator="indicator" dragType="#{fm.MSDragType}" dragValue="#{fm.MSDragValue}">
 <a4j:actionparam value="#{fm.MSDragValue}" name="dragValue"/>
 </rich:dragSupport>
 <h:outputText value="#{fm.MSLabel}" styleClass="TextLabelFo"></h:outputText>
 </a4j:outputPanel>
 </h:column>
 </h:dataTable>
 </rich:panel>
 <a4j:commandButton action="#{FoBean.MKonfigurationsManager.resetPortalHeuteModule}" value="reset" styleClass="ButtonStyle" reRender="src,topTable,leftTable,rightTable,bottomTable" />
 </htm:td>
 <htm:td colspan="2" valign="top" align="center">
 <rich:panel id="top" style="width:100%">
 <f:facet name="header">
 <h:outputText value="TOP" />
 </f:facet>
 <rich:dropSupport acceptedTypes="PHModul" dropValue="top" dropListener="#{FoBean.MKonfigurationsManager.addTopTable}" reRender="topTable, src">
 <rich:dndParam name="dragging">
 <h:graphicImage value="/images/animationen/iwm_process.gif"/>
 </rich:dndParam>
 </rich:dropSupport>

 <h:dataTable id="topTable" value="#{FoBean.MKonfigurationsManager.konfigBean.MAPortalHeuteBereicheTop}" var="fm">
 <h:column>
 <h:outputText style="text-align:center" value="#{fm.MSLabel}" styleClass="TextLabelFo"></h:outputText>
 </h:column>
 </h:dataTable>
 </rich:panel>
 </htm:td>
 </htm:tr>
 <htm:tr>
 <htm:td align="center" valign="top">
 <rich:panel id="left" style="width:100%">
 <f:facet name="header">
 <h:outputText value="LEFT" />
 </f:facet>
 <rich:dropSupport acceptedTypes="PHModul" dropValue="left" dropListener="#{FoBean.MKonfigurationsManager.addLeftTable}" reRender="leftTable, src">
 <rich:dndParam name="dragging">
 <h:graphicImage value="/images/animationen/iwm_process.gif"/>
 </rich:dndParam>
 </rich:dropSupport>

 <h:dataTable id="leftTable" value="#{FoBean.MKonfigurationsManager.konfigBean.MAPortalHeuteBereicheLeft}" var="fm">
 <h:column>
 <h:outputText style="text-align:center" value="#{fm.MSLabel}" styleClass="TextLabelFo"></h:outputText>
 </h:column>
 </h:dataTable>
 </rich:panel>
 </htm:td>
 <htm:td align="center" valign="top">
 <rich:panel id="right" style="width:100%">
 <f:facet name="header">
 <h:outputText value="RIGHT" />
 </f:facet>
 <rich:dropSupport acceptedTypes="PHModul" dropValue="right" dropListener="#{FoBean.MKonfigurationsManager.addRightTable}" reRender="rightTable, src">
 <rich:dndParam name="dragging">
 <h:graphicImage value="/images/animationen/iwm_process.gif"/>
 </rich:dndParam>
 </rich:dropSupport>

 <h:dataTable id="rightTable" value="#{FoBean.MKonfigurationsManager.konfigBean.MAPortalHeuteBereicheRight}" var="fm">
 <h:column>
 <h:outputText style="text-align:center" value="#{fm.MSLabel}" styleClass="TextLabelFo"></h:outputText>
 </h:column>
 </h:dataTable>
 </rich:panel>
 </htm:td>
 </htm:tr>
 <htm:tr>
 <htm:td colspan="2" align="center" valign="top">
 <rich:panel id="bottom" style="width:100%">
 <f:facet name="header">
 <h:outputText value="BOTTOM" />
 </f:facet>
 <rich:dropSupport acceptedTypes="PHModul" dropValue="bottom" dropListener="#{FoBean.MKonfigurationsManager.addBottomTable}" reRender="bottomTable, src">
 <rich:dndParam name="dragging">
 <h:graphicImage value="/images/animationen/iwm_process.gif"/>
 </rich:dndParam>
 </rich:dropSupport>

 <h:dataTable id="bottomTable" value="#{FoBean.MKonfigurationsManager.konfigBean.MAPortalHeuteBereicheBottom}" var="fm">
 <h:column>
 <h:outputText style="text-align:center" value="#{fm.MSLabel}" styleClass="TextLabelFo"></h:outputText>
 </h:column>
 </h:dataTable>
 </rich:panel>
 </htm:td>
 </htm:tr>
</htm:table>

[nbelaevski]

Hello!

Can you see drag indicator? What does it show?

[thoemmes86]

I see an empty Box with the size of the Text which is draged

[sergeysmirnov]

empty box means the default indication. I.e. you did not point to your custom indicator correctly and the default appeared instead.
Did you have a h:form or f:subview around the top htm:table ?

[gvolpe]

I have same problem, I only see an empty box... The documentation of richfaces is very poor and source code of showcase not corresponding to view in almost all cases, for example, Drag 'n' Drop Showcase Demo.

Where is <facet> of <rich:dragIndicator> in showcase?

PD: Sorry for my bad English...

[ilya_shaikovsky]

1) defining facet "single"  you could redefine complete indicator. In that case you completely responsible for markup and styling

2) using just definition of indicator(without any facets inside) you could customize with dndparams(it accepts any inner html as value) using next predefined names :

• icons names:
  • accept - for state accept
  • reject - for state reject
  • default - object just dragged but not over drop zone
• label - for label part

E.g.

<dragSupport>

<dndparam name="accept">

     <h:graphicImage src="/cumstomimage.gif">

</dndparam>

<dndparam name="label">

     <b>drop me somewhere </b>

</dndparam>

</dragSupport>

customizes label and icon for accepted states.

[gvolpe]

Thanks for reply Ilya, I post my example source code, maybe you can help me...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
    <f:view>
        <rich:dragIndicator id="indicator1"/>
           
        <h:form id="frmTareas">
            <rich:dataTable value="#{TareasBean.tareas}" var="t" width="300px" columnClasses="center"
                            rows="10" reRender="ds">
                <f:facet name="header">
                    <h:outputText value="Tareas Abiertas"/>
                </f:facet>
               
                <rich:column filterBy="#{t.proyecto.nombre_proyecto}" filterEvent="onkeyup">
                    <f:facet name="header">
                        <h:outputText value="Proyecto"/>
                    </f:facet>
                    <h:outputText value="#{t.proyecto.nombre_proyecto}"/>                                        
                </rich:column>
                <rich:column filterBy="#{t.nombre_tarea}" filterEvent="onkeyup">                       
                    <f:facet name="header">
                        <h:outputText value="Tarea"/>
                    </f:facet>
                    <rich:dragSupport dragIndicator=":indicator1"
                                        dragType="nombre_tarea"
                                      dragValue="#{t.nombre_tarea}">
                        <f:param name="id_tarea" value="#{t.id_tarea}"/>
                        <rich:dndParam name="lblTarea" value="#{t.nombre_tarea}">
                            <b>VALOR</b>
                        </rich:dndParam>
                        <h:outputText value="#{t.nombre_tarea}"/>
                    </rich:dragSupport>                    
                </rich:column>
                <rich:column sortBy="#{t.estado}">
                    <f:facet name="header">
                        <h:outputText value="Estado"/>
                    </f:facet>
                    <h:outputText value="#{t.estado}"/>                                        
                </rich:column>
                <rich:column sortBy="#{t.usuario.nombre_usuario}">
                    <f:facet name="header">
                        <h:outputText value="Usuario Creador"/>
                    </f:facet>
                    <h:outputText value="#{t.usuario.nombre_usuario}"/>
                </rich:column>
                <rich:column>
                    <f:facet name="header">
                        <h:outputText value="Usuarios Participantes"/>
                    </f:facet>
                    <!-- Esto sería un for each -->
                    <a4j:repeat value="#{t.tareasPorUsuario}" var="u">
                        <h:outputText value="#{u.usuario.nombre_usuario}, "/>
                    </a4j:repeat>                    
                </rich:column>
               
                <f:facet name="footer">
                    <rich:datascroller id="ds" maxPages="5"></rich:datascroller>
                </f:facet>
            </rich:dataTable>
        </h:form>
    </f:view>
</html>

I only see an empty box without any text

Thanks.

Greetings.

[gvolpe]

Any idea?

[ilya_shaikovsky]

change name="lblTarea" to name="label"

[gvolpe]

Thanks Ilya! Now it's working!