TMS RADical WEB, using HTML & CSS for design & layout of your application pages


Tuesday, February 20, 2018

By default, the Delphi form designer serves as a WYSIWYG design surface for your web application forms. This means that the UI controls on the Delphi form will appear absolute positioned on the web page. For page layout & organization, there are the typical Delphi container controls like a panel, groupbox, scrollbox, gridpanel.

The parent/child relationship of the Delphi controls is also reflected on the produced web pages. Additional facilities like control alignment, anchoring and a splitter control are available to let you and the end user control the layout of the pages. In this default mode, everything is as such very familiar to Delphi developers and users of Delphi VCL Windows applications and sometimes this similarity is desirable. However, the TMS WEB Core framework is also completely open to have the page layout designed directly from HTML & CSS. The architecture of the framework provides for separating design & code and even have the design done by people with a role, i.e. graphical designers.
So, how is this separation handled? Fortunately, in a very easy and straightforward way. The link between HTML and the UI controls and code used in the Delphi IDE is based on the unique HTML element ID. Every TMS WEB Core control has a property ElementID. When the ElementID is not used, i.e. left empty, the HTML elements the control consists of is generated by the TMS WEB Core framework. When the ElementID is specified, the HTML element found is hooked up to the Pascal class for the control. This means that property accessors directly get and set values from the HTML element and the various HTML element Javascript events are hooked up the class and exposed as Pascal event handlers.
Here the TWebMemo is hooked up via the ElementID property to a TEXTAREA HTML element with ID set to “mem” and already in the HTML file.

The software developer and the graphical designer can collaborate by simply ensuring that the designer provides the HTML element IDs to the software developer or the software developer can provide a list of IDs of controls needed to the graphical designer. It speaks for itself that using this technique empowers us to take advantage of responsive design for TMS WEB Core web applications. When the HTML template for the page is applying responsive design techniques, i.e. different layouts for different device screen sizes, the UI controls will appear where the designer defined these should appear depending on the screen size. That is not all though. It is also possible to let the Delphi designed UI be generated in the body part of a HTML page or in any specified HTML container element in a HTML page. As such, a graphical designer could create a page layout with a header, footer and other elements in the HTML page and add a specific area via a HTML DIV or SPAN element where the Delphi designed UI will be generated in. To do so, all that is needed is set to the ID for the HTML element where the form should be generated via the Form.AppContent property. Finally, each UI control also exposes an ElementClass property. Via this ElementClass property a CSS style can be specified for an UI control. Via this way for example, it is very easy to use a popular framework like bootstrap. It is sufficient to set the bootstrap CSS class names to the UI controls on the Delphi form designer by their ElementClass properties.

Here the ElementClass property of the edit control on the form is set to the bootstrap ‘form-control’ style:

One of the demos included in the TMS WEB Core framework shows this. By simply changing the bootstrap theme via changing the reference in the HTML page template, the appearance of the web application will adapt automatically.

Demo without styling:

Demo with bootstrap styling applied:

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 12 comments. Add a comment.

TMS RADical WEB, open to other Javascript frameworks


Monday, February 19, 2018

By design, the Pascal to Javascript compiler that is integrated in the Delphi IDE via TMS WEB Core provides a thin, direct and thus high-performance layer to Javascript. This also means that it is fairly easy to interface directly to all kinds of functionality offered by Javascript libraries including Javascript UI controls libraries.

The proof of the pudding is in the eating and to begin with, TMS WEB Core will offer out of the box a complete set of Pascal components that wrap the jQuery jQWidgets UI control set.

This is a very complete & consistent jQuery UI control set including masked editors, ribbon, calendars & datepicker, powerful paging grid, ... and many more.

We are busy creating this set of easy to use wrappers in agreement and cooperation with the jQWidgets company. A first set is already available in the TMS WEB Core technology preview available today. This is the list of controls on the Delphi tool palette we have so far covered and the team is at this very moment busy tackling the jQWidgets grid:

Via Delphi components you can drop these jQuery controls on the form, set properties, implement event handlers etc...

To interact with these jQuery controls, you will as such fully use the Pascal language. For deployment, all you need to do is put the jQWidgets Javascript & CSS files into the subfolder jQWidgets of your web project. Over time & steered by your feedback and requests, we will consider adding many more thin Pascal wrapper classes for other interesting Javascript libraries, frameworks, UI controls.

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. The jQWidgets UI controls library files can be obtained from jQWidgets offer a free for non-commercial use license as well as licenses for commercial use.

Bruno Fierens


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

TMS RADical WEB, connecting to data


Saturday, February 17, 2018

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.

Bruno Fierens


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

TMS RADical WEB, proud to announce a revolutionary & innovative UI control set that is TMS FNC for web


Friday, February 16, 2018

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 also LCL applications with the free Lazarus IDE for Windows, macOS and Linux. The result of our deep research was our FNC component framework.

Meanwhile, we are proud that we have already a wide range of sophisticated UI controls based on the FNC framework available like a grid, treeview, planner, chart, ribbon, tableview and many more plus also several new controls in development. We have noticed that for many developers there is still a bit of confusion about what FNC really means. Except there is a lot of technical magic behind FNC, for developers the result is really simple. You have one UI control set available that you can use simultaneously to create VCL, FMX or LCL applications. Yes, with one UI control set, you choose what framework you want to use, be it VCL, FMX or LCL. Irrespective of the framework you use, you can use the exact same controls, you can share or reuse application code dealing with these UI controls between the different frameworks and you have only one learning curve to get the most out of these powerful controls.

While VCL, FMX, LCL have been able from the first stage of FNC controls, from now on, the web is a major new target for using your FNC UI controls. That we even managed to web-enable our FNC abstraction layer is certainly a proof how solid that framework was designed from the beginning, but it remains nothing short of unbelievable, revolutionary and innovation that the exact same source code produces UI controls usable simply everywhere: native desktop, native mobile and web. And this on almost any modern electronic device on the planet: as installed native application or as web application you use via your browser on your Windows laptop, your iPad or iPhone mobile device, your Android smartphone, your macOS, your Linux machine and even on your Raspberry Pi SBC.

See it to believe it and be amazed!

This is our FNC Planner that worked before in Windows, iOS, Android, macOS and yes also on Linux and even Raspberry PI, now it makes the giant leap to the web and runs in every HTML5 supporting web browser on every device on the planet:

Now, back to web development with TMS WEB Core and TMS FNC UI Controls installed, you have an FNC tab of UI controls available on the tool palette.

As you expect it, you drop the TMS FNC UI control on the web form, you set its properties, add event handlers, add code and you see the FNC UI control in the web application after pressing F9 to run the application. The FNC UI Control appears WYSIWYG in the web form designer as it appears in the browser and in the browser, it also nicely takes advantage of zoom in/out or retina/high DPI handling. Go ahead and play with the FNC controls demos in your browser of choice:

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 2 comments. Add a comment.

TMS RADical WEB, RAD web development from the Delphi IDE


Thursday, February 15, 2018

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.

Bruno Fierens


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

Previous  |  Next  |  Index