Using the new JSF Components ShowDetailFrame and PanelCustomizable for structuring the User Interface in JDeveloper 10.1.3.2

One of the interesting new features that come along with WebCenter in JDeveloper 10.1.3.2, but hopefully are not necessarily part of WebCenter (licence) is the set of Customizable Components: PanelCustomizable and ShowDetailFrame. These two components make it very easy to organize the content of our web application, treating different panels as if they are almost stand-alone, portlet like objects that can be minimized, rearranged, have their own dropdown menus etc. Their use in conjunction with portlets is obvious, but they can be used in any JSF (e.g. ADF Faces) application. In this article I will give a very simple example of applying these components to an ADF Faces databound web application.

Our starting point is a simple JDeveloper Web Application with a Model (ADF BC) project, based on EMP and DEPT in the Scott schema. There is a Viewlink between Dept and Emp to specify the master-detail relationship.

To be able to make use of the panelCustomizable and showDetailFrame components, we have to add the library and tag-library to our project. Inspect the project libraries to see whether it includes the Customizable Components library. Then inspect the JSP Tag Libraries for the project:

When you find the Customizable Components taglib missing, click on the Add button and select it from the list to add it.

Now let’s create a new JSF JSP page, accepting all defaults (except the new page title). I drag and drop the DeptView collection as a Read Only Table on my page:

The result:

I add the detail EmpView collection as ADF Table:

The result looks like this in the editor:

When I run the WebApplication, it runs like this:

And this is where the fun starts. I think these two tables take up two much real estate on the page. I want to allow the end user to close the Employee Details, since he only needs them occasionally. This is where the ShowDetailFrame component comes in. In the Structure Window, I select the Employees Table. From the right mouse button menu I select the option Surround With:

From the popup window I select the ShowDetailFrame component:

In the JSP Editor this looks like:

When I run the application, this is what I get:

Now the user can decide to minimize the widget that contains the Employees table, saving on ‘real estate’:

Let’s make things better! I will wrap the Departments table in a ShowDetailFrame component too, just like the Employees. Then I will surround both ShowDetailFrames with a panelCustomizable component. This container defines the context within which the children can be moved around and maximized

 Let’s move the ShowDetailFrames around a bit:

 After moving down the Departments – note: moving is a client side operation! no server round trip is required – the Departments are shown below the Employees.

Each ShowDetailFrame has been defined as isMaximizable="true" isMinimizable="true" isMovable="true"; that means that we get the local dropdown menu with Move and Maximize as options (note:the other two options were separately defined using a facet in the ShowDetailFrame and refer to custom actions).

 The result of maximizing the Employees table within the PanelCustomizable is that all of the panel is taken up by the Employees and the Departments are no longer visible.