Thinfinity jsRO remote events in C++

Thinfinity jsRO remote events in C++
Thinfinity jsRO allows programmers to get a better integration between a VirtualUI-extended desktop application and the web browser Javascript world.
We first presented the jsRO Delphi and .Net native interfaces when Thinfinity VirtualUI was launched, and we wrote several articles about it. Some months ago we implemented the jsRO native interface for C++. Today we will share with you how to create custom events in your application and replicate them in the web page.

A brief introduction to jsRO and remote events

Javascript Remote Objects (jsRO) is a framework created to facilitate the best desktop-web integration possible. In order to do this, jsRO implements a bidirectional communication channel between a web page or application and a Windows application. But, most importantly, it makes this blending with the greatest transparency possible.
The key point is that jsRO enables the creation of objects in the Windows application which can be replicated on the browser as native Javascript objects. Every pair of objects stays in sync on both ends of the communication, and behaves as the same entity. This synchronization ensures bidirectional interaction, therefore replicating changes immediately in the jsRO objects’ properties, both on the browser and the Windows application. Also, this communication channel enables messaging between both parts: remote methods, which are defined and handled in the Windows application, and triggered from the browser using javascript; and remote events, which are declared in and triggered from the Windows application, and handled in the browser.
Full Javascript Remote Objects (jsRO) Guide

In short, we can say that custom events allow the developer to send messages from the desktop application to be processed in the browser using javascript.
Thinfinity jsRO - Comunication Model
The jsRo remote events allow developers to submit non-visual changes from the application to the javascript side. When the application fires an event, it is transmitted to the browser, enabling the javascript code to receive and process it with a callback function.
Thinfinity jsRO Events

Custom events have to be added by the developer to a jsRO model. The following example shows how to tell the browser that a DateTime component value was updated in the remote application. To do this, you have to create a JSObject (the jsRO model) and then add the remote event to it.

Implementing jsRO remote events in C++

In the form header file, add the Thinfinity VirtualUI header file and declare the JSObject:

#pragma once
#include "Thinfinity.VirtualUI.h"
// CJSROEventsDlg dialog
class CJSROEventsDlg : public CDialog
{
    // Construction
    public:
        CJSROEventsDlg(CWnd* pParent = NULL);
        ~CJSROEventsDlg();
        enum { IDD = IDD_JSROEVENTS_DIALOG };
    protected:
        virtual void DoDataExchange(CDataExchange* pDX);
        HICON m_hIcon;
        JSObject * ro;
        virtual BOOL OnInitDialog();
        afx_msg void OnPaint();
        afx_msg HCURSOR OnQueryDragIcon();
        DECLARE_MESSAGE_MAP()
    public:
        afx_msg void OnDtnDatetimechangeDateselector(NMHDR *pNMHDR, LRESULT *pResult);
};

In the form constructor, create the JSObject, then create the event and add it to the object. Take note of the event argument declaration, with the argument name and type. The third argument (the evt_aux event) is necessary for compatibility purposes only:

CJSROEventsDlg::CJSROEventsDlg(CWnd* pParent /*=NULL*/) : CDialog(CJSROEventsDlg::IDD, pParent)
{
    EnableActiveAccessibility();
    m_hIcon = AfxGetApp()->LoadIcon(IDR_MAINFRAME);
    IJSEvent* evt;
    IJSEvent* evt_aux;
    ro = new JSObject(L"ro");
    ro->Events()->Add(_bstr_t(L"dateUpdated"), &evt);
    evt->AddArgument(_bstr_t(L"date"), JSDT_JSON, &evt_aux);
    ro->ApplyModel();
}

Now we are ready to trigger the event. In this case, we want to send the selected date as a JSON structure containing the year, month and day fields:

void CJSROEventsDlg::OnDtnDatetimechangeDateselector(NMHDR *pNMHDR, LRESULT *pResult)
{
    LPNMDATETIMECHANGE pDTChange = reinterpret_cast<LPNMDATETIMECHANGE>(pNMHDR);
    _bstr_t year = pDTChange->st.wYear;
    _bstr_t month = pDTChange->st.wMonth;
    _bstr_t day = pDTChange->st.wDay;
    _variant_t key(L"date");
    _bstr_t value = L"{ \"year\": " + year + ", \"month\": " + month + ", \"day\": " + day + "}";
    IJSEvent* evt;
    IJSEvent* evt_aux;
    evt = ro->Events()->Item(L"dateUpdated");
    evt->ArgumentAsJSON(key, value, &evt_aux);
    evt->Fire();
    *pResult = 0;
}

And this is all you need to generate a remote custom event with Thinfinity jsRO in C++. But we still need to catch the event in javascript.

Capturing and handling the remote event in Javascript

To capture the remote event in Javascript, we need to declare a jsRO javascript model and the event that will be captured with its respective callback function:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Thinfinity VirtualUI - jsRO Events in C++</title>
<script src="virtualui.sdk.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    var virtualUI = new Thinfinity.VirtualUI();
    ...
    ...
    virtualUI.connect();
    var jsro = new Thinfinity.JsRO();
    jsro.on('ro', ‘dateUpdated’, function (robj) {
        var date = new Date(robj.year, robj.month-1, robj.day);
        console.log('the current selected date is ' + date.toDateString());
    })
});
</script>
<body>
....
....
</body>
</html>

Now we are finally ready to send custom events from the remote desktop application to the Web to be handled using Javascript, in a true integration.

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.