7 Replies Latest reply on Apr 11, 2007 4:41 PM by alex_ph

    DnD from DataTable to Panel Problem

    alex_ph

      Hi, I am trying to create a View that has first a rich:panel with Drop-support and then a rich:datatable with Drag-support in each row. The dragged row should "drop" the dbRow.id in the "Drop-Zone" of the rich:panel.

      I tried it with this test-code:

      <f:view>
       <rich:dragIndicator id="indicator"></rich:dragIndicator>
      
       <a4j:outputPanel ajaxRendered="true">
       <h:messages />
       </a4j:outputPanel>
      
       <rich:panel>
       <f:facet name="header">
       <h:outputText value="DropZone"/>
       </f:facet>
       <rich:dropSupport dropValue="testID" dropListener="#{modifyCharacterBean.processDrop}" id="char" acceptedTypes="char_id" reRender="mC">
       </rich:dropSupport>
      
       <a4j:outputPanel id="mC" ajaxRendered="true">
       <h:panelGrid columns="2">
       <h:outputText value="Dropped ID: " />
       <h:inputText value="#{modifyCharacterBean.charID}" />
       </h:panelGrid>
       </a4j:outputPanel>
       </rich:panel>
      
       <rich:spacer height="100px"/>
      
       <rich:panel id="testDND">
       <f:facet name="header">
       <h:outputText value="DragZone"/>
       </f:facet>
      
      
       <rich:dataTable value="#{tableBean.table}" var="dbRow">
       <f:facet name="header">
       <rich:columnGroup>
       <rich:column>
       <h:outputText value="ID :"/>
       </rich:column>
       </rich:columnGroup>
       </f:facet>
      
       <rich:columnGroup>
       <rich:column>
       <a4j:outputPanel style="border:1px solid gray;padding:2px;" layout="block">
       <rich:dragSupport dragIndicator=":indicator" dragType="char_id" dragValue="#{dbRow.id}" >
       </rich:dragSupport>
       <h:outputText value="#{dbRow.id}"/>
       </a4j:outputPanel>
       </rich:column>
       </rich:columnGroup>
       </rich:dataTable>
       </rich:panel>
      </f:view>
      


      It doesnt works, in IE i got a "Object missing" error but I'm stuck and I don't know what I have to do to invoke the dropListener.

      Could anyone gives me a hint?
      Thnx Alex

        • 1. Re: DnD from DataTable to Panel Problem
          alex_ph

          Ok, now it works (i had forgotten to set the h:form tag around the code).
          But now I have the problem that the Drop-zone don't reRender (id= mC)

          Could anybody look at this code-snippet and tell me, what I am doing wrong?

          ...
          <rich:panel>
          <f:facet name="header">
           <h:outputText value="DropZone"/>
          </f:facet>
          
          <rich:dropSupport dropValue="testID" dropListener="#{mCBean.processDrop}" id="char" acceptedTypes="char_id" reRender="mC">
          </rich:dropSupport>
          
          
          <a4j:outputPanel ajaxRendered="true">
           <h:panelGrid id="mC" columns="2">
           <h:outputText value="Dropped ID: " />
           <h:inputText value="#{mCBean.charID}" />
           <h:outputText value="IsEdit: " />
           <h:outputText value="#{mCBean.isEdit}" />
           </h:panelGrid>
          </a4j:outputPanel>
          
          </rich:panel>
          ...
          


          • 2. Re: DnD from DataTable to Panel Problem
            ilya_shaikovsky

            Colud you please look what is the source of the problem using a4j:log component.

            • 3. Re: DnD from DataTable to Panel Problem
              alex_ph

              Hi,
              thanks for the log-hint :).
              Now I have a bigger problem. My Subview works fine now with Mozilla, but I tried to run that snippet with Opera and IE and the Subview don't work there.
              After testing a bit and looking for the error I noticed that I have to use two h:forms to realise the DnD-function I want to use on that subview.
              In fact, Opera and IE seems to have problems with two forms nested in the UIViewRoot (UISubview?) and in general I shouldn't use two form in one View in JSF (I get that from the sun-jsf-forum).

              But I have to realize the subview like this:

              <%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>
              <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
              <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
              <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j" %>
              
              <f:subview id="pC">
              
               <h:form id="mainForm">
               <rich:panel id="MPPanel">
               <f:facet name="header"><h:outputText id="Cadmin" value="Cadmin"/></f:facet>
              
               <rich:panel id="modifyPanel" bodyClass="#{modifyCBean.bodyClass}">
               <f:facet name="header"><h:outputText id="createTitle" value="C create"/></f:facet>
               <rich:dropSupport dropListener="#{modifyCBean.processDrop}" id="charDropSupport" acceptedTypes="char_id" reRender="mC" />
              
               <a4j:outputPanel id="mC" >
               <h:form id="testForm">
               <h:outputText id="nameOutPut" value="Name:" />
               <h:inputText id="nameInput" value="#{modifyCBean.name}" ></h:inputText>
               </h:form>
               </a4j:outputPanel>
               </rich:panel>
              
               <rich:spacer height="50px"/>
              
               <a4j:outputPanel id="tableOPanel">
               <rich:dropSupport id="dummySupporttogetNoGoIcon" />
               <a4j:include id="tableInclude" viewId="/pages/protected/includes/_pCI.jsp" />
               </a4j:outputPanel>
              
              </rich:panel>
              </h:form>
              </f:subview>
              


              Short code description:
              1. Main-richpanel with form-tag to get the dragged Value into the drop Zone
              2. nested panel with Dropsupport and a h:form where I can edit the dropped value after a reRender in a inputfield
              3. include file with nested panel and rich:dataTable with dragSupport


              As I said before, with Mozilla this code works fine, but I got errors with Opera and IE. I have no idea how I can realize this view without this two forms. One for my Data and one to "get" the Dropped-Data in the Form-zone (from datatable-include-dragSupport).

              Can anybody tell me how I could replace the outer form-tag with something like "panelGroup" oder "outputPanel" to get this code work?

              Best regards

              Alex

              • 4. Re: DnD from DataTable to Panel Problem
                nbelaevski

                Alex,

                what if you'd left the external h:form only?

                • 5. Re: DnD from DataTable to Panel Problem
                  alex_ph

                  Hi :)
                  nothing happens if I delete the form. I had got much more problems with DnD and therefore I wrote a bit testcode to simplify my desired view(1. Dropzone with Outputtext (and Buttons) 2. Dragzone with datatable).
                  I copy the snippets here now in the hope that one of the Rich/Ajax - gurus can help me out and tell me finally what i am doing wrong :).

                  Here I go:

                  First of all the Managed-bean:

                  package beans;
                  
                  import java.util.ArrayList;
                  
                  import org.ajax4jsf.dnd.event.DropEvent;
                  
                  public class TestDnDBean {
                  
                   // String that get filled by dropEvent
                   private String testDnDName ="";
                  
                  
                   /**
                   * fills testTable with content to Drag them into the Dropzone
                   * @return
                   */
                   public ArrayList<TestDataTableContent> getTable(){
                  
                   ArrayList<TestDataTableContent> testArray = new ArrayList<TestDataTableContent>();
                   TestDataTableContent tdtContent;
                  
                  
                   for (int i = 0; i < 10; i++) {
                   tdtContent = new TestDataTableContent();
                   tdtContent.setName("Name "+i);
                   tdtContent.setDescription("Description Name "+i);
                   testArray.add(tdtContent);
                   }
                  
                   return testArray;
                   }
                  
                  
                   public String getTestDnDName() {
                   return testDnDName;
                   }
                  
                  
                   public void setTestDnDName(String testDnDName) {
                   this.testDnDName = testDnDName;
                   }
                  
                   public void processDrop(DropEvent event) {
                  
                   // set testDnDName
                   if (event.getDragValue() != null) {
                   this.testDnDName = event.getDragValue().toString();
                   }
                  
                   }
                  }
                  


                  Then the dto (tablecontentclass):
                  public class TestDataTableContent {
                  
                   private String name ="";
                   private String description ="";
                   public String getDescription() {
                   return description;
                   }
                   public void setDescription(String description) {
                   this.description = description;
                   }
                   public String getName() {
                   return name;
                   }
                   public void setName(String name) {
                   this.name = name;
                   }
                  }
                  


                  Now the test.jsp with Session-Scope:
                  <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
                  <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
                  <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j" %>
                  <%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich" %>
                  <html>
                   <head></head>
                  <body>
                  
                  <f:view>
                  
                  <a4j:log level="WARN" popup="false" width="200" height="200"/>
                  
                  <rich:dragIndicator id="indicator"></rich:dragIndicator>
                  
                  <a4j:outputPanel id="DnDOut" layout="block">
                   <h:form id="form">
                   <h:panelGrid columns="1">
                  
                   <!-- First Panel with dropSupport and "droppedTextZone" which should reRender after a drop-->
                   <rich:panel id="dropZonePanel">
                   <f:facet name="header">
                   <h:outputText value="DropZone"/>
                   </f:facet>
                  
                   <rich:dropSupport id="testDropSupp" dropValue="" dropListener="#{testDnDBean.processDrop}" acceptedTypes="names" reRender="droppedTextZone" />
                  
                   <h:panelGroup id="droppedTextZone">
                   <h:outputText id="oName" value="Dropped Name: " />
                   <h:inputText id="iName" value="#{testDnDBean.testDnDName}" />
                   </h:panelGroup>
                   </rich:panel>
                  
                  
                   <!-- Second Panel with dragSupport; here we drag the name entry of the rich:datatable -->
                   <rich:panel id="dragZonePanel">
                   <f:facet name="header">
                   <h:outputText value="DragZone"/>
                   </f:facet>
                  
                   <rich:dataTable value="#{testDnDBean.table}" var="dbRow">
                   <f:facet name="header">
                   <rich:columnGroup>
                   <rich:column><h:outputText value="Name :"/></rich:column>
                   <rich:column><h:outputText value="Description :"/></rich:column>
                   </rich:columnGroup>
                   </f:facet>
                  
                   <rich:columnGroup>
                   <rich:column>
                   <a4j:outputPanel style="border:1px solid gray;padding:2px;" layout="block">
                   <rich:dragSupport dragIndicator=":indicator" dragType="names" dragValue="#{dbRow.name}" >
                   </rich:dragSupport>
                   <h:outputText value="#{dbRow.name}"/>
                   </a4j:outputPanel>
                   </rich:column>
                  
                   <rich:column><h:outputText value="#{dbRow.description}"/></rich:column>
                   </rich:columnGroup>
                   </rich:dataTable>
                   </rich:panel>
                   </h:panelGrid>
                   </h:form>
                  </a4j:outputPanel>
                  </f:view>
                  
                  </body>
                  </html>
                  


                  My problem is still the same: I have to use only one form for this view. With two forms (an inner form in the inputText and Outputext in the drop Zone) it works sometimes and then only with Firefox.

                  I don't know what I am doing wrong all the time and that post is my last hope to solve this problem.

                  Best regards
                  Alex

                  • 6. Re: DnD from DataTable to Panel Problem
                    ilya_shaikovsky

                    This example works fine for me on the todays nightly builds:

                    <h:form id="_form">
                    <rich:panel>
                     <f:facet name="header">
                     <h:outputText value="Drop Here"></h:outputText>
                     </f:facet>
                     <rich:dropSupport acceptedTypes="state" dropListener="#{capitalsBean.addCapital2}" reRender="result"/>
                     <rich:dataTable value="#{capitalsBean.capitals2}" var="cap2" id="result">
                     <h:column>
                     <h:outputText value="#{cap2.state}"></h:outputText>
                     </h:column>
                     </rich:dataTable>
                    </rich:panel>
                    
                    <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="10" rowKeyVar="rowKey">
                     <rich:column>
                     <h:panelGroup id="dropZone">
                     <rich:dragSupport dragType="state" dragIndicator="indicator" dragValue="#{cap.state}">
                     </rich:dragSupport>
                     <h:graphicImage value="#{cap.stateFlag}" style="cursor:hand"></h:graphicImage>
                     </h:panelGroup>
                     </rich:column>
                     <rich:column>
                     <h:outputText value="#{cap.state}"></h:outputText>
                     </rich:column>
                    </rich:dataTable>
                    </h:form>


                    public void addCapital2(DropEvent event) {
                     Capital cap = new Capital();
                     cap.setState(event.getDragValue().toString());
                     capitals2.add(cap);
                     System.out.println("drop event listener");
                    }



                    • 7. Re: DnD from DataTable to Panel Problem
                      alex_ph

                      Hi Ilya,
                      thanks for your effort, but thats not what I "need" :).

                      I want to Drag an User-ID from a datatable column and Drop it into a panel with a form who contains (for instance:) UserID: [outputtext] Username: [outputtext] ...

                      If I drop the ID into the "Dropzone" the processDrop-method should refresh the values of the form with the aid of the ID. After that, the form should reRender and then I have my outputtext filled with the corresponding values.

                      Nevermind, I don't get it and I will implementing this with an Edit-Button inside every row of the Datatable.

                      Best regards
                      Alex