9 Replies Latest reply on Oct 25, 2010 8:46 AM by Gabriel Volpe

    Problem with Statusimage of dragIndicator

    Alexander Thömmes Newbie

      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>


        • 1. Re: Problem with Statusimage of dragIndicator
          Nick Belaevski Master

          Hello!

          Can you see drag indicator? What does it show?

          • 2. Re: Problem with Statusimage of dragIndicator
            Alexander Thömmes Newbie

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

            • 3. Re: Problem with Statusimage of dragIndicator
              Sergey Smirnov Master

              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 ?

              • 4. Re: Problem with Statusimage of dragIndicator
                Gabriel Volpe Newbie

                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...

                • 5. Re: Problem with Statusimage of dragIndicator
                  Ilya Shaikovsky Master

                  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.

                   

                  • 6. Re: Problem with Statusimage of dragIndicator
                    Gabriel Volpe Newbie

                    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

                    emptyBox.PNG

                    Thanks.

                    Greetings.

                    • 8. Re: Problem with Statusimage of dragIndicator
                      Ilya Shaikovsky Master

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

                      • 9. Re: Problem with Statusimage of dragIndicator
                        Gabriel Volpe Newbie

                        Thanks Ilya! Now it's working!