Skip to content

General

List of available controls
TTMSFNCHTMLText
Text shape that supports HTML (see MiniHTML chapter)		 TTMSFNCUIPack
TTMSFNCBitmapContainer
Container that holds multiple bitmaps		 TTMSFNCUIPack1
TTMSFNCPopup Component
that allows displaying any type of control inside a customizable popup dialog.		 TTMSFNCUIPack2
TTMSFNCEdit
Autocomplete and lookup enabled control that extends TEdit. Has the capability of display and editing various editing types such as float, money, lowercase, uppercase, …		 TTMSFNCUIPack3
TTMSFNCColorPicker / TTMSFNCColorSelector
A color selector and picker with many customization / custom drawing options and events.		 TTMSFNCUIPack4
TTMSFNCBitmapPicker / TTMSFNCBitmapSelector
A bitmap selector and picker with many customization / custom drawing options and events.		 TTMSFNCUIPack5
TTMSFNCFontNamePicker / TTMSFNCFontSizePicker TTMSFNCUIPack6
TTMSFNCToolBar TTMSFNCUIPack7
TTMSFNCTabSet / TTMSFNCPageControl TTMSFNCUIPack8
TTMSFNCListBox / TTMSFNCCheckedListBox TTMSFNCUIPack9
TTMSFNCCheckGroup / TTMSFNCCheckGroupPicker TTMSFNCUIPack10
TTMSFNCRadioGroup / TTMSFNCRadioGroupPicker TTMSFNCUIPack11
TTMSFNCPanel TTMSFNCUIPack12
TTMSFNCNavigationPanel TTMSFNCUIPack13
TTMSFNCListEditor TTMSFNCUIPack14
TTMSFNCHint TTMSFNCUIPack15
TTMSFNCToolBarPopup TTMSFNCUIPack16
TTMSFNCScrollBar TTMSFNCUIPack17
TTMSFNCAnalogTimeSelector / TTMSFNCAnalogTimePicker TTMSFNCUIPack18
TTMSFNCDigitalTimeSelector / TTMSFNCDigitalTimePicker TTMSFNCUIPack19
TTMSFNCFillKindSelector / TTMSFNCFillKindPicker TTMSFNCUIPack20
TTMSFNCStrokeKindSelector / TTMSFNCStrokeKindPicker TTMSFNCUIPack21
TTMSFNCColorWheel TTMSFNCUIPack22
TTMSFNCTaskDialog TTMSFNCUIPack23
TTMSFNCStatusBar TTMSFNCUIPack24
TTMSFNCSignatureCapture TTMSFNCUIPack25
TTMSFNCDateTimePicker TTMSFNCUIPack26
TTMSFNCFontDialog TTMSFNCUIPack27
TTMSFNCIPEdit TTMSFNCUIPack28
TTMSFNCCheckBox TTMSFNCUIPack29
TTMSFNCRadioButton TTMSFNCUIPack30
TTMSFNCTrackBar TTMSFNCUIPack31
TTMSFNCRangeSlider TTMSFNCUIPack32
TTMSFNCSpinEdit TTMSFNCUIPack33
TTMSFNCComboBox TTMSFNCUIPack34
TTMSFNCSwitch TTMSFNCUIPack35
TTMSFNCLabelEdit TTMSFNCUIPack36

Persistence

Each component in the TMS FNC UI Pack is capable of saving its published properties (settings), to a file or stream. The format that is being used is JSON. To save a specific component, use the code below. 

MyFNCComponent.SaveSettingsToFile();
MyFNCComponent.SaveSettingsToStream();
To load an existing settings stream/file use the following code. 
MyFNCComponent.LoadSettingsFromFile();
MyFNCComponent.LoadSettingsFromStream();
Each component additionally exposes events to control which properties need to be saved to the settings file. In some circumstances, it might be required to only save a specific set of properties. The OnCanLoadProperty and OnCanSaveProperty events are responsible for this. Below is a sample that excludes a property ‘Extra’ from the persistence list.

procedure TForm1.MyFNCComponentCanLoadProperty(Sender, AObject: TObject;
 APropertyName: string; APropertyType: TTypeKind; var ACanLoad: Boolean);
begin
 ACanLoad := ACanLoad and not (APropertyName = ‘Extra’);
end;

procedure TForm1.MyFNCComponentCanSaveProperty(Sender, AObject: TObject;
 APropertyName: string; APropertyType: TTypeKind; var ACanSave: Boolean);
begin
 ACanSave := ACanSave and not (APropertyName = ‘Extra’);
end;

Please note that the above AND operation is crucial to maintain the existing exclusion list. Returning a true for each property will additionally save its default published properties such as Align, Position and many more.

GlobalFont

For components with multiple fonts the GlobalFont property is made available. This allows you to change the size, color, name and style of all the fonts in the chart. With the scale property you can change the font sizes in relation to their previous sizes.

Undo / Redo

Each component exposes a public UndoManager property that is capable of loading a previous state of the component. To push a state, use the following code: 

