Drag and Drop mit Richfaces

In Zeiten von Ajax und Web 2.0 bieten Web Applikationen mehr und mehr Möglichkeiten klassischer Rich Client Anwendungen. Mit Hilfe der Richfaces Komponenten Bibliothek können Facelets sehr einfach um Ajax Fähigkeiten erweitert werden.

Auch Drag and Drop Funktionalität kann komfortabel eingebaut werden. Nachfolgend zeige ich anhand eines kurzen Beispiels, wie einfach Drag and Drop mit Richfaces realisiert werden kann.

Das Prinzip ist sehr einfach: Zunächst wird ein Bereich definiert, der als "Drag-Bereich" dient und anschließend der Bereich zum "Droppen". Was beim "Drop" passieren soll, wird über einen Listener implementiert.

Zunächst wird ein Rich Data Grid definiert, welches dem Benutzer die Elemente von Interesse präsentiert:

<rich:dataGrid id="dragArea" value="#{elementsModel}" var="_element">
     <a4j:outputPanel layout="block">
          <rich:dragSupport dragType="element" dragIndicator=":indicator">
       <a4j:actionparam value="#{_element.objectName}" name="objectName" />
  </rich:dragSupport>
  <div>
       <h:graphicImage value="#{_package.filePath}" /> 
       <h:outputText value="#{_element.objectName}"/>
          /div>
     </a4j:outputPanel>
</rich:dataGrid>


Der zweite Schritt besteht darin, den Bereich festzulegen, der als Ablagebereich für die Elemente dienen soll:

<rich:dropSupport dropListener="#{elementManager.addSelectedElement}" acceptedTypes="element" reRender="dropArea">
<rich:dataGrid id="dropArea" value="#{selectedElements}" var="_element">
<h:graphicImage value="#{_element.filePath}" />
<h:outputText value="#{_element.objectName}" />
</rich:dataGrid>
</rich:dropSupport>


Der dropListener besagt, welche Methode beim Drop aufgerufen werden soll. Innerhalb dieser Methode wird das ausgewählte Element einer Collection der anzuzeigenden Elemente hinzugefügt. Zu beachten ist das Attribut "acceptedTypes". Es muss den selben Wert haben, wie das dragType Attribute aus dem dragSupport Element.

Insgesamt war es sehr einfach, eine Drag and Drop Funktionalität mit RichFaces zu implementieren. Etwas Ausprobieren gehört dazu, um das Design der Seite intuitiv und ansprechend zu gestalten. Es ist jedoch wenig XML Code nötig, um Drag and Drop mit Richfaces zu ermöglichen.