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

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.

Share.

About Author

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director for Fusion Middleware. Consultant, trainer and instructor on diverse areas including Oracle Database (SQL & PLSQL), Service Oriented Architecture, BPM, ADF, Java in various shapes and forms and many other things. Author of the Oracle Press book: Oracle SOA Suite 11g Handbook. Frequent presenter on conferences such as JavaOne, Oracle OpenWorld, ODTUG Kaleidoscope, Devoxx and OBUG. Presenter for Oracle University Celebrity specials.

2 Comments

  1. Jaco Verheul on

    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 4.3.3.3 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.”

    (http://forums.oracle.com/forums/thread.jspa?forumID=83&threadID=469836)