14 Replies Latest reply on Sep 1, 2009 7:17 AM by Ilya Shaikovsky

    Richfaces Drag and Drop component not working as advertised

    nmatrix nmatrix Newbie

      Hello JBoss,

      First I have a question for Max and his book "Practical RichFaces". Why did you (Max) exclude the drag and drop components out of your book?

      In addition to being one of the most mysterious it's also deceptively tricky to implement. For example:

      <h:form>
      <rich:panel id="panelusers">
      <f:facet name="header">Users list</f:facet>
      <h:outputText value="There are no Users associated with this UserRole."
      rendered="#{empty exoshellUsersList.resultList}"/>

      <rich:dataTable var="_exoshellUsers"
      value="#{exoshellUsersList.resultList}"
      rendered="#{not empty exoshellUsersList.resultList}"
      rowClasses="rvgRowOne,rvgRowTwo"
      id="exoshellUsersTable" rows="10">
      <rich:column>
      <f:facet name="header">Username</f:facet>
      <rich:dragSupport dragIndicator=":indicator" dragType="userId" dragValue="#{_exoshellUsers.userId}" ajaxSingle="true">
      <rich:dndParam name="label" value="user name: #{_exoshellUsers.username}"/>
      </rich:dragSupport>
      <h:outputText value="#{_exoshellUsers.username}"/>
      </rich:column>
      ...


      Drag and drop support in rich column in a rich faces datatable as shown above with drag type "userId" and dragValue #{_exoshellUsers.userId} that I want to drop in the dropSupport component destination.


      Now for the Drop component destination:


      <s:decorate id="userNamesIdDecoration" template="/layout/edit.xhtml">
      <ui:define name="label">User name</ui:define>
      ....

      <rich:panel id="userDrop2">
      <rich:dropSupport id="userDrop1" rendered="#{exoshellUsersList.resultList.size() ge 25}"
      acceptedTypes="userId" dropListener="#{usersDrop.processDrop}" reRender="userDropOutputLabel">
      </rich:dropSupport>

      <h:outputLabel id="userDropOutputLabel" value="drag and drop user name here" rendered="#{exoshellUsersList.resultList.size() ge 25}"/>
      <a:actionparam id="userDropParam" name="userDropParam" value="#{usersDrop.userId}"/>
      </rich:panel>

      <a:support event="onblur" reRender="userNamesIdDecoration"ajaxSingle="true"/>
      </s:decorate>



      And now for the userDrop class with the DropEvent Listener:


      package com.domain.exoshellcms.listeners;

      import java.util.Date;

      import javax.ejb.Stateful;
      import javax.faces.component.UIComponent;
      import javax.faces.component.html.HtmlOutputLabel;
      import javax.faces.context.FacesContext;
      import javax.persistence.EntityManager;

      import org.ajax4jsf.component.html.HtmlActionParameter;
      import org.jboss.seam.annotations.In;
      import org.jboss.seam.annotations.Logger;
      import org.jboss.seam.annotations.Name;
      import org.jboss.seam.log.Log;

      import org.richfaces.component.Dropzone;
      import org.richfaces.event.DropEvent;

      import com.domain.exoshellcms.entity.ExoshellUsers;

      @Name("usersDrop")
      public class UsersDrop implements org.richfaces.event.DropListener {

      @Logger
      private Log log;

      private Integer userId = null;

      private Date date;

      private String string;

      public String getString() {
      return string;
      }

      public void setString(String string) {
      this.string = string;
      }

      @In
      protected EntityManager entityManager;

      public void processDrop(DropEvent event) {
      event.getComponent();
      System.out.println("Process Drop called");
      /* Dropzone dropzone = (Dropzone) event.getComponent();
      this.userId = (Integer) dropzone.getDropValue();
      ExoshellUsers user = entityManager.find(ExoshellUsers.class, userId);
      UIComponent component = event.getComponent();
      component.getClass().getName();
      */
      //HtmlOutputLabel label = (HtmlOutputLabel)FacesContext.getCurrentInstance().getViewRoot().findComponent("userDropOutputLabel");
      this.string = "This string has changed";
      System.out.println("The labels value is : " + event.getDropValue());
      }

      public Date getDate() {
      return date = new Date();
      }

      public void setDate(Date date) {
      this.date = date;
      }

      public Integer getUserId() {
      return userId;
      }

      public void setUserId(Integer userId) {
      this.userId = userId;
      }

      }


      Despite Max's book, RichFaces Developer manual and online RichFaces demos I CAN'T EVEN GET THE processDrop method to REGISTER A DROP EVENT? I mean you can take a look for yourself at the UsersDrop class and richfaces markup presentation side. I used the Richfaces Developer manual as reference and the online docs and so far I can't even get processDrop to sysout a simple hello world when I drag and drop a user username onto the drop component. Which indicates that despite #{usersDrop.processDrop} being set in the dropListener attribute the processDrop is not even being bothered to be called? Maybe my expectations are too high or maybe I'm assuming things too simply but I would of thought properly implementing the DropListener interface and setting it to dropListener attribute would enable processDrop to listen for events and act accordingly as specified by the developer?

      Also example application on which the drag and drop components are not functioning can be found at:

      http://www.2shared.com/file/7363833/49197a88/seam_cmswartar.html

      Take a look at /admin/ExoshellUserRolesEdit.xhtml for the markup.

      And take a look at /seam_cms/src/hot/com/domain/exoshellcms/listeners for
      DropListener classes.


      Apologies if this does not make sense somewhat as I'm writing this very late at night and I'm extremely frustrated.

        • 1. Re: Richfaces Drag and Drop component not working as adverti
          Nick Belaevski Master

          Hi,

          I can name two things that are the possible case: invalid .EAR file layout and "rendered" attributes that has values changed between requests.

          • 2. Re: Richfaces Drag and Drop component not working as adverti
            nmatrix nmatrix Newbie

            Hello nbelaevski,

            Automatically the first possibility is out since I'm using a war file, for the second possibility I've removed the rendered attributes to see if that had an effect and as I supected it did not affect things in the slightest as the dropListener still does not listen. I mean is there something magical about dropListener that makes it work in only special circumstances? (i.e. when all the planets are aligned) it makes no sense whatsoever. Is there a way to use a more reliable/less fragile actionListener instead of the dropListener attribute because I'm thinking it's still a bit quirky for ease of use.

            • 3. Re: Richfaces Drag and Drop component not working as adverti
              Nick Belaevski Master

              Hello,

              No magic at all there. And you can use actionListener (have you looked at user guide/documentation)?

              • 4. Re: Richfaces Drag and Drop component not working as adverti
                Nick Belaevski Master

                I've downloaded your example - what is JSF version used?

                • 5. Re: Richfaces Drag and Drop component not working as adverti
                  Jay Balunas Master

                  nmatrix9,

                  I know you are frustrated, web tier programming in general can be difficult, but a little less snide would be nice. Nick has been gracious enough to assist, but in the future please remember that this is a community of users and developers who help on the forums is completely voluntary.

                  BTW - I like the level of detail and code examples in your post - this type of information very helpful.

                  Regards,

                  • 6. Re: Richfaces Drag and Drop component not working as adverti
                    Rob Stryker Master

                    random comment / advice which doesn't have to do with this specific example (just shoving my nose where it doesn't belong)

                    When pasting code snippets it might be better to use a pastebin (pastebin.com, pastebin.ca, etc). They can preserve your indentation and also add syntax highlighting.

                    As an example: http://pastebin.com/m7e5b99c8

                    • 7. Re: Richfaces Drag and Drop component not working as adverti
                      nmatrix nmatrix Newbie

                      I'm able to get the processDrop to listen for Drop events but I'm unable to extract a drop value or draggable source value as they all evaluate to none.

                      Drag source

                      <rich:dragSupport dragIndicator=":indicator" dragType="userId" dragValue="#{_exoshellUsers.userId}" ajaxSingle="true">
                      <rich:dndParam name="label" value="user name: #{_exoshellUsers.username}"/>
                      </rich:dragSupport>


                      Drop target

                      <rich:panel id="userDrop2">
                      <rich:dropSupport id="userDrop1" rendered="#{exoshellUsersList.resultList.size() ge 25}"
                      acceptedTypes="userId" dropListener="#{usersDrop.processDrop}" reRender="userDropOutputLabel">
                      </rich:dropSupport>

                      <h:outputLabel id="userDropOutputLabel" value="drag and drop user name here" rendered="#{exoshellUsersList.resultList.size() ge 25}"/>
                      <a:actionparam id="userDropParam" name="userDropParam" value="#{usersDrop.userId}"/>
                      </rich:panel>


                      process drop


                      public void processDrop(DropEvent event) {
                      Dropzone dropzone = (Dropzone) event.getComponent();
                      log.info("Calling processDrop #0 with value #1", event.getComponent().getId(), (Object)dropzone.getDropValue());
                      //ExoshellUsers user = entityManager.find(ExoshellUsers.class, userId);
                      HtmlOutputLabel label = (HtmlOutputLabel)FacesContext.getCurrentInstance().getViewRoot().findComponent("exoshellUserRoles:userNamesIdDecoration:userDropOutputLabel");
                      label.setValue("Process Drop");
                      }



                      I just want to drag a value from point a to point b, drop and have the processDrop register the event and get the dropped value. If you can point me to a COMPLETE tutorial that shows how to do this I would greatly appreciate it.

                      • 8. Re: Richfaces Drag and Drop component not working as adverti
                        nmatrix nmatrix Newbie

                        During processDrop

                        public void processDrop(DropEvent event) {
                        Dropzone dropzone = (Dropzone) event.getComponent();
                        log.info("Calling processDrop #0 with value #1", event.getComponent().getId(), (Object)event.getDragValue());
                        //ExoshellUsers user = entityManager.find(ExoshellUsers.class, userId);
                        HtmlOutputLabel label = (HtmlOutputLabel)FacesContext.getCurrentInstance().getViewRoot().findComponent("exoshellUserRoles:userNamesIdDecoration:userDropOutputLabel");
                        label.setValue("Process Drop");
                        }

                        I can get the event.getComponent().getId() but I CANNOT get the event.getDragValue or dropzone.getDropValue.

                        • 9. Re: Richfaces Drag and Drop component not working as adverti
                          nmatrix nmatrix Newbie

                          Found the reason for the problems I was experiencing. You cannot Drag and Drop values or data between forms or form tags. For example you cannot drag a value from form a and drop in in the drop support in form b.

                          • 11. Re: Richfaces Drag and Drop component not working as adverti
                            nmatrix nmatrix Newbie

                            You guys really should document that limitation in the richfaces documentation.

                            • 12. Re: Richfaces Drag and Drop component not working as adverti
                              Nick Belaevski Master

                              It shouldn't affect 3.3.1.GA and I've checked your .war file - there's 3.1.6 there and this version has such problem. Consider upgrading to 3.3.1.

                              • 13. Re: Richfaces Drag and Drop component not working as adverti
                                nmatrix nmatrix Newbie

                                 

                                "nbelaevski" wrote:
                                It shouldn't affect 3.3.1.GA and I've checked your .war file - there's 3.1.6 there and this version has such problem. Consider upgrading to 3.3.1.


                                That is not the point. The point is that there was limitation or quirk with a richfaces component. Though simple to fix at first , it can cause HUGE problems for developers using richfaces if they are not aware of it (I know was one of those developers and lost 2 weeks due to this "limitation"). And I had to make a hell of a lot of modifications to templates to work around this limitation.

                                This is not documented in Practical Richfaces or RichFaces users guide or the online demo as something to take note of. In fact whenever time I try to raise this issue, I get the feeling that it's trying to be swept under the rug as "Oh don't worry it's a minor quirk, don't worry about it, RichFaces 3.* has it all fixed and everything will be nice". But no it is not nice as I wasted a huge amount of time and resources trying to figure out why the hell this component was* not working as advertised on the online demo. I re-downloaded JBoss Developer Studio 2.0.0.GA in July and your telling me that it's fixed in resources 3.3.1 GA, how convenient. I'm still seething mad that it seems a select group was aware of this issue but did not deem it necessary to I don't know maybe . . . just maybe ah document it on the online docs? Online blog? Maybe a ad on CraigsList? Maybe I'm asking for too much it seems?

                                • 14. Re: Richfaces Drag and Drop component not working as adverti
                                  Ilya Shaikovsky Master

                                  Unfortunatelly all the projects has issues. And unfortunatelly not all of the issues getting documented officially. Especially in open source projects which has strong community feedback and many RFCs, issues reports and improvements suggestions risen causing many opened jiras. Thats why we spending much time at our forums, doing our best to fill wiki pages, articles and writing blogs. But some issues still had a chanse just to be planned for fix but remained undocumented.. Thats why we asking to be patient and made some basic search in jira and forums(to which you registered and has access automatically being registered at jboss.org) and pay attention to fix versions if you can't solve some problem and found related info in documentation.

                                  If your timeframes is so critical - the best practice not just use a project resources which could have such usage limitations but subscribe to official support which will grant fast information providing.