1 of 3

jsRO Remote Calls

In order to achieve more interaction between the remote application and the browser, the object model provided by jsRO allows the creation of remote methods and events defined in the application by the developer. Both the methods and the events are created and added to a model. While the methods can be invoked from the browser to remotely execute the application's own actions, the events are fired from the application to the browser, where they can be handled by the corresponding callback.

Read more:

· Remote Methods

· Custom Events

Remote Methods

The remote jsRO methods allow you to make the application's own actions available to be invoked from Javascript.

When the invokation of a method arrives to the application from the browser, two events are fired: the first is OnMethodExecuted, at the level of the JSObject object, which receives all the methods calls from the browser; the second is OnCall, and it happens at the level of the remote method.

If the invoked method is a function (if it returns a value), the value will be returned and propagated to the browser, where it will be handled asynchronously by a callback defined as the last argument in the call to the method.

The following examples show how to add a method to an object and how it can be called from Javascript. In this case, we create a method called multiply, which will receive two integer type arguments as parameters and will return the result of the product between them. This result will be shown in the callback to the method call.

Method definition in Delphi:

// Creates the remote object
 FRo := TJSObject.Create('ro');
 // Adds the method
 FRo.Methods.Add('multiply') // Returns a IJSMethod
 .AddArgument('a', JSDT_FLOAT) // First value to multiply
 .AddArgument('b', JSDT_FLOAT) // Second value to multiply
 .OnCall(TJSCallback.Create( // Adds the callback
 procedure(const Parent: IJSObject; const Method: IJSMethod)
 var
 a, b: int;
 begin
 a := Method.Arguments['a'].AsFloat;
 b := Method.Arguments['b'].AsFloat;
 Method.ReturnValue.AsFloat := a * b;
 end))
 .ReturnValue.DataType := JSDT_FLOAT; // Sets the return type
 FRo.ApplyModel;

Method definition in .Net:

// Creates the remote object
 ro = new JSObject("ro");
 // Adds the method
 ro.Methods.Add("multiply") // Returns a JSMethod
 .AddArgument("a", IJSDataType.JSDT_FLOAT) // First number to multiply
 .AddArgument("b", IJSDataType.JSDT_FLOAT) // Second number to multiply
 .OnCall(new JSCallback( // Adds the callback
 delegate(IJSObject parent, IJSMethod Method)
 {
 float a, b;
 a = Method.Arguments["a"].AsFloat;
 b = Method.Arguments["b"].AsFloat;
 Method.ReturnValue.AsFloat = a * b;
 })).ReturnValue.DataType = IJSDataType.JSDT_FLOAT;
 ro.ApplyModel();

Method definition in C#:

// Creates the remote object
ro = new JSObject("ro");
// Adds the method
ro.Methods.Add("multiply") // Returns a JSMethod
 .AddArgument("a", IJSDataType.JSDT_FLOAT) // 1st number to multiply
 .AddArgument("b", IJSDataType.JSDT_FLOAT) // 2nd number to multiply
 .OnCall(new JSCallback( // Adds the callback
 delegate(IJSObject parent, IJSMethod Method)
 {
 float a, b;
 a = Method.Arguments["a"].AsFloat;
 b = Method.Arguments["b"].AsFloat;
 Method.ReturnValue.AsFloat = a * b;
 }))
 .ReturnValue.DataType = IJSDataType.JSDT_FLOAT;
ro.ApplyModel();

Invoke the method in order to run it from Javascript. Use a callback in case the result needs to be retrieved (like in this case):

 ro.multiply(3, 4, function (result) {
 alert("Result is " + result);
 });

Read more:

· Custom Events

Custom Events

On top of the events detailed in Life Cycle of jsRO Objects, events can be created in the application that are defined by the programmer and when fired will be propagated from the application to the browser.

The following example shows how to add a personalized event to an object and how this can be handled from Javascript. In this case we'll expose, as a JSON, the mouse coordinates.

Definition and use of an event in Delphi:

// Creates the remote object
 FRo := TJSObject.Create('ro');
 // Adds the event
 FRo.Events.Add('mousePositionChanged')
 .AddArgument('coords', JSDT_JSON); // Adds the mouse position as JSON
 FRo.ApplyModel;
 procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState;
 X, Y: Integer);
 begin
 FRo.Events['mousePositionChanged']
 .ArgumentAsJSON('coords', '{"x": ' + X + ', "y": ' + Y + '}')
 .Fire;
 end;

Definition and use of an event in .Net:

// Creates the remote object
 ro = new JSObject("ro");
 // Adds the event
 ro.Events.Add("mousePositionChanged")
 .AddArgument("coords", IJSDataType.JSDT_JSON) // Adds the mouse position as JSON
 ro.ApplyModel();
 ...
 ...
 private void Form1_MouseMove(object sender, MouseEventArgs e)
 {
 ro.Events["mousePositionChanged"]
 .ArgumentAsJSON("coords",
 "{ \"x\": " + MousePosition.X + ", \"y\": " + MousePosition.Y + "}")
 .Fire();
 }

Definition and use of an event in C#:

