Thursday 7 February 2013

Webcenter Portal UCM Integration via Content Presenter Taskflow

This blog helps the beginner to learn how to integrate Webcenter Portal Application with Site Studio Data Files. To do so you need to follow the below steps.


 

1)Install JDeveloper with Webcenter Extensions and required jar files for the RIDC code.

2) a)Create a Webcenter Portal Application and a JSF Page Fragment as mentioned below.

a)Create the connection for the UCM in JDeveloper as specified below.

3)Install Oracle UCM 11g and  create the Site Studio Data Files with the ED,RD and RT as specified below.

 

Detailed Explanation of the above steps

1) Install JDeveloper with Webcenter Extensions and required jar files for the ridc code.

 

As mentioned in the above image Go To -> Help ->Check for Updates->webcenter Extensions.

After that JDeveloper will automatically restarts , then you download jar files for RIDC code and upload to library in the JDeveloper as mentioned in the below image.

 

2) a)Create the Webcenter Portal Application and JSF Template as mentioned below.

 

Create a new JSF Page and drag & drop Content Presenter Taskflow from on 

<cust:panelCustomizable tag as mentioned below.

 

 Please find the code for new JSF page and its pageDef code

below.

New JSF Page code .

<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:pe="http://xmlns.oracle.com/adf/pageeditor"

          xmlns:cust="http://xmlns.oracle.com/adf/faces/customizable">

  <jsp:directive.page contentType="text/html;charset=UTF-8"/>

  <f:view>

    <af:document id="d1" title="Offer Details">

      <af:form id="f1" usesUpload="true">   

        <af:pageTemplate viewId="/oracle/webcenter/portalapp/pagetemplates/pageTemplate_globe.jspx"

                         value="#{bindings.pageTemplateBinding}" id="pt1">

          <f:facet name="content">

            <pe:pageCustomizable id="hm_pgc1">

              <cust:panelCustomizable id="hm_pnc1" layout="scroll">

                <af:region value="#{bindings.doclibcontentpresenter1.regionModel}"

                           id="r1"/>

                  </cust:panelCustomizable>

              <f:facet name="editor">

                <pe:pageEditorPanel id="pep1"/>

              </f:facet>

            </pe:pageCustomizable>

          </f:facet>

        </af:pageTemplate>

      </af:form>

    </af:document>

  </f:view>

</jsp:root>

New JSF PageDef code.

<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:pe="http://xmlns.oracle.com/adf/pageeditor"

          xmlns:cust="http://xmlns.oracle.com/adf/faces/customizable">

  <jsp:directive.page contentType="text/html;charset=UTF-8"/>

  <f:view>

    <af:document id="d1" title="Offer Details">

      <af:form id="f1" usesUpload="true">   

        <af:pageTemplate viewId="/oracle/webcenter/portalapp/pagetemplates/pageTemplate_globe.jspx"

                         value="#{bindings.pageTemplateBinding}" id="pt1">

          <f:facet name="content">

            <pe:pageCustomizable id="hm_pgc1">

              <cust:panelCustomizable id="hm_pnc1" layout="scroll">

                <af:region value="#{bindings.doclibcontentpresenter1.regionModel}"

                           id="r1"/>

                  </cust:panelCustomizable>

              <f:facet name="editor">

                <pe:pageEditorPanel id="pep1"/>

              </f:facet>

            </pe:pageCustomizable>

          </f:facet>

        </af:pageTemplate>

      </af:form>

    </af:document>

  </f:view>

</jsp:root>


 

 Here actually the arrow marked parameter is the JSF Fragment  Template name. There are different types of DatasourceTypes are there , a datasourceType will query the data files from the UCM Server Ex:- Query based one (dsTypeQueryExpression) or  single node one (dsTypesingleNode ) which display's single Site Studio data file or a content item and some will display all the content items in a contribution folder from the UCM Server.But in our Example we are using "dsTypeSingleNode " which will render's the single Site Studio Datafile on the Webcenter Portal Application.

2) b) Creating a JSF Page Fragment as shown below.

 

 After creating the JSF page Fragment make the JSF Page Fragment as portal Resource as mentioned below.


 

 JSF Page Fragment code :- 

<?xml version = '1.0'?>


 

  <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"


 

             version="2.1"

      xmlns:prtlfn="/webapp/portalfunction"

           

            xmlns:af="http://xmlns.oracle.com/adf/faces/rich"


 

             xmlns:dt="http://xmlns.oracle.com/webcenter/content/templates">


 

      <dt:contentTemplateDef var="node">


 

         <af:panelGroupLayout layout="vertical" id="pgl3">


 

           <af:panelGroupLayout layout="horizontal" valign="top" inlineStyle="background-color:#FFF; padding:10px;" id="pgl4">


 

               <af:panelGroupLayout layout="vertical" id="pgl2" valign="top">


 

                 <af:outputText value="#{node.propertyMap['dInDate'].value.calendarValue}" id="ot3" styleClass="bodytext" converter="javax.faces.DateTime"/>


 

               </af:panelGroupLayout>


 

              <af:spacer width="10px;" id="s1" inlineStyle="background-color:#DDD; color:white;"/>


 

             <af:panelGroupLayout layout="vertical" id="pgl1" valign="top">


 

                  <af:outputText value="#{node.propertyMap['xNews'].value}" id="ot12" inlineStyle="background-color:#0A9FC0; color:white; text-align:left; padding:5px;"/>


 

                <af:goLink text="#{node.propertyMap['SPECIAL_OFFERS_RD:TITLE'].value}"


 

                      id="gil1"

           

                     destination="#{'/faces/oracle/webcenter/portalapp/pages/offer_details.jspx?news_id='}#{node.propertyMap['dDocName'].value}"

                    

                    


 

                     inlineStyle="font-size:1.17em; color:Black;" />

                                                                

                       


 


 


 

                <af:outputText value="#{node.propertyMap['SPECIAL_OFFERS_RD:SUBTITLE'].value}"


 

                              id="ot2" inlineStyle="font-size:1.17em; color:Black;" /> 


 

              </af:panelGroupLayout>


 

            <af:panelGroupLayout layout="vertical" id="pgl32" valign="top" >


 

            <!--    <af:outputText value="#{node.propertyMap['SPECIAL_OFFERS_RD:IMAGE'].value}" escape="false" id="ot1"  inlineStyle="max-width:100px;"/>   -->


 

    <af:image source="#{prtlfn:getWebRendition(node.propertyMap['SPECIAL_OFFERS_RD:IMAGE'].value)}" id="i1"  />

   

            </af:panelGroupLayout>


 

          </af:panelGroupLayout>


 

         <af:panelGroupLayout layout="horizontal" id="aaaa">


 

          </af:panelGroupLayout>


 

      </af:panelGroupLayout>


 

     </dt:contentTemplateDef>


 

  </jsp:root>

Here in the above code "SPECIAL_OFFERS_RD " is Region Definition which is created in the Site Studio it has the TITLE,SUBTITLE and IMAGE element definition's 

3) a)Create the connection for the UCM in JDeveloper as specified below. 

On the "Connection"  tab in JDev just click and say Content Repository and select options as mentioned below give the UCM weblogic credentials and then test for the connection.

 

 

3)Install Oracle UCM 11g , Site Studio and  create the Site Studio Data Files with the ED,RD and RT as specified below. 

After installing UCM Server log into ucm.

After installing Site Studio 11g connect to UCM Server as mentioned below.

After that integration run the Webcenter Portal Application in the JDeveloper and you can see the Site Studio Data File Rendered on the Webcenter Portal Application as mentioned in below image.