Spaces REST API Example

The following example uses JQuery with the new WebCenter REST APIs released in PS3. The source for this example, implemented in JavaScript and html, is here. The source must be customized before use:

• Supply the username and password for a WebCenter user by editing the relevant JavaScript variables.
• Supply the URL of the resourceIndex for the WebCenter rest API, e.g. http://localhost/rest/api/resourceIndex.
• Use a proxy to ensure that the sample files and the webcenter rest API share the same domain. See below for quick steps to use apache mod_proxy to accomplish this.

Sample Overview

In this example, we get a list of existing group spaces and show some data about them. We provide a delete link for each group space. We also provide a form for making new group spaces from various templates. We use a JQuery plugin from www.datatables.net to display the data and one from trentrichardson.com (impromptu) to display messages. The displays are shown in the following screenshot:

Sample HowTo

Step 1: Get the URL Template for the Spaces API

The resourceIndex is a list of links that have resourceTypes and URL templates. Your code should hard code the resourceType, not the template. The URL template for the spaces API will give us a list of spaces (GET calls) and allow us to create new spaces (POST calls). In JQuery:

$.ajax({url: resourceIndex, dataType: "xml", username: username, password: password, success: function(xml) {
 var link = $(xml).find("link[resourceType=urn:oracle:webcenter:spaces]");
 spacesEndpoint = link.attr("template");
}


URL templates include all possible parameters. In some cases, we modify or remove parameters:

//we want a list of all spaces, so we remove the search parameter
spacesEndpoint = spacesEndpoint.replace('&search={search}', '');
//we'll ask for 20 spaces at a time
spacesEndpoint = spacesEndpoint.replace('{itemsPerPage}', '20');
//for making POSTs, we need to remove two other parameters from the template
spacesPOSTEndpoint = spacesEndpoint;
spacesPOSTEndpoint = spacesPOSTEndpoint.replace('&projection={projection}', '');
spacesPOSTEndpoint = spacesPOSTEndpoint.replace('&visibility={visibility}', '');


Step 2: GET a list of Spaces

We now make a call to the Spaces API and display data from the response. In particular, we use the URL template with rel='self' as the basis for a delete link. In JQuery:

function drawSpacesList() {
 $.ajax({url: spacesEndpoint, dataType: "xml", username: username, password: password, success: function(xml) {
  var aaData = new Array();
  var spaceListData = new Array();
  $(xml).find("space").each(
   function() {
    var selfURLtemplate = $("//link[resourceType='urn:oracle:webcenter:space'][rel='self']", this).attr("template");
    var deleteHref = "javascript:askDeleteSpace('" + selfURLtemplate + "')";
    var deleteAnchor = '<a href="' + deleteHref + '">Delete</a>';
    aaData.push(new Array($(this).children("displayName").text(),$(this).children("isPublic").text(),
     $(this).children("isOffline").text(), deleteAnchor));
    spaceListData.push(new Array($(this).children("displayName").text(), selfURLtemplate));
   });
  var oTable = $('#groupspaces').dataTable({
   "bDestroy": true,
   "bJQueryUI": true,
   "sPaginationType": "full_numbers"
  });
  oTable.fnClearTable();
  oTable.fnAddData(aaData);
  var spacelist = document.getElementById("space_list");
  for (x in spaceListData) {
   spacelist.innerHTML += ("" + spaceListData[x][0] + "");
  }
  }
 });
}


The above iterates through each found space, extracts info, forms the call to the 'deleteHref' and redraws the table to display the data. The delete logic (note type: "delete") is:

function askDeleteSpace(deleteURL) {
 currentDeleteURL = deleteURL;
 $.prompt('Are you sure you want to delete this Space?',{ buttons: { Ok: true, Cancel: false }, callback: deleteSpace } );
}

function deleteSpace(v, m, f) { //the signature of the callback defined by impromptu
 if (v = true) {
  $.ajax({url: currentDeleteURL, type: "delete", username: username, password: password, success: drawSpacesList});
  currentDeleteURL = "";
 }
}


Step 3: GET a list of Space Templates for the "Create Space" form

Step 4: POST data to create new Spaces

When a user submits data from the "Create Space" form, we format that data as xml and POST it in the body of the call to the spacesPOSTendpoint:

function createSpace(){
 var nsform = document.getElementById("new_space_form");
 var name = nsform.new_space_name.value;
 var desc = nsform.new_space_desc.value;
 var templateName = nsform.new_space_template.value;
 var postBody = "<space><name>" + name + "</name><description>" + desc + "</description><templatename>" + templateName + "</templatename></space>";
 $.ajax({url: spacesPOSTEndpoint, type: "post", contentType: "application/xml",
data: postBody, dataType: "xml", processData: false, username: username, password: password, success: drawSpacesList});
}


Proxy Configuration

Let's assume you are running the sample code on your local apache server (localhost) and you want to create a localhost proxy for your WebCenter REST API. Follow these steps:

1. Uncomment the following lines in httpd.conf:
     LoadModule proxy_module modules/mod_proxy.so
     LoadModule proxy_http_module modules/mod_proxy_http.so
2. Add the following lines to httpd.conf:
    ProxyPass /webcenter/ http://my.webcenter.instance:8888/webcenter/
    ProxyPassReverse /webcenter/ http://my.webcenter.instance:8888/webcenter/
    ProxyPass /rest/ http://my.webcenter.instance:8888/rest/
    ProxyPassReverse /rest/ http://my.webcenter.instance:8888/rest/
    ProxyPreserveHost on
3. Save httpd.conf and restart apache.