Visiting the TMS lab day 7: TMS WEB Core testing and exploring

With the ever growing number of TMS WEB Core UI controls we have and the ever growing complexity, testing web UI controls becomes a non-trivial task. Our team clearly has a need to allow an efficient way testing not only by the developer of the UI controls but also by other users. One of the chores for testing a UI control with numerous settings that affect the appearance and the behavior, is that typically an application needs to be developed that will surface all the combinations of settings. And then we are not yet talking about interactions between multiple UI controls. So, we found ourselves both writing a lot of test application code and also going a lot through the cycle of configuring a UI control, compile, run, test and repeat with other configurations.

Out of this laborious experience, the idea for creating a test environment was born. We wanted to have a runtime test environment for the TMS WEB Core components. Wanting the ability to test with every possible property setting of the control and realizing we had in our TMS FNC UI Pack component library an object inspector control, developing this test environment turned out to be faster than we imagined.

After using our test environment for a while now, we realized that this would probably also be interesting for users new to the TMS WEB Core framework. It allows to play with the TMS WEB Core UI Controls directly from the web without the need to install anything. It allows to learn all features and capabilities and discover the rich set of controls meanwhile available that can help you build your web applications. So, we thought of a name for this environment and came up with “Component Explorer”.

During these 2 weeks of visits to the TMS lab, we wanted to show you the experimental version of our Component Explorer. You can use it to explore our TMS WEB Core UI controls, play with it without installing it, experiment and test. And oh, of course we would appreciate if you’d let us know if you find an issue so our team can look into it.

Head to now and discover.

Some notes for your information:

  1. A nice technical detail about the Component Explorer is that it is not a monolithic single-page web application. This means that the Component Explorer consisting of the Object Inspector, designer and component palette dynamically loads the UI control libraries. So, when we develop new UI controls or update the UI controls, this can be done by deploying compiled UI control library JavaScript files to a “component” folder.
  2. Another nice tidbit, is that the Component Explorer is mainly made up of FNC UI controls. The Object Inspector, the design surface, the tool palette, … were all developed with TMS FNC UI Controls. Given that FNC controls can be used for VCL, FMX, LCL and WEB, this means that theoretically, we could also create a desktop Component Explorer versions. In that case it would be limited to exploring FNC controls of course as the native TMS WEB Core UI controls of course cannot be used from VCL, FMX or LCL applications
  3. There is an edit mode and runtime mode. Normally on the design surface, the mouse interacts with the UI controls to move & resize the controls. When unchecking the “Edit Mode” checkbox, we can interact with the UI controls directly with the mouse.
  4. There are still several shortcomings in the Component Explorer. One of these shortcomings is that it is not yet possible to insert controls as child of other controls. All inserted controls are child of the form. So far, for our testing purposes, we could live with this limitation but as our testing becomes more complex (for example testing a ribbon control), this is something high on the priority list.
  5. Although there is already a TStringList property editor, TCollection property editor, there is no mechanism yet for custom property editors. Class properties can be edited by expanding the class and that is in most of our testing scenarios more than sufficient.
  6. In working on integrating testability of our TMS XData backend framework, we discovered a nice side effect that we could create on-the-fly not only a component exploring environment but also a data exploring environment. An example for exploring this, is by dropping a TXDataWebDataSet, TXDataWebConnection, TWebDataSource and TWebDBGrid on the form. Hook the grid to the datasource, the datasource to the dataset and the dataset to the connection. You can use your own XData endpoint or you can use our test endpoint Then set the TXDataWebConnection.Active to true and set TXDataWebDataSet.DesignLoad to true. You can see now the XData data in the TWebDBGrid.

  7. We did use Bootstrap in the Component Explorer, so you can also play with Bootstrap styles. Use the TMS WEB Core UI controls ElementClassName property to assign a fitting Bootstrap class and it should update live. For example, drop a TWebButton on the form and set WebButton.ElementClassName = ‘btn btn-primary’ and you should get a nice looking blue Bootstrap button.

Lab visit feedback & win!

