Intro
While working in the TMS Labs this week, we had a fruitful discussion on how we could interact with a desktop or mobile environment, where the browser that hosts a TMS WEB Core application, runs on. We already had some experience creating a JavaScript bridge between a TWebBrowser and Google Maps (http://www.tmssoftware.com/site/webgmaps.asp) and figured out this could be useful for TMS WEB Core as well. We wanted to give the user the capability of hosting its TMS WEB Core application in a native desktop or mobile application that offers access to all of the operating system functionality and make it accessible via the browser.
Finding an entry point
We created a TTMSFNCWebCoreClientBrowser class that acts as the communication and viewing component for a TMS WEB Core application. To setup the communication, we needed an entry point. In JavaScript, a global variable can be defined and that was just the entry point we were looking for. In TMS WEB Core, during the creation of TApplication, we also injected a global variable “TMSWEBCoreClientBrowser”, that is initialized with a string “unknown”. This variable is filled in, when the TTMSFNCWebCoreClientBrowser establishes a conection to the TMS WEB Core application.
if ExecuteJavascript('document.readyState', true) = 'complete' then
begin
if ExecuteJavascript('window.TMSWEBCoreClientIdentifier', true) = 'unknown' then
FInitialized := True;
end;
Handshake
After the initialization is complete, the TTMSFNCWebCoreClientBrowser instance performs a handshake. This is being done by executing JavaScript. The HandshakeScript is dynamically being added during the initialization of the TMS WEB Core Application and initializes the TMSWEBCoreClientIdentifier global variable.
initialization
begin
HandShakeScript := TJSHTMLScriptElement(document.createElement('script'));
HandShakeScript.id := 'HandShakeScript';
HandShakeScript.type_ := 'text/javascript';
HandShakeScript.innerHTML :=
'var TMSWEBCoreClientIdentifier = "unknown";'+#13#10+
'function HandShake(cid){'+#13#10+
' TMSWEBCoreClientIdentifier = cid;'+#13#10+
'}';
document.body.appendChild(HandShakeScript);
Application := TApplication.Create(nil);
end;
The handshake script is being called from the TTMSFNCWebCoreClientBrowser instance after the initialization is complete.
procedure TTMSFNCCustomWebCoreClientBrowser.PerformHandshake;
var
c: string;
begin
{$IFDEF MSWINDOWS}
c := 'windows';
{$ENDIF}
{$IFDEF MACOS}
{$IFDEF IOS}
c := 'ios';
{$ENDIF}
{$IFNDEF IOS}
c := 'macos';
{$ENDIF}
{$ENDIF}
{$IFDEF ANDROID}
c := 'android';
{$ENDIF}
ExecuteJavascript('HandShake("'+c+'");');
end;
Sending and receiving messages
When the handshake is complete, the client can send and receive messages. The communication format is a JSON string that is automatically URL encoded and parsed to a JSON object. A sample sending from the client to the TMS WEB Core application:
procedure TForm1.ClientSendButtonClick(Sender: TObject);
var
c: TJSONObject;
begin
c := TJSONObject.Create;
c.AddPair('Message From Client', 'Hello World !');
w.Send(c);
c.Free;
end;
And of course, sending back from a TMS WEB Core Application to the client:
procedure TForm1.WebButton1Click(Sender: TObject);
var
o: TJSONObject;
js: TJSON;
s: string;
begin
js := TJSON.Create;
s := '{"Message From TMS WEB Core Application":"'Hello World !"}';
o := js.parse(s);
w.Send(o);
o.Free;
end;
The future
This technology opens up a lot of possibilities for the future. You can send and receive messages with plain text, as well as small binary data encoded inside a JSON string between the client and the TMS WEB Core Application. The client application can then interact with the operating system, such as opening files, and other operating system specific functionality. The code runs on FMX (Windows, macOS, iOS, Android) and VCL (Windows) and is coming to TMS WEB Core in the near future!
… Read More
