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

Announcing TMS RADical WEB

The world of web development has evolved at a fascinating pace over the past 15 years. I still remember having developed around 2001 a CGI-bin based WAP pages server application, a solution that is these days not only completely irrelevant (anyone still knows what WAP and CGI-bin is?) but technically fully outdated.

While the strength of Delphi (and thus the Pascal language) was originally in Windows desktop applications and from 2011 in cross platform native desktop and mobile applications, developing web applications was always a kind of side-affair for Delphi developers. Many Delphi developers as such also looked over the fence at other solutions to create web applications.

Over the past couple of years several welcome trends have developed: the HTML5 standard became widely accepted and available in modern browsers, the Javascript Ecma 5 standard made it a stronger language with object-oriented capabilities, CSS3 offers a styling & layout features so rich that most developers know not even half of its power.

Wouldn’t it be a dream come true that Delphi/Pascal developers could also reach out to this platform? At TMS software we always felt this lacking over the past years.

A little less than a year ago, we were approached by the bright minds who were for a longer time already working on a Pascal to Javascript compiler and asked if we didn’t think it would be interesting to bring the power of this new compiler in the hands of Delphi developers with a framework & IDE integration to take advantage of it. This was the kind of moment where my enthusiasm must have been at about the same level when I dropped the first components on the Delphi 1 form designer in 1995 or when I got my first FireMonkey application started on my iPhone 4 thanks to the cross-platform capabilities in Delphi XE2. Now, in 2018, we’re pleased to announce a kind of similar wow experience will become available that allows you to build an application in a component based RAD way in the Delphi IDE, press F9 and see the app working in your browser.

TMS RADical WEB is the umbrella name under which several web enabled products will be created and offered by TMS software and it is built upon a couple of fundamental pillars:

  • Backed by a solid & proven Delphi/Pascal to Javascript compiler that was years in development
  • Modern SPA web application model. The application consists of HTML & Javascript files that can be easily deployed on any existing light or heavyweight webservers or cloud services like AWS,
  • Component based RAD development integrated in the Delphi IDE
  • Standard component framework for common UI controls and access to browser features
  • A truly revolutionary & innovative TMS FNC component framework that is now also web enabled, allowing to create UI controls that can be used on VCL, FMX, LCL and WEB!
  • Open to consume other existing Javascript frameworks & libraries, open to use HTML/CSS for design
  • Binding to server data via microservices with seamless interfacing to server data via TMS XData
  • Binding to cloud services

The first building block under the TMS RADical WEB umbrella is TMS WEB Core. TMS WEB Core offers the full RAD integration in the Delphi IDE of standard components, compiler & form designer. The next block is TMS FNC UI controls that are web-enabled. Third is TMS XData extended with a web XData client. As a first step to bring TMS RADical WEB to you, will be the delivery of a technical preview of TMS WEB Core, TMS FNC UI Controls for web and TMS XData with web client to our TMS ALL-ACCESS customers. Our TMS ALL-ACCESS customers sit as such in a first-class seat to experience this exciting new route to web development and influence the further fine-tuning with feedback, requests, comments. After this initial period, TMS WEB Core will then also become widely available to all customers.

Over the coming days, I’ll give a deeper insight in each of these pillars of TMS RADical web. Watch this blog space! Every day we will have a new blog about our new web development products.
Coming blog articles are:

  • RAD web development from the Delphi IDE
  • Proud to announce a revolutionary & innovative UI control set that is TMS FNC
  • Connecting to data
  • Open to other Javascript frameworks
  • Using HTML & CSS for design & layout of your application pages
  • Using common web functionality & consuming cloud services
  • Debugging your code
  • History, team behind TMS RADical WEB and future

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

LIVE! 13-Feb-2018 Delphi Web Frameworks

Join Craig, David, and Jim as they discuss Delphi Web Frameworks LIVE! 13-Feb-2018 at 12 AM CST [other timezones] Planning to discuss some of the following . . . Ext JS by Sencha UniGUI by FMSoft (uses Ext JS) Kitto (uses Ext JS) MARS-Curiosity by Andrea Magni Smart Mobile Studio by Optimale Systemer AS WebHub by Href Tools Corp Elevate Web Builder by Elevate Software RAD Server by Embarcadero – Single Site license included with Enterprise edition Web Broker by Embarcadero DataSnap by Embarcadero IntraWeb & IntraWeb Bootstrap by AtoZed Software and ships with Delphi / C++Builder Delphi MVC Framework by Daniele Teti mORMot Framework by Synopse More . . .  
Read More