Our team loves to hear what you think about what is brewing in the lab, how you plan to use the upcoming features, what priority our team should give to it and if you have possibly interesting and/or creative ideas to make this even more powerful for Delphi developers. To reward your interaction & feedback, we’ll pick 3 blog comments on October 15 that we liked the most and first prize is a free TMS WEB Core license, the 2nd and 3rd prize is a 50% discount coupon on TMS WEB Core. Let yourself hear to increase your chances!

Get started

Meanwhile, you can go ahead and explore the new & exciting territories of web client development that become available for Delphi developers with TMS WEB Core! You can download the trial version that is generally available, go ahead with the standalone version you purchased or with TMS WEB Core and additional tools that are all included in TMS ALL-ACCESS. Or you can come to see TMS WEB Core and discover and discuss it face to face with Bruno Fierens of showing it in London on October 23, 2018. Note also that in October, you can still take advantage of purchasing TMS WEB Core at launch price from 295EUR for a single developer license. From Nov 1, regular pricing will be active on TMS WEB Core (395EUR for a single developer license).

Read More

Read More

Visiting the TMS lab day 6: TMS WEB Core Progressive Web Apps

Another day, another visit this week in the TMS lab and today we’re going to have a look at what progressive web application development can bring for us, Delphi developers and how we prepare TMS WEB Core in the lab to be ready to take advantage of this technology.

First of all, what exactly is a “progressive web application”?

Easiest is to borrow the information from Wikipedia on progressive web applications:

