Oracle Magazine - May/June 2012

Most of these tasks are accomplished with Oracle JDeveloper’s declarative and visual tools or with a few changes to configuration files, as detailed in the remainder of this column.

ENABLING BASIC DRAG-AND-DROP
FUNC TIONALI T Y
To enable panelBox components to be
moved within the panelDashboard com-
ponent, the panelBox must be marked as
a drag source. You can do this declaratively
in Oracle JDeveloper by simply adding
to each panelBox the necessary tag—an
af:componentDragSource tag in this case.
The af:componentDragSource tag is an
Oracle ADF Faces behavior tag that encap-
sulates the JavaScript code (which you would
otherwise have to write) for implementing
drag-and-drop in HTML pages. Behavior

Figure 4: Editing the MDS customization layer for the User CC class

Figure 5: MDS configuration for panelDashboard in adf-config.xml

tags are just one example of how Oracle ADF Faces improves developer productivity by providing functionality that typically would require custom code.

To mark the panel boxes as drag sources, you drag the componentDragSource tag from the Component Palette and drop it onto each of the panelBox objects of the application. This gesture (dragging items from the Component Palette onto a page) is easy to do in the Structure window:

1. From the Oracle JDeveloper menu, select View -> Structure to open the Structure window, and select View -> Component Palette to open the Component Palette.

2. In the Application Navigator, double-click the DashBoardPage.jspx file to launch the Oracle JDeveloper visual editor.

3. In the opened editor, click in one of the panel boxes, such as the “Employee Salaries in selected Department” box.

In the Structure window, you should see the af: panelDashboard component and its contained af:panelBox children. Now move to the Component Palette:

1. Select ADF Faces from the menu.

2. In the search field above the menu, type component drag source and press Enter (or click the right-arrow search button). The search results return the Component Drag Source (ADF Faces .Operations) tag.

3. Drag the Component Drag Source tag from the Component Palette to the af:panelDashboard, and drop it onto the first af:panelBox child component in the af:panelDashboard.

Repeat this process for the other three panel boxes in the dashboard. When you finish, every panel box will have an af:componentDragSource as a child component (see Figure 2).

Right-click DashBoardPage.jspx, and select Run from the context menu to run the sample application again. When the application appears in the browser, select a panel box and move it within the dashboard, as shown in Figure 3. When you release the mouse button, Oracle ADF Faces will drop the panel box into position.