Web Services

Visual Mashup Builder

AppliBuilder User Documentation

Web Services from Javascript Functions

Your mashup applications can benefit from the growing pool of services and data available via web services. AppliBuilder provides a few simple tools to help you use REST-based Web Services from your script functions. SOAP support is not available at this time.

To make it easier to use web services, a proxy service is provided on the server to access remote web services. This is needed to avoid cross-site scripting issues when accessing third-party web services from your browser scripts.This proxy service can be used with the URL <ROOT_CONTEXT>/xml/ajaxrestapi where <ROOT_CONTEXT> is the AppliBuilder root path, for example /ajaxdc/xml/ajaxrestapi is the URL for the proxy servlet. The Servlet supports the following parameters:

appli_svcurl: The real web service URL, e.g. http://webservices.amazon.com/onca/xml for the Amazon service.
appli_xslsheet: The URL of an XSL file to be used for server-side XSL transformation, which is provided by the proxy servlet if this parameter is specified.

Some library functions are provided to simplify web services development.

Web Services Library Functions

A few functions to access Web Services have been provided in core.js, a library available in both the builder and runtime pages. Use the Function Library item in Function menu to list and import functions.

xmlRESTService Used to invoke remote web services and return a response as XML data. Arguments are (svcurl, params, callback). The svcurl is the URL of the remote web service. params are the list of parameters to be passed to the service as a URL parameter string. callback if the name of your callback function to handle the results.

htmlRESTService Used to invoke remote web services and return a response as HTML or other text data. This is typically used along with an XSL transform on the server. Arguments are (svcurl, params, xslurl, callback). You can use the File Manager to create an XSL file on the server, and use that XSL file for your transformation. The svcurl is the URL of the remote web service. params are the list of parameters to be passed to the service as a URL parameter string. xslurl is the URL of the XSL Transform to be supplied if XSL transformation on the server is desired. callback if the name of your callback function to handle the results.
getXMLColumnValue: This is a convenience function to help in processing the XML document returned with a web services call. This is useful when rendering a page, see the Amazon book search example. Arguments are (rowNode, columnTag, separator). This method searches the sub-tree under the rowNode DOM node, and picks up all values for the columnTag, and concatenates them using the specified separator. It returns a string value.

Amazon Book Search Example

A simple example of using Amazon Book search is provided as one of the sample pages. Open the Sample application, and the amazon page to see this example.

The Amazon web services REST API is used to search for books based on the keywords specified.

The following two functions do all the work: In your builder amazon page, click Open in the Functions menu to see the functions.

Function dosearch()

This function is invoked when the Search button is clicked.

var terms = getInputValue('Textbox4');
if (terms == '') {
    alert("Please enter a search term");
    return;
}

terms = encodeURIComponent(terms);
new Applibase.Core().xmlRESTService('http://webservices.amazon.com/onca/xml', 
    'Service=AWSECommerceService&AWSAccessKeyId=09518KE4JT7Y4GGJW882&Operation=ItemSearch&SearchIndex=Books&Keywords='
    +terms, amzncallback);

The amzncallback argument is the function to be invoked when the service call returns, which is the next function we list below..

Function amzncallback(xmlDoc)

The argument in this function is the XML document returned by the service. Now we have the heavy lifting of doing something with that XML data. We render it in a table as shown below. We use the AppliBuilder library convenience method listed above to get us the value for a specific row/column when the value can be embedded in an arbitrary XML sub-tree.

var tbl = document.getElementById('AmazonTable');
if (tbl) document.body.removeChild(tbl);
var columns = new Array();
var x = xmlDoc.getElementsByTagName('Item');
var newEl = document.createElement('TABLE');

newEl.id='AmazonTable';
newEl.setAttribute('cellPadding',5);
var tmp = document.createElement('TBODY');

newEl.appendChild(tmp);
var row = document.createElement('TR');
for (j=0;j<x[0].childNodes.length;j++) {

    if (x[0].childNodes[j].nodeType != 1) continue;
    var nname = x[0].childNodes[j].nodeName;
    if (nname == 'ItemAttributes') {
        var anodes = x[0].childNodes[j].childNodes;
        for (k=0;k<anodes.length;k++) {
            var anode = anodes[k];
            if (anode.nodeType != 1) continue;
            if (columns.join('<>').indexOf(anode.nodeName) != -1)
                continue;
            var container = document.createElement('TH');
        container.style.backgroundColor = "#d6f2d8";
            var theData = document.createTextNode(anode.nodeName);
            container.appendChild(theData);
            row.appendChild(container);
            columns.push(anode.nodeName);
        }
    } else {
        if (columns.join('<>').indexOf(nname) != -1) continue;
        var container = document.createElement('TH');
        var theData = document.createTextNode(nname);
    container.style.backgroundColor = "#d6f2d8";
        container.appendChild(theData);
        row.appendChild(container);
        columns.push(nname);
    }

tmp.appendChild(row);

for (i=0;i<x.length;i++) {
    var row = document.createElement('TR');
    for (var cj=0;cj<columns.length;cj++)    {
      var nname = columns[cj];
      var ntext = 
            new Applibase.Core().getXMLColumnValue(x[i], columns[cj], ', ');
      var container = document.createElement('TD');
      container.style.backgroundColor = "#e7e7e7";
      if (nname == 'DetailPageURL') {
        ntext = '<a href=\"'+ntext+'\" target=\"_blank\" >Amazon Page</a>';
        container.innerHTML = ntext;
      } else {
        var theData = document.createTextNode(ntext);
        container.appendChild(theData);
      }
      row.appendChild(container);
    }
    tmp.appendChild(row);
}
document.body.appendChild(newEl);