Skip to content

UI control types

TMS WEB Core supports types of UI controls

UI controls encapsulating HTML elements

These are UI controls that are built-up from one or more HTML elements. All UI controls included in TMS WEB Core are of this type. In its most basic form, this is for example a TWebButton that maps on a HTML <BUTTON> element. In a more complex form, this is a TWebLoginPanel that consists of several <INPUT> elements, a <BUTTON> element and <DIV> elements.

Custom drawn controls using the HTML5 CANVAS element

These are UI controls that are based on the HTML5 CANVAS element and that are similar to VCL custom controls, custom drawn using the override of the Paint method. For UI interaction, the base class TCustomControl provides the exact same protected methods KeyPress/KeyDown/KeyUp/MouseDown/MouseMove/MouseUp to override. The control exposes a Canvas: TCanvas that has the same interface as the VCL TCanvas, i.e. a Pen, Brush, methods MoveTo(), LineTo(), Rectangle(), etc... In addition to the VCL TCanvas object, it features methods to get the content of the control as image or to download it as image:

TCanvas.GetBase64Image: string;
TCanvas.DownloadImage( AFileName: string; AType: TImageType = itPNG);
function GetAsImage(AType: TImageType): string;

With TimageType = (itBase64, itBMP, itPNG, itJPEG, itGIF);

An extension to the VCL TCanvas interface is the ability to draw linear or radial gradients. Therefore, the TBrush has the interface:

TBrushGradient = (bgNone, bgLinearVert, bgLinearHorz, bgRadial);

TBrush = class(TPersisent)

public
    procedure AddGradientColor(AColor: TColor; AStop: single);
    procedure GetGradientColor(AIndex: integer; var AColor: TColor;
var AStop: single);
    function GradientCount: integer;
    procedure ClearGradient;
published
    property Gradient: TBrushGradient;
    property Color: TColor;
    property Style: TBrushStyle;
end;

To add gradient colors, use the AddGradientColor() method. The gradient is always defined within the bounding rectangle of the shape that will be drawn with the brush. The brush Color property is the color used from the start (top/left) of the rectangle and additional colors are added at position AStop that is a value from 0 to 1, whereas 0 is the position top/left in the rectangle and 1 is the position bottom/right in the rectangle.

Sample code: draws an ellips with a horizontal gradient fill going from red over yellow in the center to white on the right side:

 Canvas.Brush.Color := clRed;
 Canvas.Brush.Gradient := bgLinearHorz;
 Canvas.Brush.AddGradientColor(clWebOrange,0.5);
 Canvas.Brush.AddGradientColor(clWhite,1);
 Canvas.Ellipse(40,40,160,80);

TMS FNC controls

The TMS FNC component framework is an abstraction layer that facilitates writing UI controls with a single code base that can be used for VCL, FMX, LCL and also TMS WEB Core applications. Several TMS FNC products, i.e. TMS FNC Chart, TMS FNC UI Pack and TMS FNC Dashboard Controls Pack support to use of the components also in web applications. For documentation about FNC controls, this is included in the different TMS FNC products and all documentation that applies to use of the controls in VCL, FMX or LCL applications also applies to use of the controls in TMS WEB Core applications.

jQuery UI controls

Several controls are provided that are actually Pascal wrapper classes for underlying jQuery UI controls. This includes a set of Pascal wrapper classes for the jQWidget controls (www.jqwidgets.com)

Standard Components

TMS WEB Core comes with a lot of components out of the box enabling you to go ahead immediately creating web applications from the Delphi IDE. Many of these standard controls resemble VCL controls and great care has been taken to give these controls class names and properties, methods and event handlers that match their VCL counterparts. This has been done to make the learning curve for Delphi developers used to create Windows VCL applications as light as possible to create web applications. The standard controls have the prefix “TWeb”, i.e. where in VCL a TButton is used, there is in TMS WEB Core a component TWebButton. Where there is in VCL a TListBox, in TMS WEB Core, its counterpart is TWebListBox etc…