// Creates the remote object
ro = new JSObject("ro");
// Adds the eventro.Events.Add("mousePositionChanged")
.AddArgument("coords", IJSDataType.JSDT_JSON) //the mouse position as JSON
ro.ApplyModel();
...
...
private void Form1_MouseMove(object sender, MouseEventArgs e)
{ ro.Events["mousePositionChanged"]
 .ArgumentAsJSON("coords", "{ \"x\": " + MousePosition.X + ", \"y\": " + MousePosition.Y + "}")
 .Fire();
}

To handle the event in Javascript, please note that the Javascript syntax for the personalized events differs slightly from the syntax for the model events, since it's declared directly associated to the name of the jsRO (without the "model"):

 jsro.on('ro', 'mousePositionChanged', function (coords) {
 console.log('mouse moved to [' + coords.x + ', ' + coords.y + ']');
 });

Custom Events

The following example shows how to add a personalized event to an object and how this can be handled from Javascript. In this case we'll expose, as a JSON, the mouse coordinates.

Definition and use of an event in Delphi:

// Creates the remote object
 FRo := TJSObject.Create('ro');
 // Adds the event
 FRo.Events.Add('mousePositionChanged')
 .AddArgument('coords', JSDT_JSON); // Adds the mouse position as JSON
 FRo.ApplyModel;
 procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState;
 X, Y: Integer);
 begin
 FRo.Events['mousePositionChanged']
 .ArgumentAsJSON('coords', '{"x": ' + X + ', "y": ' + Y + '}')
 .Fire;
 end;

Definition and use of an event in .Net:

// Creates the remote object
 ro = new JSObject("ro");
 // Adds the event
 ro.Events.Add("mousePositionChanged")
 .AddArgument("coords", IJSDataType.JSDT_JSON) // Adds the mouse position as JSON
 ro.ApplyModel();
 ...
 ...
 private void Form1_MouseMove(object sender, MouseEventArgs e)
 {
 ro.Events["mousePositionChanged"]
 .ArgumentAsJSON("coords",
 "{ \"x\": " + MousePosition.X + ", \"y\": " + MousePosition.Y + "}")
 .Fire();
 }

Definition and use of an event in C#:

// Creates the remote object
ro = new JSObject("ro");
// Adds the eventro.Events.Add("mousePositionChanged")
.AddArgument("coords", IJSDataType.JSDT_JSON) //the mouse position as JSON
ro.ApplyModel();
...
...
private void Form1_MouseMove(object sender, MouseEventArgs e)
{ ro.Events["mousePositionChanged"]
 .ArgumentAsJSON("coords", "{ \"x\": " + MousePosition.X + ", \"y\": " + MousePosition.Y + "}")
 .Fire();
}

 jsro.on('ro', 'mousePositionChanged', function (coords) {
 console.log('mouse moved to [' + coords.x + ', ' + coords.y + ']');
 });

Remote Methods

The remote jsRO methods allow you to make the application's own actions available to be invoked from Javascript.

Method definition in Delphi:

// Creates the remote object
 FRo := TJSObject.Create('ro');
 // Adds the method
 FRo.Methods.Add('multiply') // Returns a IJSMethod
 .AddArgument('a', JSDT_FLOAT) // First value to multiply
 .AddArgument('b', JSDT_FLOAT) // Second value to multiply
 .OnCall(TJSCallback.Create( // Adds the callback
 procedure(const Parent: IJSObject; const Method: IJSMethod)
 var
 a, b: int;
 begin
 a := Method.Arguments['a'].AsFloat;
 b := Method.Arguments['b'].AsFloat;
 Method.ReturnValue.AsFloat := a * b;
 end))
 .ReturnValue.DataType := JSDT_FLOAT; // Sets the return type
 FRo.ApplyModel;

Method definition in .Net:

// Creates the remote object
 ro = new JSObject("ro");
 // Adds the method
 ro.Methods.Add("multiply") // Returns a JSMethod
 .AddArgument("a", IJSDataType.JSDT_FLOAT) // First number to multiply
 .AddArgument("b", IJSDataType.JSDT_FLOAT) // Second number to multiply
 .OnCall(new JSCallback( // Adds the callback
 delegate(IJSObject parent, IJSMethod Method)
 {
 float a, b;
 a = Method.Arguments["a"].AsFloat;
 b = Method.Arguments["b"].AsFloat;
 Method.ReturnValue.AsFloat = a * b;
 })).ReturnValue.DataType = IJSDataType.JSDT_FLOAT;
 ro.ApplyModel();

Method definition in C#:

// Creates the remote object
ro = new JSObject("ro");
// Adds the method
ro.Methods.Add("multiply") // Returns a JSMethod
 .AddArgument("a", IJSDataType.JSDT_FLOAT) // 1st number to multiply
 .AddArgument("b", IJSDataType.JSDT_FLOAT) // 2nd number to multiply
 .OnCall(new JSCallback( // Adds the callback
 delegate(IJSObject parent, IJSMethod Method)
 {
 float a, b;
 a = Method.Arguments["a"].AsFloat;
 b = Method.Arguments["b"].AsFloat;
 Method.ReturnValue.AsFloat = a * b;
 }))
 .ReturnValue.DataType = IJSDataType.JSDT_FLOAT;
ro.ApplyModel();

Invoke the method in order to run it from Javascript. Use a callback in case the result needs to be retrieved (like in this case):

 ro.multiply(3, 4, function (result) {
 alert("Result is " + result);
 });

Read more:

· Custom Events