Implement Drag and Drop

You can work in JDeveloper's IDE to add drag and drop functionality on a page by defining components as drag sources and drop targets.

Create a New Application: Use the Create Application wizard to create a generic application.

Create a JSF Page: Use the Create JSF Page dialog to add a new page.

Define the Drag Source Component: Add an Image component. Then use the af:attributeDragSource tag and Insert Attribute Drag Source dialog to specify an attribute of the component as the drag source.

Define the Drop Target Component: Add an InputText component. Then use the af:attributeDropTarget tag and Insert Attribute Drop Target dialog to specify an attribute of the component as the target to receive a drop.

Create Custom Code to Handle a Drop Event: Create a managed bean and add a DndAction drop event listener method to the bean.

Use the Drop Event Listener on a Drop Target: Add a SelectOneListbox component to use as a new target component. Then use the af:dropTarget tag and Insert Drop Target dialog to specify the custom method to invoke on the dropListener attribute of the target component.

Create a New Application and Project

1. Open the Create Application wizard [ File > New > General > Applications]  .
2. To follow along with the example, enter DndApp as the application name.
3. Select Generic Application in the Applica tion Template list, then click Finish .
   

   Application Templates

   Application templates provide you with a quick way to create the project structure for standard applications with the appropriate combination of technologies already specified. The new application created from the template appears in the Application Navigator already partitioned into tiered projects, with the associated technology scopes set in each project.   [ tell me more...]

   
   
   
4. In the Application Navigator, select the project you just created and open the Project Properties dialog, JSP Tag Libraries Page. [ Application > Project Properties] 
5. Select the Distributed Libraries folder, and click Add .
6. In the Choose Tag Libraries dialog, select ADF Faces Components 11 and click OK.
   

   JSP Tag Libraries

   Libraries are provided for the various APIs and technologies installed with JDeveloper. These libraries are categorized as extension libraries, which are shared by all users of an install.   [ tell me more...]

   
   
   
7. Click OK to close the Project Properties dialog.
8. Click Save All to save your work.
   

   In the IDE

   When you complete the steps for creating a new application and project, the Projects panel in the Application Navigator looks similar to this:  [ tell me more...]

   
   
   

Create a JSF Page

1. In the Application Navigator, select the project and open the Create JSF Page dialog. [ File > New > Web Tier > JSF > JSF Page] 
2. Enter the file name myPage.jspx and confirm that Create as XML Document (*.jspx) .
3. Under Initial Page Layout and Content, select Quick Start Layout , then click Bro wse .
   

   Quick Start Layout

   ADF Faces provides a number of components that you can use to define the overall layout of the page. JDeveloper includes pre-defined page layouts that use these layout components to provide you with a quick and easy way to correctly determine the layout of your pages.  [ tell me more...]

   
   
   
4. In the Component Gallery, under Categories select Two Column.
5. Under Types , select the third pane type on the first row (Two Column Left, Partial Header).
6. Under Layouts , select the third layout behavior on the first row (Two Splits, Stretched). You should see Two Column Left, Partial Header (Two Splits, Stretched) under Options . Click OK.
7. In the Create JSF Page dialog, make sure Page Implementation shows UI Components are not exposed in managed bean. Click OK.
   

   Component Binding

   When you create a JSF page using the dialog, you can specify whether or not components on the page are exposed in a managed bean, to allow programmatic manipulation of the UI components. By default components are not exposed to managed beans. If you wish to bind components to managed beans, expand the Page Implementation section in the Create JSF Page dialog, then select one of the automatic binding options.  [ tell me more...]

   
   
   
8. Click Save All to save your work.
   

   In the IDE

   When you complete the steps for creating a JSF page using a quick start layout, the visual editor should look similar to this:  [ tell me more...]

   
   
   

Define the Component to Use as the Drag Source

1. In the Component Palette, ADF Faces page, Layout panel, drag and drop Panel Box into the first splitter pane on the left column. In the Property Inspector, Common section, change the Text property to Drag this.
2. In the Component Palette, Common Components panel, drag and drop Image into the panel box component you just added. In the Insert Image dialog, click the dropdown menu next to the Source field and choose Edit. Use the dialog to locate and select an image file. Click Yes to add the icon image under the document root and then click Save. Click OK to close the Insert Image dialog.
   

   Adding Images

   In the Insert Image dialog, you can add any image by entering the image file name in the Source field. Alternatively you can use the Edit Property dialog to navigate to a source and select an image file. To use the Edit Property dialog, click at the end of the Source field and choose Edit.   [ tell me more...]

   
   
   
3. In the Component Palette, expand the Operations panel. Drag and drop Client Attribute into the image component you just added. In the Property Inspector, enter cup in the Name field, and Coffee in the Value field.
   

   Client Attributes

   The ADF Faces tag af:clientAttribute lets you specify the name and value of an attribute to add to a component. For example:  [ tell me more...]

   
   
   
4. In the Component Palette, Operations panel, drag and drop Attribute Drag Source into the image component. In the Insert Attribute Drag Source dialog, enter cup in the Attribute field or select it from the dropdown list. Then click OK.
   

   Tags for Enabling a Component as a Drag Source

   ADF Faces provides two tags for declaratively enabling a component as a drag source, namely, af:attributeDragSource and af:componentDragSource. The tags are nested within those components you wish to enable as drag source components. For example:  [ tell me more...]

   
   
   
5. Click Save All to save your work.
   

   In the IDE

   When you complete the steps for defining the component and component attribute to use as the drag source, the visual editor should look similar to this:  [ tell me more...]

   
   
   

Define the Component to Use as the Drop Target

