getting started with advanced UI


It seems to me that one of the benefits of SPA is that it is supposed to provide a rich UI to the client. There are many javascript libraries that provide a rich UI. I had expected (perhaps naively) that TMS webcore would wrap at least one, if not more of these common libraries (jqWidgets, Bootstap, ExtJs etc etc) in delphi wrappers to make it easy for the delphi developer to interact with these.

Sadly this is not the case. jqQwidgets has about 1/3 of the library wrapped and that is the most advanced. The advice I have been given is to use templates. But that is really no help. It is fine for styling the controls, and positioning them, but not interacting with them,

For example, if we want to use bootstrap grid we need to look up the docs

and we need to know what links and scripts we need to put in the HTML template.

Then, if we want to do something simple like adding a row

we need to use javascript

Using Delphi TMS is what is supposed to free the delphi developer to continuously have to remember the HTML / CSS / Javascript for everything. Otherwise, what is the point of using TMS?

Are we approaching this the correct way? What is the "web core" way of using bootstrap? How does TMS web core make bootstrap easier for us without us basically writing all our own javascript?

1 Like

We have focused on wrapping the jQWidget controls that add significant functionality compared to what is already out of the box in TMS WEB Core. This is a huge undertaking already, so we focused and prioritized on what brings added value.
There are thousands of web libraries, it is a impossible task to wrap everything that exists in the web world in Pascal classes. That is why we started a partner program to encourage everyone who wraps something useful for TMS WEB Core to share it.
The new web component technology ( offers possibilities to automate creating wrapper classes as web components can have JSON descriptors. So, we used this technology to already offer wrapper classes for two libraries. See and
Templates and components are two complimentary things.
The unit web.pas offers Pascal classes/functions to interact with the browser DOM. You can do DOM manipulations 100% in Pascal code, there no need to inject JavaScript.
Using Bootstrap in TMS WEB Core is about assigning Bootstrap CSS classes to controls (via the Element*ClassName properties. There are several blog posts, videos, samples covering this. , ,
We have not created something to wrap As I said, there are thousands and thousands of potentially interesting existing libraries. We dedicate our limited time and resources to what is in highest demand and build up the library from there. As mentioned under 5), you should be able to do most of the manipulations expected from using Pascal classes/functions from web.pas (you can consider this equivalent to windows.pas for VCL Windows developers).

1 Like

I totally missed this point. I was assigning only the id and expecting it work.