Shay Shmeltzer's Oracle Development Tools Tips

  • October 24, 2008

No Code Drag and Drop for JSF with ADF Faces RC

Shay Shmeltzer
Director of Product Management - Oracle

While working on one of the demos for OTN, I found out that between the technology preview versions of JDeveloper and the production JDeveloper 11g - making a drag and drop operation in your JSF Web interface just got a lot easier.

Previously you needed 4 tags and a backing bean method - Duncan's blog had an entry with the details.

But Now you do it with 3 tags and no code. All using ADF Faces Operations components

Here is an example:

First add a client attribute to the item which will be the drag source - give it any name you want and a value (which would probably be the same expression language you use as the value for the drag source item).


Next add an Attribute Drag Source tag to your drag source item and in the attribute specify the client attribute you just added.


To finish up add an Attribute Drag Target tag to the item you want to be the destination of the drag operation.

and in the attribute property set the specific attribute you want to change - in this case it would be the value.


The end result code is:

<br/><af:inputText value="#{bindings.WarehouseName.inputValue}" label="#{bindings.WarehouseName.hints.label}" required="#{bindings.WarehouseName.hints.mandatory}" columns="#{bindings.WarehouseName.hints.displayWidth}" maximumLength="#{bindings.WarehouseName.hints.precision}" shortDesc="#{bindings.WarehouseName.hints.tooltip}"><br/><f:validator binding="#{bindings.WarehouseName.validator}"/><br/><af:clientAttribute name="warehouse"<br/><br/> value="#{bindings.WarehouseName.inputValue}"/><br/><af:attributeDragSource attribute="warehouse"/></p><p>...<br/><br/><af:outputText value="outputText1"><br/><af:attributeDropTarget attribute="value"/><br/></af:outputText>

Join the discussion

Comments ( 6 )
  • Husain Saturday, May 30, 2009
    HI Shay, Great Article !
    Is it possible to drag from a collection like a tree into another collection (table/tree)? Can you please show an example for the same
  • shay Monday, June 1, 2009
    You can also drag and drop from/to collections.
    See the ADF Faces Rich Client Components demo:
    Download the sample to check the code:
  • Deniz Saturday, October 2, 2010
    Is it possible to use drag&drop to change the locations of layout controls on the page?
  • shay.shmeltzer Monday, October 4, 2010
    Deniz, there is no built in support for this, but you can write a dropListener for your drag and drop operation and in it you can manipulate the JSF components tree to simulate the UI change.
  • guest Sunday, August 19, 2012

    How can i use drag and drop funcionality for get a row from table an copy any atribute values into a form layout.

  • Shay Tuesday, August 28, 2012

    guest - dragging from a table is a bit different see sample 60 on the Code Corner - http://www.oracle.com/technetwork/developer-tools/adf/learnmore/index-101235.html#CodeCornerSamples

Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.