Since TMS Web Core generates pure stand-alone HTML/JS/CSS applications, and because that applications can be fully responsive, I have decided to do a quick experiment on how to convert the TMS Web Core application to a native mobile application using PhoneGap tool, more specifically PhoneGap Build.

My intention was to turn the XData Music demo (https://app.devgems.com/xdata/music/app) into a mobile application.

I have never used PhoneGap before. It's a software development framework from Adobe used to develop mobile applications using web-development technologies like HTML, CSS and JS. PhoneGap Build is a cloud service that goes further and do all the job of creating such application for you, instead of requiring you to install PhoneGap in your computer and configure it.

So what I did was signing up to PhoneGap Build - I could just login with my Google account, and clicked "New App". I then got the following screen:



What I did then was just zip the folder with html/js/css files from XData Music demo and upload it to PhoneGap using the "upload a .zip file" button. And that's it. Well, not exactly that. Since I tried it on iOS besides Android, I still had to deal with provisioning and certificate stuff, sending it to PhoneGap so it could generate the iOS app according to Apple guidelines. But after that, it provided me with links to download my mobile application for iOS, Android and - mind you - Windows Phone.

The whole process took literally 30 minutes. Most of it was just dealing with the Apple provisioning and certificate stuff. Here is a video of the mobile application running on my iPhone.

Larry’s To Do List (guest article)

Introduction.

This is a tutorial describing my journey learning TMS Web Core from TMS Software. I’m a Delphi / Pascal developer who started writing Pascal back in the early Turbo Pascal days and then moved on to Delphi when it was first released. For the last 20 plus years I’ve been writing Windows accounting apps for my clients, using many of TMS Software's great components.

A few years back, with the advent of mobile devices, my clients started requesting that pieces of the software be accessible from their smart phones and tablets. I had tried many approaches but was struggling with the way things are handled on the web vs Windows. Of late I’ve been playing with Bootstrap, jQuery using Ajax to communicate with PHP backends. But JavaScript wasn’t my “native” language. So, when TMS Web Core came out I was a pretty happy guy. At last I would be able to put some of my apps onto the web.

As a way of learning TMS Web Core I decided to write a small app to keep track of my To Do’s. I’m a list maker who at the start of each day reviews what needs doing. This hand-written list has the Date Due, a Description and the Priority and usually which client it’s for. And when the task is complete, I check it off as being done. With this in mind, I decided to create a simple MySQL database named “todos” with initially a single table “todolist”. And use TMS Web Core with Bootstrap 4 and PHP to maintain this list.

As I was working on this project the thought came to mind that maybe other Delphi developers could use this project as a way for them to learn TMS Web Core. It’s a project in progress, as I’m still learning the in’s and out’s of TMS Web Core.

Sample screens.

Above is the main screen. The app uses TMS Web Core with various elements linked to the Bootstrap 4 CSS using primarily “ElementId” and “ElementClass” properties in the components of TMS Web Core. When you click “Edit”, you’ll get the screen below.

Here the TMS Web Core components are merged with a Bootstrap 4 form to produce the results shown.

Briefly the “Date Due” uses the component “TWebDateTimePicker” linked to a “form-group” item on the Bootstrap 4 form. “Priority” uses the “TWebComboBox” linked to a “select” form item on the Bootstrap 4 form.

The “Post” and “Cancel” buttons are “TWebButton” components linked to Bootstrap 4 styled buttons with “OnClick” events to handle the Posting or Cancelling of the information.

The initial templates I used are at the website “Start Bootstrap”. They are an “MIT” license. Here’s the link:

Start Bootstrap

I downloaded these templates and placed on my external drive and then copied the necessary html, JavaScript and CSS into my run time folders. All these files are on the run time zip I’ll be providing.

Please refer to a description of the folder usage later in this tutorial for more information.

The database.

MySQL is used to store the table “todolist”.

Here is the definition of the “todolist” table:

		DROP DATABASE IF EXISTS todos;
		CREATE DATABASE todos;
		USE todos;
		DROP TABLE IF EXISTS todolist;
		CREATE TABLE todos.todolist (
		  Id INT(11) NOT NULL AUTO_INCREMENT,
		  Description VARCHAR(255) DEFAULT NULL,
		  Complete INT(1) DEFAULT NULL,
		  Priority INT(11) DEFAULT NULL,
		  DateDue DATE DEFAULT NULL,
		  PRIMARY KEY (Id)
		)
		ENGINE = INNODB
		AUTO_INCREMENT = 1
		CHARACTER SET utf8
		COLLATE utf8_general_ci
		ROW_FORMAT = DYNAMIC;
	

Nearly all tables I use in my apps have a field named “Id”, which is the primary key and is “auto increment”. Using this method it’s very easy to link tables on queries.

The field “Complete” is treated as a Boolean with zero indicating it’s still open and one indicating complete.

If there was going to be a large amount of data, I would also be defining alternate keys. But for the tutorial, I’m keeping it as simple as possible.

Delphi source files.

I created a folder named “Tutorials” and within it a folder named “ToDo1”. In the “TutorialsToDo1” folder are the following source files:

The next sections will briefly describe the files. For further information please refer to the comments in the source.

Index.html

This file contains skeleton html. This file was modified for the Bootstrap 4, jQuery components. Here are the key parts:

Main.pas / Main.dfm / Main.html

This the main screen which contains the menu sidebar, plus a panel that acts as a parent to sub-forms. The “ElementId” properties on “Main.frm” are linked to html “id’s” in the “Main.html”.

Here’s the form:

Here’s the form after being merged with the html:

Pretty neat. Here’s what is in Main.html for “Refresh To Do’s”:

Note the span above with the id “main.menu.todo.list”. Here is the Delphi side:

When the Main form is opened, TMS Web Code merges these items to render the page.

View.ToDo.List.pas / View.ToDo.List.dfm / View.ToDo.List.html

This form is where the To Do items are listed in a Bootstrap 4 table. The form is embedded as a sub-form on the panel container in “Main.frm”. Please to the screen shots above which shows the embedded form in the Main container panel.

Here is Main.html and where the embedded form is placed:

Here is View.ToDo.List.html:

The above html is merged with “main.container” to show the list of To Do’s.

Within this form is a “TWebTableControl” named DataGrid. When this form is created, it calls the PHP script todolist.php.

Here is the call that is made to the php script:

When the “LoadFromJSON” is made the URL looks like this:

todolist.php builds a JSON response using the criteria passed as shown above. Then encodes the JSON response in PHP as:

Here is a sample of the JSON returned:

“Id” shown above becomes Column zero in DataGrid, “DateDue” becomes Column 1 in DataGrid, etc. Here’s what it looks like once loaded:

You’ll notice that “Id” is not really showing. Instead is a Bootstrap Button. This is accomplished with the “OnGetCellChildren” event that is part of “TWebTableControl”. Here's the code:

If the column passed is Column zero, “AValue” contains the “Id” of the To Do item being loaded. A "TWebButton" is created. The contents in Column zero are replaced with a Bootstrap Button and “Id” is placed in “TWebButton.Tag”. At this point when you click on one of the Edit buttons, you’ll be able to retrieve the To Do item’s Id and in turn create the form “EditToDoItem” and pass the Id to the form. The editing process is described in the next section. Here’s the code that does this:

The “Sender: TObject” above is the Edit button. The “Tag” contains the “Id” of the To Do item. When “EditForm” is created it uses “@AfterCreate” that is called once the form is created. And in “AfterCreate” a call is made to load the To Do item’s information. At this point the Edit form is shown via “EditForm.ShowModal”.

Edit.ToDo.Item.pas / Edit.ToDo.Item.dfm / Edit.ToDo.Item.html

This is a popup modal form where you can add new items and edit existing items. This form is created when you click the “Edit” button to edit existing To Do’s or when you click “New To Do” on the main form. Here’s the form:

Here’s the form after being merged with the html:

When the form is created to edit a To Do, “gettodoitem.php” is called passing the Id of the To Do item this way:

The “ToDoRequest” above is a “TWebHttpRequest” component. Here is a sample URL passed to “gettodoitem.php”:

Here is the JSON response:

Part of a “TWebHttpRequest” component is the event “OnResponse”. One of the variables passed to this event is the Response which is the JSON response shown above. Here I use TMS’ JSON to decode and place the values into the form:

Once the information is entered, you will press “Post”. This button is labeled “PostBtn” and has an event associated with it, which takes the information off the form and builds arguments which are then passed to “posttodoitem.php” which updates the To Do list data. The call is made here:

What I used.

Delphi and TMS Web Core.

I’m using Delphi Tokyo (10.2.2) with TMS Web Core. I assume you have both Delphi and TMS Web Core already installed.

MySQL

I separately downloaded and installed the MySQL community edition. Please note, Apache as described below, now comes with “MariaDB” instead of MySQL, thus the separate download. Here is the link to the MySQL community edition:

Apache and PHP.

I’m using MySQL and Apache (with PHP) to handle the web server and database. As noted I installed MySQL separately. Here is a link to “XAMPP” along with instructions for installation:

dbForge Studio Express for MySQL from Devart.

Apache “XAMPP” comes with “PhpMyAdmin”. This is just my opinion, but I think it’s clunky. I’ve been using DevArt’s “UniDac” components in my Delphi apps for quite some time and like the way I can easily switch between MySQL and SQL Server. As an alternative to “PhpMyAdmin” I use their Studio Express to maintain the MySQL databases. Here is the link:

Note, select the download for the Express version.

Folders used.

Source folders.

The Delphi source for this project is on my “C:” drive and is located here:

Source download

Note "todolist-create.sql" is also on this download. Use it to create your "todo" database.

Run time folders.

The Apache run times are installed on my “C:” drive at the standard XMAPP location:

Runtime download

Conclusion.

I hope this has been useful. If there are suggestions, bugs found, etc, you can reach me at larry@lwadsworth.com Based on reception, I might create a version two of the tutorial, which would have Categories for the To Do’s. This way you would be able have you items categorized, such as “Personal”, “Client” To Do’s.

Thanks again,

Larry Wadsworth

We continue on our mission to make TMS FNC UI controls not only the UI control set that you can put to work everywhere as Delphi/Pascal developer but also the most comprehensive UI control set for your toolkit.
For those not yet familiar with 'FNC' controls, these are what we call Framework Neutral Components. This means that these UI controls can be simultaneously used with different frameworks, are fully cross platform, can be used from Delphi, C++Builder and Lazarus and most spectacularly can be used to create web applications with TMS WEB Core. Read more about FNC for the web here.

TMS FNC Controls can be simultaneously used on these frameworks:

• Automatic retrieval of published properties of an object
• Various inplace editors such as a combobox for enum values, or checkgroup dropdown picker for set properties.
• Events for customization, filtering of properties and property values
• Can handle class properties, collection properties, set properties ...
• Datasource support for direct data editing

• HTML formatted texts for content, expandable text and footer
• Optional radio buttons, progress bar, verify checkbox, input field, and custom input
• Custom buttons with the option to turn them into command links
• Auto close after timeout

• Various panel styles including HTML formatted text, images, progress bar and more
• Optional auto size, button and hint per panel
• Multiple progress bar levelst

• Save signature to a file, memory stream or an image
• Load signature from a file or memory stream
• Customizable pen, clear icon and text

• Separate R, G, B and HEX values
• Used in TTMSFNCColorPicker/TTMSFNCColorSelector as a mode

The TMS WEB Core event

• Bruno Fierens, CTO of tmssoftware.com
• Jason Chapman

Location of the event:

The agenda of the day:

Registrations

Photo by Makarios Tang on Unsplash

TMS Aurelius 4.0 has just been released! It's a major update with exciting new features:

• TAureliusConnection component
• Generate entities from existing database, from the IDE
• Direct Microsoft SQL Server database access

Conn := TMSSQLConnection.Create('Server=.SQLEXPRESS;Database=Northwnd;TrustedConnection=True');

Two weeks of TMS lab visits

From today till October 12, we'll have a daily visit in the TMS lab to see what the team is working on, experimenting with, researching... for future TMS WEB Core releases. For some of this work, there are already firm plans for adding this to upcoming releases, for other more exploratory research work, this is not set in stone yet. But we wanted to take you on this visit to the TMS lab to let you see future capabilities and features and get in touch to listen what you look most forward to, to hear where your needs are, so we can align our efforts best to your needs.

Lab visit 1: Google Charts integration

On this first day, we are having a look at where we are with support for Google Charts. Google Charts is an extensive web charts library consisting of a huge range of chart types for integration into your web applications.



We have been researching how we could best enable the integration of Google Charts in TMS WEB Core applications from the perspective of a Delphi developer used to OO component based RAD development. From this, we deducted, we'd need to create a Google Charts component that can be dropped on the form and that gives you the desired chart by just setting a few properties and call methods to add the actual chart data, all in 100% Pascal code.

Setting up a series in a Google Charts becomes with the help of the TWebGoogleChart component as easy & intuitive for Delphi developers as:

uses
  WEBLib.GoogleChart;

var
  it: TGoogleChartSerieItem;
begin
  WebGoogleChart1.BeginUpdate;

  WebGoogleChart1.Title := 'Browser Market Share';

  it := WebGoogleChart1.Series.Add;

  it.ChartType := gctPie;
  it.Title := 'September 2018';

  it.Values.AddPiePoint(60.3, 'Chrome');
  it.Values.AddPiePoint(13.1, 'Safari');
  // extract this pie out of the pie chart 
  it.Values.AddPiePoint(7.2, 'Firefox', 0.4);
  it.Values.AddPiePoint(6.7, 'IE/Edge');
  it.Values.AddPiePoint(3.1, 'Opera');
  it.Values.AddPiePoint(9.6, 'Other');
  WebGoogleChart1.EndUpdate;
end;

procedure TForm1.WebGoogleChart1Select(Sender: TObject;
  Event: TGoogleChartSelectEventArgs);
var
  chart: TWebGoogleChart;
begin
  chart := (Sender as TWebGoogleChart);

  lbSelect.Caption := chart.Series[Event.SerieIndex].Title + ' '
      + chart.Series[Event.SerieIndex].Values[Event.PointIndex].DataPoint.Title + ': '
      + FloatToStr(chart.Series[Event.SerieIndex].Values[Event.PointIndex].DataPoint.X) + '%';
end;

There is no doubt about it that artificial intelligence is a hot topic. Wondering how this cool technology could be used by Delphi developers creating web applications, we researched how we could leverage existing technology. In the area of artificial intelligence, the Tensorflow.js library is one of the most popular and powerful libraries for use in web clients. So, we embarked on investigating how we could enable using TensorFlow.js easily from our beloved Pascal language in a TMS WEB Core web client application.

First sample: sequential prediction

This first small sample is based on creating first a model with sample data ourselves and then let the machine predict a value based on the model. The model is simply a series of points (X,Y values). After we feed the point data into the model, it is up to the model to predict the next point on a line.

In Pascal, this translates to using a class TTMSTFPredictSequentialNext that internally uses the Tensorflow model tf.keras.models.Sequential. This is made available as a TComponent with following public interface:

  TTMSTFPredictSequentialNext = class(TComponent)
  public 
    procedure createModelWithSample(xs, ys: TJSArray);
    function predictYforX(aValue: JSValue): JSValue;
  end;

procedure TForm2.DrawDot(X, Y: Integer);
begin
  WebPaintBox1.Canvas.Brush.Style := bsSolid;
  WebPaintBox1.Canvas.Brush.Color := clRed;
  WebPaintBox1.Canvas.Pen.Style := psSolid;
  WebPaintBox1.Canvas.Pen.Width := 2;
  WebPaintBox1.Canvas.Pen.color := clRed;
  WebPaintBox1.Canvas.Ellipse(X-4, Y-4, X+4, Y+4);
end;

var
  xs,ys: TJSArray;
begin
  tfModel := TTMSTFPredictSequentialNext.create;
  xs := TJSArray.New;
  ys := TJSArray.New;

  FillData(xs, ys);
  NormalizeData(xs, ys);
  tfModel.createModelWithSample(xs, ys);
end;

var
  predictY: single;
  X,Y: integer;
begin
  X := LastPointX + 50;
  predictY := tfModel.predictYforX(normalize(X)));
  y := denormalize(predictY);
