TMS RADical WEB, custom controls using HTML elements

In a previous blog, it was demonstrated how custom controls for TMS WEB Core could be created using the FNC framework and how easy it was to use FNC code that was written for VCL, FMX or LCL applications also for web applications.
In this article, we want to cover custom controls from an entirely different angle. That means custom controls that are built from a hierarchy of HTML elements. The example via which we want to explain building such custom controls is about a commonly used UI concept in web development, i.e. a login panel. This is where the user enters his username & password to authenticate. So, in this article, we’ll show the details how to make a TMS WEB Core custom UI control that represents such reusable login panel.

In terms of HTML, the login panel consists of an outer DIV element. In this DIV, we put different DIV elements to hold label text to indicate where the username HTML INPUT element is and where the password HTML input element is. Finally, there is a HTML BUTTON used to confirm the actual entry and do a login.

From a TMS WEB Core custom control perspective, this means we will create a Pascal class descending from TCustomControl and we’ll override the CreateElement virtual method. This CreateElement virtual method is what is responsible for returning the hierarchy of HTML elements representing the UI control. In this case, the code for CreateElement is:

function TLoginPanel.CreateElement: TJSElement;
  br: TJSElement;
  Result := document.createElement('SPAN');
  FCaption := TJSHTMLElement(document.createElement('DIV'));
  FUserInput := TJSHTMLElement(document.createElement('INPUT'));
  FPasswordInput := TJSHTMLElement(document.createElement('INPUT'));
  FUserLabelSpan := TJSHTMLElement(document.createElement('DIV'));
  FPasswordLabelSpan := TJSHTMLElement(document.createElement('DIV'));
  br := document.createElement('BR');
  FButton := TJSHTMLElement(document.createElement('BUTTON'));
  FButton.addEventListener('click', @HandleLoginClick);

Here FCaption, FUserLabelSpan, FUserInput, FPasswordLabelSpan, FPasswordInput and FButton are Pascal references to the HTML elements SPAN, INPUT and BUTTON used in the control.
You can see that the HTML elements are created with document.createElement(). This is almost as if one would do this in Javascript, but via the Pascal to Javascript compiler, you can see the DOM object document can be used as Pascal object.

One more note about the CreateElement method, you can see that the purpose of the last line in the method:
FButton.addEventListener(‘click’, @HandleLoginClick);
is to attach a TLoginPanel method HandleLoginClick to the HTML element ‘onclick’ event handler.
The HandleLoginClick method is declared as

function HandleLoginClick(Event: TJSMouseEvent): Boolean; virtual;

To see how this HTML element event handler is eventually hooked up to trigger the TLoginPanel.OnLogin event, see this code snippet from the TLoginPanel class:

TLoginPanel = class(TCustomControl)
    FOnLogin: TNotifyEvent;
    function HandleLoginClick(Event: TJSMouseEvent): Boolean; virtual;
   procedure DoLogin; virtual;
    property OnLogin: TNotifyEvent read FOnLogin write FOnLogin;

function TLoginPanel.HandleLoginClick(Event: TJSMouseEvent): Boolean;
procedure TLoginPanel.DoLogin;
  if Assigned(OnLogin) then

To interface our Pascal class with the HTML elements two more virtual method overrides are important. There is the UpdateElementVisual method and the UpdateElementData method. The purpose of the UpdateElementVisual method is to do changes to HTML element properties that affect the UI control visually. The UpdateElementData method is to do changes with respect to data contained in the HTML elements.
For this TLoginPanel control, we expose a few properties to set captions for labels in the UI control as well as the values of the HTML INPUT elements for username and password.

The properties of the TLoginPanel used for the login panel data are:

TLoginPanel = class(TCustomControl)
    property CaptionLabel: string read FCaptionLabel write SetCaptionLabel;
    property LoginLabel: string read FLoginLabel write FLoginLabel;
    property Password: string read GetPassword write SetPassword;
    property PasswordLabel: string read FPasswordLabel write SetPasswordLabel;
    property User: string read GetUser write SetUser;
    property UserLabel: string read FUserLabel write SetUserLabel;

