Dynamic jsf page with ShowDetailFrames

The 11g webcenter edition add customizable panels and Show Detail frames to jdeveloper. In this blog I use these frames to add some data to the header and right side of the page (like a homepage). I generate these frames from a backing bean. This ShowDetailFrame component is like a portlet window. You can drag these, re-order these panels or close them. You can use this for example to display some text from the database. This is how it looks.

This is how I did it. First I create a jsf page where I add Panel Stretch Layout then I add a Customizable Panel to the top which has horizontal layout and one on the end which has a vertical layout. In the beforePhase of the view I add the init method which adds the ShowDetailFrames to the Customizable Panels.

<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
          xmlns:cust="http://xmlns.oracle.com/adf/faces/customizable"
          xmlns:pe="http://xmlns.oracle.com/adf/pageeditor">
  <jsp:directive.page contentType="text/html;charset=windows-1252"/>
  <f:view beforePhase="#{PortalBean.initPage}">
    <af:document customizationId="document70">
      <af:form id="form">
        <af:panelStretchLayout inlineStyle="width:642px; height:487px;" topHeight="120px"
                               endWidth="250px">
          <f:facet name="center">
            <af:activeOutputText value="Main Window"/>
          </f:facet>
          <f:facet name="top">
            <cust:panelCustomizable id="panelCustomizableHorizontal"
                                    layout="horizontal"
                                    displayScrollBar="true"/>
          </f:facet>
          <f:facet name="end">
            <cust:panelCustomizable id="panelCustomizableVertical"
                                    layout="vertical" displayScrollBar="true"/>
          </f:facet>
        </af:panelStretchLayout>
      </af:form>
    </af:document>
  </f:view>
</jsp:root>

Now we can create the backing bean

package nl.ordina.backing;

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.event.PhaseEvent;
import oracle.adf.view.rich.component.customizable.PanelCustomizable;
import oracle.adf.view.rich.component.customizable.ShowDetailFrame;
import oracle.adf.view.rich.component.rich.output.RichOutputText;

public class Portal {
  
    PanelCustomizable  panelHorizontal = (PanelCustomizable) getUIComponent("panelCustomizableHorizontal" );
    PanelCustomizable  panelVertical = (PanelCustomizable) getUIComponent("panelCustomizableVertical" );

    public Portal() {
    }

    public String initPage(PhaseEvent phaseEvent) {
        ShowDetailFrame  window = null;
        
        for ( int i = 1 ; i < 7 ; i++ ) {
            if ( i % 2  == 0 ) {
                window = addWindow ("horizontal_dynamic"+i,panelHorizontal);  
                addText("horizontal is great" ,window);
            } else {
                window = addWindow ("vertical_dynamic"+i,panelVertical); 
                addText("vertical is the best" ,window);
            }
        }   
        return null;
    }
    private void addText (String text,ShowDetailFrame frame) {
        RichOutputText output = new RichOutputText();
        output.setValue(text);
        output.setId("out1"); 
        frame.getChildren().add(output);
    }
  
    private ShowDetailFrame addWindow (String name,PanelCustomizable panel) {
        ShowDetailFrame window = new ShowDetailFrame();
        window.setId(name);
        window.setText(name);
        window.setDisplayShadow(true);
        panel.getChildren().add(window);
        return window;
    }
    
    private UIComponent getUIComponent(String name) {
      FacesContext facesCtx = FacesContext.getCurrentInstance();
      return facesCtx.getViewRoot().findComponent(name) ;
    }
}

Now we only have to add the bean to the adfc-config.xml

  <managed-bean>
    <managed-bean-name>PortalBean</managed-bean-name>
    <managed-bean-class>nl.ordina.backing.Portal</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
  </managed-bean>