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:
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).