0 Replies Latest reply on Oct 11, 2007 9:58 AM by Tilman Klar

    Sorting components using DnD

    Tilman Klar Newbie

      Hello guys,

      I'm working on some web application where I must be able to move components around in order to sort them. I started using an a4j:repeat to build a list of rich:panels and added DnD to it using the standard mechanisms available in the taglib rich. Here's what I got so far:

      <rich:panel id="repeatpanel">
       <a4j:repeat rowKeyVar="rowKey" id="repeat" value="#{bb.list}" var="item">
       <rich:panel header="#{item.name}">
       <rich:dropSupport acceptedTypes="Item" dropValue="#{rowKey}"
       reRender="repeat"/>
       <rich:dragSupport dragIndicator=":indicator"
       dragType="Item"
       dragValue="#{rowKey}"
       dragListener="#{bb.processDrop}"/>
       <h:outputText value="Name:" />
       <h:inputText size="50" value="#{item.name}">
       <a4j:support event="onkeyup" reRender="repeatpanel"/>
       </h:inputText>
       </rich:panel>
       <rich:spacer width="100%" height="5"/>
       </a4j:repeat>
       </rich:panel>


      After that, I added the following method to the backing bean:
      private List<Item> items;
      
       public void processDrop(DragEvent event) {
       Integer srcIdx = ((Integer)event.getDragValue());
       Integer dstIdx = ((Integer)event.getDropValue());
       Item srcItem = this.items.remove(srcIdx.intValue());
       this.items.add(dstIdx, srcItem);
       System.out.println("processDrop(): moved " + srcIdx + " to " + dstIdx);
       }


      When dragging and dropping, the println shows that the dropped rich:panels are moving the items around. So far so good. However, the UI does not render the changes. So I added some more printlns to the methods Item#setName() and Item#getName(). Here's what happens:

      getItems(): current order: [ #83 #864 #985 ]
      processDrop(): moved 0 to 2
      getName() returns: #864
      getName() returns: #985
      getName() returns: #83
      setName("#83")
      setName("#864")
      setName("#985")
      getItems(): current order: [ #83 #864 #985 ]


      Just after processDrop, getName() gets called and returns the correct values. But then, setName() overwrites the changes using the old values. How is that possible? Did I take the wrong turn somewhere? Is there a way to find out the source of the setName() calls?

      TIA,
      Tilman