end;

  tfModel := TTMSTFDigitIdentifier.Create;

  tfModel.loadModelFromUrl('ModelJs/model.json');

procedure TForm2.WebPaintBox1MouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
  doPaint := true;
  remX := X;
  remY := Y;
end;

procedure TForm2.WebPaintBox1MouseMove(Sender: TObject; Shift: TShiftState; X,
  Y: Integer);
begin
  if doPaint then
  begin
    WebPaintBox1.Canvas.Pen.Width := 30;
    WebPaintBox1.Canvas.Pen.Color := colorStroke;
    WebPaintBox1.Canvas.MoveTo(X, Y);
    WebPaintBox1.Canvas.LineTo(X + 30, Y);
    remX := X;
    remY := Y;
  end;
end;

procedure TForm2.WebPaintBox1MouseUp(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
  doPaint := false;
end;

var
  ImgData: TJSImageData;
  v: JSValue;
begin
  ImgData := normalizeddigit.Canvas.Context.getImageData(0, 0, 28, 28);
  v := tfModel.identifyDigit(x);
  if v = -1 then
    pnlDigit.Caption := '?'
  else
    pnlDigit.Caption := Format('%d', [v]);
end;

The fact that IDERA acquired the company Sencha behind the ExtJS framework and has now both Embarcadero and Sencha under its umbrella generated also some interest among Delphi developers for this framework. From time to time we get a request if the ExtJS framework can be used from TMS WEB Core. This triggered our team to investigate if this was technically feasible. And after the needed research, we are happy to inform that we managed to integrate a couple of ExtJS controls as proof of concept in TMS WEB Core. Technically this means that we can:

1. Create the ExtJS control from a Pascal class
2. Manage the ExtJS control settings via the Pascal class properties
3. Map class methods on ExtJS control functions
4. Catch the events triggered by the ExtJS control and route these to the Pascal class events

WebEXTJsGrid1.ConnectToJSONUrl('http://www.tmssoftware.biz/tmsweb/fishfacti2.json');

It is nice there is also free open-source IDE for Pascal developers, but what is really nice is that this free IDE runs on multiple operating systems. It can be natively run from Windows, macOS and Linux. And yes, Raspbian being in the Linux family, Lazarus also runs on Raspbian on a Raspberry Pi!

So, of course, our team was challenged to research if we could also have TMS WEB Core running on Lazarus and with this, eventually allow Pascal developers to build web client applications from their beloved operating system, whatever that is.

Our team already has extensive experience with building components for Lazarus, as our FNC range of components already all support Lazarus on all target operating systems, Windows, macOS, Linux. But building the kind of IDE integration that something like TMS WEB Core needs is a higher level of complexity.

The good news is that after a lot of investigation and effort, we have a first prototype of TMS WEB Core running in Lazarus (on Windows). This means you can:

• Create a new TMS WEB Core application type from Lazarus
• Add TMS WEB Core UI controls on the form
• Use the Lazarus code editor to write the application code
• Press F9 and the TMS WEB Core application gets compiled & launched in the browser
• Debugging is done from the browser (when desired also directly at Pascal code level) as it is for Delphi

1. The new TMS WEB Core project type that can be chosen:
   
   
   
2. The default TMS WEB Core project now looks like this in the Project Inspector:
   
   
   
3. Under Tools, Options, there is a new tab for setting the TMS WEB Core configuration:
   
   
   
4. On the tool palette, the large number of TMS WEB Core controls show up:
   
   
   
5. And of course, the TMS FNC UI controls are also available and ready to be used for TMS WEB Core applications:
   
   
   

procedure TForm1.WebButton2Click(Sender: TObject);
begin
  WebStringGrid1.DefaultRowheight := 64;
  WebStringGrid1.RowHeights[0] := 24;
  WebStringGrid1.FixedCols := 0;
  WebStringGrid1.ColCount := 8;
  WebStringGrid1.ColWidths[6] := 128;
  WebStringGrid1.ColWidths[7] := 128;
  WebStringGrid1.Options := WebStringGrid1.Options + [goRowSelect];
  WebStringGrid1.loadfromjson('http://www.tmssoftware.biz/tmsweb/fishfacti2.json','ROW');
end;

procedure TForm1.WebStringGrid1GetCellChildren(Sender: TObject; ACol,
  ARow: integer; AField: TField; AValue: string; AElement: TJSHTMLElement);
var
 img: TJSHTMLImageElement;
begin
  if (ACol = WebStringGrid1.ColCount - 1) and (ARow > 0) then
  begin
    img := TJSHTMLImageElement(document.createElement('img'));
    img.src := AValue;
    img.style.setProperty('height','64px');
    AElement.innerHTML := '';
    AElement.appendChild(img);
  end;
end;

1. Port the command-line tools used by TMS WEB Core to macOS & Linux
2. Do more work on the integration of things like automatically adding JavaScript library references like we have in Delphi
3. Implement the property editors for the Object Inspector for properties for selecting HTML elements & CSS class names
4. Do a lot more polishing and fine-tuning
5. Create a distribution with install steps

Two weeks of TMS lab visits

At the beginning of this week we announced that we will publish a series of blogs for the coming 2 weeks. Well the first week is over!

Each day we visited the TMS lab to see what the team is working on and what other plans we have for the future TMS WEB Core releases. Not only this, we also wanted to listen to YOU, as a TMS customer!
Are there things that you want our team to expand, new ideas you want to share or maybe you've just seen nice features and you want to congratulate us ....everything is appreciated!



The following topics were covered in week 1

Lab visit 1: Google Charts integration

To integrate Google Charts in TMS WEB Core applications, we'd need to create a Google Charts component that can be dropped on the form and that gives you the desired chart by just setting a few properties and call methods to add the actual chart data, all in 100% Pascal code.


• Lab visit 2: Adding artificial intelligence to TMS WEB Core apps
  
  
  
  The Tensorflow.js library is one of the most powerful libraries for use in web clients.
  In our blog we presented two small samples, sequential prediction and digit identification, but it is clear that much more can be done, not only with TensorFlow but also with other libraries.
  
  
• Lab visit 3: ExtJS & TMS WEB Core
  
  
  Our team was very curious to know if the ExtJS framework can be used from TMS WEB Core. After some research we can now say that TMS WEB Core can do the following:
  
  
  1. Create the ExtJS control from a Pascal class
  2. Manage the ExtJS control settings via the Pascal class properties
  3. Map class methods on ExtJS control functions
  4. Catch the events triggered by the ExtJS control and route these to the Pascal class events
  
  
• Lab visit 4: TMS WEB Core from Lazarus
  
  
  Here we also have the long awaited (and requested) first prototype of TMS WEB Core running in Lazarus!
  This means we can now:
  
  
  1. Create a new TMS WEB Core application type from Lazarus
  2. Add TMS WEB Core UI controls on the form
  3. Use the Lazarus code editor to write the application code
  4. Press F9 and the TMS WEB Core application gets compiled & launched in the browser
  5. Debugging is done from the browser (when desired also directly at Pascal code level) as it is for Delphi
  
  Lab visit, feedback & win!
  
  Let's make WEB even more fun and exciting. Tell us about your favourite subject/blog and win a prize!
  Now it's your turn! Give our team a new challange, give your opinion on the topics covered in the blogs and share with us your creative ideas.
  
  To reward your interaction & feedback, we'll pick 3 blog comments on October 15 that we liked the most and first prize is a free TMS WEB Core license, the 2nd and 3rd prize is a 50% discount coupon on TMS WEB Core. Let yourself hear to increase your chances!
  
  Reminder
  
  Note: in October you can still take advantage of purchasing TMS WEB Core at launch price from 295EUR for a single developer license. From November 1, 2018 regular pricing will be active on TMS WEB Core (395EUR for a single developer license).
  
  

For todays visit in the lab, we dive deep into the workings of the pas2js compiler. This technical article is therefore provided by Michael Van Canneyt, one of the two masterminds behind the pas2js compiler. Michael Van Canneyt has been involved in the Pascal language development community for over 20 years, wrote numerous articles, books, open-source Pascal projects, commercial Pascal based desktop and server applications and much more. In other words, a very highly respected Pascal language professional we have the honour to work with!

Using external classes in pas2js

Using Classes in Object Pascal goes without saying. JavaScript also has objects and classes - sort of. Meanwhile, the amount of JavaScript APIs and libraries dwarfs probably the amount of available libraries in any other language. So, the natural question is: how do we use all these native JavaScript objects and classes in Object Pascal as efficiently as possible?

One way would be to actually create classes in Object Pascal which mimic the classes in JavaScript, and use assembler blocks to access the fields and methods of the actual underlying object. This approach has the advantage that it allows you to reshape the native JavaScript object into something that is more pascal-friendly. Or, if you don’t like the API of a JavaScript object, this approach also allows you to create a better API. The disadvantage of this approach is that it requires a lot of work, code and is error prone.

Another approach is to let the compiler understand JavaScript classes: provide the compiler with an object pascal description of a JavaScript object, but without an implementation in pascal: an external class definition.

In essence, this is nothing more than an extension of the ‘external’ declaration that programmers have used for ages to access functions in a library. Nobody thinks twice when looking at the following external function declaration:

function CreateFile(lpFileName: LPCWSTR; dwDesiredAccess, 
wShareMode: DWORD; lpSecurityAttributes: PSecurityAttributes; dwCreationDisposition,
dwFlagsAndAttributes: DWORD; hTemplateFile: THandle): THandle; stdcall; external kernelbase name 'CreateFileW';  

IInterface = interface   ['{00000000-0000-0000-C000-000000000046}']   
function QueryInterface(const IID: TGUID; out Obj): HResult; stdcall;
function _AddRef: Integer; stdcall;
function _Release: Integer; stdcall;
end;

TJSHTMLCollection = class external name 'HTMLCollection'  
private 
  FLength : NativeInt; external name 'length';  
public    
  function item(aIndex : Integer) : TJSNode;
  function namedItem(aName : string) : TJSNode;
  property Items[aIndex : Integer] : TJSNode read item; default;    
  property NamedItems[aName : String] : TJSNode read namedItem;
  property length : NativeInt Read FLength;  
end;

This means that writing

var
  a: TJSNode;  
begin
  a:=Coll[0];  
end;

Where Coll is of type TJSHTMLCollection presented above, will map directly on

{
    var a = null;
    a=Coll.item(0);
}

Which is about as efficient as it can get for transpiled code.

An external class definition is also easy to understand: the above does not really differ a lot from an interface definition. Any Object Pascal programmer will at a glance understand what API this class offers. The only new concept to grasp is the header:

TJSHTMLCollection = class external name 'HTMLCollection'

The external name ‘HTMLCollection’ is almost verbatim what one can find in a function definition when importing a function from an external library, only now applied to complete classes. One can also view it as an equivalent of the GUID identifier in an interface definition.

The example shows that array properties for external classes are supported, just as they are in interface declarations. It also shows how to declare a read-only field: JavaScript does not know properties as we know them in Object Pascal, but only knows fields. For JavaScript objects that are backed by some native API, these fields can be read-only. The ‘length’ field in the above JavaScript HTMLCollection object is an example. If we were to declare it as

TJSHTMLCollection = class external name 'HTMLCollection'
   length : NativeInt;
end;

The compiler would know there is a field length, but it would be read-write. Obviously, this is not good. Since we can declare read-only or write-only properties, their syntax is used to solve this problem:

TJSHTMLCollection = class external name 'HTMLCollection'
private
  FLength : NativeInt; external name 'length';
public
  property length : NativeInt read FLength;
end;

From this definition it is clear for the programmer that there is a read-only property length. At the same time compiler knows that when it needs to read the property, it can use the name ‘length’. Why this syntax and not introduce something else, for example:

TJSHTMLCollection = class external name 'HTMLCollection'
    length : NativeInt; ReadOnly;
end;

Besides the fact that we don’t want to pollute the language with too many keywords, the external syntax was needed anyway, for two reasons:
First, JavaScript allows field names to start with the $ character, so a syntax to be able to give a valid pascal name was needed. The ‘external name’ was again reused:

TSomeJavaScriptClass = class external name ‘SomeJSClass' 
  MetaField : NativeInt; external name ‘$metaField';
end;

This tells the compiler that there is a ‘MetaField’ field in pascal, but that the JavaScript name is $metaField. Secondly, some JavaScript identifiers are valid pascal keywords.

This can be solved using the & escape character:

TSomeJavascriptClass = class external name ‘SomeJSClass'
    &end : NativeInt;
end;

Or using the external name syntax:

TSomeJavascriptClass = class external name ‘SomeJSClass'
    _end : NativeInt; external name ‘end’
end;

The same 2 reasons for having the external syntax apply of course for methods as well.

There is a special use for the ‘external name’ construct, namely to allow using object properties. The following is valid javascript:

MyObj[SomeName]=123;

A JavaScript is also a named array of arbitrary JavaScript values. This is translated in the TJSObject class declaration as follows:

TJSObject = class external name 'Object'
private
  function GetProperties(Name: String): JSValue; external name '[]';
  procedure SetProperties(Name: String; const AValue: JSValue); external name '[]';
public
  property Properties[Name: String]: JSValue read GetProperties write SetProperties; default;
end;

The external name ‘[]’ incantation tells the compiler that this function or procedure is in fact an array property access. As a result the above statement syntax can be kept:

MyObj[SomeName] := 123;

The same construct can be found in the JavaScript Array object declaration of TJSArray, and several other object definitions.

The above highlights the possibilities of the external class syntax. This syntax is actually nothing new or invented specially for pas2js: the Free Pascal Java bytecode compiler uses the same syntax to import Java classes, and uses a similar syntax to import Objective C class definitions on Mac OS, thus giving the pascal programmer access to all the possibilities offered by the platform.

In order to access JavaScript APIs, it is necessary to create external object definitions. The pas2js RTL delivers such definitions: units JS and web consist almost entirely from external definitions. The same is true for library imports such as libjquery, webaudio and webbluetooth.

How to create such units ? Three possible approaches exist:

-Manually:
This is how the JS, Web and Libjquery units were made, based on official documentation, the object declarations were coded manually. Needless to say, this is a cumbersome and error-prone approach.

-If a WebIDL specification is available, the webidl2pas tool can be used
This is discussed below.

-Using the classtopas function
The classtopas function is a function in the class2pas unit. It comes in several forms:

function ClassToPas(Const aName : string; Obj: TJSObject; aAncestor : string = ''; recurse : Boolean = False): string;
function ClassToPas(Const aJSName,aPascalName : string; Obj: TJSObject; aAncestor : string = ''; recurse : Boolean = False): string;
procedure ClassToPas(Const aJSName,aPascalName,aAncestor : string; Obj: TJSObject; aDecl : TStrings; recurse : Boolean = False);

The meaning of these arguments is intuitively clear from their names.
How to use this function ?

Get a reference to an instance of the object you want to create a declaration for, and call the function or procedure.

The demos of the pas2js compiler show how to do this.

program democlasstopas;

uses Web,Classes, JS, class2pas, browserconsole;

procedure ShowRTLProps(aClassName,aJSClassName : String; O : TJSObject);  Var    S : TStrings;    I : Integer;    
begin
    S:=TStringList.Create;
    try
      ClassToPas(aClassName,aJSClassName,'',O,S);
      for I:=0 to S.Count-1 do
         Writeln(S[i]);
    finally
      S.Free;
    end;
end;

var
   o : TJSObject;    
begin
    // get the new JavaScript object:
asm
      $mod.o = new Ext.form.Panel;
end;
MaxConsoleLines:=5000;
ShowRTLProps('Ext.form.Panel','TExtJSForm',o);  end.

Combine this with the following HTML page:

  

<!DOCTYPE html>  
<html>   
<head>   
<meta charset="utf-8"/>   
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>   
<script type="application/javascript" src="democlasstopas.js"></script>    
</head>    
<body>   
<script type="application/javascript">    rtl.run();   
</script>   
</body>  
</html>

Will result in the following output when the page is opened in the browser:


The declaration is far from perfect: it still needs a lot of manual tweaking. The argument types of functions are unknown (if they are declared at all) the return types too. Objects do not have an actual type other than the TJSObject.

But it is a start, and it should be easy to create a program that allows you to enter a class name in an edit box, and which outputs a class declaration in a memo.

It should be clear that the ClassToPas function is limited. However, if you are lucky, a WebIDL file exists for the API you are trying to access. WebIDL is a standard of sorts to describe Javascript APIS: https://www.w3.org/TR/WebIDL-1/ Version 2 is in preparation on https://heycam.github.io/webidl/

If such an IDL exists you can use the webidl2pas tool. This is a commandline tool (it could easily be converted to a GUI tool) which takes as input a WebIDL file, and outputs a pascal file with external class definitions.

Basically, this means that the command webidl2pas -i webaudio.idl -o webaudio.pas

Will create a unit webaudio.pas from the input file webaudio.idl. The output can be tweaked somewhat, the command webidl2pas -h or webidl2pas --help will give an overview of all available options.

Using these tools, there is no excuse for not exploiting the many Javascript libraries out there in your next TMS Web Core project!

Thanks Michael Van Canneyt for this excellent article with many very interesting insights!

Another day, another visit this week in the TMS lab and today we're going to have a look at what progressive web application development can bring for us, Delphi developers and how we prepare TMS WEB Core in the lab to be ready to take advantage of this technology.

First of all, what exactly is a "progressive web application"?

Easiest is to borrow the information from Wikipedia on progressive web applications:

Progressive Web Apps (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications. PWAs are an emerging technology that combine the open standards of the web offered by modern browsers to provide benefits of a rich mobile experience.

What does it mean in relationship to TMS WEB Core?

This means a couple of things for the application:

• Adapts automatically to the device screen, i.e. looks good on mobile and desktop. Also called responsive design
• Is aware of online versus offline state, i.e. continues to work in offline state
• Can be installed on a mobile device, Chrome OS machines and most likely in the future also on desktop machines without going to a censored application store
• Will look like a native application, i.e. will use the full screen on the mobile device, no navigation bar etc..
• Has access to device hardware
• Will need to be initially accessed via HTTPS

• The TTMSFNCWidgetLCDLabel as display that is top aligned
• The TWebGridPanel as automatic sizing grid that is client aligned
• The TWebGridPanel is configured with 4 25% width columns and 5 20% height rows
• The TWebButton controls on the TWebGridPanel are client aligned on the panel

With the ever growing number of TMS WEB Core UI controls we have and the ever growing complexity, testing web UI controls becomes a non-trivial task. Our team clearly has a need to allow an efficient way testing not only by the developer of the UI controls but also by other users. One of the chores for testing a UI control with numerous settings that affect the appearance and the behavior, is that typically an application needs to be developed that will surface all the combinations of settings. And then we are not yet talking about interactions between multiple UI controls. So, we found ourselves both writing a lot of test application code and also going a lot through the cycle of configuring a UI control, compile, run, test and repeat with other configurations.

Out of this laborious experience, the idea for creating a test environment was born. We wanted to have a runtime test environment for the TMS WEB Core components. Wanting the ability to test with every possible property setting of the control and realizing we had in our TMS FNC UI Pack component library an object inspector control, developing this test environment turned out to be faster than we imagined.

After using our test environment for a while now, we realized that this would probably also be interesting for users new to the TMS WEB Core framework. It allows to play with the TMS WEB Core UI Controls directly from the web without the need to install anything. It allows to learn all features and capabilities and discover the rich set of controls meanwhile available that can help you build your web applications. So, we thought of a name for this environment and came up with "Component Explorer".

During these 2 weeks of visits to the TMS lab, we wanted to show you the experimental version of our Component Explorer. You can use it to explore our TMS WEB Core UI controls, play with it without installing it, experiment and test. And oh, of course we would appreciate if you'd let us know if you find an issue so our team can look into it.

Head to http://www.tmssoftware.biz/tmsweb/demos/ComponentExplorer now and discover.



Some notes for your information:

1. A nice technical detail about the Component Explorer is that it is not a monolithic single-page web application. This means that the Component Explorer consisting of the Object Inspector, designer and component palette dynamically loads the UI control libraries. So, when we develop new UI controls or update the UI controls, this can be done by deploying compiled UI control library JavaScript files to a "component" folder.
   
   
2. Another nice tidbit, is that the Component Explorer is mainly made up of FNC UI controls. The Object Inspector, the design surface, the tool palette, ... were all developed with TMS FNC UI Controls. Given that FNC controls can be used for VCL, FMX, LCL and WEB, this means that theoretically, we could also create a desktop Component Explorer versions. In that case it would be limited to exploring FNC controls of course as the native TMS WEB Core UI controls of course cannot be used from VCL, FMX or LCL applications
   
   
3. There is an edit mode and runtime mode. Normally on the design surface, the mouse interacts with the UI controls to move & resize the controls. When unchecking the "Edit Mode" checkbox, we can interact with the UI controls directly with the mouse.
   
   
4. There are still several shortcomings in the Component Explorer. One of these shortcomings is that it is not yet possible to insert controls as child of other controls. All inserted controls are child of the form. So far, for our testing purposes, we could live with this limitation but as our testing becomes more complex (for example testing a ribbon control), this is something high on the priority list.
   
   
5. Although there is already a TStringList property editor, TCollection property editor, there is no mechanism yet for custom property editors. Class properties can be edited by expanding the class and that is in most of our testing scenarios more than sufficient.
   
   
6. In working on integrating testability of our TMS XData backend framework, we discovered a nice side effect that we could create on-the-fly not only a component exploring environment but also a data exploring environment. An example for exploring this, is by dropping a TXDataWebDataSet, TXDataWebConnection, TWebDataSource and TWebDBGrid on the form. Hook the grid to the datasource, the datasource to the dataset and the dataset to the connection. You can use your own XData endpoint or you can use our test endpoint https://app.devgems.com/music Then set the TXDataWebConnection.Active to true and set TXDataWebDataSet.DesignLoad to true. You can see now the XData data in the TWebDBGrid.
   
   
   
   
7. We did use Bootstrap in the Component Explorer, so you can also play with Bootstrap styles. Use the TMS WEB Core UI controls ElementClassName property to assign a fitting Bootstrap class and it should update live. For example, drop a TWebButton on the form and set WebButton.ElementClassName = 'btn btn-primary' and you should get a nice looking blue Bootstrap button.

One of the more exciting technologies of past years is Electron. For those not familiar with Electron, a small background first. Electron was first created to enable the development of Github's Atom editor, which is meanwhile a highly popular a cross platform editor. Via Electron, it was possible to write the Atom editor code once with JavaScript and create desktop applications for Windows, macOS and Linux. Electron consists of the Chromium browser and node.js packaged in a native Windows, macOS or Linux executable. The application code consists of JavaScript, the layout and design of the appliction is equally done with web technologies HTML5 and CSS3. The Electron API meanwhile offers a wide set of bridges to the operating system the executable is running on and most parts of this API is of course fully operating system agnostic. As such, it is possible to use the local file system, use shell dialogs, clipboard access and much more. You can explore the Electron API here.

So, where does TMS WEB Core fit in? As you are aware, with TMS WEB Core, you can create web client applications in an RAD OO component based way. The web client runs JavaScript code that is compiled from your Pascal code. Connecting the dots, this JavaScript client application can of course also run under Electron and as such, offer the ability to have a desktop cross platform application for Windows, macOS and Linux, all with the same code base.

Although it is virtually dead-easy to let any JavaScript web client run via Electron in a desktop application, the real power comes from the bridge to the native operating system. And this means, using the Electron API which is a JavaScript API. As it is TMS WEB Core primary goal to facilitate Delphi developers to continue using the beloved Pascal language and a RAD component based development methodology, we've explored exposing the Electron API via components.

Therefore, during this 8th lab visit, we'd like to present you a first experimental version of a TMS WEB Core application running under Electron. It is a kind of Notepad editor. It uses the TWebMemo as editing control and to open and save text files to the local file system we have introduced TElectronOpenDialog, TElectronSaveDialog and also TElectronStringList. To have access to the application main menu, there is also the TElectronMainMenu. On the main form of the application, it looks like:



The TElectronOpenDialog and TElectronSaveDialog are nearly identical to the VCL counterparts TOpenDialog and TSaveDialog. As such, opening and saving local files from the TMS WEB Core application running as desktop application via Electron becomes as easy as:

Opening a local file:

var
  sl: TElectronStringList;
begin
  ElectronOpenDialog1.Title := 'Select text file';
  if ElectronOpenDialog1.Execute then
  begin
    sl := TElectronStringList.Create;
    sl.LoadFromFile(ElectronOpenDialog1.FileName);
    Meditor.Lines.Assign(sl);
    sl.Free;
  end;
end;

var
  sl: TElectronStringList;

begin
  ElectronSaveDialog1.Title := 'Save to text file';
  if ElectronSaveDialog1.Execute then
  begin
    sl := TElectronStringList.Create;
    sl.Assign(MEditor.Lines);
    sl.SaveToFile(ElectronSaveDialog1.FileName);
    sl.Free;
  end;

• Many existing web technologies can be used & integrated in the desktop application
• The UI look & feel can be created with web technologies, i.e. graphics artists can create the HTML template for you with designs that outshine any classic desktop application design
• A lot of code can be reused between web and desktop application if the company has a strategy for web access + desktop deployment

TMS WEB Core and even web development itself is something new for some Delphi users. Even though TMS WEB Core is RAD, feels completely home by using Delphi IDE, a framework that is very similar to RTL and VCL, we felt the need to create a more "real-world" demo that would handle several aspects that potential Web Core users would have in their applications:

• Authentication
• Responsive design
• Dynamic content from database
• REST backend
• Data modification
• Data filtering, ordering, pagination
• And more...

Two weeks of TMS lab visits

Last 2 weeks were very busy, with many novelties and interesting ideas!

This week again we visited the TMS lab to see what the team is working on and what other plans we have for the future TMS WEB Core releases.

Our team would like to thank you for the many positive feedback. Your support gives us the energy to bring even better results. And so we have come up with the following topics this week.

The following topics were covered in week 2

• Lab visit 5: Using external classes in pas2js
  
  
  
  Learn how TMS WEB Core benefits from:
  1. High-performance pascal to JavaScript mapping
  2. Ultra-light Pascal wrapper classes
  3. Automatic javascript obkect defination imports
  
  
  
• Lab visit 6: TMS WEB Core Progressive Web Apps
  
  
  Progressive Web Apps
  1. responsive design
  2. continues to work in offline state
  3. install on device without need of censored app. store
  4. looks and behaves as native application
  
  
  
• Lab visit 7: TMS WEB Core testing and exploring
  
  
  
  Test our TMS WEB Core UI controls with Component explorer
  1. Runtime test environment for the TMS WEB Core component
  2. Test directly from the web without installing anything
  
  
  
• Lab visit 8: TMS WEB Core meets Electron
  
  
  Create a desktop cross platform application with the same code base using Electron API from TMS WEB Core.
  
  
• Lab visit 9: Automatic XData Web App Generator
  
  
  
  1. Scaffolding coming to TMS WEB Core / TMS XData
  2. Automatic CRUD DB web app generation
  3. Includes authentication, filtering, pagination,...

Two weeks of TMS lab visits: Winners

Last 2 weeks we have received many interesting comments on the blogs. Thank you everyone!
It is time to announce the winners today.

Winner: Murat Ak
We congratulate Murat for his excellent post, containing source code to add your own 3rd party components to TMS WEB Core. Great post by Murat showing how easy it is to add any existing web component to TMS WEB Core. We will soon inform how we will stimulate such initiatives even more.

Second place: Manuel
Thanks Manuel for valuable insights on how we could provide even better integration with frameworks like Cordova or Electron in the future.

Third place: Vieira Edson
We want to thank Vieira Edson also for various post comments exploring how TMS WEB Core is a dream for Delphi developers coming true.



We will contact the winners by email.

TMS Analytics & Physics developing library provides many useful and unique features for working with symbolic math expressions. New version 2.6 introduces new capabilities and improvements for symbolic manipulations with math formula.

First great innovation is that the partial derivative operator can be used in math formulae as an implicit operation. This means there is no need to evaluate symbolic expression for some derivative and then use the expression in some math formula. The derivative can be used in formula implicitly. For example, it is possible to use the following expression in formulae ‘?sin(x^2)/?x’. The derivative by ‘x’ evaluated by the system implicitly and used when required for other operations.
Some examples of syntactically correct expressions with the derivative operator:


∂²(x^2*sin(a*x))/∂x²
∂²(y^2+1-e^-x)/∂x∂y
∂sinh(x*y)/∂x-∂ln(y/x)/∂y

Implicit derivative operator supports mixed and high-order derivatives (up to 9-th order). Using the operator allows write math expressions in short and readable form without substituting explicit expression for the derivative, which could be more complicated in common case.
Here is an example code for calculating value of an expression, containing implicit derivative operator:

var
  f: string;
  v: TValue;
begin
  f:= 'e^(b*x)*(∂y^2/∂y)-∂sin(a*x)/∂x';
  v:= translator.Calculate(f);
  // code for using ‘v’ value...
end;

var
  f1, f2, df1, df2: string;
begin
  f1:= 'a*x^2+∂²(sin(a*x)*e^(b*y))/∂x∂y';
  df1:= translator.Derivative(f1, 'x');

  f2:= 'a*x^2+∂²(sin(a*x)*e^(b*y))/∂a∂b';
  df2:= translator.Derivative(f2, 'x');

  // code for using symbolic derivatives ‘df1’ and ‘df2’...
end;

var
  f, ef: string;
begin
  f:= 'e^(b*x)*(∂y^2/∂y)-∂sin(a*x)/∂x';
  ef:= translator.Explicit(f);
  // code for using explicit symbolic expression ‘ef’...
end;

var
  f: string;
  v: TValue;
begin
  translator.AddFunction('S', 'Pi*r^2', TArray.Create('r'));

  f:= 'S(a)-S(a/2)';
  v:= translator.Calculate(f);
  // code for using ‘v’ value...
end;

var
  f: string;
  v: TValue;
begin
  translator.AddFunction('Series', '1+(∂F/∂x)*x+(∂²F/∂x²)/2!*x^2+(∂³F/∂x³)/3!*x^3+(∂4F/∂x4)/4!*x^4', TArray.Create('F', 'x'));

  f:= 'Series(e^y y)';
  v:= translator.Calculate(f);
  // code for using ‘v’ value...
end;

var
  f, ef: string;
begin
  translator.AddFunction('Laplace', '∂²F/∂x²+∂²F/∂y²', TArray.Create('F', 'x', 'y'));

  f:= 'Laplace(A*sin(x)*y^2+B*cos(x)*e^-y x y)';
  ef:= translator.Explicit(f);
  ef:= translator.Simplify(ef);
  // code for using explicit symbolic expression ‘ef’...
end;

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;

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;

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;

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;

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;

After a stunning start in Brescia on July 25, 2018 with the TMS WEB Core v1.0 release, we're well underway to our next destination along our Mille Miglia track: Verona. As explained, to visualize the roadmap of TMS WEB Core, we use the historic 1955 Mille Miglia race and each subsequent versions of TMS WEB Core will be named after cities along the Mille Miglia. That means that our next major TMS WEB Core v1.1 release will be named Verona. We expect to arrive in Verona in November.

So, what will be included in TMS WEB Core v1.1 Verona:

• Initial Progressive Web Application (PWA) support
  A new project type with all necessary settings & preconfigured needed files will be available to let you start building progressive web applications out of the box.
  
  
• Google Charts
  Google Charts will be available via an easy to use Pascal component offering most of the Google Chart types and features.
  
  
• Google and Facebook signin
  Using Google or Facebook to offer signin for your web applications will be as easy as dropping a component on the form.
  
  
• Autocompletion control
  As there is no native editable combobox in a browser, we've created an editable combobox with autocompletion.
  
  
• Google ReCaptcha v3.0 support
  The next generation Google Captcha functionality wrapped in a Pascal component.
  
  
• Accelerator keys support
  For heavy keyboard users, you'll be able to use accelerator keys for buttons, labels just like you do now in VCL applications.
  
  
• Beta support for Lazarus
  A first version that can be used in the Lazarus IDE will be included.
  
  
• PayPal payment support
  Also here, a RAD component based way to make integrating payment processing from your web application really easy.
  
  
• Desktop browser bridge
  Send and receive commands/data between a TMS WEB Core web client and a desktop application hosting the browser that runs the TMS WEB Core client application.
  
  
• Enhancements for TWebClientDataSet and DB-aware controls
  Several enhancements make it even easier to connect DB-aware controls to a dataset.
  
  
• Many smaller improvements & fixes
  Many small enhancements and new functions to make the life easier for web client application development are included, too many to name here.