Skip to content

Page Design

Absolute positioning

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.

Relative positioning

Controls can also be added to the designer and positioning set to relative position. This is set by the property Control.ElementPosition to epRelativate. In this mode, coordinates for the control are not rendered. It is up to the browser DOM to determine the layout. If for the Control the HeightStyle and WidthStyle are set to ssAuto, also the DOM will determine the runtime size of the control. There is one very important consideration with relative positioned controls and that is control order. The relative ordering of controls is set by the Control.ChildOrder property. When Control.ElementPosition is epRelative, the Control.ChildOrder is used to control the ordering of the HTML elements of the control in the parent. The control with Control.ChildOrder set to 0 will be the first control under the parent HTML element hierarchy, the next control will be the control with Control.ChildOrder set to 1 and so on …

Example:

In the designer, there is a panel with ElementPosition = epRelative and WidthStyle, HeightStyle are set to ssAuto. It contains 3 child controls, a label, edit and button with ElementPosition set to epRelative as well. The label’s ChildOrder is set to 0, the edit’s ChildOrder to 1 and the button’s ChildOrder to 2.

The result in the browser is:

The corresponding HTML will be: a HTML SPAN element for the panel, a DIV element with child HTML LABEL element for the label. A HTML INPUT element for the edit control and a HTML BUTTON element for the button:

<SPAN>
<DIV><LABEL></LABEL></DIV>
<INPUT type=”TEXT”>
<BUTTON type=”BUTTON”>
</SPAN>
Now, CSS can take care of further styling of the generated HTML elements.

Theming

Meanwhile, all major desktop and mobile operating systems have introduced the concept of a light and dark themes to accommodate the typical preference of dark themes for young computer users and light themes for older computer users. Naturally, there is a tendency that young computer users will come to expect that a web application adopts a dark theme and vice versa for older users. Meanwhile, browsers offer capabilities of detecting whether the operating system where the browser runs is configured for a dark theme or light theme. And so, a TMS WEB Core application can automatically run using a dark theme or a light theme depending on these settings. Of course, this feature is optional, and it can be used in an automatic way or you can add application level code for switching to your desired theme in a customized way.

To enable this feature, go into project options and enable automatic theming via:

BiDiMode

Default TMS WEB Core web client applications are designed for left to right written languages. For languages written from right to left, you can application wide configure the browser to use right to left rendering. To do this, edit the project main HTML file and add the attriubute dir=”rtl” for the <HTML> tag:

If you only want to enable right-to-left for specific controls on a page that is mainly left-to-right, you can use the control’s BiDiMode property for this (similar as in Delphi VCL applications).

Use of HTML templates

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. Alternatively, the mapping between UI controls on the form designer and HTML elements can also be done via the binding editor which is invoked from the TWebForm context menu of the form designer:

In this control binding editor, two views are possible: the view that shows the UI controls found on the form in the first column and the possibility to pick in the right column the HTML element to map the control to and vice versa in the HTML Element-Control tab.

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: http://www.tmssoftware.biz/tmsweb/demos/tmsweb_simple/

Demo with bootstrap styling applied: http://www.tmssoftware.biz/tmsweb/demos/tmsweb_bootstrap/

Further fine-tuning on how the design-time setup translates to run-time look & feel and layout is possible via the UI control properties ElementFont and ElementPosition.

Default, the UI control ElementFont property is set to efProperty. This means that the UI control Font property values will be used to generate the style attributes for the HTML element (in case ElementID and ElementClassName are blank). When ElementFont is set to efCSS, this means the font for the HTML element will be determined by the browser CSS resolving.

Example:

This is a TMS WEB Core project web form with 3 controls. The font for the controls was set at design-time to Verdana, 10pt. In the browser, this renders exactly the same:

Now, changing the ElementFont property on the 3 controls to efCSS and including the following CSS in the form's unit1.html:

results in:

The ElementPosition property determines how the form designer based coordinates are used as style attributes for the HTML element. When ElementPosition is set to epAbsolute (default), the HTML element style attributes are set to absolute and the control position and size will match exactly how it was designed in the form designer. When the setting is epRelative or epNone, the HTML element layout, position and size will be determined by the browser and possible CSS applied to the HTML element(s).