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 |