Drag N Drop in ADF 11

person Bijeshfolder_openUncategorizedlocal_offer, , , , access_time February 24, 2008

ADF RC supports drag and drop features. I decided to try this feature on a shopping cart screen that I was working on. Well, actually it is the Store Front shopping cart demo screen that I am replicating on my own.The screen contains table of items available on sale – including an image of the product. The image is the drag source or the element that will get dragged. To achieve this

  • create a clientAttribute within the table. Set the value to the ViewObject attribute that is passed on to the drop target.
  • Next insert an af:attributeDragSource element into the image (child of the image component). Use the clientAttribute’s id as the attribute property for this element.
<af:image clientcomponent="true"
   source="#{bindings.ProductsByOrderQuantityVO1.children[stat.index].Imageurl}">
    <af:clientattribute name="DragId"
      value="#{bindings.ProductsByOrderQuantityVO1.children[stat.index].DragId}">
        <af:attributedragsource attribute="DragId"/>
    </af:clientattribute>
</af:image>
  • Now create the drop target. The target can be an af:attributeDropTarget, which will set the dropped value into the attribute of the enclosing element. I used the af:dropTarget element inside my af:panelBox. This effectively made the entire af:panelBox a target for the drop and allowed me to write a dropListener.
  • Use the actions attribute to indicate what kind of actions the target supports. COPY or MOVE or LINK.
  • Configure the dropTarget with the appropriate Data Flavor. The data flavor is used to distinguish between multiple dropTargets and determine which dropTarget will accept which datatype.
<af:droptarget actions="COPY" droplistener="#{shopByCategoriesBean.dropProductIntoCart}">
  <af:dataflavor flavorclass="java.lang.String">
  </af:dataflavor>
</af:droptarget>
  • The drop listener method is called with a DropEvent as its parameter.
  • The drop listener checks the DropEvent and returns DnDAction.NONE if no action is performed. Otherwise return the appropriate DnDAction.

Notes:

  1. I have not been able to get drag and drop to work with a java.lang.Integer attribute/drop target. This results in a server-side log message – “WARNING: Unable to create server flavor for client flavor:jsObject/number and data:423,322”.Update: My limited tests with oracle.jbo.domain.Number and oracle.jbo.domain.Date have also failed. I’m following this up here.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>