« Free Admision to Key Oracle Events | Main | Simple JSF Login page with Users in a DB table »

No Code Drag and Drop for JSF with ADF Faces RC

By shay.shmeltzer on October 24, 2008 9:06 AM

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).
dnd001.jpg


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

dnd002.jpg


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.

dnd006.jpg


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 /> 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>

Tags:

AddThis Social Bookmark Button

Comments (2)

Husain:

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

Posted by Husain | May 30, 2009 10:25 AM

Posted on May 30, 2009 10:25

shay:

Husain,

You can also drag and drop from/to collections.
See the ADF Faces Rich Client Components demo:
http://jdevadf.oracle.com/adf-richclient-demo/faces/components/collectionDropTarget.jspx

Download the sample to check the code:
http://www.oracle.com/technology/products/adf/adffaces/11/doc/demo/adf_faces_rc_demo.html

Posted by shay | June 1, 2009 2:31 PM

Posted on June 1, 2009 14:31

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)