The UpdateElementData method is:

procedure TLoginPanel.UpdateElementData;
  FUserLabelSpan.innerHTML := FUserLabel;
  FPasswordLabelSpan.innerHTML := FPasswordLabel;
  FButton.innerHTML := FLoginLabel;
  FCaption.innerHTML := FCaptionLabel;
  (FUserInput as TJSHTMLInputElement).value := FUser;
  (FPasswordInput as TJSHTMLInputElement).value := FPassword;

To customize the look and feel of the login panel, there is a dual approach. The first and classic Pascal like approach is the basic properties are defined to set the background & border color of the panel and the padding and margin of the controls within the panel. The second approach is that the CSS class can be set for the HTML elements used and that also via CSS full customization of look and feel is possible. This leaves the choice to either stick to classical Delphi style RAD development and do all from the form designer or work with separate CSS and perhaps leave the styling to a graphic designer instead of letting the developer do everything.

The visual properties exposed for the TLoginPanel class are:

TLoginPanel = class(TCustomControl)
    property BorderColor: TColor read FBorderColor write SetBorderColor;
    property Color: TColor read FColor write SetColor;
    property ElementClassName: string read FElementClassName write SetElementClassName;
    property ElementCaptionClassName: string read FElementCaptionClassName write SetElementCaptionClassName;
    property ElementInputClassName: string read FElementInputClassName write SetElementInputClassName;
    property ElementButtonClassName: string read FElementButtonClassName write SetElementButtonClassName;
    property ElementLabelClassName: string read FElementLabelClassName write SetElementLabelClassName;
    property Margin: integer read FMargin write SetMargin;
    property Padding: integer read FPadding write SetPadding;

The Element*ClassName properties allow to set CSS class names for the control itself (outer DIV), the SPAN elements for the labels associated with the INPUT elements and of course of also for the HTML INPUT and BUTTON elements.

The UpdateElementVisual override becomes:
procedure TLoginPanel.UpdateElementVisual;
  strpadding,strmargin: string;
  if Assigned(ElementHandle) then
    strpadding := IntToStr(Padding)+'px';
    strmargin := IntToStr(Margin)+'px';
    if (ElementClassName = '') then
    begin'background-Color',ColorToHTML(Color));'border', 'solid 1px '+ColorToHTML(BorderColor));'padding',strPadding);
    if (ElementCaptionClassName = '') then
    if (ElementInputClassName = '') then
    if (ElementLabelClassName = '') then
    if (ElementButtonClassname = '') then

Notice how the properties are set when no CSS class is specified for HTML elements or otherwise the look and feel will be determined by the CSS.

The result becomes:

This is the basic look and feel without CSS.

Now, let’s bring bootstrap CSS and some custom CSS in the game and see the new look and feel.

Bootstrap is introduced with adding

<link rel=”stylesheet” href=””>

