TMS WEB CORE designed page layout directly from HTML&CSS

TMS WEB CORE supports drag and drop controls in DELPHI IDE to generate HTML UI. This method is suitable for the programmers of DELPHI and C++ BUILDER to develop UI, and cannot be separated from the language IDE.

The TMS Web core framework is also completely open to design page layouts directly from HTML&CSS. The framework of the framework provides separation of design and code, and even the design is completed by a person with a role, that is, a graphic designer.

So, how to deal with this separation? Fortunately, in a very simple and straightforward way. The link between the HTML and UI controls and the code used in DelphiIDE are based on the HTML element ID.

Each TMS Web core control has an attribute elementID. When the elementID is not used, it is left blank, and the HTML elements contained in the control are generated through the TMS Web core framework.

When the elementID was specified, the html element was found and connected to the PASCAL class of the control. This means that the attribute accessor directly obtains the value set from HTML elements and various HTML element javascript events

Hook the class and expose it as a Pascal event handler.

In the following example, twebMemo is connected to textfarea through the elementID attribute. The html element ID is set to “mem” and it is 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.

Software developers and graphic designers only need to ensure that Designer provides the HTML element ID to the software developer or software developer

A list of IDs of the controls required by the graphic designer can be provided. This in itself shows that the use of this technology allows us to utilize the responsive design of TMS Web core web applications.

When the HTML template of the page applies responsive design technology, that is, different layouts of different device screen sizes, the places defined by the UI control designer will be displayed, and these should be displayed according to the screen size.

But this is not all. The user interface designed by Delphi can also be generated in the main part of HTML.

In any specified HTML container element in the page or HTML page. Therefore, the graphic designer can create page layouts with headers, footers, and other elements in HTML pages.

And add a specific area through an HTML DIV or SPAN element, and the UI designed by Delphi will be generated in it. To do this, just set the ID of the HTML element where the form is located to be generated by the Form.AppContent property.

Finally, each UI control also exposes the elementClass property. Through this elementClass attribute, you can specify CSS styles for UI controls. For example, in this way, it is easy to use a popular framework, such as a bootloader.

It is sufficient to set the boot CSS class name to the UI controls on the Delphi form designer through their elementClass property.

One of the demos included in the TMS Web core framework shows this. By simply changing the reference in the HTML page template, the boot theme web application will automatically adapt.

To further fine-tune how the design-time settings are converted to runtime appearance and layout, you can use the ui control properties elementFont and elementPosition.

By default, the ui control element font property is set to efproperty. This means that the font attribute value of the UI control will be used to generate the style attribute of the HTML element (if

elementID and elementClassName are empty). When elementFont is set to efcss, it means that the font of the HTML element will be determined by the browser’s css parsing.

The elementPosition property determines how to use the coordinates based on the form designer as

The style attributes of HTML elements. When elementPosition is set to epabsolute (the default value),

HTML element style attribute is set to absolute, control position and size will match

How it is designed in the form designer. When set to eprelative or epnone,

The layout, position and size of HTML elements will be determined by the browser and possibly CSS.

Applied to HTML elements.