Full JS Remote Objects (jsRO) Guide
- Introduction & Part 1
- Part 2
- Part 3
- Part 4<- You are here
To achieve more interaction between the remote application and the browser, the object model provided by JS Remote Objects (jsRO) allows for the creation of remote methods and events defined in the application and added to a model by the developer.
Having learned how to interact with jsRO objects and their properties in previous articles, let’s see now how to create jsRO remote methods and custom events, and how to work with them from both the application and the browser side.
Remote Methods
The Remote Methods lets us take actions from the web page using Javascript, by calling remote pieces of code written in the executable application. These methods are attached to a model and they can support the addition of as many arguments as needed. Each method also has a return value; in the case that the method does not need to return a value, you must set the return value to JSDT_NULL.
The following examples show how to create a method called multiply, which will receive two float numbers and will return the result of the product between them. This outcome 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: double;
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 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();
You should 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);
});
Custom Events
The Custom Events are defined in the application by the developer and they have to be added to a model. When a custom event is fired, it will be propagated from the application to the browser where it will be handled by the corresponding Javascript callback.
The following example shows how to add a personalized event to an object and how this event 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); // 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 C#:
// Creates the remote object
ro = new JSObject("ro");
// Adds the event
ro.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 custom events slightly differs from the one we saw in the previous article for the model events. In the current case, the name of the event it is directly associated to the name of the jsRO object (without the “model”). In the following example we are attaching the “mousePositionChange” event to the “ro” object:
jsro.on('ro', 'mousePositionChanged', function (coords) {
console.log('mouse moved to [' + coords.x + ', ' + coords.y + ']');
})
With this article we have completed a four part tour around the Javascript Remote Objects.
Thinfinity Solutions
As you already know, Thinfinity VirtualUI is a web-enabling SDK to run apps on a browser without rewriting the code.
Explore our other remoting and web-enabling solutions, enjoy our free trials, or request a custom demo HERE. No commitment!
We will be happy to assist you and show you our portfolio for remote desktop, screen sharing, digital workspace, and application virtualization.