|
|
|
AJAX code generator
The RISE AJAX code generator renders JavaScript source code, that uses jQuery, for accessing your JSON enabled web services in your Rich Internet Applications or AJAX applications. The generated code implements JavaScript functions corresponding to the information interfaces specified in the RISE model. If you are new to RISE, please read more in the RISE Resource Center and if you haven't done so yet, download RISE it's Free!
The source code from the code generator is compliant with any JSON enabled web service, .NET as well as PHP, generated from the same RISE model, i.e. it works with the output from the RISE C#, RISE PHP for MySQL and RISE PHP for PostgreSQL code generators.
All methods, arguments and return values in the generated code are named in accordance with the RISE model and its naming convention.
Create an AJAX application
When creating an AJAX application using RISE you follow these steps.
- Model your solution in the RISE Editor.
- Generate your database using a database code generator.
- Generate your web service application layer using an application code generator.
- Use the AJAX code generator to generate JavaScript functions to access your application layer from your RIA application / AJAX application.
Hello World Sample Application
Create a new model in the RISE Editor and call it Hello World. This example is created using the Hello World template model. Select the top node in the project tree. Enter the prefix hello in the property grid in the bottom right of the RISE Editor.
We start by adding the entities, attributes and relations needed for our application. When generating the database, entities are mapped to tables and attributes are mapped to columns. Read more in the article Information Modeling.
We now add a view to "flatten out" the structure. Read more in the article Working with views. When generating your database, a view is mapped to a database view.
Finally we add an interface to our model. When generating your application layer, one web service per interfaces is generated, implementing the methods defined in the interface. Read more in the article Interface Modeling.
Generate AJAX Code
The AJAX code generator renders one JavaScript file per interface in your RISE model. The generated code uses jQuery to access the JSON web services.
JSON web services produce slightly different result, and expect slighly differenly formatted arguments depending on the web service environment, .NET or PHP. You can read more about this in the application code generator articles, i.e. in the RISE C# for ODBC, RISE PHP for MySQL and RISE PHP for PostgreSQL code generator articles. The generated AJAX code contains a helper class, handling the differences in the environments, making the generated JavaScript code behave identical independent of the web service environment.
This is what the generated JavaScript code would look like for the Hello World template model. As you can see, the args parameter is passed back to the callback functions, i.e. onsuccess, onerror and oncomplete. This enables you to use args as your execution context. Args must of course contain the arguments that the web service method expects, but besides that, args can contain any objects you wish.
|
var IHelloWorld = {
wsuri: "hello.WS.IHelloWorld.asmx", // You must enter the correct uri to your installed web service.
wsenvironment: ".NET", // Possible values null, ".NET", "PHP"
NewCountry: function (args, onsuccess, onerror, oncomplete) {
$.ajax({
type: "POST",
url: IHelloWorld.wsuri + "/NewCountry",
data: IHelloWorld.JSONHelper.SerializeArgs({ "Name": args["Name"]}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
if (onsuccess){
switch(IHelloWorld.JSONHelper.WSEnv()){
case ".NET":
onsuccess(response.d, args);
break;
case "PHP":
onsuccess(response, args);
break;
default:
throw new Exception("Unknown target environment");
break;
}
}
},
error: function(x, msg) {
if (onerror) onerror(x, msg, args);
},
complete: function() {
if (oncomplete) oncomplete(args);
}
});
},
DeleteCountry: function (args, onsuccess, onerror, oncomplete) {
$.ajax({
type: "POST",
url: IHelloWorld.wsuri + "/DeleteCountry",
data: IHelloWorld.JSONHelper.SerializeArgs({ "ID": args["ID"]}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
if (onsuccess){
onsuccess(args);
}
},
error: function(x, msg) {
if (onerror) onerror(x, msg, args);
},
complete: function() {
if (oncomplete) oncomplete(args);
}
});
},
GetCountry: function (args, onsuccess, onerror, oncomplete) {
$.ajax({
type: "POST",
url: IHelloWorld.wsuri + "/GetCountry",
data: IHelloWorld.JSONHelper.SerializeArgs({ "ID": args["ID"]}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
if (onsuccess){
var result = null;
switch(IHelloWorld.JSONHelper.WSEnv()){
case ".NET":
result = response.d;
break;
case "PHP":
result = response;
break;
default:
throw new Exception("Unknown target environment");
break;
}
onsuccess(result, args);
}
},
error: function(x, msg) {
if (onerror) onerror(x, msg, args);
},
complete: function() {
if (oncomplete) oncomplete(args);
}
});
},
SetCountry: function (args, onsuccess, onerror, oncomplete) {
$.ajax({
type: "POST",
url: IHelloWorld.wsuri + "/SetCountry",
data: IHelloWorld.JSONHelper.SerializeArgs({ "ID": args["ID"], "Name": args["Name"]}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
if (onsuccess){
onsuccess(args);
}
},
error: function(x, msg) {
if (onerror) onerror(x, msg, args);
},
complete: function() {
if (oncomplete) oncomplete(args);
}
});
},
ListCountry: function (args, onsuccess, onerror, oncomplete) {
$.ajax({
type: "POST",
url: IHelloWorld.wsuri + "/ListCountry",
data: IHelloWorld.JSONHelper.SerializeArgs({ "maxRowsToReturn": args["maxRowsToReturn"] || null}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
if (onsuccess){
var results = null;
switch(IHelloWorld.JSONHelper.WSEnv()){
case ".NET":
results = response.d;
break;
case "PHP":
results = response;
break;
default:
throw new Exception("Unknown target environment");
break;
}
onsuccess(results, args);
}
},
error: function(x, msg) {
if (onerror) onerror(x, msg, args);
},
complete: function() {
if (oncomplete) oncomplete(args);
}
});
},
NewHello: function (args, onsuccess, onerror, oncomplete) {
$.ajax({
type: "POST",
url: IHelloWorld.wsuri + "/NewHello",
data: IHelloWorld.JSONHelper.SerializeArgs({ "Phrase": args["Phrase"], "Language": args["Language"], "CountryID": args["CountryID"]}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
if (onsuccess){
switch(IHelloWorld.JSONHelper.WSEnv()){
case ".NET":
onsuccess(response.d, args);
break;
case "PHP":
onsuccess(response, args);
break;
default:
throw new Exception("Unknown target environment");
break;
}
}
},
error: function(x, msg) {
if (onerror) onerror(x, msg, args);
},
complete: function() {
if (oncomplete) oncomplete(args);
}
});
},
DeleteHello: function (args, onsuccess, onerror, oncomplete) {
$.ajax({
type: "POST",
url: IHelloWorld.wsuri + "/DeleteHello",
data: IHelloWorld.JSONHelper.SerializeArgs({ "ID": args["ID"]}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
if (onsuccess){
onsuccess(args);
}
},
error: function(x, msg) {
if (onerror) onerror(x, msg, args);
},
complete: function() {
if (oncomplete) oncomplete(args);
}
});
},
GetHello: function (args, onsuccess, onerror, oncomplete) {
$.ajax({
type: "POST",
url: IHelloWorld.wsuri + "/GetHello",
data: IHelloWorld.JSONHelper.SerializeArgs({ "ID": args["ID"]}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
if (onsuccess){
var result = null;
switch(IHelloWorld.JSONHelper.WSEnv()){
case ".NET":
result = response.d;
break;
case "PHP":
result = response;
break;
default:
throw new Exception("Unknown target environment");
break;
}
onsuccess(result, args);
}
},
error: function(x, msg) {
if (onerror) onerror(x, msg, args);
},
complete: function() {
if (oncomplete) oncomplete(args);
}
});
},
SetHello: function (args, onsuccess, onerror, oncomplete) {
$.ajax({
type: "POST",
url: IHelloWorld.wsuri + "/SetHello",
data: IHelloWorld.JSONHelper.SerializeArgs({ "ID": args["ID"], "Phrase": args["Phrase"], "Language": args["Language"], "CountryID": args["CountryID"], "IsOfficial": args["IsOfficial"]}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
if (onsuccess){
onsuccess(args);
}
},
error: function(x, msg) {
if (onerror) onerror(x, msg, args);
},
complete: function() {
if (oncomplete) oncomplete(args);
}
});
},
ListHello: function (args, onsuccess, onerror, oncomplete) {
$.ajax({
type: "POST",
url: IHelloWorld.wsuri + "/ListHello",
data: IHelloWorld.JSONHelper.SerializeArgs({ "maxRowsToReturn": args["maxRowsToReturn"] || null}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
if (onsuccess){
var results = null;
switch(IHelloWorld.JSONHelper.WSEnv()){
case ".NET":
results = response.d;
break;
case "PHP":
results = response;
break;
default:
throw new Exception("Unknown target environment");
break;
}
onsuccess(results, args);
}
},
error: function(x, msg) {
if (onerror) onerror(x, msg, args);
},
complete: function() {
if (oncomplete) oncomplete(args);
}
});
},
ListHelloByCountry: function (args, onsuccess, onerror, oncomplete) {
$.ajax({
type: "POST",
url: IHelloWorld.wsuri + "/ListHelloByCountry",
data: IHelloWorld.JSONHelper.SerializeArgs({ "maxRowsToReturn": args["maxRowsToReturn"] || null, "CountryID": args["CountryID"]}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
if (onsuccess){
var results = null;
switch(IHelloWorld.JSONHelper.WSEnv()){
case ".NET":
results = response.d;
break;
case "PHP":
results = response;
break;
default:
throw new Exception("Unknown target environment");
break;
}
onsuccess(results, args);
}
},
error: function(x, msg) {
if (onerror) onerror(x, msg, args);
},
complete: function() {
if (oncomplete) oncomplete(args);
}
});
},
HelloWorld: function (args, onsuccess, onerror, oncomplete) {
$.ajax({
type: "POST",
url: IHelloWorld.wsuri + "/HelloWorld",
data: IHelloWorld.JSONHelper.SerializeArgs({ "maxRowsToReturn": args["maxRowsToReturn"] || null, "languageFilter": args["languageFilter"]}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
if (onsuccess){
var results = null;
switch(IHelloWorld.JSONHelper.WSEnv()){
case ".NET":
results = response.d;
break;
case "PHP":
results = response;
break;
default:
throw new Exception("Unknown target environment");
break;
}
onsuccess(results, args);
}
},
error: function(x, msg) {
if (onerror) onerror(x, msg, args);
},
complete: function() {
if (oncomplete) oncomplete(args);
}
});
},
JSONHelper: {
SerializeArgs: function (args) {
var s = [];
if (args) for (var m in args) s[s.length] = '"' + m + '":' + (typeof(args[m]) == 'undefined' || args[m] == null ? 'null' : (typeof(args[m]) == 'string' ? '"' + args[m] + '"' : args[m].toString()));
return '{' + s.join(',') + '}';
},
WSEnv: function () {
return (IHelloWorld.wsenvironment && (IHelloWorld.wsenvironment == ".NET" || IHelloWorld.wsenvironment == "PHP") ? IHelloWorld.wsenvironment : (IHelloWorld.wsuri ? (IHelloWorld.wsuri.toLowerCase().match(".asmx$") == ".asmx" ? ".NET" : (IHelloWorld.wsuri.toLowerCase().match(".php$") == ".php" ? "PHP" : "UNKNOWN")) : "UNKNOWN"));
},
DateToString: function (date) {
if(date){
switch(IHelloWorld.JSONHelper.WSEnv()) {
case ".NET":
case "PHP":
{
var pad = function (val) {
val = val.toString();
while (val.length < 2) val = "0" + val;
return val;
};
return (date ? date.getFullYear() + '-' + pad((date.getMonth()+1)) + '-' + pad(date.getDate()) + 'T' + pad(date.getHours()) + ':' + pad(date.getMinutes()) + ':' + pad(date.getSeconds()) : null);
}
default:
throw new Exception("Unknown target environment");
}
}
return "null";
},
StringToDate: function (datestring) {
if(datestring){
switch(IHelloWorld.JSONHelper.WSEnv()) {
case ".NET":
return eval('new '+ datestring.replace(/\//g,' '));
case "PHP":
{
var num = function(val, fb) {
return (val && val!='' ? parseInt(val,10) : (fb ? fb : 0));
};
var m = datestring.match(/^\s*((\d\d\d\d)-(\d\d)-(\d\d))((\s|T)(\d\d)(:(\d\d)(:(\d\d))?)?)?\s*$/i);
return new Date(num(m[2]), num(m[3])-1, num(m[4]), num(m[7]), num(m[9]), num(m[11]));
}
}
}
return null;
}
}
} |
Generate Sample Code
The AJAX code generator can generate sample code showing how to call the generated functions from your JavaScript code. You should not implement your code in the generated files since if you update your model and generate the new version, your code will be lost.
In the sample code below, you should of course replace "your_string", "your_int" etc. with your variables or constants.
/*
// This code exemplifies how to call the generated function NewCountry
IHelloWorld.NewCountry(
{"Name": your_string},
function(result, args){
// This function is called on success
// result is an integer (the primary key) identifying the inserted row
},
function(x, msg, args){
// This function is called on error
},
function(args){
// This function is called after onsuccess/onerror
}
);
*/
/*
// This code exemplifies how to call the generated function DeleteCountry
IHelloWorld.DeleteCountry(
{"ID": your_int},
function(args){
// This function is called on success
},
function(x, msg, args){
// This function is called on error
},
function(args){
// This function is called after onsuccess/onerror
}
);
*/
/*
// This code exemplifies how to call the generated function GetCountry
IHelloWorld.GetCountry(
{"ID": your_int},
function(result, args){
// This function is called on success
// result contains: ID (int), Name (string)
// Example:
var yourVariable1 = result["ID"];
var yourVariable2 = result["Name"];
},
function(x, msg, args){
// This function is called on error
},
function(args){
// This function is called after onsuccess/onerror
}
);
*/
/*
// This code exemplifies how to call the generated function SetCountry
IHelloWorld.SetCountry(
{"ID": your_int, "Name": your_string},
function(args){
// This function is called on success
},
function(x, msg, args){
// This function is called on error
},
function(args){
// This function is called after onsuccess/onerror
}
);
*/
/*
// This code exemplifies how to call the generated function ListCountry
IHelloWorld.ListCountry(
{"maxRowsToReturn": your_int_or_null},
function(results, args){
// This function is called on success
// results contains: ID (int), Name (string)
// Example:
for (var i=0; i<results.length; i++) {
var yourVariable1 = results[i]["ID"];
var yourVariable2 = results[i]["Name"];
}
},
function(x, msg, args){
// This function is called on error
},
function(args){
// This function is called after onsuccess/onerror
}
);
*/
/*
// This code exemplifies how to call the generated function NewHello
IHelloWorld.NewHello(
{"Phrase": your_string, "Language": your_string, "CountryID": your_int},
function(result, args){
// This function is called on success
// result is an integer (the primary key) identifying the inserted row
},
function(x, msg, args){
// This function is called on error
},
function(args){
// This function is called after onsuccess/onerror
}
);
*/
/*
// This code exemplifies how to call the generated function DeleteHello
IHelloWorld.DeleteHello(
{"ID": your_int},
function(args){
// This function is called on success
},
function(x, msg, args){
// This function is called on error
},
function(args){
// This function is called after onsuccess/onerror
}
);
*/
/*
// This code exemplifies how to call the generated function GetHello
IHelloWorld.GetHello(
{"ID": your_int},
function(result, args){
// This function is called on success
// result contains: ID (int), Phrase (string), Language (string), CountryID (int), IsOfficial (bool)
// Example:
var yourVariable1 = result["ID"];
var yourVariable2 = result["Phrase"];
var yourVariable3 = result["Language"];
var yourVariable4 = result["CountryID"];
var yourVariable5 = result["IsOfficial"];
},
function(x, msg, args){
// This function is called on error
},
function(args){
// This function is called after onsuccess/onerror
}
);
*/
/*
// This code exemplifies how to call the generated function SetHello
IHelloWorld.SetHello(
{"ID": your_int, "Phrase": your_string, "Language": your_string, "CountryID": your_int, "IsOfficial": your_bool},
function(args){
// This function is called on success
},
function(x, msg, args){
// This function is called on error
},
function(args){
// This function is called after onsuccess/onerror
}
);
*/
/*
// This code exemplifies how to call the generated function ListHello
IHelloWorld.ListHello(
{"maxRowsToReturn": your_int_or_null},
function(results, args){
// This function is called on success
// results contains: ID (int), Phrase (string), Language (string), CountryID (int), IsOfficial (bool)
// Example:
for (var i=0; i<results.length; i++) {
var yourVariable1 = results[i]["ID"];
var yourVariable2 = results[i]["Phrase"];
var yourVariable3 = results[i]["Language"];
var yourVariable4 = results[i]["CountryID"];
var yourVariable5 = results[i]["IsOfficial"];
}
},
function(x, msg, args){
// This function is called on error
},
function(args){
// This function is called after onsuccess/onerror
}
);
*/
/*
// This code exemplifies how to call the generated function ListHelloByCountry
IHelloWorld.ListHelloByCountry(
{"maxRowsToReturn": your_int_or_null, "CountryID": your_int},
function(results, args){
// This function is called on success
// results contains: ID (int), Phrase (string), Language (string), CountryID (int), IsOfficial (bool)
// Example:
for (var i=0; i<results.length; i++) {
var yourVariable1 = results[i]["ID"];
var yourVariable2 = results[i]["Phrase"];
var yourVariable3 = results[i]["Language"];
var yourVariable4 = results[i]["CountryID"];
var yourVariable5 = results[i]["IsOfficial"];
}
},
function(x, msg, args){
// This function is called on error
},
function(args){
// This function is called after onsuccess/onerror
}
);
*/
/*
// This code exemplifies how to call the generated function HelloWorld
IHelloWorld.HelloWorld(
{"maxRowsToReturn": your_int_or_null, "languageFilter": your_string},
function(results, args){
// This function is called on success
// results contains: ID (int), Name (string), HelloID (int), HelloPhrase (string), HelloLanguage (string), HelloIsOfficial (bool)
// Example:
for (var i=0; i<results.length; i++) {
var yourVariable1 = results[i]["ID"];
var yourVariable2 = results[i]["Name"];
var yourVariable3 = results[i]["HelloID"];
var yourVariable4 = results[i]["HelloPhrase"];
var yourVariable5 = results[i]["HelloLanguage"];
var yourVariable6 = results[i]["HelloIsOfficial"];
}
},
function(x, msg, args){
// This function is called on error
},
function(args){
// This function is called after onsuccess/onerror
}
);
*/ |
Below is a simple html page using the generated function HelloWorld to list phrases based on a language filter. Setting maxRowsToReturn to null means that we want to return all matching rows. Note that we have included the jQuery API and the generated JavaScript file IHelloWorld.js.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Hello World</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="IHelloWorld.js"></script>
<script type="text/javascript">
function OnHello() {
// This code exemplifies how to call the generated function HelloWorld
IHelloWorld.HelloWorld(
{"maxRowsToReturn": null, "languageFilter": document.getElementById("languageFilter").value},
function(results, args){
// This function is called on success
// results contains: ID (int), Name (string), HelloID (int), HelloPhrase (string), HelloLanguage (string), HelloIsOfficial (bool)
if(results && results[0]) { var htm = "<table cellpadding=\"10\" cellspacing=\"10\" border=\"1\">"; var h = []; for (var m in results[0]) h[h.length] = m; htm += "<tr><td>" + h.join("</td><td>") + "</td></tr>"; for (var i = 0; i < results.length; i++) { var r = []; for (var m in results[i]) r[r.length] = (results[i][m] == null ? 'null' : results[i][m].toString()); htm += "<tr><td>" + r.join("</td><td>") + "</td></tr>"; } htm += "</table>"; document.getElementById("result").innerHTML = htm; } }, function(x, msg, args){ // This function is called on error document.getElementById("result").innerHTML = msg; }, function(args){ // This function is called after onsuccess/onerror } ); } </script> </head> <body> <table> <tr> <td>Language Filter</td> <td>Execute</td> </tr> <tr> <td><input id="languageFilter" type="text" value="%" /></td> <td><input id="executeButton" type="button" value="Execute" onclick="OnHello()"/></td> </tr> </table> <div id="result"></div> </body> </html> |
Code generator settings
The AJAX code generator has the following properties:
| wsEnvironment |
Specify the environment under which the web servises run, i.e. .NET or PHP. |
| generateSample |
Specify whether sample code illustrating how the generated methods can be called should be generated. |
| supportTicket |
If this flag is set, code is generated for passing a ticket to the web service methods for authentication. |
| userLogin |
If this flag is set, code is generated for passing a userid and password to the web service methods for authentication. |
jQuery
The generated code uses jQuery to access the web services. This means that you must include the jQuery library in your applications. You can either download the API to your server or access it online, e.g.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
|
|
|
|
|
