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

Lucas Jellema 2

One of the interesting new features that come along with WebCenter in JDeveloper, 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.

2 thoughts on “Using the new JSF Components ShowDetailFrame and PanelCustomizable for structuring the User Interface in JDeveloper

  1. I don’t think end users can do minimize and restore operations, because WebCenter stores them as page customizations, which are not available to end users. Only site administrators can minimize/restore. See What You Should Know About Maximize, Minimize, Restore, and Move in the developers guide.

  2. Unfortunately, using these components is not for everyone, as I learned from the answer to my post on the OTN forum: “You are using Oracle WebCenter in JDeveloper if your application is consuming any of the following:

    • Customizable Components (showDetailFrame or panelCustomizable)
    • Content Repository Data Control to access content via JSR 170
    • You are consuming Oracle PDK-Java, JSR 168, or other WSRP-based portlets in your application
    • You are using the JSF portlet bridge libraries to portletize your Faces application

    If you are using any of the above in your application, you will need a WebCenter license to run it in Oracle Application Server.”


Comments are closed.

Next Post

Creating an ADF URL Service DataControl for binding a File or Servlet/JSP service and using it in an ADF Faces Web Application

Looking through the list of new features for JDeveloper yesterday I suddenly noticed a feature that was not new at all, but that had so far escaped my notice: the URL Service Data Control, that allows us to define a ADF Model Data Control for URL Services, such as […]
%d bloggers like this: