Dimuthu’s Blog

WSO2 is hosting a SOA Workshop in Santa Clara, California in November 3rd 2009. You will be able to attend to the following sessions covered by the industry leading experts in SOA.

• ESBS and SOA
• SOA Security
• Mashups and Business Process Management for SOA
• SOA Governance
• SOA with C, C++, PHP
• SOA Architecture Pattern

Visit here to find more details about the event, http://wso2.com/events/2009-us-soa-workshop/?soaotad=10072009

WSO2 announced an another round of release of their famous SOA products.

• WSO2 Governance Registry 3.0.1
• WSO2 ESB 2.1.1
• WOS2 Web Services Application Server (WSAS) 3.1.1
• WSO2 Identity Server (IS) 2.0.1
• WSO2 Mashup Server 2.0.0

Although the version numbers say this is minor patch release (Other than the Mashup Server which is shipping as a major release), in fact there are new features and improvements. Some basic new features shares among all of these products are

1. Improved registry level transaction Support.
2. Improved Support for deploying on top of Application Servers other than tomcat like WebSphere, WebLogic, and
   JBoss.
3. Support for Eclipse P2 based provisioning. (Yes, you can add/remove features from these WSO2 products , see https://wso2.org/wiki/display/carbon/p2-based-provisioning-support for more details)
4. Improved Remote Registry model

WSO2 has announced the release of WSO2 Mashup Server 1.5.2. This release introduced the support for Data Services (Exposing Database, Excel sheet, CSV as a service), Open ID Logins and personalized dashboards to manage mashups and some security improvements. Just have a look at the release note for all the details about the new features, fixes of the release.

WSO2 Mashup Server enables you to develop your enterprise mashups very easily. You will write your code for the mashups in javascript with the full help of integrated javascript objects to consume Web services or Atom feeds, manage sessions, scrape web pages and manipulate storage. Once your put your .js file in to the mashup server repository, your services automatically will have the WSDLs, ‘Try It’ functionality and SOAP, REST interfaces.

If you are new to Mashup Server or to develop Mashups, just have a look at the series of screenshots released by WSO2 sometime ago. That will no doubt take you from zero knowledge to a comfortable state to write full-fledged mashups.

In this case study “ PHP Data Services Extract Content from Drupal Database“, I intended to present how Data Service concepts can be applied to extract data with marketing value from  a CMS database and publish it as web services.  I used the drupal instance deployed at http://wso2.org as the CMS for the use case. And as the data service framework, I used WSF/PHP data services library, as it requires minimum changes to the existing infrastructure (the LAMP stack).

The case study also talks about how to consume the data service by any third party mashup to present textual/ graphical views of analyzed data. These mashups can be extended up to intergreate with social networks like facebook, twitter and etc to communicate back and forth a wider community and may be it can be used to track the distribution of active users using Google maps. Simply it makes easier to analyze business data + engagement with the community.

If you are a web developer, you may have found many occasions you have to create simple mashups for your web site. There you call web services or data services to fill the content of the web page. Most of the time we call web services from a server side script, since there are many server side technologies like Java, PHP, .NET support web services.

But sometime it is in vain that you call your server scripts for a simple web service request. In fact You can use the famous XMLHttpRequest object to do the same thing from the client side itself. But you may need to prepare the complete SOAP envelope (Yea with SOAP headers, if required) in your hand to send it through XMLHttpRequest.

Another option is to  use the WSRequest script (http://mooshup.com/js/wso2/WSRequest.js). We normally use this script in the WSO2 Mashup Server to call the mashups designed in the serverside using stub. (The server side mashup is also mostly written in Javascript). We can use this script stand alone to call remote web services as well.

It introduce you the WSRequest class. It is exactly similar to the famous XMLHttpRequest class we used in  AJAX. In stead of plain message over HTTP like in the case of XMLHttpRequest, WSRequest send and receive messages in SOAP form. Here is its API in brief.

var WSRequest = function() {
    //----------------------------------------------------
    // the public properties - equivalent to XMLHTTPRequest
    //-----------------------------------------------------
    this.readyState = 0;
    this.responseText = null;
    this.responseXML = null;
    this.error = null;  // equivalent to httpErrorCode
    this.onreadystatechange = null;
    this.proxyAddress = null;
    this.proxyEngagedCallback = null
}

//----------------------------------------------------
// the public operations - equivalent to XMLHTTPRequest
//-----------------------------------------------------

/**
 * @description Prepare a Web Service Request .
 * @method open
 * @param {hash} options,
 *   possible options: possible values for the option
 *            useSOAP : false/true/1.1/1.2
 *            useWSA : true/false/1.0/submission
 *            useWSS : true/false (only for usernametoken & timestamp)
 *
 * @param {string} URL
 * @param {boolean} asyncFlag
 * @param {string} username
 * @param {string} password
 */
WSRequest.prototype.open = function(options, URL, asnycFlag, username, password) {.. }

/**
 * @description Send the payload to the Web Service.
 * @method send
 * @param {dom} response xml payload
 */
WSRequest.prototype.send = function(payload) {.. }

I wrote a simple javascript/html demo which calls the data service that I published for my blog. This service is written using WSF/PHP Data Services. Check the demo and client, service sources  from the following links.

There You can see, how easy to write an AJAX like page for call web services using the WSRequest javascript class.

Few weeks back, I did a screencast on how to consume a web service using WSF/PHP demonstrating an application of US National Digital Weather Forecast Database. In that webservice there are operations like “GmlLatLonList” that retrieve a KML for a given longitude and latitude inside USA. I wrote a simple mashup that load this KML from the web service and set it as a layer in a map which is created using openlayers.

There I use the WSO2 Mashup Server to create the stub to invoke the weather forecasting web service. This stub can be easily used to invoke the service from a javascript in a HTML page.

You can visit the mashup from the Mashup Server community site mooshup.com from here, http://mooshup.com/services/Dimuthu/weatherMap/.

Here are the steps I used to create this mashup.

1. First I wrote a javascript to wrap the web service. It has a function that can be used as a stub to invoke the web service operation just as a javascript function call. Here is the source of the javascript I wrote. It wraps the “GmlLatLonList” service operation in the “fetchWeatherInfo” function. I gave this javascript service the name “weatherMap”.

   this.serviceName = "weatherMap";
   this.scope = "application";
   this.documentation = "Visit the weather information from just a mouse click";
   
   fetchWeatherInfo.documentation = "Retrieve the weather information for the given inputs" ;
   fetchWeatherInfo.inputTypes = {"listLatLon" : "string",
                                  "startTime" : "string",
                                  "endTime" : "string"};
   fetchWeatherInfo.outputType = "xml";
   function fetchWeatherInfo(listLatLon, startTime, endTime){
   
       var url = "http://www.weather.gov/forecasts/xml/SOAP_server/ndfdXMLserver.php";
   
       // setting up the the WSRequest
       var request = new WSRequest();
   
       var options = new Array();
       options.useSOAP = 1.1;
       options.useWSA = false;
   
       // do the request
       request.open(options, url, false);
   
       var reqXml =
           <ns:GmlTimeSeries xmlns:ns="uri:DWMLgen">
               <listLatLon>{listLatLon}</listLatLon>
               <startTime>{startTime}</startTime>
               <endTime>{endTime}</endTime>
               <compType>Between</compType>
               <featureType>Ndfd_KmlPoint</featureType>
               <propertyName></propertyName>
           </ns:GmlTimeSeries>
   
       request.send(reqXml);
   
       return request.responseXML;
   }

2. Deployed it in the WSO2 Mashup server. I downloaded and setup the mashup server locally. Then I just needed to put the script inside “scripts/dimuthu” directory. There is an online instance of mashup server called mooshup.com in which I later deployed my service. After deployed it in the mashup, it will generate the javascript stub for that service. You can view the generated stub by adding a “?stub” to the mashup url. Here is the stub for the “weatherMap” mashup deployed in the mooshup server, http://mooshup.com/services/Dimuthu/weatherMap?stub. Similarly you can view the try out page for the service from, http://mooshup.com/services/Dimuthu/weatherMap?tryit
3. Wrote an HTML interface for the service. I used the openlayers javascript library to load google map in to my page. And added a custom control that handles the click. In the click handler, I just call the stub and get the response KML string back using a code similar to this.

   <!-- include the script for the stub -->
   <script type="text/javascript" src="../weatherMap?stub"></script>
   
   <script language="javascript">
   ...
   
   // the code inside the handler of the click control
   
      // preparing the stub call
      weatherMap.fetchWeatherInfo.onError = handleError;
      weatherMap.fetchWeatherInfo.callback = function(response) {
          if(response && response.firstChild.firstChild.nodeValue) {
   
              // handling kml document
              var kmlDoc = response.firstChild.firstChild.nodeValue;
   
              // the code to add the kml layer to the map and render it
              ....
            }
       };
      // preparing the startTime, endTIme, lat, lon values
      ...
   
      // doing the request call
      weatherMap.fetchWeatherInfo(lat + "," + lon, startTime, endTime);
   
   </script>

   The KML style icon will be shown in the map after adding the KML layer to the map. And we can render the KML style details which in this case contain the weather forecast data in detail in some other place easily.

So this way you can create a mashup using openlayers and the data retrieved from different web services. You can find another mashup that shows the twitter updates on a map in real time at here, http://mooshup.com/services/tyrell/TwitterMap/.

Jonathan Marsh, VP of Business Development of WSO2, recently released three screencasts explaining the features of WSO2 Mashup Server and how you can use these features in building your own Mashups.

The first screencast targeted at newbies to introduce the mashup concept and WSO2 Mashup Server and the next two videos present you the topics like “Scraping Web Pages” and “Service Composition” which are useful in building advance mashups.

You can view the high quality version of these videos from wso2.org. Here are the links

1. Hello World
2. Scraping Web Pages
3. Service Composition

Getting Started With Hello World

How To Scrape a Web Page

Service Composition