Blog

All Blog Posts  |  Next Post  |  Previous Post

Writing components for TMS WEB Core

Bookmarks: 

Friday, July 2, 2021

TMS Software Delphi  Components
Unfortunately, at this time we do not yet have a seminal book like Danny Thorpe's book "Delphi Component Design" (https://www.amazon.com/Delphi-Component-Design-Danny-Thorpe/dp/0201461366) for component design for TMS WEB Core. It is definitely on our todolist to write a book on TMS WEB Core component design, but until this happened, there are already a couple of resources that we wanted to bundle here that can help you out.

Component types


There are actually different component types in TMS WEB Core and depending on your needs, you might select the best type that fits.

- Components build from HTML elements 

In this component type, the component is rendered from HTML elements, like DIV, BUTTON, INPUT, IMG, SELECT, ... To render the component, we basically create such HTML elements in the DOM and attach via Object Pascal code technically JavaScript event handlers to the elements and manipulate the HTML element attributes, content & style properties. 
A good starting point to develop this type of components is the blog article https://www.tmssoftware.com/site/blog.asp?post=449 
As most components included in the TMS WEB Core framework are of this type, the source code of the framework is of course also a great resource to learn from.


Components similar to VCL controls that are based on painting on a canvas

A VCL custom control is basically a class that will paint itself and that will react to user interface inputs like mouse, keyboard, touch... The painting in a VCL control is done via drawing on the TCanvas. Well, the good news is that this component model also exists in TMS WEB Core. It can provide an easy way to port existing VCL UI's to the web. We in fact did this with Tetris game original VCL Delphi code we found for this. You can find all the information in this blog article https://www.tmssoftware.com/site/blog.asp?post=446. Delphi developers should be quickly familiar developing this kind of custom control by descending from the TGraphicControl class and write overrides for OnMouseDown/OnMouseMove/OnMouseUp or OnKeyDown/OnKeyPress/OnKeyUp and also override the Paint method. The TCanvas class in TMS WEB Core has the same interface as TCanvas in VCL, so you will be quickly familiar using a Brush/Pen and methods like LineTo(), Rectangle(), Draw(), ...

- FNC Components
Use the FNC component architecture and develop the component as FNC component that will also work in a web application.
This is another approach and comes with the additional benefit that your custom control will not only work in a TMS WEB Core web client application but also in a VCL Windows application or a Firemonkey cross platform application. And it will also work in the free Lazarus IDE with the LCL framework. Component development for FNC is quite similar to VCL or FMX component development. One basically also overrides methods for UI inputs such as keyboard, mouse and touch and performs the drawing of the control. A difference for the drawing is that this is done via the TTMSFNCGraphics context (and not the TCanvas like in VCL). The TTMSFNCGraphics is an abstraction layer that works in all supported frameworks with the same code. A good starting point for beginning to develop FNC custom controls is this blog article https://www.tmssoftware.com/site/blog.asp?post=346

Other resources

Of course, TMS WEB Core full versions ships with the full framework source code, so it is a great learning resource for writing components. In addition to this, we have published several open-source components you can directly download and not only use and learn from. You can find these components at https://www.tmssoftware.com/site/webpartners.asp
And of course, last but not least, there is always the TMS team that is available to answer your question when you get started to develop components!

Get started


So, even though there is not yet a book, there is already various information to get you started! We look forward to learn about your component development experiences and if you have interesting components you wish to share with fellow Delphi developers, you can always submit these. Authors with published components under https://www.tmssoftware.com/site/webpartners.asp become recognized partners and get a free TMS WEB Core license that can be used in Delphi, Lazarus or Visual Studio Code.


Bruno Fierens


Bookmarks: 

This blog post has not received any comments yet.



Add a new comment

You will receive a confirmation mail with a link to validate your comment, please use a valid email address.
All fields are required.



All Blog Posts  |  Next Post  |  Previous Post