Oracle WebCenter Portal – Dynamic Page Styles

Ok so… Moving to MuleSoft doesn’t mean I’ll stop writing about Oracle, at least not for now.

This post should help some of you that still have nightmares when you hear the word Page Style in WebCenter Portal.

The problem?

They are not difficult to build, as they can be considered like “Templates” but once they get assigned to a Page, if using a common approach, you can’t change modify a Page Style and reflect the change to an existing page, unless you RECREATE the page.

THIS IS NOT COMPLETELY TRUE

Solution

Build dynamic Page Styles, one of the most easiest ways of doing this is using “Declarative Components“.

 

If you want to know more about Declarative Components please have a look here:

v. 11.1.1.9

https://docs.oracle.com/middleware/11119/adf/tag-reference-faces/tagdoc/af_declarativeComponent.html

I’ll describe this solution for both, WebCenter Portal Framework and WebCenter Portal.

WebCenter Portal Framework

  1. Create your portal Application
  2. Create a Declarative Component
  3. Create a Page Style
  4. Reference the Declarative Component in your Page Style
  5. Create a Page based on the Page Style
  6. Modify the Declarative Component and test.

Panel Splitter

 

2015-11-22_0245

 

Panel Tab

 

delcarativecomponentsPS2015-11-22_0246

 

For now I’m just going to give you an example of how a Declarative Component might look like:

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <af:componentDef var="attrs" componentVar="component">
    <af:panelTabbed position="above" id="dc_pt1" styleClass="AFStretchWidth" dimensionsFrom="auto">
      <af:showDetailItem id="Left" text="Tab Label 1" disclosed="true">
        <af:panelGroupLayout id="dc_pgl2">
          <af:facetRef facetName="facetLeft"/>
        </af:panelGroupLayout>
      </af:showDetailItem>
      <af:showDetailItem id="Center" text="Tab Label 2">
        <af:panelGroupLayout layout="scroll" xmlns:af="http://xmlns.oracle.com/adf/faces/rich" id="dc_pgl1">
          <af:facetRef facetName="facetCenter"/>
        </af:panelGroupLayout>
      </af:showDetailItem>
    </af:panelTabbed>
    <!--af:panelSplitter id="dc_ps1" styleClass="AFStretchWidth">
      <f:facet name="first"/>
      <f:facet name="second"/>
    </af:panelSplitter-->
    <af:xmlContent>
      <component xmlns="http://xmlns.oracle.com/adf/faces/rich/component">
        <display-name>declarativePageStyle2Layouts</display-name>
        <facet>
          <description>Left Facet</description>
          <facet-name>facetLeft</facet-name>
        </facet>
        <facet>
          <description>Center Facet</description>
          <facet-name>facetCenter</facet-name>
        </facet>
        <facet>
          <description>Right Facet</description>
          <facet-name>facetRight</facet-name>
        </facet>
        <component-extension>
          <component-tag-namespace>org.mauro.webcenter.components</component-tag-namespace>
          <component-taglib-uri>/pageStyleLib</component-taglib-uri>
        </component-extension>
      </component>
    </af:xmlContent>
  </af:componentDef>
</jsp:root>

Let’s check the important parts:

  • Facets are important as there I will hold Composer components.
  • In the code shown, I have commented a pannelSplitter and I display a pannelTab instead.
    • The example is mainly to show you that the Page Style can be modified from a pannelSplitter to a pannelTab without recreating the whole page.

Now the Page Style:


<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" 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=UTF-8"/>
  <f:view>
    <af:document id="d1">
      <af:form id="f1">
        <af:panelGroupLayout id="pgl1" styleClass="AFStretchWidth" layout="vertical">
          <pe:pageCustomizable id="hm_pgc1" inlineStyle="width:100%;">
            <cust:panelCustomizable id="hm_pnc1" layout="scroll">
              <af:panelGroupLayout id="panelGroupLayout1" layout="vertical" styleClass="AFStretchWidth">
                <af:declarativeComponent id="decps" viewId="/components/psLayoutComponent.jsff">
                  <f:facet name="facetLeft">
                    <cust:panelCustomizable id="a_pnc1" layout="scroll" showTabAction="true">
                      <af:outputText value="I'm Facet One" id="ot1"/>
                    </cust:panelCustomizable>
                  </f:facet>
                  <f:facet name="facetCenter">
                    <cust:panelCustomizable id="a_pnc2" layout="scroll" showTabAction="true">
                      <af:outputText value="I'm Facet Two" id="ot2"/>
                      <af:calendar id="c1"/>
                    </cust:panelCustomizable>
                  </f:facet>
                </af:declarativeComponent>
              </af:panelGroupLayout>
            </cust:panelCustomizable>
            <f:facet name="editor">
              <pe:pageEditorPanel id="pep1"/>
            </f:facet>
          </pe:pageCustomizable>
        </af:panelGroupLayout>
      </af:form>
    </af:document>
  </f:view>
</jsp:root>

What the Page Style does, is to reference the Declarative Component and inside the facets it includes the panelCustomizable component for Composer.

Create the Portal Resource for the Page Style and run your application, create a new page using the new Page Style, add something in run time using Composer, then just change the Declarative Component and test it again, your modification should be directly reflected to your page without rebuilding the whole thing, IMPORTANT, remember to leave the reference to the facets.

What’s different for WebCenter Portal?

Just how you publish this change:

  1. You can use a shared library
  2. You can use wlst (importMetadata)

This will import any change done to the Declarative Component.

If you want more information regarding importMetadata:

WebCenter Specific

http://docs.oracle.com/cd/E28280_01/webcenter.1111/e12405/wcadm_app_config_files.htm#WCADM5018

Generic

http://docs.oracle.com/cd/E28271_01/web.1111/e13813/custom_mds.htm#CHDHDCAI

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: