Writing a Hello World Client

The Mashup Server supports the quick and easy creation of web services clients written in HTML and Javascript. You can use the Javascript stubs (?stub) generated by the Mashup Server to invoke the mashup services from your web page. Mashup Server also has the concept of bundling a custom UI along with the service. Follow these simple steps to write & expose a simple client for the helloworld service :

Note:The Mashup Server should be running the helloworld service for this to work.

Step 1:

In Notepad or your favorite html editor, type the following text:

            <html>
            <head>
            <META http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title/>Hello World Client<title/>
            <script type="text/javascript" src="js/wso2/WSRequest.js"></script>
            <script type="text/javascript" src="../helloWorld?stub"></script>
            </head>                    
            <script type="text/javascript">
            <!-- Invoke the operation 'hello()' from helloWorld service -->
                                function load() {
				var hello = services["admin/helloWorld"].operations["hello"];
				var payload = null;
		
				<!-- Get response from the operation 'hello()' from helloWorld service using callback method -->
				hello.callback = function(payload) {
				
				<!-- Serialize response XML to String value -->
				var responseXML = WSRequest.util._serializeToString(payload);
				
				<!-- Print the response string value in the browser. -->
				document.write(responseXML);
				};
				<!-- Invoke handleError method if an error occurs. -->
				hello.onError = handleError;
				hello(payload); 
				}
 				function handleError(error) {
        			log (document.getElementById('console'), "Fault: " + error.reason + "\n\n" + error.detail);
    				};                
                               
                            </script>
			<body onload="load()">                       
                    </body>
                </html>

Step 2:

Save the above as "index.html" in the directory "repository/scripts/Helloworld.resources/www" within the Mashup Server directory. Now you'll be able to see the newly created page when browse to the service endpoint (eg: http://{ip-of-mashup-installation}:9763/services/helloworld). Thats it, its so simple.

Or, not simple enough for you? You can also get a template for a service, similar to the one above but customized to the service, by entering this url for your service. i.e. http://{ip-of-mashup-installation}:9763/services/helloworld?template&flavor=html and saving response as "index.html". This template invokes the first operation in the service asynchronously, and illustrates how to invoke all the other services as well.

Do you need even simpler method? Then you can go the mashup editor page and the tabs at the top will shift you among your service, custom UI and Google gadget. Why are you waiting! Start adding parameter values and build a unique and dynamic Mashup interface!