1. In the visual editor, move the horizontal splitter bar down to about half the page.
2. In the Component Palette, ADF Faces page, Layout panel, drag and drop Panel Box into the first splitter pane on the right column. In the Property Inspector, Common section, change the Text property to Drop here.
3. In the Component Palette, Common Components panel, drag and drop Input Text into the panel box component you just added. In the Property Inspector, Common section, change the Label property value to Cup.
4. In the Component Palette, Operations panel, drag and drop Attribute Drop Target into the input text component. In the Insert Attribute Drop Target dialog, select value from the Attribute dropdown list, and click OK.
   

   Tags for Enabling a Component as a Drop Target

   The af:attributeDropTarget tag lets you specify a component attribute (such as value) to be set when a compatible value is dragged and dropped onto the component. For example, if the target component is af:inputText, to enable the component and its value attribute as the drop target, you would embed af:attributeDropTarget within af:inputText and specify value as the drop target attribute, as shown here:  [ tell me more...]

   
   
   
5. In the Application Navigator, right-click myPage.jspx and choose R un from the context menu.
   

   Running and Testing a JSF Page

   By default, JDeveloper automatically configures an integrated server named Integrated WebLogic Server that references a user-specific instance of Oracle WebLogic Server bundled with the IDE. Integrated WebLogic Server is a Java EE runtime service for packaged archive deployment. Based on zero-copy deployment, Integrated WebLogic Server lets you run and test an application and its projects as a Java EE application in a Java EE container. No special connection setup is required to use Integrated WebLogic Server. You can run the entire application, a project, or individual JSF pages.  [ tell me more...]

   
   
   
   

   In the IDE

   When you complete the steps for defining the component and component attribute to use as the drop target, the visual editor should look similar to this:  [ tell me more...]

   
   
   

Create a Custom Drop Event Listener

1. In the Application Navigator, double-click faces-config.xml to open the file. In the editor window, click the Overview tab at the bottom of the editor.
2. In the Managed Beans section of the overview editor, click Add to open the Create Managed Bean dialog.
   

   JSF Managed Beans

   While JSF allows you to bind a component in the user interface directly to any JavaBean, the best choice is to use JSF managed beans.   [ tell me more...]

   
   
   
3. Enter dnd as the bean name, and MyPage as the bean class. Change Scope to session. Make sure Generate Class If It Does Not Exist is selected. Click OK.
4. In the editor window, click the MyPage.java tab at the top to bring the document forward.
   

   Editing a Java Class

   The tabs at the top of the editor window are document tabs. Selecting a document tab gives that file focus, bringing it to the foreground of the editor window.   [ tell me more...]

   
   
   
5. In the source editor, add a property and getter method that creates a list of items for populating a select input component. Then add a DndAction method handler for a drop event.
   Use sample code
   

   Writing Methods

   The first method you will write is a getter method for returning a List of javax.faces.model.SelectItem instances. This is for populating a listbox component, which you will add in the next card. To write the method, first declare a property of type List<SelectItem>, then use a set of add(new SelectItem("some value", "some label")) statements to create the list.   [ tell me more...]

   
   
   
6. In the Application Navigator, right-click MyPage.java and choose Make . You should see the message Successful compilation: 0 errors, 0 warnings in the Messages Log window.
   

   In the IDE

   When you complete the steps for creating a custom drop event listener, the Application Navigator should look like this:  [ tell me more...]

   
   
   

Register the Custom Drop Event Listener on a Drop Target

1. In the editor window, click the myPage.jspx tab at the top to bring the page forward.
2. In the Component Palette, ADF Faces page, Common Components panel, drag and drop Select One Listbox into the second splitter pane on the page.
   

   Binding to a Dynamic List

   The af:selectOneListbox component (and other similar select input components) can contain one f:selectItems component for representing the items in the list. For the af:selectOneListbox component to be populated with an initial list of items at runtime, you value bind the f:selectItems component (through its value attribute) to a getter method on a managed bean that returns an array of javax.faces.model.SelectItem instances.  [ tell me more...]

   
   
   
3. In the Insert Select One Listbox wizard, Select page, make sure Bind to list (select items) is selected. Click Bin d... next to the Value field.
4. In the Expression Builder, expand JSF Managed Beans | dnd. Select choices to create the expression, and click OK. Then click Finish to complete the wizard.
   

   Binding by Using JSF EL Expressions

   JSF 1.2 supports the Java EE 5 unified expression language (EL), which unifies the JSF and JSP expression languages.  [ tell me more...]

   
   
   
5. In the Property Inspector for the select one listbox component, Common section, change the Label property value to Beverage choices and press Enter.
6. In the Component Palette, Operations panel, drag and drop Drop Target into the select one listbox component on the page.
7. In the Insert Drop Target dialog, choose Edit from the dropdown menu next to the DropListener field.
8. In the Edit Property dialog, select dnd from the Managed Bean dropdown list, then select handleItemDrop from the Me thod dropdown list. Click OK. You should see #{dnd.handleItemDrop} in the DropListener field. Click OK to close the Insert Drop Target dialog.
   

   DropTarget and DataFlavor Tags

   When af:attributeDropTarget, af:collectionDropTarget, or af:calendarDropTarget meets your drag and drop functionality needs, or when you have custom code to perform upon a drop action, you can use the af:dropTarget tag with a component to make that component eligible for accepting drops.   [ tell me more...]

   
   
   
9. In the Insert Data Flavor dialog, enter java.lang.String in the FlavorClass field, and click OK.
10. In the Application Navigator, right-click myPage.jspx and choose R un from the context menu.
    

    In the IDE

    When you complete the steps for specifying a drop target with a data flavor, and registering the drop event listener on the drop target, the visual editor should look similar to this:  [ tell me more...]

    
    
    

Copyright © 1997, 2009, Oracle. All rights reserved.