to the project HTML file and in addition we add CSS in the project HTML file <STYLE> section to control the LoginPanel look & feel:

    .labelcenter {
      text-align: center;
    .loginpanel {
      padding: 15px;
    .loginpanelelement {
      margin-top: 2px;
      margin-bottom: 2px;

Now the appearance of the panel becomes:

We have only scratched the surface here of the many possibilities to enrich the TMS WEB Core framework with custom UI controls but we hope we have generated interest and enthusiasm.

Get started today: Technical previews of TMS WEB Core, TMS FNC UI web-enabled controls, web-enabled TMS XData, the first parts under the TMS RADical WEB umbrella are exclusively available now for all active TMS-ALL-ACCESS customers.

Read More

Read More

Speaking in London About Delphi Tokyo on Thursday, March 15th

Next week I'll be presenting at an event in London organized by our partner Grey Matter. You can find more information and the link to sign up on  Titled "To Delphinity and Beyond" the event is focused on a general update of where the product is today and where it is heading in the near future. There will be specific focus on what's new in the latest Delphi (including the coming version 10.2.3) a long session focused on Windows 10 support and VCL applications modernization, but also Linux, mobile, parallel library, RAD Server, and more. I'll be around for most of the day, even before and after the event, so feel free to join and have an extra chat, but also ping me over email to reserve some time up front. See you soon.
Read More

TMS RADical WEB, technology preview update

We’ve been overwhelmed by the enthusiasm of many users about the news of TMS WEB Core and also the many reactions, feedback, comments of users who immediately got their hands wet with the technology preview.

From all feedback received combined with our internal planning, we’re pleased to inform that there is now a technology preview update available that brings not only many small improvements but also some exciting new features!

The highlight of the technology preview update is the introduction of the jQWidgets jQxGrid UI control. This control can now be easily used from your Pascal code from a TMS WEB Core application. jQxGrid is a high performance jQuery grid with paging, sorting, grouping, editing & filtering capabilities. It also features different column types.

If you get TMS WEB Core 0.9.2 you can start playing with the new grid right-away or you can explore the grid via the online demo.

Second new big feature is that now data-modules, i.e. the TWebDataModule, are also available. The same easy-to-use centralized place for databinding & business logic that we are used to in Delphi VCL or FMX applications is now also available in TMS WEB Core applications.

Also new is a Twitter feed display component. Showing your personal or company Twitter feed integrated in your web application is now as easy as dropping a component and setting your feed name.

We’ve also made it easier to use cookies and query parameters directly from your Pascal code. Getting or settings cookie values is now very easy. You can use code like:

Cookies.Add(‘CompanyNameCookie’,’tmssoftware’, Now + 5000);
Cookies.Add(‘UserNameCookie’,’Bruno Fierens’, Now + 5000);

And there is more!
The IDE integration was also improved with built-in automatic listing of CSS style classnames or HTML element IDs, so you can pick directly from the Object Inspector what CSS style from your HTML template you want to assign to a control or to what HTML element you want to link a control.

Other than this there are numerous smaller improvements in aligning, splitter, Google Maps geolocation, Google maps route display, …

We’ll keep you posted with more updates as we continue to execute the planning and we look forward to hear all your feedback!

Get started today: Technical previews of TMS WEB Core, TMS FNC UI web-enabled controls, web-enabled TMS XData, the first parts under the TMS RADical WEB umbrella are exclusively available now for all active TMS-ALL-ACCESS customers.

Read More

Read More

Packet Sender is a good tool when debugging protocols: free utility to send & receive network packets. TCP, UDP, SSL

It was fitting to bump into [WayBack] Packet Sender is a good tool when debugging protocols…” Written by Dan Nagle… – Lars Fosdal – Google+ on the day presenting [WayBack] Conferences/Network-Protocol-Security.rst at master · jpluimers/Conferences · GitHub It also means that libssh2-delphi is getting a bit more love soon and will move to github as well after a conversion from mercurial. Some of the things I learned or got confirmed teaching the session (I love learning by teaching): If you manage many domains, which might be troublesome to the default “certbot client”, so you might want to look into different [WayBack] ACME Client Implementations – Let’s Encrypt – Free SSL/TLS Certificates Automate the heck out of your job and new work finds you There is great integration for [WayBack] Bot Users | Slack which can hugely help you in status monitoring Here is some more info: Blurb: “[a] free utility to send & receive network packets. TCP, UDP, SSL.” [WayBack] Packet Sender – Free utility to for sending / receiving of network packets. TCP, UDP, SSL. [WayBack] The latest Tweets from Dan Nagle (@NagleCode). Principal SW Engineer @HARMAN_Pro. Speaker. Author,,, . Huntsville, AL, [WayBack] Packet Sender – Send / Receive TCP / UDP – Android Apps on Google Play [WayBack] dannagle (Dan Nagle) · GitHub dannagle has 23 repositories available. Follow their code on GitHub. –jeroen Tweets by NagleCode    
Read More

TMS RADical WEB, developing custom controls

In November 2016, I created a presentation for Embarcadero CodeRage about creating FNC custom controls. You can find this presentation including its source code here:
Unless you have been living under a rock the past 2 weeks, you have most certainly seen we have recently introduced the technology preview of TMS WEB Core and with that also the news that the TMS FNC framework is now also web-enabled. So, I thought it was a good moment to revisit this November 2016 CodeRage presentation and see how applicable it still is for creating custom TMS FNC UI controls, but this time for using this in the web!
The good news is that this took me less than 10 minutes to get the original custom TMS FNC UI control I created for VCL, FMX and LCL now also working for the web.

So, what did I have to do?

I started from the unit VCL.TMSFNCFancyTrackbar that contained the source code for the VCL variant of the FNC Fancy trackbar control. I renamed this file VCL.TMSFNCFancyTrackbar to WEBLib.TMSFNCFancyTrackBar.pas as WEBLIB is the prefix for the namespace for the web variant of the FNC controls. Further, for this small test, I manually renamed the unit references in the uses list in WEBLib.TMSFNCFancyTrackBar.pas.




I did not touch any other part of the code. Next, I copied the code to instantiate this custom control TTMSFNCFancyTrackBar from the test project to the TMS WEB Core test project:

  tb := TTMSFNCFancyTrackBar.Create(Self);
  tb.Parent := Self;
  tb.Width := 600;
  tb.Height := 200;

As I knew my app was going to need a PNG file for the trackbar background and the trackbar thumb, I copied the PNG files to the folder where the web application is deployed and from where its files are being served to the browser. 5 minutes later, the web application was running and resulted in:

So, a kind of half working trackbar. The tickmarks are displayed and the position value as well but my trackbar background and trackbar thumb were missing.
Then it dawned on me that the most likely reason of the issue was that my custom control didn’t have OnChange handlers for the TTMSFNCBitmap classes that were used as class properties to hold the trackbar background and thumb. When using the code in a native client application, the loading of the images from file is instant and thus, when the native app starts, the images are loaded and being used immediately to paint the control. So, I had never noticed this before.
In the web this is different. Under the hood, we have implemented TMSFNCBitmap.LoadFromFile() via asynchronous loading of the image file via an XMLHttpRequest() object. This means there is no instant synchronous loading and therefore it means that I need to signal the custom control to refresh itself when the images are loaded. This is achieved by assigning an event handler to the TTMSFNCBitmap.OnChange event and from there, Invalidate the control.

TTMSFNCFancyTrackBar = class(TTMSFNCCustomControl)
    procedure ImageChanged(Sender: TObject);

procedure TTMSFNCFancyTrackBar.ImageChanged(Sender: TObject);

constructor TTMSFNCFancyTrackBar.Create(AOwner: TComponent);
  FThumb := TTMSFNCBitmap.Create;
  FSlider := TTMSFNCBitmap.Create;
  FThumb.OnChange := ImageChanged;
  FSlider.OnChange := ImageChanged;

With this inplace, the TTMSFNCFancyTrackbar custom control looks 100% identical to the native versions created earlier for VCL, FMX and LCL applications:

and yes, also the interaction with keyboard and mouse work fine.

If you already embarked on creating custom FNC controls, this means there is excellent news. With little or no effort, you will be able to use these custom FNC UI controls also in your web applications created with TMS WEB Core!
The full source code of the web version of the TTMSFNCFancyTrackbar can be downloaded here but you can as well easily play with it directly from your browser in this demo app:

Well, this is just one approach for creating custom UI controls for TMS WEB Core. This approach offers you to create controls pretty much with the same UI control model as you could from Delphi 1. In another upcoming blog article, we’ll present an entirely different way for creating custom UI controls where the control will be fully built-up from HTML elements!

Get started today: Technical previews of TMS WEB Core, TMS FNC UI web-enabled controls, web-enabled TMS XData, the first parts under the TMS RADical WEB umbrella are exclusively available now for all active TMS-ALL-ACCESS customers.

Read More

Read More

DelphiMVCFramework 3.0.0-hydrogen is out!

  Yes! After 18 months of development, more than 10 contributors (with a special thanks to Ezequiel Juliano Müller) and more than 500 commits, DelphiMVCFramework 3.0.0-hydrogen is finally out! It is a big releases with a lot of changes, refactorings and new features. All the 2.x users are strongly encouraged to migrate to this version. The … Read moreRead More

Read More

Embarcadero Cool App for January: BeePOS

As more small and home businesses continue to enter the marketplace, point of sale (POS) technologies have become a critical part of modern economy. I’m excited to report that one of the real innovators in this market, BeePOS, is the winner of Embarcadero’s Cool App contest for January. The industry buzz around this company has been tremendous (obligatory bee reference, check!), and we’re fully anticipating their adoption numbers to grow dramatically over the coming months.

BeePOS — based on Delphi — is a fully integrated, intuitive POS software that can be used for restaurants, bars and the hospitality industry. It’s flexibility allows retailers to use the software for front-end or backend POS, in multiple or single stores and on Windows, iOS, Android and macOS platforms.



I’ve seen a number of line-of-business applications like POS systems choose Delphi, which is an ideal solution because of the rapid application development model, first class database support and easy application maintenance. BeePOS is a great example of this with its customizable reporting system and sophisticated configuration. Using DataSnap to broker the data from the backend database to the client application creates a flexible and lightweight system.

This video shows BeePOS in action:

[YoutubeButton url=’’]

 Interested in submitting for the Embarcadero’s Cool App contest? It’s open to any business or consumer application built with RAD Studio, Delphi or C++Builder. Embarcadero awards Cool App contest winners a $500 Amazon gift card and winning submissions are also highlighted on the company’s YouTube channel. For more information on the contest and a link to the submission form, click here.

Read More

Read More

TMS RADical WEB, connecting to data

As Delphi developers we are used to frameworks and components to take the chore out of using databases. Ever since Delphi 1, database handling was abstracted by the TDataSet & TDataSource. Wouldn’t it be nice (and mainly productive as this is what is important after all) if this exact abstraction model allowed us to create web applications consuming data? Exactly that goal is what we wanted to achieve with TMS WEB Core, only technically under the hood things are RADically different from the implementation of Delphi 1 like datasets and datasources. So, with TMS WEB Core, you have your DB-aware edit, label, combobox, datepicker etc… and these can be hooked up to a datasource and a datafield can be specified. The dataset though is in this case a wrapper component that will under the hood do its work getting data or updating data via the use of REST HTTP calls to microservices exposed on a data server. As our TMS XData product already provided exactly that: exposing your databases via REST HTTP calls, we extended it to have a web XData client component so you can from Delphi, create a web application against an XData client and hook up your DB-aware components to an XData dataset, pretty much the same way as you can for VCL or FMX native client applications.

For the sake of demo purposes, we have created a first sample app with a web client dataset. This web client dataset gets its data in JSON format from a server via a HTTP REST call. This allows to view and edit the data in the web client dataset but won’t do updates server side so that it isn’t possible to ‘fiddle’ with the data and break the sample this way.

Here you can see a form editing contact info with several DB-aware controls, including a DB-navigator.

When the dataset is connected to the server, the DB-aware controls display and can edit the data.

Connecting to an XData based server is one possible way to hook up to databases. You can implement your own interfaces to a database server via REST HTTP calls and over-time we plan to create and offer connectors to such server as Embarcadero RAD server, Google Cloud datastore and several others…

Get started today: Technical previews of TMS WEB Core, TMS FNC UI web-enabled controls, web-enabled TMS XData, the first parts under the TMS RADical WEB umbrella are exclusively available now for all active TMS-ALL-ACCESS customers.

Read More

Read More

TMS RADical WEB, proud to announce a revolutionary & innovative UI control set that is TMS FNC for web

Over two years ago, we did deep research at TMS to create a UI control abstraction layer that would allow to create UI controls that can be used to create VCL Windows applications, FMX cross platform applications for Windows, iOS, Android, macOS and al… … Read More

Read More

RAD Studio 10.2.2 Tokyo February 2018 Patch Re-Released

Last week, Embarcadero released a patch for Tokyo 10.2.2, focused on Android and RTL improvements. What happened is that Windows would not always ask for execution with admin account (on systems with active User Account Control) and could end up copying the replacement files in a wrong location. It did affect a few of the developers who tried it, so we pulled it, fixed the installer and now re-issued the patch. If you are a registered user of Tokyo (or have a license for it), you can find it at There is no change in the content on the patch, so if you already installed it successfully, there is no need to repeat the process. On the other hand, if your installation got broken, we have provided an alternative ZIP-based option (in the same download page). We have already sent it to developers who had got in trouble, but might not have reached everyone. As for the content, the main fix is the Android animations and tab animation issue. These have been addressed. There are still cases in code where the combination of called to Application.ProcessMessages and timers might get you in trouble. I'll blog more information ASAP, but the general recommendation is to use threads rather than timers for background processing -- an all platforms, although in Windows that coding style can be used.   Updated Notice: Only for 10.2.2 Build 2004  We had a notice in the download page, but better repeat it here. The patch is only for the second build of 10.2.2 we released, build 2004. If you have the previous build (which had compatibility problems with third party packages) don't install the patch. Either wait for a future update (if you don't specifically need the fixes the patch provides) or install build 2004 first. The link to 2004 installer is in the patch download page.
Read More

TMS RADical WEB, RAD web development from the Delphi IDE

It cannot be denied that RAD component-based application development is the very foundation of Delphi software development. It is the foundation that got us all so excited since Delphi 1 in 1995. It got us not only excited but most of all very productive.

Encapsulation of UI controls and other functionality in components with easy access to properties, method and events is what lets developers focus on business logic and their problem domain rather than underlying technical tricks used to render the UI or access operating system functionality.
It is in this respect that our team went to great lengths to offer this RAD experience in the Delphi IDE that does not really have a web target.
With TMS WEB Core, all that is offered. Via File, New, Other, select a new TMS Web application and a new project is created with a first form ready to start building your application.

While the developer cannot really see this, technically, this is a VCL form but our IDE integration ensures that for this web form, only TMS web controls can be picked from the tool palette. This is the tool palette with the set of UI controls & components that is currently already available.

You can build your UI together this way like you did the past 23 years for VCL applications or the past 7 years for FMX applications. When you compile the application, a HTML file and Javascript file is produced. By default, the TMS WEB Core IDE integration launches a small TMS Web server for debugging purposes allowing the developer to see the application running in the browser. As such, the so familiar development cycle of designing forms, setting properties, adding event handlers, writing code and press F9 and see within a fraction of time the result running and working or have the capability to debug the application, is achieved.

Compared to VCL or FMX application form designing, there is an optional but very fundamental difference between VCL/FMX application forms and web forms. While it is perfectly possible to have the WYSIWYG model, i.e. what you see in the Delphi IDE form designer is what you get when running the web application, TMS WEB Core facilitates alternative ways. The web page design and layout can be fully created with HTML/CSS. It can be easily created by people with different talents than us software developers, i.e. graphic designers. TMS WEB Core allows for easily hooking up our forms with UI controls to pages designed with HTML & CSS. More about this technique will be covered in a separate blog.

My colleague dr. Holger Flick, Embarcadero MVP, brings it all together here:

Get started today: Technical previews of TMS WEB Core, TMS FNC UI web-enabled controls, web-enabled TMS XData, the first parts under the TMS RADical WEB umbrella are exclusively available now for all active TMS-ALL-ACCESS customers.

Read More

Read More