HTML5 Visual Controls

Being able to write your own HTML5 based visual controls that are just as fast as some of the fancy JS libraries out there – yet at the same time makes use of traditional object pascal inheritance and VMT (virtual method table, what allows for virtual, dynamic and abstract methods and classes) is what QTX is all about.

The while point of QTX is knowledge transference, where you are able to re-purpose the skills you already have from Delphi or Lazarus (freepascal), and re-apply them under a new paradigme. There are many differences ofcourse, but if you know how to program in Delphi or Lazarus, getting to grips with QTX is easy and fun.

One important aspect of the QTX runtime library, one that most people dont expect to be there, is that all controls (called widgets under QTX) are created from code. So whenever you drag & drop a widget onto a form, that widget is created by the class. You are not dragging simple HTML elements onto a document like Adobe Dreamweaver, you are dragging actual control instances that are created, maintained and destroyed purely by code.

Above: Visual widgets are self contained objects created and maintained from code, you have the same level of detail as native code

Much like Delphi and Lazarus where controls inherit from a common ancestor like TCustomControl, all QTX widgets inherit from the class TQTXWidget. This class creates the HTML element that it represents at runtime via it’s constructor, and calls common methods of that class during the creation process; methods that component writers can override and adapt to suit their needs. For example, by default the HTML element type for TQTXWidget is DIV. This can be changed by overriding the function CreateElementInstance() and return a different HTML element instance.

Just like Delphi’s TCustomControl our TQTXWidget can house as many child elements as you like. The way you create child widgets is identical to Delphi and Lazarus. And you can create as many child widgets as you like. Each widget supports all the layout options of HTML5, which makes it incredibly fun to create your own elaborate widgets. Widgets that can ble isolated in packages for distribution or sale.

If you are fluent in HTML and know the medium well you can also directly inject HTML as the content of a widget. TQTXWidget supports post-management, where you pass an already existing element reference in the constructor. TQTXWidget will then adopt that element as it’s own and manage it from then on. TQTXWidget also supports HTML mapping, where you provide HTML in a string, and the RTL will create widgets of the correct type and return everything as an array of TQTXWidget. This is very handy when creating elaborate UI’s that would require a lot of coding to represent as widgets.

Read more