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

tell me more icon Creating a New Application and Project

The JDeveloper application is the highest level in the organizational structure. It stores information about the objects you are working with, while you are creating your application. It keeps track of your projects and the environment settings while you are developing.   [ tell me more...]





  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 .

    tell me more icon 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.

    tell me more icon 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 the save all icon Save All to save your work.

    tell me more icon 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

tell me more icon Creating a JSF Page

To follow along with the example, in this step and throughout the cards, enter values as shown in the instructions. Then you will be able to follow the steps in the cue cards exactly as written.   [ tell me more...]





  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 .

    tell me more icon 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.

    tell me more icon 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 the save all icon Save All to save your work.

    tell me more icon 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

tell me more icon Defining the Component to Use as the Drag Source

You can drag a single object using a component and one of its attributes as the drag value, or you can drag a collection of objects such as a table or tree component. To define a component as a drag source, first add the non-collection or collection component to your page, then embed either the af:attributeDragSource tag or af:collectionDragSource tag into the non-collection or collection source component, respectively.   [ tell me more...]





  1. In the Component Palette, ADF Faces page, Layout panel, drag and drop panel icon 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 icon Image into the panel box component you just added. In the Insert Image dialog, click the property menu icon 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.

    tell me more icon 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 property menu icon 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 attribute icon 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.

    tell me more icon 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 export icon 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.

    tell me more icon 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 the save all icon Save All to save your work.

    tell me more icon 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

tell me more icon Defining the Component to Use as the Drop Target

A drop target can be a collection or non-collection component. For instance you can drag and drop onto a single object using a component and one of its attributes as the drop target, or you can drag and drop onto a collection of objects such as a table or tree component. To define a component as a drop target, first add the component to your page, then embed either the af:attributeDropTarget tag or af:collectionDropTarget tag into the non-collection or collection target component, respectively.   [ tell me more...]





  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 icon 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 textinput icon 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 importicon icon 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.

    tell me more icon 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 facespage icon myPage.jspx and choose R un from the context menu.

    tell me more icon 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...]




    tell me more icon 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

tell me more icon Creating a Custom Drop Event Listener

To invoke custom code when a drop event is fired, register a drop event listener on the drop target component. The drop event listener is a method in a managed bean that contains your custom code for handling and processing the drop event. At runtime, when a source component is dragged and dropped on the target component, the drop event listener method is automatically invoked.  [ tell me more...]





  1. In the Application Navigator, double-click webdiagram icon 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 icon Add to open the Create Managed Bean dialog.

    tell me more icon 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 javanode icon MyPage.java tab at the top to bring the document forward.

    tell me more icon 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.
    code sample icon Use sample code

    tell me more icon 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 javanode icon MyPage.java and choose Make . You should see the message Successful compilation: 0 errors, 0 warnings in the Messages Log window.

    tell me more icon 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

tell me more icon Registering the Custom Drop Event Listener on a Drop Target

The drop event listener method you created in the previous card adds a dropped value to a list of items in a listbox. Thus, in this example, you will add the af:selectOneListbox component and use it as the drop target.   [ tell me more...]





  1. In the editor window, click the facespage icon 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 listbox icon Select One Listbox into the second splitter pane on the page.

    tell me more icon 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.

    tell me more icon 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 importIcon icon Drop Target into the select one listbox component on the page.
  7. In the Insert Drop Target dialog, choose Edit from the property menu icon 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.

    tell me more icon 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 facespage icon myPage.jspx and choose R un from the context menu.

    tell me more icon 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.

false ,,,,,,,,,,,,,,,