Getting Started with TMS FNC Toolbar

TTMSFNCToolBar groups command buttons, separators, built-in pickers, and custom controls into a single, self-arranging command surface. It is the cross-platform building block behind application toolbars, formatting bars, and ribbon-style command groups across FMX, VCL, and WEB Core.

This page builds one realistic toolbar end to end — a document-editor formatting bar — and every later chapter deepens one part of it. The bar has a File group (New / Open / Save), a separator, and a formatting group of built-in pickers (font name, font size, text color) whose selections apply live to a memo.

Build the toolbar

1. Drop a TTMSFNCToolBar on the form (and the TMemo it will format).
2. Leave AutoSize and AutoAlign enabled so the toolbar arranges and sizes itself around whatever you add.
3. Add the buttons, separator, and pickers in code, keeping a reference to each control you need to wire or update later.

procedure TForm1.BuildEditorToolBar;
var
  btnNew, btnOpen, btnSave: TTMSFNCToolBarButton;
  fontName: TTMSFNCToolBarFontNamePicker;
  fontSize: TTMSFNCToolBarFontSizePicker;
  textColor: TTMSFNCToolBarColorPicker;
begin
  TMSFNCToolBar1.BeginUpdate;
  try
    // Let the toolbar size and align its content automatically.
    TMSFNCToolBar1.AutoSize := True;
    TMSFNCToolBar1.AutoAlign := True;

    // File commands. Keep the returned button to wire its OnClick.
    btnNew := TMSFNCToolBar1.AddButton(-1, -1, '', '', 'New');
    btnNew.OnClick := FileNewClick;
    btnOpen := TMSFNCToolBar1.AddButton(-1, -1, '', '', 'Open');
    btnOpen.OnClick := FileOpenClick;
    btnSave := TMSFNCToolBar1.AddButton(-1, -1, '', '', 'Save');
    btnSave.OnClick := FileSaveClick;

    // Visual break between the file group and the formatting group.
    TMSFNCToolBar1.AddSeparator;

    // Built-in pickers. Each raises a typed selection event.
    fontName := TMSFNCToolBar1.AddFontNamePicker;
    fontName.SelectedFontName := 'Segoe UI';
    fontName.OnFontNameSelected := FontNameSelected;

    fontSize := TMSFNCToolBar1.AddFontSizePicker;
    fontSize.SelectedFontSize := 11;
    fontSize.OnFontSizeSelected := FontSizeSelected;

    textColor := TMSFNCToolBar1.AddColorPicker;
    textColor.OnColorSelected := TextColorSelected;
  finally
    TMSFNCToolBar1.EndUpdate;
  end;
  TMSFNCToolBar1.Build;
end;

procedure TForm1.FontNameSelected(Sender: TObject; AFontName: string);
begin
  Memo1.TextSettings.Font.Family := AFontName;
end;

procedure TForm1.FontSizeSelected(Sender: TObject; AFontSize: Single);
begin
  Memo1.TextSettings.Font.Size := AFontSize;
end;

procedure TForm1.TextColorSelected(Sender: TObject; AColor: TTMSFNCGraphicsColor);
begin
  Memo1.TextSettings.FontColor := AColor;
end;

Wrap runtime changes in BeginUpdate/EndUpdate and call Build once afterward so the toolbar re-arranges a single time instead of after every Add… call. Each picker raises a typed event — OnFontNameSelected hands you the font name, OnFontSizeSelected a Single, OnColorSelected a TTMSFNCGraphicsColor — so you apply the choice directly without reading the control back.

Design time or code

You can build the same toolbar at design time: drop the toolbar, right-click it, and use the context menu to add buttons, separators, and pickers, then set their properties in the Object Inspector. Runtime creation (shown above) is the better choice when the available commands depend on the current document, the user's role, or the selected object — build the command set from data instead of a fixed design-time layout.

Next steps

Each chapter takes one part of the bar above further:

Chapter	Covers
Buttons and pickers	Buttons, separators, and all five built-in pickers with their selection events.
Dropdowns and custom controls	Button dropdowns and hosting your own controls (a search box, a selector) on the toolbar.
Appearance and states	Fills and strokes, the large (touch) state, per-button layout, and bitmaps.
Compact mode and the options menu	Responsive collapsing on narrow surfaces and the overflow/options menu.
Docking toolbars	Stacking toolbars on a TTMSFNCDockPanel, the drag grip, and the floating popup toolbar.
API reference	Class, property, method, and event details.