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.*,
COM.FutureTense.Util.ftMessage,
com.fatwire.assetapi.data.*,
com.fatwire.assetapi.*,
COM.FutureTense.Util.ftErrors"
%><cs:ftcs>
<%-- 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">
<head>
<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">
</head>
<body>
<!-- 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") %>'>
</render:calltemplate>
<!-- 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>
<script>
$(function(){
$('.collapse').collapse();
});
</script>
</body>
</html>
</cs:ftcs>
The custom component is named wcsEmbed and is stored in the
file demo1.js:
(function(){
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"
xmlns:dvtm="http://xmlns.oracle.com/adf/mf/amx/dvt"
xmlns:wcs="http://xmlns.example.com/wcs">
<amx:panelPage id="pp1">
<amx:facet name="header">
<amx:outputText value="Sites
Demo" id="ot1"/>
</amx:facet>
<amx:facet name="primary">
<amx:commandButton id="cb1"
text="Back" action="__back"/>
</amx:facet>
<wcs:wcsEmbed id="em1"
c="#{bindings.c.inputValue}"
cid="#{bindings.cid.inputValue}"
pagename="#{bindings.pagename.inputValue}" />
</amx:panelPage>
</amx:view>
A couple of things to mention:
- 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:
Post a Comment