FREE TMS WEB Core event @London Oct 23, 2018



Thanks to Jason Chapman and the UK DevGroup of enthusiast Delphi developers, we have been able to cooperate and organise a TMS WEB Core event in London on October 23, 2018!

Bruno Fierens, CTO of will personally come to present TMS WEB Core, give live demonstrations, explain the architecture, show a glimpse of future developments and answer all your questions and listen to your suggestions and feedback.

The event is FREE and we welcome UK Dev Group members, existing TMS software customers and future TMS software customers interested in doing modern web application development in their beloved Object Pascal language and from the beloved Delphi IDE.

The TMS WEB Core event

Sessions are presented by
  • Bruno Fierens, CTO of
  • Jason Chapman

Location of the event:

The Prince Albert, 163 Royal College Street, London, NW1 0SG

The agenda of the day:

Time Description Speaker
12:00 Introduction UK devgroup + event Jason Chapman
12:15 TMS Company organisation & product line overview Bruno Fierens
12:30 Break/Lunch  
13:00 TMS WEB Core architecture in-depth Bruno Fierens
13:45 TMS WEB Core architecture hands-on / live demos Bruno Fierens
14:30 Break  
15:00 Connecting from TMS WEB Core to the back-end Wagner Landgraf (online) / Bruno Fierens
16:00 Hands-on experience with TMS WEB Core Jason Chapman
16:30 Q&A Bruno Fierens / Jason Chapman
17:00 End of TMS WEB Core event  


The number of places is strictly limited to 30, so be fast to sign-up as we cannot go over the limit of the venue.
To register, please use the following online form


We look forward to see you there.
Don't hesitate to contact us if you have any questions regarding the TMS WEB Core event in London or TMS WEB Core in general.

Masiha Zemarai


This blog post has not received any comments yet. Add a comment.

TMS FNC UI Pack v2.3 is here and brings 5 new UI controls


Sunday, September 16, 2018

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:

TMS FNC Controls can be simultaneously used on these operating systems/browsers:

TMS FNC Controls can be simultaneously used on these IDE's:

What's new in TMS FNC UI Pack v2.3:

TMS FNC Object Inspector

This is a versatile Object Inspector control. The control fully utilizes RTTI to provide a properties view of all properties of an associated component. Property filtering is possible to show only a select number of properties of a control. Moreover, when connected to a dataset, it will allow immediate viewing and editing of all fields in the associated dataset.

  • 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


Supercharge your message boxes with the TTMSFNCTaskDialog that is modeled after the task dialog that was introduced in newer Windows operating system versions. The task dialog message can contain HTML formatted text, optional text, radio group based options and much more...

  • 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


Allow the end user to draw a signature on touch screens and the component can capture this signature either as image file or as scaleable vector data.

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


End user selection of the full RGB color range is possible with the new TTMSFNCColorWheel.

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

All users with an active registration for TMS FNC UI Pack can now obtain the new update free and get started to build fantastic applications for Windows, Web, mobile, Linux or macOS.
A fully functional trial version of TMS FNC UI Pack is available and even in combination with a TMS WEB Core trial, it can be used to explore the fascinating new & never seen before capabilities to use these UI controls also in web applications.
Or you can even explore the components directly via your browser by checking the TMS WEB Core demos that have several FNC control demos.

We hope you're as passionate about FNC UI controls as our team is and we're eager to learn what more UI controls you would like to see coming in future updates or what features or improvements you would like to see added to the existing controls! Be in touch, talk with our engineers and let's keep the interesting technical conversations going!

Bruno Fierens


This blog post has not received any comments yet. Add a comment.

Larry's To Do List: a tuturial on using TMS WEB Core


Larry’s To Do List (guest article)


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:

		USE todos;
		CREATE TABLE todos.todolist (
		  Description VARCHAR(255) DEFAULT NULL,
		  Complete INT(1) DEFAULT NULL,
		  Priority INT(11) DEFAULT NULL,
		COLLATE utf8_general_ci

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.


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 “”. 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.


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:

MySQL download

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:

Apache download

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:

dbForge Studio download

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


I hope this has been useful. If there are suggestions, bugs found, etc, you can reach me at 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

Bruno Fierens


This blog post has received 2 comments. Add a comment.

Building Android/iOS Native App from TMS Web Core/TMS XData application using PhoneGap


Wednesday, August 29, 2018

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 ( 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.

Wagner R. Landgraf


This blog post has not received any comments yet. Add a comment.

Previous  |  Next  |  Index