Windows and Web integration through Thinfinity® jsRO

As stated in our previous article, the jsRO models are created in the application and then transmitted to the browser, where they can be consumed from Javascript through a Thinfinity.jsRO class instance.
To analyze this sequence in more detail, let’s take a look at a couple of complete cases. The next two examples create an “ro” object, which has a “text” property with the value “Hello!”.
In Delphi, in the Create method of the form:

// Creates the remote object and its property
 ro := TJSObject.Create('ro');
 ro.Properties.Add('text');
 ro.ApplyModel;

In C# (.Net Winform application), in the form constructor:

// Creates the remote object and its property
 ro = new JSObject("ro");
 ro.Properties.Add("text");
 ro.ApplyModel();

The ro.ApplyModel call propagates the created object to the browser, where it will be exposed as a javascript object.
In the browser side, to process changes in the replicated object, we have to add the jsRO’s javascript library to the HTML document and write a few extra lines of code.
Let’s see how to work with this object in Javascript:

$(document).ready(function () {
      ...
      ...
      var jsro = new Thinfinity.JsRO();
      var ro = null;
      ...
      ...
      jsro.on('model:ro', 'created', function () {
         ro = jsro.model.ro;
      });
   });

The first thing you can identify in the Javascript example above is how the Thinfinity.JsRO object is instantiated. This object must be created once, and its function is both to keep synchronized all registered models as well as manage all the remote application’s incoming and outgoing messages. So, through the jsro.on(‘model:ro’, ‘created’, ….) event we can get access to the model, a JSON version of the object created at the remote application.
The following is the sequence diagram for the creation of an object:

Once the object is instantiated, the only thing that remains is to read and/or write its properties. But, how will we be made aware of the changes produced in the object properties instantiated in the original application?
To address the changes in each model we should add a handler associated with the name of the object, as follows:

// Changes at Model level
jsro.on('model:ro', 'changed', function (obj) {
     alert(“The object ‘ro’ was changed: “ + JSON.stringify(obj))
});
// Changes at property level
jsro.on('model:ro.text', 'changed', function (obj) {
     alert(“The property ‘text’ of ‘ro’ was changed: “ + JSON.stringify(obj))
});

The next line assigns the “newvalue” string to the property text:

jsro.model.ro.text = “newvalue”;

When assigned, the new value for ro.text property is automatically synchronized with the Delphi/C# version of this remotable object.
In the next installment, we will see how to work with these properties in a more neat and advanced way through the introduction of getters and setters.
Full Javascript Remote Objects (jsRO) Guide