TMS RADical WEB, custom controls using HTML elements


Wednesday, March 14, 2018

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.

Bruno Fierens


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

TMS RADical WEB, time for some fun


Monday, March 12, 2018

Last week, our team was brainstorming and as usual, lots of interesting and cool ideas come up. Based on these ideas, we have some more exciting technology being worked on now and coming up soon and you’ll learn about it here shortly. But, from time to time, there are also fun ideas that come up during our brainstorm sessions. One such idea was to check if it wouldn’t be possible to port an existing Pascal game to TMS WEB Core and this way, make the game available via our website for playing it directly online. We thought this was not only a good idea but also a perfect validation to see how well our TMS WEB Core performed in enabling Delphi developers to move existing code over to the web. So, our software architect Pieter Scheldeman, also the architect of the cross-framework, cross-platform FNC framework, searched for some open-source Pascal games. One of the games Pieter found was the Tetris game in the Bianco Games collection from Marco Bianchini:

After checking out the source code of the Tetris game a bit, we were amazed that after less than 30 minutes of work by Pieter, the game was already running in the browser!

You can play with the game for yourself here:

The game does all its painting via the Delphi TCanvas in a custom control. As TMS WEB Core introduces a TCustomControl class with access to a TCanvas object with the same interface as the Delphi TCanvas, the control in which the Tetris blocks fall was working quickly with almost no code changes in the web. It shows the strength of the Pascal to Javascript compiler combined with the component framework we have designed for it.

Have fun playing the Tetris game without needing to install it on your machine. We’re curious and eager to learn if you have more cool challenges to validate our TMS WEB Core technology against.

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.

Bruno Fierens


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

TMS RADical WEB, technology preview update


Thursday, March 08, 2018

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.

Bruno Fierens


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

Previous  |  Next  |  Index