Common properties of visual controls

Visual controls are descending from TControl. For controls without a Canvas, i.e. controls that map directly on a hierary of HTML elements (excluding the HTML5 CANVAS element), TWinControl descending from TControl is defined. Controls doing custom painting are descending from TCustomControl that descends from TControl. Finally, when the control does not need user-interface interaction via mouse or keyboard, the TGraphicControl is introduced that descends from TCustomControl. At TControl level, a number of properties is introduced that are then further common for all descending user interface controls.

Property Description
Align Sets the alignment of the control in relationship to its parent control: alLeft: control aligns to the right-side of its parent alTop:control aligns to the top of its parent alBottom:aligns to the bottom of its parent alRight:aligns to the right-side of its parent alClient:aligns to the client-size of its parent
AlignWithMargin When true, the margins settings are taking in account for calculating the alignment
Anchors Gets or sets the anchoring of the control. Values can be akLeft akTop akRight akBottom
Cursor Sets the mouse cursor used when the mouse is over the control
Enabled Sets the control to enabled or disabled
ElementClassName Sets the CSS class name(s) for the HTML element used to represent the control
ElementFont Sets whether the control Font property is used to set the font (efProperty) or CSS will control the font (efCSS)
ElementID Sets the HTML ID of the HTML element already present in the HTML document that the Pascal class needs to connect to (instead of creating a new HTML element instance)
ElementPosition Sets the position of the element in the HTML page as epAbsolute, epRelative or epNone.
EventStopPropagation: TEventPropagation Different from the Windows operating system, a HTML element event such as for mouse and keyboard are sent to the element but also to the parent element and so on by default. This is for UI controls typically not desired and as such for TMS WEB Core controls by default disabled. However, with the EventStopPropagation, you can control what event are propagated and what not. EventStopPropagation: TEventPropagation is defined as: TElementEvent = (eeClick, eeMouseDown, eeMouseUp, eeMouseMove, eeDblClick, eeKeyPress, eeKeyDown, eeKeyUp); TEventPropagation = set of TElementEvent; As such, by default it is initialized to: EventStopPropagation := [eeClick, eeDblClick, eeMouseUp, eeMouseMove, eeMouseDown, eeKeypress, eeKeyDown, eeKeyUp]; so all event propagation is blocked. To allow all event propagation, you would set Control.EventStopPropagation := [];
Height Absolute height value for the control
HeightPercent Height value used when HeightStyle is ssPercent
HeightStyle When HeightStyle is set to ssAbsolute, the Height value is used to set the absolute height of the container HTML element of the control. When HeightStyle is set to ssPercent, the HeightPercent value is used. When HeightStyle is set to ssNone, no height is specified on the container HTML element, meaning it will auto size.
Hint Sets the hint value for the container HTML element
Margins Sets the margin values f
ShowHint When true, the hint is used for the control
Visible When true, the control is visible
Width Absolute width value for the control
WidthPercent Width value used when WidthStyle is ssPercent
Width value used when WidthStyle is ssPercent When WidthStyle is set to ssAbsolute, the Width value is used to set the absolute width of the container HTML element of the control. When WidthStyle is set to ssPercent, the WidthPercent value is used. When WidthStyle is set to ssNone, no width is specified on the container HTML element, meaning it will auto size.

Common events of visual controls

Event Description
OnClick Event triggered on a mouse click on the control
OnDblClick Event triggered on a mouse double click on the control
OnEnter Event triggered when control gets focus
OnExit Event triggered when focus leaves control
OnMouseDown Event triggered when mouse goes down on control
OnMouseMove Event triggered when mouse moves over control
OnMouseUp Event triggered when mouse goes up on control.
OnMouseEnter Event triggered when mouse enters control
OnMouseLeave Event triggered when mouse leaves control
OnDragDrop Event triggered when a drop happens on control during drag operation
OnDragOver Event triggered when a mouse drag is occurring over the control
OnStartDrag Event triggered when a drag operation starts
OnEndDrag Event triggered when a drag operation ends