Tuesday, November 4, 2014

Oracle MAF – WebCenter Sites Integration

Inspired by Yannik article from here I tried to achieve the same kind of integration but between WebCenter Sites and Oracle MAF using custom MAF components.

Using a simple set of flex assets and three templates (main layout template, template for article and image template) the content is generated and displayed in the MAF application using a custom JavaScript component.

Layout template is calling the article (Demo_C asset) Detail template which is also calling the detail template for image (Demo_M asset):

<%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld"
%><%@ taglib prefix="asset" uri="futuretense_cs/asset.tld"
%><%@ taglib prefix="assetset" uri="futuretense_cs/assetset.tld"
%><%@ taglib prefix="commercecontext" uri="futuretense_cs/commercecontext.tld"
%><%@ taglib prefix="ics" uri="futuretense_cs/ics.tld"
%><%@ taglib prefix="listobject" uri="futuretense_cs/listobject.tld"
%><%@ taglib prefix="render" uri="futuretense_cs/render.tld"
%><%@ taglib prefix="siteplan" uri="futuretense_cs/siteplan.tld"
%><%@ taglib prefix="searchstate" uri="futuretense_cs/searchstate.tld"
%><%@ page import="COM.FutureTense.Interfaces.*,
<%-- Record dependencies for the Template --%>
<ics:if condition='<%=ics.GetVar("tid")!=null%>'><ics:then><render:logdep cid='<%=ics.GetVar("tid")%>' c="Template"/></ics:then></ics:if>
<!DOCTYPE html>
<html lang="en">
            <meta charset="utf-8"/>
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta name="description" content="">
            <meta name="author" content="">
            <link rel="shortcut icon" href="ico/favicon.png">
            <title>WebCenter Sites Demo</title>
            <!-- Bootstrap core css -->
            <link href="/cs/demo/css/bootstrap.min.css" rel="stylesheet">
            <!-- Custom styles -->
            <link href="/cs/demo/css/custom.css" rel="stylesheet">
            <!-- Start Fixed Navbar -->
            <%-- <render:callelement elementname="/Common/Navigation/TopNav"/>--%>
            <!-- End Fixed Navbar -->
            <!-- Detail Section -->
            <render:calltemplate tname="Detail" c='<%=ics.GetVar("c") %>'
                                                cid='<%=ics.GetVar("cid") %>'
                                                tid='<%=ics.GetVar("tid") %>'>
            <!-- End Detail Section -->

          <!-- Start Footer -->    
            <%--<render:callelement elementname="/Common/Navigation/Footer"/> --%>
            <!-- End Footer -->
            <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
            <script src="/cs/demo/js/bootstrap.min.js"></script>

The custom component is named wcsEmbed and is stored in the file demo1.js:

    try {
        var wcsEmbed = adf.mf.api.amx.TypeHandler.register("http://xmlns.example.com/wcs", "wcsEmbed");
        wcsEmbed.prototype.render = function(amxNode, id) {
            var rootElement = document.createElement("div");
            var c = amxNode.getAttribute("c");
            var cid = amxNode.getAttribute("cid");
            var pagename = amxNode.getAttribute("pagename");
            var pageUrl = "http://localhost:9080/cs/Satellite?c=" + c + "&pagename=" + pagename + "&cid=" + cid;
            rootElement.innerHTML = "<iframe id='f1' scrolling='auto' width='100%' height='100%' src='" + pageUrl +"'/>";
            //rootElement.innerHTML ="<h1>Hello world!</h1>";
            return rootElement;
    catch (problem) {
        alert("Error displaying the URL:" + pageUrl);

In the AMX view we are calling the custom components with the parameters that are identifiying the asset: c, cid and pagename:

<?xml version="1.0" encoding="UTF-8" ?>
<amx:view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"           xmlns:amx="http://xmlns.oracle.com/adf/mf/amx"
  <amx:panelPage id="pp1">
    <amx:facet name="header">
      <amx:outputText value="Sites Demo" id="ot1"/>
    <amx:facet name="primary">
      <amx:commandButton id="cb1" text="Back" action="__back"/>
    <wcs:wcsEmbed id="em1" c="#{bindings.c.inputValue}"
                pagename="#{bindings.pagename.inputValue}" />

A couple of things to mention:
   - The js and css files for custom components must be associated with the feature.

   - Because we are calling a remote URL, in the maf-application.xml, in the security section, the URLs must be whitelisted. For convenience and for this demo only, I whitelisted everything that is coming over http.

The end-result of this application in iOS simulator:

No comments: