TTMSFNCStyling

Style your FNC components

Designtime

To start styling the FNC components, drop any FNC component on the form, right-click the component and select the Style->Manager option from the context-menu.

This will prompt you with a dialog that initially shows the built-in styles. Built-in styles are stored in the TMSFNCStylesResources.res file, separately available.

Click on a style to select it and click on the “Apply” button to apply the style to each component on the form. You can also load your own style file by clicking on the “Open” button. The built-in styles are combined style files containing styles from multiple components. You can load individual style files and combine them in 1 style file like the built-in styles. When right-clicking on the component,you can save your own style to a style file. This separate component style can be loaded and managed via the style manager.

Runtime

To start with runtime loading, add {$R 'TMSFNCStylesResources.res'} to your application first, so built-in styles are available.

To load a style at runtime there are several options. When you have a style file, you can either load it via [Component].LoadSettingsFromFile, or via the TTMSFNCStylesManager. The TTMSFNCStylesManager instance also allows you to load files from a resource (via the StyleResource property), from a file (LoadStyleFromFile), a stream (LoadStyleFromStream), or plain text (LoadStyleFromText). The format for loading the resource through LoadFromResource or the StyleResource property can be found in the manager.

The built-in style has the format TTMSFNCStyle_[StyleName].style, with [StyleName] being the actual style name of the file and can be loaded by using the code below:

TMSFNCStylesManager1.LoadStyleFromResource('TTMSFNCStyle_FNC_Dark');

Or

TMSFNCStylesManager.StyleResource := 'FNC_Dark';

JSON formatting

The style mechanism is based on the persistence interfaces that already exist in FNC. It will generate a JSON that only contains the necessary information based on the components appearance properties. The detection happens automatically, but finetuning can be done with the IsAppearanceProperty virtual. Some components need to save more information than others. Even custom components that you have designed will be styleable through the ITMSFNCPersistence interface, when inheriting from TTMSFNCCustomControl.

{
  "$type":"TTMSFNCCalendar",
  "Color":"#484848",
  "DateAppearance":{
    "$type":"TTMSFNCCalendarDateAppearance",
    "BadgeFill":{
      "$type":"TTMSFNCGraphicsFill",
      "Color":"#FF0000",
      "ColorMirror":"gcNull",
      "ColorMirrorTo":"gcNull",
      "ColorTo":"#808080",
      "Kind":1,
      "OnChanged":null,
      "Opacity":1,
      "Orientation":1,
      "Texture":"",
      "TextureMode":2
    },
    "BadgeFont":{
      "$type":"TTMSFNCGraphicsFont",
      "Color":"#FFFFFF",
      "Family":"Segoe UI",
      "Name":"Segoe UI",
      "OnChanged":null,
      "Size":10,
      "IsFMX":true,
      "Style":0
    },
    "BadgeStroke":{
      "$type":"TTMSFNCGraphicsStroke",
      "Color":"#FF0000",
      "Kind":1,
      "OnChanged":null,
      "Opacity":1,
      "Width":1
    },
    "DateAfterFill":{
      "$type":"TTMSFNCGraphicsFill",
      "Color":"#484848",
...

WEB Support

In WEB, styles are also support. At designtime, the same methods can be used as you would apply in VCL or FMX. At runtime, there is no LoadStyleFromResource available as TMS WEB Core does not support resources, but there is a LoadStyleFromURL available in the TTMSFNCStylesManager that allows you to load the styles from an URL. You can copy the style files that are necessary for your application from the Styles sub folder in the source folder, available after installation. Alternatively, you can also use the WebFilePicker component to select a file and load it as a style. Below is a sample that demonstrates both techniques.

procedure TForm1.WebButton1Click(Sender: TObject);
begin
  WebFilePicker1.Files[0].GetFileAsText;
end;

procedure TForm1.WebButton2Click(Sender: TObject);
begin
  TMSFNCStylesManager1.LoadStyleFromURL('http://localhost:8888/Project1/TTMSFNCStyle_FNC_Dark.style');
end;

procedure TForm1.WebFilePicker1GetFileAsText(Sender: TObject;
  AFileIndex: Integer; AText: string);
begin
  TMSFNCStylesManager1.LoadStyleFromText(AText);
end;