Pages

Friday, February 1, 2008

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>

11 comments:

  1. Edwin;

    Great example, but I am getting a compile error on the property set methods for setValue and setId on the RichOutputText and the setId on the ShowDetailFrame.

    Which version of the jars are you using? I want to make sure I have the correct versions.

    ReplyDelete
  2. Hi,

    I think it's made with TP3, I will make a TP4 version

    ReplyDelete
  3. It's working in TP4 too. But you have to enable webcenter in TP4

    in normal TP4 then it is not working

    ReplyDelete
  4. Thanks, that was the issue. I was using a generic template.

    ReplyDelete
  5. Thanks, that did the trick. I was using a generic template.

    ReplyDelete
  6. Instead of adding a RichOutputText to the ShowDetailFrame, is there a way to add a page fragment (task-flow) that is defined in a page definition file to the ShowDetailFrame?

    ReplyDelete
  7. Hi, that's is possible but there is a bug in tp4.

    in the final release you can do that.

    ReplyDelete
  8. I am trying to accomplish adding a JSFF fragment inside a ShowDetailItem which is inserted inside a RichPanelTabbed container. Since you say that it is possible to do it in the final release, I would like to know how you can do that.

    Can you please expand on that?

    thanks.

    ReplyDelete
  9. Hi, I don't if it works because Oracle in 11g didn't release the webcenter code.

    I will try it

    ReplyDelete
  10. Hi,
    Please i want to know how can i display a frame in jsf page ?
    i have a commandButton in my jsf page and when i select this button the frame will be displayed ( frame containe a graph :Galois Lattice).
    Thanks
    i need help please

    ReplyDelete
  11. Hi,

    are you looking for this
    af:inlineFrame source="{FaceBook.facebookLoginUrl}"
    inlineStyle="width:99%; height:99%;" shortDesc="Loginpage"

    thanks

    ReplyDelete