WebCenter Sites and back-end integration via front-end app and REST

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.

Setup

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.

1. download sites-node-rest and untar at a location.
2. cd into the node directory. This directory contains the node middleware. It is a simplified version of the backbone tutorial as the html server is not used, as this is provided by WebCenter Sites.  Execute
   > npm install
3. in server.js check the location for the CORS headers. They should map the hostname that the browser uses to connect to the host. If this is not correct the XHR requests to the middleware resitify client will not be allowed by the browser.

    app.use(restify.CORS({  'origins': ['http://localhost:8080','http://localhost:9080']  }));

4. in config.js check the location of mongodb.
5. Start the back-end application with

   > node server.js

6. deploy the messages folder to Sites/webapps/cs/messages. This is the front-end application. It is a slightly modified version of the backbone tutorial. It is mainly simplified as decoration is removed for better understanding of the essentials.
7. Check Sites/webapps/cs/messages/js/collections/MessagesCollection.js and Sites/webapps/cs/messages/js/models/MessageModel.js for the location of node restify listener. Change if needed.
8. Now, log into the avisports sample site and create new attribute named 'module_html' of type text with a TextArea60x3 attribute editor.
9. Create a new Definition called 'Module' with  the just created single mandatory attribute 'module_html'.
10. Create a start menu for a new Module for AVIArticle (Article) with definition 'Module'
11. Create a new Template: 'AVIArticle/Module' with Usage: 'Element is used within an HTML page'. This can be set to be cached as all personalization happens on the back-end.

    <%@ 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.

12. Now change the Template Page/HomeLayout1 and add the <insite:calltemplate> tag for the Module slot. In the sample I have added this to the bottom of the page, just above the footer. The asset is associated to the webpage via a Context scoped slot. In the sample the context is restrictive to only the current Page asset. If you would like to use this app on more pages you may need to add this code to multiple Templates and/or change the context value.

    </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> 

13. Now the last step is to add the Messages asset that creates the script and div tags to launch the front-end application. The html code for this is likely to be  supplied by the front-end app development team.

    <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.

Editorial work

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 

Summary

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.