Thinfinity VirtualUI includes an html test environment called Development Lab. You can test your customized application and access the available programming resources through the objects.

The Development Lab will load when you execute an application in Dev mode from your development environment by calling the URL where Thinfinity VirtualUI is running (i.e. http://127.0.0.1:6080/).

The environment consists of five panels:

· The Address bar. Load here the web page address that you want to open. If you call the root address ("/"), app.html will load; if you enter an application's virtual path, it will load the address that was specified as Home Page for this application in the Thinfinity VirtualUI Server Manager, and if the Home Page wasn't defined it will load app.html.

· The Model Inspector. The Model Inspector's function is to show the available properties, methods and events for each data model. In its upper part there's a combobox that shows the published models; by selecting an item you will see its attributes. From this panel, you can change the properties value, provided that they are not read-only.

· The Log pane. The log pane shows a log of the interaction between the jsRO object and the application. The newer entrances will show on top.

· The Console pane. In the console pane, you can assign a new value to a property or call a method.

· The Browser pane. This is the most important panel. The selected application will load there and it will show just like it would in the browser independently.

Read more:

· Life Cycle of jsRO Objects

· Creating jsRO Objects

· Updating Properties

· OnPropertyChange(), OnSet() and OnGet() Events

· jsRO Remote Calls

jsRO objects are always defined inside the application and propagated to the browser. New properties, methods or events can't be added From Javascript, but events that are produced can be handled, the property values can be retrieved and modified, and the object's methods can be invoked.

There are four pre-defined Javascript events that are related to the life cycle of a jsRO object, associated to its creation, updating and destruction,

Starting from the first ApplyModel produced in the application, jsRO will create the object, propagate it to the browser and trigger there the event related to this creation:

on(“model:object”, “created”)

also, for the properties that are created with an assigned value, jsRO will replicate their initial values in the browser and fire the corresponding events:

on(“model:object.property”, “changed”)

and from that moment on, it will keep the state of the properties synchronized in the application and the browser.

If the model needs to be updated by the addition of new attributes (properties, events or method) a new ApplyModel must be made, which will, in turn, with the model already created, fire a changed event on the model:

on(“model:object”, “changed”)

Finally, if the object is destroyed in the application, the deleted event will be triggered and the object will be destroyed in Javascript too.

on(“model:object”, “deleted”)

This last event will also be triggered when closing the application.

Read more:

· Creating jsRO Objects

· Updating Properties

· OnPropertyChange(), OnSet() and OnGet() Events

· jsRO Remote Calls

JavaScript Remote Objects (jsRO) allows you to increase your application's power, extending it to the web environment. This is made possible by the publishing of data models defined programmatically from the application that expose properties, methods and events, easing the dialog between the web and the original application.

To make the development of applications with jsRO easy, Thinfinity VirtualUI provides a web environment that allows you to interact with the application during the development and test its functionality: the Development Lab.

Read more:

· The Development Lab

· Life Cycle of jsRO Objects

· Creating jsRO Objects

· Updating Properties

· OnPropertyChange(), OnSet() and OnGet() Events

· jsRO Remote Calls

When publishing a model, jsRO will keep the state of the created object synchronized in the application side and in the browser. Each time a property is updated in the server side, this change is propagated to the browser, where besides updating the value it can be handled by the corresponding .on(“model:object.property”, “change”, …) event, if this event was declared.

When a property is updated on the browser side, this change is sent in the opposite direction (from the web to the application) and triggers an OnPropertyChange event in the instantiated JSObject object. This is a good place to do things like propagating the change of a property value to some other element of the application, update a group of values in a database, etc.

jsRO can also handle changes in the properties of its object through the declaration of the OnSet and OnGet property events.

By invoking the ApplyChanges method on a JSObject object, the collection of the properties added to the object is traversed and if any of these properties has an OnGet event declared, it's triggered.

The OnSet event, however, is executed when it receives a change from a particular property from the browser.

The way to add the OnSet and OnGet event handlers to a property is based on their definition, you can do so when of adding the property or afterwards, always remember to fire an ApplyModel so that the model is propagated to the browser.

The next example shows how the browser can retrieve the application form background color in a #RRGGBB format, and also how to change the background color using a value sent from the browser. Since the desktop application doesn't interpret colors like the web does, we need a conversion that works both ways:

Delphi Definition:

// Creates the remote object
 FRo := TJSObject.Create('ro');
 // Property definition
 FRo.Properties.Add('backgroundColor')
 .OnGet(TJSBinding.Create(
 procedure(const Parent: IJSObject; const Prop: IJSproperty)
 begin
 Prop.AsString := '#'
 + IntToHex(GetRValue(ColorToRGB(Form1.Color)), 2)
 + IntToHex(GetGValue(ColorToRGB(Form1.Color)), 2)
 + IntToHex(GetBValue(ColorToRGB(Form1.Color)), 2);
 end))
 .OnSet(TJSBinding.Create(
 procedure(const Parent: IJSObject; const Prop: IJSproperty)
 var
 value: string;
 begin
 value := LowerCase(Prop.AsString);
 if ((Length(value) = 7) and (copy(value, 1, 1) = '#')) then
 begin
 try
 Form1.Color := RGB(
 StrToInt('$' + Copy(value, 2, 2)),
 StrToInt('$' + Copy(value, 4, 2)),
 StrToInt('$' + Copy(value, 6, 2))
 );
 except
 end;
 end;
 end));

.Net definition:

// Creates the remote object
 ro = new JSObject("ro");
 // Property definition
 ro.Properties.Add("backgroundColor")
 .OnGet(new JSBinding(
 // This anonymous procedure do the actual get
 delegate(IJSObject Parent, IJSProperty Prop)
 {
 Prop.AsString = "#"
 + this.BackColor.R.ToString("X2")
 + this.BackColor.G.ToString("X2")
 + this.BackColor.B.ToString("X2");
 }))
 .OnSet(new JSBinding(
 // This anonymous procedure do the actual set
 delegate(IJSObject Parent, IJSProperty Prop)
 {
 string value = Prop.AsString.ToLower();
 Regex reColor = new Regex(@"^#([0-9,a-f]{6})$");
 Match match = reColor.Match(value);
 if (match.Success)
 {
 string color = match.Groups[1].Value;
 this.BackColor = Color.FromArgb(
 int.Parse(color.Substring(0, 2), NumberStyles.AllowHexSpecifier),
 int.Parse(color.Substring(2, 2), NumberStyles.AllowHexSpecifier),
 int.Parse(color.Substring(4, 2), NumberStyles.AllowHexSpecifier)
 );
 }
 }));

Assigning the property value in Javascript:

ro.backgroundColor = “#FF0000”;

As stated previously, the sjRO models are created in the application and then propagated to the browser, where they can be consumed from Javascript through a Thinfinity.sjRO class instance.

Let's see a complete example of this sequence:

Both examples create a 'ro' object, which has a 'text' property with the value: 'Hello!'.

Using 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;

Using C# (.Net Winform application)

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

Let's see how to work with this object from Javascript:

$(document).ready(function () {

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

Sequence diagram for the creation of an object:

Read more:

· Updating Properties

· OnPropertyChange(), OnSet() and OnGet() Events

· jsRO Remote Calls

jsRO will keep each property synchronized in the browser and in the application. Each time a property is updated in the server side, this change triggers an event to the browser, where it can be handled by the corresponding on(“model:object.property”, “change”, …) event, if this event was declared. Similarly, when a property is updated in the browser, this change travels to the application and triggers the object.OnPropertyChange and property.OnSet events.

Sequence diagram for the assignation of a property value from the application and from the browser:

Read more:

· OnPropertyChange(), OnSet() and OnGet() Events

· 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

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 + ']');
 });

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:

Method definition in .Net:

Method definition in C#:

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):

Read more:

Below you'll find the available demos for JSRO and Thinfinity VirtualUI :

· Vui-Video = This demo uses JSRO to transmit a video for rendering in the browser.

· Vui-Audio = This demo uses JSRO to send audio directly to the browser.

· Vui-QZ = This demo uses JSRO to scan barcodes and send them to the application.

· Vui-Webcam = This demo uses JSRO to access the user Webcam and transmit it to the application.