Learn how the Scripto Web Service helps you to present platform information in your HTML with JavaScript and dynamic page updating. After this tutorial, you will know how to create Axeda Custom Objects that return formatted results to JavaScript using XmlHttpResponse, and how a very simple page can incorporate platform data into your browser-based user interface.
Part 1 - Simple Scripto
In Using Scripto, you learned how Scripto can be called from very simple clients, even the most basic HTTP tools. This tutorial builds on the examples in that tutorial.
The following HelloWorld script accepts a parameter named "foo". This means that the caller of the script may supply a value for this parameter, and the script simple returns a message that includes the value supplied.
import static com.axeda.sdk.v2.dsl.Bridges.*
import com.axeda.services.v2.*
import com.axeda.sdk.v2.exception.*
return "Hello world, ${parameters.foo}"
In the first part of this tutorial, we'll be creating an HTML page with some JavaScript that simply calls the HelloWorld script and puts the result on the page.
Create an HTML File
Open up your favorite text editor and create a blank document. Paste in this simple scaffold, which includes a very simple FORM with fields for your developer platform email and password, and the "foo" parameter.
<html>
<head>
<title>Axeda Developer Connection Simple Ajax HelloWorld Example</title>
</head>
<body>
<form name="f1">
Platform email (login): <input name="username" type="text"><br/>
Password: <input name="password" type="password"><br/>
foo: <input name="foo" type="text"><br/>
<input value="Go" type="button" onclick='JavaScript: callScripto()'/></p>
<div id="result"></div>
</form>
</body>
</html>
Pretty basic HTML that you've seen lots of times. Notice the form onclick refers to a JavaScript function. We'll be adding that next.
Add the JavaScript
Directly under the <title> tag, add the following
<script language="Javascript">
var scriptoURL ="http://dev6.axeda.com/services/v1/rest/Scripto/execute/";
var scriptName ="HelloWorld2";
</script>
This defines our JavaScript block, and a couple of constants to tell our script where the server's Scripto REST endpoint is, and the name of the script we will be running.
Let's add in our callScripto() function. Paste the following directly under the scriptName variable declaration:
function callScripto(){
try{
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
}catch(e){
// must be IE
}
var xmlHttpReq =false;
var self =this;
// Mozilla/Safari
if(window.XMLHttpRequest){
self.xmlHttpReq =new XMLHttpRequest();
}// IE elseif(window.ActiveXObject){
self.xmlHttpReq =new ActiveXObject("Microsoft.XMLHTTP");
}
var form = document.forms['f1'];
var username = form.username.value;
var password = form.password.value;
var url = scriptoURL + scriptName +"?username="+ username +"&password="+ password;
self.xmlHttpReq.open('POST', url,true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange =function() {
if(self.xmlHttpReq.readyState ==4){
updatepage(self.xmlHttpReq.responseText);
}
}
var foo = form.foo.value;
var qstr ='foo='+escape(foo);
self.xmlHttpReq.send(qstr);
}
That was a lot to process in one chunk, so let's examine each piece.
This piece just tells the browser that we'll be wanting to make some Ajax calls to a remote server. We'll be running the example right off a local file system (at first), so this is necessary to ask for permission.
try{
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
}catch(e){
// must be IE
}
This part creates an XmlHttpRequest object, which is a standard object available in browsers via JavaScript. Because of slight browser differences, this code creates the correct object based on the browser type.
var xmlHttpReq =false;
var self =this;
// Mozilla/Safari
if(window.XMLHttpRequest){
self.xmlHttpReq =new XMLHttpRequest();
}
// IE
elseif(window.ActiveXObject){
self.xmlHttpReq =new ActiveXObject("Microsoft.XMLHTTP");
}
Next we create the URL that will be used to make the HTTP call. This simply combines our scriptoURL, scriptName, and platform credentials.
var form = document.forms['f1'];
var username = form.username.value;
var password = form.password.value;
var url = scriptoURL + scriptName +"?username="+ username
+"&password="+ password;
Now let's tell the xmlHttpReq object what we want from it. we'll also reference the name of another JavaScript function which will be invoked when the operation completes.
self.xmlHttpReq.open('POST', url,true);
self.xmlHttpReq.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange =function(){
if(self.xmlHttpReq.readyState ==4){
updatepage(self.xmlHttpReq.responseText);
}
}
Finally, for this function, we'll grab the "foo" parameter from the form and tell the prepped xmlHttpReq object to post it.
var qstr ='foo='+escape(foo);
self.xmlHttpReq.send(qstr);
almost done. We just need to supply the updatepage function that we referenced above. Add this code directly before the </script> close tag:
function updatepage(str){
document.getElementById("result").innerHTML = str;
}
Try it out
Save your file as helloworld.html and open it in a browser by starting your browser and choosing "Open File". You can also download a zip with the file prepared for you at the end of this page.
If you are using Internet Explorer, IE will pop a bar asking you if it is OK for the script inside this page to execute a script. Choose "Allow Blocked Content".
Type in your platform email address (the address you registered for the developer connection with) and your password. Enter any text that you like for "foo".
When you click "Go", the area below the button will display the result of the Scripto call.
Note that if you are using Mozilla Firefox, you will be warned about the script wanting to access a remote server. Click "Allow".
Congratulations! You have learned how to call a Custom Object-backed Scripto service to display dynamic platform content inside a very simple HTML page.
Next Steps
Be sure to check out the tutorial on Hosting Custom Applications to learn how you can make this page get directly served from your platform account, with its very own URL.
Also explore code samples that show more sophisticated HTML+AJAX examples using Google Charts and other presentation tools.