Modernize Your Apps

Modernization continues to be one of the most important topics for many of our customers. Delphi has been around for some time and there are plenty of great “legacy” apps going back all the way to Delphi 7. While it is a testament to the quality of our development frameworks, at some points ten-year-old apps are, well simply too old… Our community of developers are moving to the latest versions so that they can deliver modern, compelling products to their customers. Internally, we have been taking this same journey with the RAD Studio product itself, and while it is not always easy, it is worth the effort. I think that we are finally making a lot of progress, which emboldens me to share some lessons learned that may help you plan your own journey.   Update the UI I think that the most difficult part of any Modernization project is the compelling argument for a UI update. There is one school of thought that says that if it works, who cares that an icon looks old. It is also difficult for developers to be very passionate about it, as they also frequently do not care about look and feel. Yet, an updated look and feel is HUGE. We have made many gradual updates to RAD Studio over the last two years and have a few more in store. When we do surveys, rarely does the look and feel get prioritized. Enterprise software customers rarely admit to buying a software solution because “it looks pretty”.  But once UI improvements are made, the impact tends to be surprisingly high. Especially for Delphi apps that come with an inherent  “legacy” bias. It is a fight worth fighting and fortunately some of the updated VCL and FMX tooling make implementations easier. Take your time and do it right. It is totally worth getting professional designer help (again something that many developers do not do). Be sure not to overlook the impact of nice high quality icons. Here are some examples of the icons that we used for 10.2.2. There are so many choices out there that are very inexpensive. I love for example.     Do Mobile One of the great advantages of Delphi today is FMX. As smartphone adoption increases (~70% by 2018), FMX will grow in relevance.  If you know VCL, development with FMX is relatively natural. There are of course some styling and behavior specificities, and frankly we need to improve the RAD Studio workflow more, but the productivity is amazing. Most other approaches require a separate team and investment. Historically Mobile Apps were Outsourced as a package, but this is changing. FMX allows a Delphi team to build the Mobile App. You do not need to recreate the old app with FMX, but building meaningful mobile extensions is a must. You will gain immense respect and the Delphi tech will be perceived rightfully as Modern. And you get to build your team. There is a lot of training help to get you started. I personally like Delphi Styles that can deliver some very slick custom looks (below are a couple of great FMX style templates from     Make It “Multi-Tier” Architecture is not simple. Unfortunately, even great developers may not have knowledge in other areas, simply because of the vast range of areas in software development. Sometimes this means making architectural changes such as moving from a desktop app to a multi-tier can be a learning experience for even the most experienced. It's always great to learn, or to get outside support to assist. We aim to make architectural transitions easy, such as how RAD Server comes with excellent Multi-Tier architecture support features. It is not a daunting task to rethink an old app into a Multi-Tier one, although there are no guarantees (depends how it was built). I have spoken with many developers that at first were very scared, but once they got deeper, found that the effort is far less than expected. For sure, it is hugely less expensive than re-platforming with a completing different language such as Java. Again, one simple approach is to start small and modularize as much as possible. Also, do not rush to lose the VCL client. The speed it can deliver, especially in sensitive environments where seconds matter, cannot be replicated. I am aware of at least several multi-million dollar Java rebuild efforts that aimed to replace a VCL app and users simply did not adopt it… incredible waste.   “Webify” Not a word, but you get the meaning. There are many approaches to do this with Delphi today. Ideally, you can create a tiered app and build an independent Web Client. Of course, we recommend Ext JS, since it is part of the family now, but there are plenty other good client Web technologies. Another approach that may be faster is to use a tool like UniGui, which takes a VCL-like approach and leverages Ext JS to build a Web Client. That does not work for everything but is very fast and productive. You certainly can create a module of your app quickly and demonstrate that Delphi works well and fast with Web. Today many Web interfaces to Delphi apps are built with .NET because of the inherit Windows connection. That of course works, but based on our latest experience and the new JS technologies, the speed and flexibility you can get with JS are great.   Integrate RAD Studio has some of the best Integration frameworks and components. One of the most challenging aspects of other technologies is typically integration, and we do it super well and fast. Our recent Product survey indicates that a huge percentage of our customers have adopted FireDAC, which is fantastic. Figure out new ways for your modern app to be more integrated. How about displaying inventory from an ERP or feeding into it? Our Enterprise Connectors are based on the FireDAC framework and work really well. We even use them internally to create an ExtJS portal to our SFDC instance (illustration below). It is a “wow!” development experience.     Innovate Delphi, through RAD Studio, supports many new capabilities including Push Notifications, Beacons, and the Woll 2 Woll mobile editor ( It is surprising to me how little customers use new Windows 10 features, One of my favorite underutilized technology is Beacons. These are now included for FREE in RAD Studio Enterprise edition. The mobile editor can accelerate the mobile apps developed with this tech dramatically. Given how many internal Delphi apps deal with location data capture, this should be such an easy and nice feature to include. And the best thing about Delphi is that innovating does not need to cost hundreds of thousands of dollars…     Overcome the Legacy Argument This one is not as relevant for our efforts with RAD Studio, but it is a hurdle that each client has to overcome. The perception that Delphi is legacy is still there, despite recent strides to overcome it. Lately, I’ve taken a slightly different approach, which I’ve found very successful. Instead of diving deep into defending Delphi’s many merits, I just state a few facts and brush it aside. It works! Delphi today is one of the larger commercial ecosystems - plenty of open source ones have lost momentum as economics have deteriorated and support dwindled. Not to mention the fact that Delphi is the fastest, easiest to use and most functional development tool (a little subjective, but true).  Our VCL framework for Windows development continues to provide the most native support for MS Windows, and nothing beats it. FMX provides better native cross-platform support than Xamarin and its popularity, especially for Android development is growing rapidly. I think that for any company that wants to manage technology risk, Delphi and VCL are far safer choices than even the trendiest of technologies and frameworks out there. Just ask someone who has gone through the several iterations of Angular or spent a boat-load on a Java migration. The combination of a highly productive language that is reusable and can work with flexible front and back-ends make Delphi a strong technology contender. Well, this got a bit longer than intended, but there is one point about Modernization that is perhaps the most difficult to overcome. It again has to do with perception rather than the technology.  Customers continue to make the argument about the lack of availability of trained Delphi resources. Unfortunately, it is still true that there are fewer skilled Delphi developers compared to other popular technologies. Outsourcers are especially negative to these tools, as the productivity tends to go directly against their business model. Why sell you 5 Delphi developers when I can sell you 50 Java ones. But that is also the winning argument, you do not need that many Delphi developers – it is THAT good. And if you need to brush up on your skills or train a new team, we continue to develop Embarcadero Academy with more content and course options. In our experience a senior developer can pick-up Delphi super fast. Lets blow away technology sceptics with amazingly modern-looking apps!
Read More

Extended = Double in Lazarus Win64

Note to self: In Lazarus Win64 there is no floating point type Extended, it’s mapped to Double. So, overloading something like: function TryStr2Float(const _s: string; out _flt: Extended; _DecSeparator: Char = '.'): Boolean; overload; function TryStr2Float(const _s: string; out _flt: Double; _DecSeparator: Char = '.'): Boolean; overload; function TryStr2Float(const _s: string; out _flt: Single; _DecSeparator: Char = '.'): Boolean; overload; will not compile. Workaround: Add an {$IFNDEF Win64} around it: {$IFNDEF Win64} function TryStr2Float(const _s: string; out _flt: Extended; _DecSeparator: Char = '.'): Boolean; overload; {$ENDIF} function TryStr2Float(const _s: string; out _flt: Double; _DecSeparator: Char = '.'): Boolean; overload; function TryStr2Float(const _s: string; out _flt: Single; _DecSeparator: Char = '.'): Boolean; overload; This probably also applies to Delphi when compiling for others than the Win32 target, e.g. Win64, Android, IOS etc.
Read More