MyFNCComponent.UndoManager.PushState('default state');
MyFNCComponent.ChangeText;
MyFNCComponent.UndoManager.PushState('text changed');
MyFNCComponent.UndoManager.Undo;
This code will set a default state with the original text, and restore the text changed with the ChangeText method via the MyFNCComponent.UndoManager.Undo; to go forward in the stack list use MyFNCComponent.UndoManager.Redo; The default maximum amount of undo/redo operations is 20, which can be increased per component with the MaxStackCount property.

TMS Mini HTML rendering engine

Another core technology used among many components is a small fast & lightweight HTML rendering engine. This engine implements a subset of the HTML standard to display formatted text. It supports following tags :

B : Bold tag 

<B> : start bold text
</B> : end bold text
Example : This is a test

U : Underline tag 

<U> : start underlined text
</U> : end underlined text
Example : This is a test

I : Italic tag 

<I> : start italic text
</I> : end italic text
Example : This is a test

S : Strikeout tag 

<S> : start strike-through text
</S> : end strike-through text
Example : This is a test

A : anchor tag <A href="value"> : text after tag is an anchor. The 'value' after the href identifier is the anchor. This can be an URL (with ftp,http,mailto,file identifier) or any text. If the value is an URL, the shellexecute function is called, otherwise, the anchor value can be found in the OnAnchorClick event </A> : end of anchor

Examples : This is a test

This is a test

This is a test FONT : font specifier tag

<FONT face='facevalue' size='sizevalue' color='colorvalue' bgcolor='colorvalue'> : specifies font of text after tag. with

  • face : name of the font
  • size : HTML style size if smaller than 5, otherwise pointsize of the font
  • color : font color with either hexidecimal color specification or color constant name, ie gcRed,gcYellow,gcWhite ... etc
  • bgcolor : background color with either hexidecimal color specification or color constant name </FONT> : ends font setting

Examples: This is a test This is a test

P : paragraph

<P align="alignvalue" [bgcolor="colorvalue"] [bgcolorto="colorvalue"]> : starts a new paragraph, with left, right or center alignment. The paragraph background color is set by the optional bgcolor parameter. If bgcolor and bgcolorto are specified, a gradient is displayed ranging from begin to end color. </P> : end of paragraph

Example :

This is a test

Example :

This is a test

Example :

This has a red background

Example :

This has a yellow background

Example :

This has a gradient background

*

HR : horizontal line 

<HR> : inserts linebreak with horizontal line

BR : linebreak 

<BR> : inserts a linebreak

BODY : body color / background specifier <BODY bgcolor="colorvalue" [bgcolorto="colorvalue"] [dir="v|h"] background="imagefile specifier"> : sets the background color of the HTML text or the background bitmap file

Example : : sets background color to yellow 

<BODY background="file://c:\test.bmp"> : sets tiled background to file test.bmp
<BODY bgcolor="gcYellow" bgcolorto="gcWhite" dir="v"> : sets a vertical gradient from yellow to white

IND : indent tag
This is not part of the standard HTML tags but can be used to easily create multicolumn text <IND x="indent"> : indents with "indent" pixels Example : This will be indented 75 pixels.

IMG : image tag

<IMG src="specifier:name" [align="specifier"] [width="width"] [height="height"] [alt="specifier:name"]> : inserts an image at the location

specifier can be: name of image in a BitmapContainer

Optionally, an alignment tag can be included. If no alignment is included, the text alignment with respect to the image is bottom. Other possibilities are: align="top" and align="middle"

The width & height to render the image can be specified as well. If the image is embedded in anchor tags, a different image can be displayed when the mouse is in the image area through the Alt attribute.

Examples : This is an image

SUB : subscript tag 

<SUB> : start subscript text
</SUB> : end subscript text
Example : This is 9/16 looks like 9/16

SUP : superscript tag 

<SUP> : start superscript text
</SUP> : end superscript text

UL : list tag 

<UL> : start unordered list tag
</UL> : end unordered list

Example : 

    <LI>List item 1
<LI>List item 2
<UL>
<LI> Sub list item A
<LI> Sub list item B
</UL>
<LI>List item 3
</UL>

    LI : list item

    <LI [type="specifier"] [color="color"] [name="imagename"]> <br>

    New list item specifier can be "square", "circle" or "image" bullet. Color sets the color of the square or circle bullet. Imagename sets the PictureContainer image name for image to use as bullet

    SHAD : text with shadow

    <SHAD> : start text with shadow
</SHAD> : end text with shadow

    Z : hidden text 

    <Z> : start hidden text
</Z> : end hidden text

    Special characters Following standard HTML special characters are supported : 

    &lt; : less than : <

&gt; : greater than : >

&amp; : &

&quot; : "

&nbsp; : non breaking space

&trade; : trademark symbol

&euro; : euro symbol

&sect; : section symbol

&copy; : copyright symbol

&para; : paragraph symbol

    Styling

    Each control in the TMS FNC UI Pack supports styling on FMX and VCL. When setting the AdaptToStyle property to true, the style loaded in the application will be applied to the control. Below is a sample after applying styles to the TTMSFNCTabSet/TTMSFNCPageControl.

    TTMSFNCUIPack157