Progressive Web Apps (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications. PWAs are an emerging technology that combine the open standards of the web offered by modern browsers to provide benefits of a rich mobile experience.

What does it mean in relationship to TMS WEB Core?

This means a couple of things for the application:

  • Adapts automatically to the device screen, i.e. looks good on mobile and desktop. Also called responsive design
  • Is aware of online versus offline state, i.e. continues to work in offline state
  • Can be installed on a mobile device, Chrome OS machines and most likely in the future also on desktop machines without going to a censored application store
  • Will look like a native application, i.e. will use the full screen on the mobile device, no navigation bar etc..
  • Has access to device hardware
  • Will need to be initially accessed via HTTPS

As such, we are working in the lab to make it as easy as possible to create PWAs directly from TMS WEB Core with minimal effort. As a proof of concept, we created with TMS WEB Core and some manual help (that will become automated in the future) a full 100% compliant progressive web application.

First a word about compliance testing. A great tool for web application developer is Google Lighthouse. With Lighthouse, you can directly submit your web application to several tests related to performance, accessibility, best practices, SEO and compatibility with progressive web app requirements.
This proof of concept is a simple calculator. It is built using:

  • The TTMSFNCWidgetLCDLabel as display that is top aligned
  • The TWebGridPanel as automatic sizing grid that is client aligned
  • The TWebGridPanel is configured with 4 25% width columns and 5 20% height rows
  • The TWebButton controls on the TWebGridPanel are client aligned on the panel

Responsive design
This layout already takes care of properly adapting to mobile, tablet and desktop screens, so makes it responsive if you want to call it this way

Service worker
Next we need to make this application work offline. This is achieved through a service worker. A service worker is JavaScript code that instructs the browser how to deal with fetching the parts that make up the application. So, we manually created the serviceworker.js file that gets registered from the main HTML file. This service worker contains the code to instruct the browser to install all involved files in the cache.

Manifest file
To make the application installable on a mobile device, there needs to be a manifest.json file that holds details about the application, including the application icon that will appear on the mobile device to start the application from. So, we’ve created such manifest.json file here as well as icon files (PNG format) in several sizes with our company logo as application icon.

With all this in-place, it is time to start verifying we effectively have a progressive web application. With Google Lighthouse installed in the Chrome browser, this is as easy as navigating to our web application and starting Lighthouse to let it generate a report.
So, in this case, we have deployed the prototype application to:

and when we let Lighthouse generate its report, we get the result:

All in all, a pretty impressive result overall (certainly when you compare to many mainstream websites) and 100% satisfying the progressive web application requirement. While the performance is mostly server related here, this is not something directly under control of the TMS WEB Core application, but our team is committed to make TMS WEB Core applications shine even more in the other areas.

Now that we have the confidence that we really have a progressive web application, we can do the next step and try it out on a mobile device, in this case an iPhone. While Android had support for PWAs for some time already, since iOS 11.3, Apple also added support too.

So, when we navigate to the application URL, we can now choose to add it to the desktop:

From the manifest, iOS found out the application name & icon and suggests to add it this way to the desktop:

And now comes the really nice thing, let’s switch the iPhone to airplane mode (notice the airplane mode indicator in the top left corner of the screen), we can still start our TMS WEB Core application and use it:


Progressive web applications will play in many ways a very important role and will be a crucial technology to make web applications behave nicely when switching between online / offline situations, switching between desktop and mobile devices and as such offer a better user experience. Moreover, it offers a mechanism to deploy applications to end-users without passing via the Apple, Google or Microsoft gateways and paywalls. We’re researching and implementing the needed support in the TMS WEB Core framework to make developing such progressive web applications as easy as it can be.


A big thank you goes to Danny Wind , a long time Delphi guru, trainer, Embarcadero MVP, … who brought up the initial ideas and experimental work to create progressive web applications from TMS WEB Core apps!

Lab visit feedback & win!

Our team loves to hear what you think about what is brewing in the lab, how you plan to use the upcoming features, what priority our team should give to it and if you have possibly interesting and/or creative ideas to make this even more powerful for Delphi developers. To reward your interaction & feedback, we’ll pick 3 blog comments on October 15 that we liked the most and first prize is a free TMS WEB Core license, the 2nd and 3rd prize is a 50% discount coupon on TMS WEB Core. Let yourself hear to increase your chances!

Get started

Meanwhile, you can go ahead and explore the new & exciting territories of web client development that become available for Delphi developers with TMS WEB Core! You can download the trial version that is generally available, go ahead with the standalone version you purchased or with TMS WEB Core and additional tools that are all included in TMS ALL-ACCESS. Or you can come to see TMS WEB Core and discover and discuss it face to face with Bruno Fierens of showing it in London on October 23, 2018. Note also that in October, you can still take advantage of purchasing TMS WEB Core at launch price from 295EUR for a single developer license. From Nov 1, regular pricing will be active on TMS WEB Core (395EUR for a single developer license).

Read More

Read More

Calling Application.ProcessMessages in a Delphi program

Using Application.ProcessMessages is being frowned upon by many because often it means that your program design is flawed. These people usually suggest you should use multi-threading instead, which then opens another can of worms. First of all, let me make clear, that I am talking about Windows programs written in Delphi using the Visual Component Library (VCL). This is not about Android or IOS development and also not about the Firemonkey (FMX) framework and most certainly not about any dotNET language. With that out of the way, let’s discuss what Application.ProcessMessages does and why it is being used: Application is the global object declared by the VCL in the Forms unit which provides methods that are independent of forms. One of them is ProcessMessages. What it does is looking into the Windows message queue and processing any messages it may find there. Since Windows GUIs are message driven, this is important for a program to react to user input as well as other events, e.g. redrawing controls that have changed. Normally this processing of messages is done automatically in the program’s main message loop that is executed all the time when it is idle. But if your program does some long running work after e.g. the user pressed a button, it might take a while until it gets back to executing the message loop and to the user it will seem to have crashed or hung. To alleviate this, for many years Delphi programmers have added the occasional call to Application.ProcessMessages in their code. This usually looks like this: proccedure TMyForm.b_Exectue(Sender: TObject); var i: integer; begin for i := 0 to GetCount - 1 do begin DoSomeWork(i); Application.ProcessMessages; end; end; Where DoSomeWork does part of the total work and returns. And then the program calls Application.ProcessMessages to update the user interface. Why is this bad? Processing Windows messages may have some undesired side effects. E.g.: Your form might have multiple buttons which do different things. ButtonA might start a long running calculation A while ButtonB might start a different calculation B. And it’s most likely that you don’t want to start calculation B while calculation A is still running. Your calculation might access the user interface to retrieve some configuration. If you do that frequently and in between call Application.ProcessMessages, these settings may have changed, so you might start with one set of configurations and continue with a different one. The result will most likely not be what you expect. The user might close the form while the calculation is still running. That could result in resources that the calculation needs being freed, which usually causes errors like Access Violations. Each call to Application.ProcessMessages takes time which might slow down your calculations significantly. So, should we not call Application.ProcessMessages? And how do we keep the GUI active? As mentioned above, the answer you usually get is to use multi-threading. That is: Move the work into a secondary (or even many secondary) worker thread and let the main thread take care of the user interface. If done properly this works very well. But can you do it properly? Well, I for one have written my share of multi-threaded programs and I can tell you: It’s difficult to do it properly. And most of the time it isn’t necessary. One of the main stumble blocks is debugging. The Delphi debugger is not particularly suited for debugging multi-threaded programs. It shows you a list of threads and the code which is being executed by the currently active thread (on a multi core system, there is more than one currently active thread, I have no idea how the debugger selects the one to display). You can switch to a different thread and look at the code it is executing. Even worse: The debugger will switch between the threads automatically for no apparent reason, so you press F8 to step over one command and find yourself in the code of a different thread all of a sudden. Other than the debugger, there are of course other debugging methods, e.g. writing to a log or showing message boxes. The latter can only be done safely in the main thread because the VCL is not thread safe. Writing a log will pose the challenge of accessing that log in a thread safe manner. All that does not mean, you should not use multi-threading if you need it. It just means that you should consider the implications this will have on the complexity of your code and debugging it. This blog post is not about multi-threading in particular but about Application.ProcessMessages, so I will not go down that route any further. So, what can we do with a single threaded program to alleviate the above mentioned pitfalls of Application.ProcessMessages? First of all: Once you start processing some data, stop the user from interfering. Disable the controls in the user interface, including the button that just started the processing. This also gives the user feedback that the program is busy right now. He cannot start anything else and also not change the settings being used by the calculations. Don’t forget to enabled the controls afterwards (e.g. use Try…Finally to ensure them to be re-enabled.) Prevent the current form from being closed. This can be done with an OnCloseQuery event. Call Application.ProcessMessages as often as necessary, but not too often. In addition you should provide a visual feedback of the progress and have an Abort button that allows the user to – well – abort the calculations. Basically you do something like this: procedure TMyForm.SetIsRunning(_Value: boolean); begin // set a flag that can be checked elsewhere FIsRunning := _Value; // en-/disable the button that started this b_Execute.Enabled := not _Value; // en-/disable any configuration controls fe_InputFile.Enabled := not _Value; fe_OutputFile.Enabled := not _Value; chk_SomeSetting.Enabled := not _Value; // en-/disable the Abort button, note the missing "not" here! b_Abort.Enabled := _Value; // ensure that the Abort button has the correct caption b_Abort.Caption := _('Abort ...'); // reset a flag that tells you to abort FAborting := False; end; procedure TMyForm.FormCloseQuery(Sender: TObject; var CanClose: Boolean); begin Result := not FIsRunning; // you might want to add a message box here to ask the user if he // wants to abort end; procedure TMyForm.b_AbortClick(Sender: TObject); begin // you might want to add a message box here to ask the user if he // really wants to abort // set the flag that the user wants to abort processing FAborting := True; // give him feedback that we are doing what he requested b_Abort.Caption := _('Aborting ...'); end; procedure TMyForm.b_ExecuteClick(Sender: TObject); var LastAPMCall: Int64; ThisAPMCall: Int64; i: integer; begin SetIsRunning(True); try LastAPMCall := GetTickCount; for i := 0 to GetCount - 1 do begin DoSomeWork(i); // now, instead of calling Application.ProcessMessages every time // we check that the last call was more than 100 ms ago ThisAPMCall := GetTickCount; if (ThisAPMCall - LastAPMCall > 100) or (ThisAPMCall < LastAPMCall) then begin // GetTickCount is a 32 bit value that wraps around about // every two weeks. That's what the second check is for. Application.ProcessMessages; LastAPMCall := ThisAPMCall; if FAborting then begin // The user has pressed the Abort button, so we do what he wants SysUtils.Abort; end; end; end; finally SetIsRunning(False); end; end; That’s the basic principle which many of our internal tools use. It avoids the complexity of multi-threading while still keeping the UI responsive and allow the user to abort processing. I’m not claiming that it is perfect but it works, is simple to understand and also simple to debug. Drawbacks are the following: If the processing is more complex and should be moved to a procedure in a different unit, it’s easy to forget the Application.ProcessMessages calls. Also if you have these calls in your code, you should not call it in a secondary thread. Bad things will happen, if you do. If you call Application.ProcessMessaging in multiple places, it might not be as easy as in the example to keep track of how long ago the last call was. One possible solution is to have a global TTimedProcessMessages object that does the time keeping for you. Checking the Abort button is also a problem once your code is no longer in the form’s object. Again, a TTimedProcessMessages object can solve that. You cannot use that code in Firemonkey programs and, most unfortunately, you cannot use it for cross platform programs (which would require Firemonkey anyway.) Nowadys most computers have multiple cores. This is a single threaded program, so it will only use the processing power of one core. Depending on the amount of processing that needs to be done and whether it can be split into independent work packages, a multi-threading solution would be much more efficient. Oh, you might ask, where this TTimedProcessMessages object I am talking about can be found. Here you go: type PBoolean = ^Boolean; TTimedProcessMessages = class private FDummyBool: Boolean; FAbortedFlag: PBoolean; FLastCall: Int64; FMinTicks: Int64; public constructor Create(_MinTicks: integer; _AbortedFlag: PBoolean = nil); function Execute(var _WasAborted: boolean): boolean; overload; function Execute: boolean; overload; end; constructor TTimedProcessMessages.Create(_MinTicks: integer; _AbortedFlag: PBoolean = nil); begin inherited Create; FMinTicks := _MinTicks; if Assigned(_AbortedFlag) then FAbortedFlag := _AbortedFlag else FAbortedFlag := @FDummyBool; end; function TTimedProcessMessages.Execute(var _WasAborted: boolean): boolean; var ThisCall: Int64; begin ThisCall := GetTickCount; Result := (ThisCall - FLastCall > FMinTicks) or (ThisCall < FLastCall); if Result then begin Application.ProcessMessages; _WasAborted := FAbortedFlag; end else _WasAborted := False; end; function TTimedProcessMessages.Execute: boolean; var DummyBool: Boolean; begin Result := Execute(DummyBool); end; You either create a global variable (no, of course that’s bad) a singleton of this class gblTimedProcessMessages := TTimedProcessMessages.Create(100, @FAborting); or create an instance and pass it around to all methods that need it. These methods then use it like this: if gblTimedProcessMessages.Execute(WasAborted) and WasAborted then SysUtils.Abort; (Note: All the code above has just been typed in as I went along, so it might contain bugs. I haven’t even tried to compile it.) There you go. Good thing I have disabled comments on this blog anyway, so there will be no way for people to call me unprofessional because I recommend using Application.ProcessMessages. 😉 But if you really want to call me names, here is the corresponding Google+ post.
Read More

Quick Algorithm: Get Ideal Size (Square like) For a Board Game Having an Arbitrary (but Even) Number of Fields

Say you are developing a game like Chess, Go, Checkers, Tic-Tac-Toe or Memory. In each of those games the game board is a rectangle looking playfield of different size (rows x columns). Tic-Tac-Toe is 3×3, Checkers is 8×8, while Go can be 19×19 or 13×13 and similar. In a game with an arbitrary number of […] … Read More

Read More

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

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:

  • VCL
  • WEB
  • FMX
  • LCL

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!

Read More

Read More

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

Read More

Read More

chrisrolliston/CCR.PrefsIniFile: TCustomIniFile decendants for Delphi wrapping the Android, iOS and OS X Preferences APIs

If you need cross platform settings storage: [WayBack] chrisrolliston/CCR.PrefsIniFile: TCustomIniFile decendants for Delphi wrapping the Android, iOS and OS X Preferences APIs Via: [WayBack] In my application I use System.Win.Registry unit file to read or write to Windows Registry. Now that I have added MAC paltform I need an equivalent method to edit the plist file… – Dimitra Ger – Google+ –jeroen
Read More

Conferences in Europe

Exciting times – conference season is upon us again and I’m excited to be heading off to a couple of them to talk to Delphi developers around Europe about subjects I’m passionate about.First off, and it’s nearly here, is the Barnsten Delphi Conference 2018 in Utrecht in the Netherlands on Tuesday, September 18th. This is a one day event with a busy agenda. After the opening keynote from Delphi Product Manager Marco Cantú, I’ll be doing a plenary session on creating debugging techniques before the sessions split into 2 parallel tracks. In among these parallel sessions I’ll talk about Android API access and you can also choose from sessions by (among others) Bruno Fierens, Bob Swart, Danny Wind and Marco Cantú (again). These sessions are mostly in English, though a couple are not. This looks to be a great value day of Delphi expertise.Later in the Autumn (or maybe it’s Winter by then…?) EKON 22 takes place from November 5th to 7th (Monday to Wednesday, with Wednesday being Workshop day). Again Marco Cantú will be doing the keynote and then we have lots of sessions in 3 parallel tracks, many in German, many in English. I’m presenting my Creative Debugging Techniques session first thing on the Tuesday. Other speakers include Stefan Glienke, Bruno Fierens, Marco Cantú (again), Andrea Magni, Ray Konopka and Cary Jensen (among others). You can peruse the full agenda here.If you are thinking of going to EKON 22 you can get Early Bird discounted pricing until September 27th (see the registration page). Unfortunately I didn’t get to post about this before the Very Early Bird pricing ended, but Early Bird discount pricing is a good deal!I hope to see some of you in Utrecht or Dusseldorf!
Read More

Some search links on Delphi and C# WSDL imports I need to investigate further

Sometimes, the Delphi WSDL importer imports fine, but the generated code does not accept test cases sent by other tools. Below are some links for messages and comment fragments that I want to investigate further. // Cannot unwrap: // – Input element wrapper name does not match operation’s name // – The output part is […] … Read More

Read More

General Manager Update for September 2018

As we start September, I want to provide some important updates around products and product packaging.

Earlier in the year, we simplified our SKUs by including the FireMonkey (FMX) Framework for developing Cross-Platform Apps into all Professional editions. These are also now available to all customers with a Professional license who are on Update Subscription. There are many upcoming changes with iOS, Android, MacOS, etc. that will be included in the upcoming 10.3 release and updates throughout the next 12 months. We also included a single site RAD Server deployment license with all Enterprise licenses. An update to RAD Server will come with 10.3 and is already available for beta testing. Both changes were popular with our customers. We also have two other areas, where we think we can improve.

Architect SKU Update

We will update Architect Edition alongside our 10.3 release. This edition has traditionally allowed our customers to gain value from other products within our family of tools. Idera Inc.’s portfolio has grown and we have some exciting new products that are better aligned with our customer needs than the current data modeling tooling. The data modeling tools are still included with Architect Edition, but will be replaced with the following in our 10.3 release:

Ext JS Professional – the most extensive professionally supported JS components and tooling from our Sencha brand. Our surveys indicate that over 50% of our customer base is using or planning to use JavaScript for Web Development together with Delphi. Ext JS has some similarities with Delphi in its object development approach and high level of productivity, so this should be a great way to start your team’s JS journey.

RAD Server Multi-site Deployment License – allows RAD Server to be deployed on multiple Servers and Locations, extending what is possible with the Enterprise License of RAD Studio. This supports our vision for modern multi-tier REST based architectures that can be highly cost effective.

Aqua Data Studio (ADS) – award winning tools for database management and development with great support for SQL and many more databases. ADS can be used with InterBase with increased support coming soon.  Aquafold is part of Idera, Inc. Database Tools businesses.

Ranorex Test Automation – the best Testing Automation tool, especially popular for Windows development, recently increased Delphi support and can be a great addition for large and small teams. Ranorex is part of Idera, Inc. Testing Tools businesses.

We believe that these represent substantial increase in value for our Architect edition. We are currently evaluating if an update in price is required. As with all changes, we want to provide customers with plenty of advance notice. Further, if you purchase the current version, you will  be current on Update Subscription and once 10.3 is released, you will  have access to the additional tooling described above.

Community and EDN Portal Update

Another important change to come in the next several months is the update to our Community and EDN portals. I am sure that most customers will agree that this is way overdue. Our objective is to improve performance and usability by adopting better, more standard technologies. In the spirit of continued adoption of our own tooling, the new EDN is built with Ext JS, which makes it very easy to expand and maintain. You will receive specific notifications if there are changes to your authentication or access, so please be in the lookout for these. Having your most updated information updated in EDN and with your Account Representative or Reseller Partner always help to ensure effective communications.


Read More

Read More

How and when are variables referenced in Delphi’s anonymous methods captured? – Stack Overflow

Just found some notes from 2013 for my research list that are still relevant: [WayBack] How and when are variables referenced in Delphi’s anonymous methods captured? – Stack Overflow. [WayBack] delphi – How to compare TFunc/TProc containing function/procedure of object? – Stack Overflow. [WayBack] Delphi interfaces on binary level | The Programming Works. [WayBack] Anonymous methods in Delphi: the internals | The Programming Works. [WayBack] On the reference counting bugs in Delphi | The Programming Works: Delphi allows to access an object instance via object reference and interface reference at the same time. Consider this code: Nasty thing is that a reference-counted object is created with zero ref… [WayBack] memory management – delphi 2009, interface already released – Stack Overflow [WayBack] Smart Pointers | Australian Delphi User Group Members. [WayBack] TURBU Tech » Blog Archive » Under the hood of an anonymous method. TIndex: [WayBack] Anonymous methods. [WayBack] delphi rtti “reference to procedure” – Google Search. [No WayBack] Embarcadero Discussion Forums: RTTI for anonymous methods? …. [WayBack] delphi – RTTI information for method pointer – Stack Overflow. [WayBack] How To Get the Name of the Current Procedure/Function in Delphi (As a String) – Stack Overflow. [WayBack] reflection – How to use SuperObject to invoke methods that uses an Object as parameter in Delphi? – Stack Overflow. [WayBack] Delphi: Call a function whose name is stored in a string – Stack Overflow. [WayBack] Fixing Delphi’s Interface Limitations – CodeProject: Delphi has some big gotchas with interfaces. Learn how to bypass them. [WayBack] Reference Counting and Object Harvesting in Delphi | Dr Dobb’s – page 1 [WayBack] Reference Counting and Object Harvesting in Delphi | Dr Dobb’s – page 2 Note that if you are using Smart Pointers, use the ones that Spring4D implemented in 2015 named Shared/IShared<T>/TShared<T>, see [WayBack] Spring4D – Pascal Today and [WayBack2] Smart Pointers will be in Spring4D 1.2. –jeroen
Read More

Sign Up for the Delphi Community Edition Boot Camp Today

If you are new to Delphi, the cross-platform, native compiling rapid application development (RAD) tool from Embarcadero Technologies, or know someone who is, there’s an upcoming event that you need to know about. It is the Delphi Community Edition (CE) Boot Camp.The Delphi CE Boot Camp is a series of lectures designed to introduce you to developing world-class applications using Delphi. Beginning on September 3rd, and continuing for a total of 8 weeks, each week introduces you to a different aspect of Delphi development, from building the user interface to compiling applications for iOS and Android devices. Week 1 begins with an introduction to the Delphi language (object-oriented Pascal), presented by Delphi guru and Delphi Product Manager Marco Cantú.The Delphi CE Boot Camp is free for everyone. To attend, use the following link to get started: lessons for each week will become available on the date listed for each topic area. You can watch the lessons any time you want once they are published, but if you watch the lessons live, you will be able to participate in the question and answer session that follows the initial presentation.Don’t have a current copy of Delphi. No problem. So long as you meet the requirements, you can download and use the free Delphi Community Edition which became available this past July. The Delphi Community Edition is a full featured Professional Edition designed to get you up and running. To learn more about the Delphi Community Edition, along with its terms of use, visit you are a database developer, you will want to attend my course on database development with Delphi. My lessons will become available on September 24th.If you have colleagues who are new to Delphi, please be sure to share this information with them. There’s never been a better time to get started with the best native compiler for building applications for Windows, OSX, iOS, Android, and Linux.
Read More