No Code Drag and Drop for JSF with ADF Faces RC

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>

Comments:

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 on May 30, 2009 at 03:25 AM PDT #

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 on June 01, 2009 at 07:31 AM PDT #

Hi, Is it possible to use drag&drop to change the locations of layout controls on the page?

Posted by Deniz on October 02, 2010 at 04:05 PM PDT #

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.

Posted by shay.shmeltzer on October 04, 2010 at 12:38 AM PDT #

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

Posted by guest on August 19, 2012 at 04:56 AM PDT #

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

Posted by Shay on August 28, 2012 at 03:48 PM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed
About

me
I'm a Director of Product Management for the Oracle Java Development Tools.
Follow me:
Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today