Windows and Web integration through JS Remote Objects – Part 4

Thinfinity VirtualUI jsRO

Full JS Remote Objects (jsRO) Guide

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.
Thinfinity jsRO Methods
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.
Thinfinity jsRO Events
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 for remote desktop, screen sharng, digital workspace and application virtualization.

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.

Leave a comment

Privacy Preferences
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.