In this blog article I'll show how to use WebCenter Sites' Insite Editing capabilities to drop a modern simple JavaScript based application on a web page. This allows web editors to place, remove and possibly style the JavaScript applications without help from the development team (after the initial single setup phase). The web techniques used in this blog are well documented elsewhere, The blog assumes reasonable familiarity with modern Javascript frameworks, REST and mashup as an integration technique. I just wanted to bring them together because the A-Team often gets asked if such a scenario is possible. Well, it is.
I have use a simple tutorial application that makes use of Underscore.js, Backbone.js and Require.js for the front-end JavaScript and node, resitify and mongodb for the middleware and storage layer. The application allows users to post messages. It is a really arbitrary application, but it does show the moving parts and it also shows that the integrations make use of open 'standards' as REST, JSON and CORS. The application is a slight modification of http://backbonetutorials.com/nodejs-restify-mongodb-mongoose/. Please study this tutorial to understand its working without WebCenter Sites. Although this sample uses non-Oracle middleware and database, it is trivial to build a similar application with Oracle middleware like WebLogic and Oracle database or Oracle NoSql database.
What I will show is how to use an existing deployment of this application and with minimal modifications how this can be deployed on a WewbCenter Sites managed site by an business user.
To deploy the application take the following steps.This assumes that you have installed node and mongodb as per instructions in the backbonetutorials.com tutorial.
app.use(restify.CORS({ 'origins': ['http://localhost:8080','http://localhost:9080'] }));
> node server.js
<%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld" %><%@ taglib prefix="render" uri="futuretense_cs/render.tld" %><%@ taglib prefix="ics" uri="futuretense_cs/ics.tld" %><cs:ftcs><render:logdep cid='<%=ics.GetVar("tid")%>' c="Template"/><% %><ics:callelement element="avisports/getdata"><ics:argument name="attributes" value="module_html" /></ics:callelement><% >${asset.module_html}<% %></cs:ftcs>
This Template just streams the 'module_html' attribute from the Module asset.
</div> <div> <insite:calltemplate tname="Module" slotname="Module" context='<%=ics.GetVar("c") + ":" + ics.GetVar("cid") + ":Module"%>' clegal="AVIArticle" emptytext="Drop your module here" /> </div> <div id="footer"> <render:calltemplate tname="DesktopFooter" style="element" args="c,cid" /> </div> </div> </body>
<script data-main="/cs/messages/js/main" src="/cs/messages/js/libs/require/require.js"></script> <div class="about"> <h3>Messages example - a json no-sql db with Sites front-end</h3> <p> An example of integrating WebCenter Sites with a back-end service via REST and JavaScript. </p> <h2>Messages</h2> </div> <div class="container"></div> <div class="resources"> <p> If you start to see your messages build up in the Message box above, congratulations! You've successfully setup this demo. </p> </div>
The Module asset is a normal asset, also a business user can create such an asset.
This concludes the basic set-up steps. If you go, as an WebCenter Sites editor, to the editorial UI and open the Home page of avisports. In the WebUI, you can see the empty slot at the bottom. In here you can drop a Module asset.
After the Messages asset is dropped, the screen re-renders, and the Messages application is rendered. No messages are shown.
Now, save the asset and preview it. Now messages can be typed in the text box. These messages are send to the node middleware and stored in Mongodb. Each time when this page is loaded, the JavaScript application is loaded and the messages are retrieved from the database bypassing WebCenter Sites' application server.
A last node on developers that are not that proficient in mongodb maintenance. Below is a simple script to drop the messages collection from Mongo.
Use mongo shell
> mongo > use wcs > db.messages.count() 2 > db.messages.drop() true > db.messages.count() > exit
In this blog I have show that in a couple of simple steps, an existing front-end application can be deployed on a WebCenter Sites' managed page by an business user.