Fifteen form inputs that look the same on every monitor and behave like native edits: a calendar with real booking rules, date and time pickers, a range slider, a colour picker, chips, stars, a spin edit, button, search, masked and currency edits, a multi-column lookup and a memo, plus a toggle switch for settings, an IP address edit, a time span edit, a font picker, a checked list box and a dual list box, and a NumPad and an on-screen keyboard for touch panels. Type a date in your own language, check the whole form before you save, switch to the dark theme with one property, and bind the editors to a dataset.
Sixteen features that make dates, amounts, codes, choices and tags quick to enter and hard to get wrong.
Fifteen inputs that cover the fields of real business forms, each one available for VCL, FireMonkey and .NET.
The controls
Booking forms, settings pages and filters keep asking for the same inputs: a calendar, a date or time picker, a slider, a colour, a list of tags, a star rating, a number with units, a masked code, a price, a choice from a long list, a search box and a comment. sgcEditors gives you all fifteen as one consistent family. Each control exists for VCL and FireMonkey with the same published properties and events, and for WinForms, WPF and Avalonia with the same names, so what you learn on one control applies to the others. They share one theme, one accent colour and one keyboard model. Drop them from the SGC Editors page of the palette and they look right on the first run.
TsgcVCLMonthCalendar, TsgcVCLDatePicker, TsgcVCLTimePicker, TsgcVCLDateTimePickerTsgcVCLRangeSlider and TsgcVCLSpinEdit for numbersTsgcVCLColorPicker, TsgcVCLTokenEdit, TsgcVCLRatingTsgcVCLButtonEdit, TsgcVCLSearchEdit, TsgcVCLMaskEdit, TsgcVCLCurrencyEdit, TsgcVCLLookupEdit, TsgcVCLMemoTsgcVCLCustomEditor
The controls
A hotel, a clinic or a rental desk never accepts just any date. The month calendar selects one date or, with SelectionMode set to esmRange, a range of days, and MaxRangeDays caps how long that range may be. Days outside MinDate and MaxDate, listed DisabledDates, DisabledWeekDays such as weekends, and any day your OnIsDateDisabled handler refuses are drawn struck through and cannot be picked. ISO 8601 week numbers and the month, year and decade views help users jump far ahead. The same calendar drives the drop down of the date pickers, so the rules apply everywhere a date is chosen.
SelectionMode: esmSingle or esmRangeMinDate, MaxDate and MaxRangeDaysDisabledDates, DisabledWeekDays, OnIsDateDisabledShowWeekNumbers for ISO week numbers
The controls Registered only
Filters for price, weight or distance read best as a range on a rail. The range slider picks a value between Min and Max with one thumb, or a range with two thumbs in RangeMode, horizontal or vertical. It draws ticks, labels and a tip with the value over the dragged thumb, and a click on the rail moves the nearest thumb there. The thumbs never cross, Step snaps the values and MinRange keeps a minimum gap, so the filter can never become empty by accident. Values and labels follow the locale of the control, including decimal and thousand separators.
RangeMode with Value and EndValueMin, Max, Step and MinRangeTickInterval, ShowLabels, ShowValueTipLabelFormat or OnFormatLabel for currenciesCommunity: one thumb is drawn and edited; EndValue is kept but not shown.
Read the help topic
The controls Registered only
Tags, recipients and skills are lists, not one line of text. The token edit draws every entry as a chip with a remove button, wraps the chips and scrolls when they do not fit. A delimiter, Enter, Tab or the focus loss turns the typed text into a chip, and pasting a, b, c makes three. OnValidateToken normalises or refuses each entry, and AllowDuplicates, CaseSensitive and MaxTokens set the rules. In Registered builds an auto complete list suggests entries as the user types. AddToken, RemoveToken and Clear change the list from code when you load or save a record.
Tokens holds the chips; Delimiters ends oneOnValidateToken and InvalidTokens check each entryAutoCompleteItems and AutoCompleteMinChars for suggestionsOnTokenAdded and OnTokenRemoved report changesCommunity: the chips, validation and limits work; the auto complete list never opens.
Read the help topicThe controls Registered only
Theme editors, chart settings and label designers need more than a fixed palette. The colour picker stacks a grid of swatches, a saturation and value square, a hue bar, an alpha bar and a row with a preview and a hex edit, and Parts chooses which of them appear. The hex edit accepts #RGB, #RGBA, #RRGGBB and #RRGGBBAA. The picker keeps the hue apart from the colour, so a grey keeps its hue and the square never jumps while the user drags. Define your brand palette as swatches and users still have the full picker one click away.
Parts with ecpSwatches, ecpHSV, ecpAlpha, ecpHexSwatches and SwatchColumns for your paletteSelectedColor as an ARGB valueOnChangeComplete when the user releases the mouseCommunity: swatches and hex only; the HSV square and the alpha bar are not drawn and the alpha is always $FF.
Read the help topicThe controls
Many fields need a button beside the text: browse for a file, open a dialog, clear the value. The button edit puts browse, drop-down, search, clear, plus, minus, text or owner drawn buttons on either side of a native edit, each with its own shortcut, and screen readers list every button by name and can press it. The search edit fires OnSearch after a pause in the typing or at once on Enter, and offers the previous searches again in a drop-down history. The memo is a themed multi line editor with a placeholder, a character counter with an optional limit, and a height that follows the lines between MinLines and MaxLines.
TsgcVCLButtonEdit with Buttons and OnButtonClickTsgcVCLSearchEdit with SearchDelay, History and OnSearchTsgcVCLMemo with ShowCounter, MaxLength, AutoHeightThe controls
Phone numbers, postcodes, account numbers and prices need a fixed format. The masked edit takes an input mask in the Delphi EditMask syntax or in the .NET MaskedTextBox syntax, so one mask behaves the same in a Delphi and in a .NET application: the literals stay fixed, each position accepts only its kind of character, and Text returns the value with or without the literals. The currency edit stores an exact Currency value, a decimal in .NET, without floating point. It shows the full currency format of the locale while it is not focused, and a grouped number with the symbol or the ISO code while the user types. MinValue, MaxValue and AllowNegative keep the amount in range.
EditMask and MaskSyntax: emxDelphi or emxDotNetIsComplete, EditText and SaveLiteralsValue, Decimals, CurrencyCode, SymbolModePositivePattern and NegativePatternThe controls
Customers, products and countries are chosen by name but stored by key. The lookup edit opens a multi-column drop-down with an optional header row and filters it as the user types. The edit shows the display column and KeyValue keeps the key, such as a country code behind a country name. The rows come from Items, one line per row with the cells split by |, or from OnGetItems for a search on a server, and OnNotInList decides what happens with a text that matches no row. In .NET the rows can also come from any collection through ItemsSource, DisplayMember and ValueMember, on WinForms, WPF and Avalonia.
Columns with Title, Width and AlignmentKeyColumn, DisplayColumn and KeyValueShowHeader, MatchMode, DropDownRowsItemsSource, SelectedValue in every editionThe controls
Settings pages and option panels turn features on and off. The toggle switch is the modern form of a check box: a rounded track with a round thumb that slides to the new state, an optional caption on either side and the On and Off text inside the track if you want it. It is custom drawn, takes the accent colour of the theme while on and scales with the DPI. A change by the user runs through OnChanging first, so a rule of your form can refuse it, and OnChange runs after every change, by the user or by code.
TsgcVCLToggleSwitch and TsgcFMXToggleSwitch, and in .NET TsgcWinFormsToggleSwitch, TsgcWpfToggleSwitch and TsgcAvaloniaToggleSwitchChecked, Caption, CaptionPosition, ShowText with OnText and OffText, ReadOnly and AnimatedTrackOnColor, TrackOffColor and ThumbColor, or the colours of the theme, and SwitchWidth and SwitchHeight for the size of the trackOnChanging cancels a change by the user with Allow, OnChange fires after every change, and Toggle changes the state as the user wouldChecked binds two way by default, and in WinForms it raises CheckedChanged for the data bindingThe toggle switch is in every edition, Community included.
Read the help topicThe controls
Network settings, device setup and firewall rules ask for addresses. In IPv4 the IP address edit shows four octet fields with dot separators and moves to the next field as the user types, so an address is as fast to enter as in a plain edit and is always well formed: a value above 255 is clamped, and the empty fields become 0 when the focus leaves. In IPv6 it is one text field that takes hex digits, colons and dots, validates the text and writes it in the RFC 5952 canonical form when the focus leaves, so 2001:DB8:0:0:0:0:2:1 becomes 2001:db8::2:1.
TsgcVCLIPAddressEdit and TsgcFMXIPAddressEdit, and in .NET TsgcWinFormsIPAddressEdit, TsgcWpfIPAddressEdit and TsgcAvaloniaIPAddressEditMode picks IPv4 or IPv6, Address is the value and Octets reads or sets one field of an IPv4 addressIsValid tells whether the address is complete, and with Required an empty or incomplete address shows the error frame of the themeOnChange fires after every change, Clear empties the address, and screen readers see an edit with the Value patternAddress binds two way by default, and in WinForms it raises AddressChanged for the data bindingThe IP address edit is in every edition, Community included.
Read the help topicThe controls
A timeout, an interval or a running time is a duration, not a time of day. The time span edit shows it in segments, days, hours, minutes, seconds and milliseconds, and the user edits one segment at a time by typing, with the arrow keys, the mouse wheel or the spin buttons. A step carries into the next segment, so 59 seconds plus one is one minute, and the highest segment shown is unbounded, so without days 50 hours show as 50:00:00.
TsgcVCLTimeSpanEdit and TsgcFMXTimeSpanEdit, and in .NET TsgcWinFormsTimeSpanEdit, TsgcWpfTimeSpanEdit and TsgcAvaloniaTimeSpanEditValue in milliseconds in Delphi and a TimeSpan in .NET, with the Days, Hours, Minutes, Seconds and Milliseconds partsSegments picks the segments shown and DisplayFormat writes the value as a clock, 1.02:30:05.250, or with units, 1d 2h 30m 5s 250msMinValue and MaxValue limit the value, AllowNegative takes a leading minus, and Increment and ShowButtons set the step and the spin buttonsValue binds two way by default, and in WinForms it raises ValueChanged for the data bindingThe time span edit is in every edition, Community included.
Read the help topicThe controls
Report designers, label editors and settings pages let the user choose a typeface. The font picker is an edit with a drop-down button whose list draws each font family in its own face. Typing filters the families, the most recently picked ones are listed first above a separator, and a filter keeps only the fixed pitch families, for a code editor or a terminal. The list comes from the platform until the application fills it.
TsgcVCLFontPicker and TsgcFMXFontPicker, and in .NET TsgcWinFormsFontPicker, TsgcWpfFontPicker and TsgcAvaloniaFontPickerFontName is the value, Fonts the family list and RefreshFonts reloads it after a font was installedShowPreview draws each name in its own face and PreviewText adds a sample text after the nameRecentCount and RecentFonts keep the recently picked families, for the application to save and load againFontFilter keeps the fixed pitch families, and Alt+Down opens the list, Enter or a click picks a family and Escape closes itFontName binds two way by defaultThe font picker is in every edition, Community included.
Read the help topicThe controls
The columns of a grid, the filters of a report or the modules of a licence are long lists of options. The checked list box is a scrolling list with a check box on every row, unchecked, checked or grayed, and an enabled flag per item. An optional Select all header row checks or unchecks every enabled item, and an optional filter box hides the rows that do not contain the typed text without changing their state. Only the rows in view are painted, so a list of 10000 items stays fast.
TsgcVCLCheckListBox and TsgcFMXCheckListBox, and in .NET TsgcWinFormsCheckListBox, TsgcWpfCheckListBox and TsgcAvaloniaCheckListBoxItems with Checked, State and ItemEnabled per item, and AllowGrayed for the third stateShowCheckAll shows the tri-state Select all row and ShowFilter the filter boxCheckAll, UncheckAll and CheckedCount, and OnClickCheck before OnChange for a change by the userCheckedItems and CheckedIndices are read only lists for the binding, and the ItemCheck event comes before ChangeThe checked list box is in every edition, Community included.
Read the help topicThe controls
Picking the columns of a report, the members of a group or the steps of a process means moving items from one list to another. The dual list box paints the Available list on the left and the Selected list on the right, with buttons between them that move the selected rows or all rows, and Up and Down buttons at the far side that reorder the Selected list. A double click or a drag moves an item to the other list, and a drag inside the Selected list reorders it.
TsgcVCLDualListBox and TsgcFMXDualListBox, and in .NET TsgcWinFormsDualListBox, TsgcWpfDualListBox and TsgcAvaloniaDualListBoxAvailableItems and SelectedItems, AvailableCaption and SelectedCaption, ShowCaptions and ShowReorderButtonsSortAvailable inserts the items moved back in order, ShowFilter adds a filter box over each list, and ReadOnly keeps the selection and refuses the movesMoveToSelected, MoveAllToSelected, MoveToAvailable, MoveAllToAvailable, MoveUp and MoveDown do what the buttons doOnMoving can keep an item where it is, and OnChange fires once per operationSelectedItems binds two way by default, and in WinForms it raises SelectedItemsChangedThe dual list box is in every edition, Community included.
Read the help topicFast entry for keyboard users, a check of every field before you save, the right language for every user, and a direct link to your datasets.
Typing, language and data
Data entry staff type dates, they do not click through calendars. Every text field of sgcEditors is a real edit control of the platform, so IME composition for Japanese, Chinese and Korean, the clipboard, undo, the context menu and screen readers all work. The parse is lenient: slashes, hyphens, dots, colons, commas or spaces separate the fields, month and day names of the locale are understood, and two digit years are pivoted. Up and Down roll the segment under the caret, and text that cannot be read fires OnParseError.
DisplayFormat with d, m, y, h, n, s segmentsOnParseError to accept or refuse odd inputAllowEmpty and TextHint for optional fieldsTyping, language and data
A touch panel on the shop floor has no keyboard, and the keyboard of the system covers half of the screen. The NumPad types a number with keys large enough for a finger or a glove. Drop a docked pad on the form and it writes to the control that has the focus, or attach a drop-down pad to a control and a tap on the control opens the pad under it. The target needs no change: the pad reads its range and decimals and writes the value as a user change, so the rounding, the limits and OnChange of the target run as if the user had typed.
TsgcVCLNumPad docked and TsgcVCLNumPadPopup as a drop-down, also for FireMonkey and in .NETAssociate picks the target, or the pad follows the focused controlThe NumPad is in every edition, Community included. It is part of the sgcUI HMI Pack for operator screens.
Read the help topicTyping, language and data
A kiosk, a self service terminal or an operator panel needs names, codes and notes as well as numbers. The on-screen keyboard is a full keyboard built on the same input path as the NumPad. Dock it on the form and it writes to the control that has the focus, or attach a drop-down keyboard that opens under an edit when the edit gets the focus. The keyboard never takes the focus, so the caret and the selection of the target stay where they are, and a standard edit, a memo and the sgcEditors controls need no change.
TsgcVCLKeyboard docked and TsgcVCLKeyboardPopup as a drop-down, also for FireMonkey and in .NET for WinForms, WPF and AvaloniaAssociate picks the target, or the keyboard follows the focus. AutoPopup, AutoPopupAll, PopupPosition and CloseOnEnter control the drop-downsgcKeyboardRegisterLayout, and a layout key that cycles through LayoutsOnKeyText changes or cancels the text before it is written, and OnEnterKey runs after EnterThe on-screen keyboard is in every edition, Community included. It is part of the sgcUI HMI Pack for operator screens and kiosks.
Read the help topic
Typing, language and data
International teams and multilingual products need dates that read naturally for every user. Each control has its own FormatSettings, filled from the user locale and changeable at run time, so two controls on one form can even use two locales. The calendar and pickers take day and month names, date and time formats, AM and PM strings and separators from it. FirstDayOfWeek and WeekNumbering follow the locale or your choice, and numbers use the right decimal and thousand separators. The units, hints and accessible names stay your own properties, so you translate them with the rest of the form.
FormatSettings per controlFirstDayOfWeek: efdLocale or forced efdMondayWeekNumbering: ewnISO8601 by defaultTsgcEditorLocale for headless models
Typing, language and data Registered only
Most Delphi business forms sit on a TDataSet, and wiring every editor by hand is repetitive. Ten data aware controls bind straight to a field through DataSource and DataField: a date picker, a time picker, a spin edit, a rating, a range slider whose second thumb binds EndDataField, a button edit, a masked edit that takes the EditMask of its field, a currency edit, a memo and a lookup edit that fills its multi-column list from a second dataset through ListSource, KeyField and ListField, like TDBLookupComboBox. Null fields show empty when AllowEmpty is on, and a required field reports an empty value to the validator. They bind through TsgcEditorFieldLink, which uses only the DB unit, so the FireMonkey versions need no LiveBindings. In .NET the WinForms editors bind a field through DataSource, DataMember and DataField with a BindingSource, a DataTable, a DataView or a List, and the WPF and Avalonia value properties bind two way. Drop them on an existing form and the dataset logic you already have keeps working unchanged.
TsgcVCLDBDatePicker, TsgcVCLDBTimePicker, TsgcVCLDBSpinEditTsgcVCLDBRating and TsgcVCLDBRangeSliderTsgcVCLDBButtonEdit, TsgcVCLDBMaskEdit, TsgcVCLDBCurrencyEdit, TsgcVCLDBMemo, TsgcVCLDBLookupEditDataSource, DataField, EndDataField; lookup lists through ListSource, KeyField, ListFieldDataSource, DataMember, DataField; WPF and Avalonia: value properties bind two wayIn the .NET Community packages the WinForms editors have no DataSource, DataMember and DataField; WPF and Avalonia binding and the lookup ItemsSource work in both editions.
Read the help topicTyping, language and data
A form is only done when every field is right. The validator of sgcUICore checks the controls of a form against rules: required, range, length, regular expression, email, compare with another field and your own code. It finds the controls the way Smart Paste does, so it checks the sgcEditors controls and the standard edits, memos, combos, check boxes and pickers alike, on VCL, FireMonkey, WinForms, WPF and Avalonia. The masked edit reports an incomplete value and the lookup edit a text that is not in the list with no rule at all. Errors show as a frame in the error colour of the theme, an icon with the message as its tooltip and an optional summary list, and screen readers hear the message with the field. In .NET the validator also shows the errors of your data layer: IDataErrorInfo and INotifyDataErrorInfo on WinForms and WPF, the data validation errors on Avalonia.
TsgcVCLValidator, TsgcFMXValidator, TsgcWinFormsValidator, TsgcWpfValidator, TsgcAvaloniaValidatoruvrRequired, uvrRange, uvrLength, uvrRegex, uvrEmail, uvrCompare, uvrCustomTrigger: uvtExit by default, uvtChange or uvtManual; Validate before you saveTsgcVCLValidationSummary lists the errors and focuses the field on a clickIn every edition, Community included. The regular expressions match the same texts on Delphi 7 to 13 and on .NET.
Read the help topicTyping, language and data
The layout control arranges the controls of a form, sgcEditors and standard controls alike, in groups, tabbed groups and columns, with the captions aligned to one width, splitters the user can drag and right to left layouts, and SaveLayout keeps the arrangement as JSON. The data form builds on it. Point it at a TDataSet, or bind an object of your own class, and it creates one sgcEditors control per field, the validation rules of every field, a summary of the errors and a navigator to browse, add, edit, delete and post records. Smart Paste fills the whole record from a pasted text, such as an e-mail signature or an address block, and marks the fields it filled. In .NET the WinForms, WPF and Avalonia data forms take a DataTable, a list or an object.
TsgcVCLLayoutControl, TsgcFMXLayoutControl; SaveLayout and LoadLayoutTsgcVCLDataForm, TsgcFMXDataForm, TsgcWinFormsDataForm, TsgcWpfDataForm, TsgcAvaloniaDataFormFields: caption, kind, required, limits, group, tab and order of each field; BindObject for a classSmartPasteFromClipboard, SmartPasteUndo and a Smart Paste button on the navigatorThe layout control is in every edition, Community included; Delphi Community has no design time package for sgcEditors, so there it is created in code. The data form, its validation rules and its Smart Paste are Registered only.
Read the help topicThe details reviewers check: no mouse needed, sharp on every monitor, and a look that matches your application.
Keyboard, DPI and themes
Laptops at 150 percent next to external monitors at 100 percent are normal now, and blurry inputs look cheap. sgcEditors lays every control out in logical pixels at 96 DPI and draws it at the scale of the screen, with nothing to do in your code. When a VCL form moves to a monitor with another DPI, the inner edit and its font scale with the control, and a drop down is drawn at the DPI of the monitor it opens on. FireMonkey rasters follow the scale of the scene for Retina and Android.
WM_DPICHANGEDSaveToPNG takes a scale for sharp images
Keyboard, DPI and themes
No function of sgcEditors needs a mouse. The drawn controls take the focus themselves and the text controls forward it to their inner edit, and a focused control draws a 2 pixel focus ring in the accent colour. In the calendar the arrows move by a day or a week and skip disabled days, PageUp and PageDown move by a month, and Shift extends a range. In the pickers F4 or Alt+Down opens the drop down and Escape restores the value. The spin edit steps with Up, Down, PageUp and PageDown.
Increment and LargeIncrement for the spin edit
Keyboard, DPI and themes
Forms look finished when every input follows the same theme. Each control has a Theme, an AccentColor and a TextStyle, and the colours of the frame, hover, pressed state, selection and disabled state are derived from them, so one property changes the whole look. The tokens are the ones every sgcUI product uses, so editors placed in an sgcDashboard tile or under an sgcToolbar match without extra work. A disabled control blends towards the background on its own. Switch the theme at run time and every editor repaints, ready for a dark mode setting.
Theme: utDefault (default, follows the application theme), utLight or utDarkAccentColor for selection, thumbs, fill and focus ringTextStyle for size, bold and coloursgcEditors inside the sgcUI suite demos: complete applications that run offline with built-in simulated data.
Rating and credit limit editors on the customer contact card.
Altamira ERP →
Date and time pickers set the visible window of the process trends.
Altamira Plant →
A booking form needs a stay range that respects closed days, a number of guests, an arrival time and maybe a rating of the last visit. The month calendar enforces MinDate, MaxRangeDays and disabled days, the spin edit counts guests, the time picker accepts typed times and the rating collects feedback, all in one theme. The BookingForm demo builds a hotel booking from seven editors with a live summary.
Line of business applications edit records all day. The ten data aware editors bind to a TDataSet field through DataSource and DataField, the range slider binds both ends, and null fields show empty. Combined with real keyboard entry and lenient parsing, operators type values quickly and the dataset receives clean data. The DataAware demo puts the ten editors on a TClientDataSet next to a TDBGrid and a TDBNavigator.
Planning tools used in several countries must show the right week start, week numbers and month names to every user. Each control carries its own FormatSettings, so one form can show a German calendar next to an English one, and FirstDayOfWeek and WeekNumbering follow the locale or your rule. The Calendar demo switches between English, German, Spanish, French and Italian with a range limited to 14 days.
The same API in Delphi, C++ Builder and C#: a rating, a range slider and a token edit, all reporting through OnChange.
uses
SysUtils, Classes, Controls, Forms, StdCtrls,
sgcEditors_Types, sgcEditors_VCL_Value, sgcEditors_VCL_Token;
type
TFeedbackForm = class(TComponent)
public
Stars: TsgcVCLRating;
Budget: TsgcVCLRangeSlider;
Tags: TsgcVCLTokenEdit;
Summary: TLabel;
procedure EditorChange(Sender: TObject);
end;
procedure TFeedbackForm.EditorChange(Sender: TObject);
begin
// OnChange fires for every new value: clicked, dragged or typed
Summary.Caption := Format('%.1f stars, budget %.0f to %.0f, %d tags',
[Stars.Value, Budget.Value, Budget.EndValue, Tags.Tokens.Count]);
end;
function CreateFeedbackForm(aForm: TForm): TFeedbackForm;
begin
Result := TFeedbackForm.Create(aForm);
Result.Stars := TsgcVCLRating.Create(aForm);
Result.Stars.Parent := aForm;
Result.Stars.SetBounds(16, 16, 200, 32);
Result.Stars.Glyph := ergHeart;
Result.Stars.Precision := erpHalf;
Result.Stars.Value := 3.5;
Result.Stars.OnChange := Result.EditorChange;
Result.Budget := TsgcVCLRangeSlider.Create(aForm);
Result.Budget.Parent := aForm;
Result.Budget.SetBounds(16, 60, 320, 48);
Result.Budget.Max := 500;
Result.Budget.Step := 10;
Result.Budget.RangeMode := True;
Result.Budget.Value := 80;
Result.Budget.EndValue := 240;
Result.Budget.ShowLabels := True;
Result.Budget.OnChange := Result.EditorChange;
Result.Tags := TsgcVCLTokenEdit.Create(aForm);
Result.Tags.Parent := aForm;
Result.Tags.SetBounds(16, 120, 320, 64);
Result.Tags.TextHint := 'Add a tag';
Result.Tags.AutoCompleteItems.CommaText := 'Breakfast,Parking,Pool';
Result.Tags.AddToken('Breakfast');
Result.Tags.OnChange := Result.EditorChange;
Result.Summary := TLabel.Create(aForm);
Result.Summary.Parent := aForm;
Result.Summary.SetBounds(16, 196, 320, 20);
Result.EditorChange(nil);
end;#include <vcl.h>
#include "sgcEditors_Types.hpp"
#include "sgcEditors_VCL_Value.hpp"
#include "sgcEditors_VCL_Token.hpp"
class TFeedbackHandler : public TObject
{
public:
TsgcVCLRating *Stars;
TsgcVCLRangeSlider *Budget;
TsgcVCLTokenEdit *Tags;
TLabel *Summary;
void __fastcall EditorChange(TObject *Sender);
};
void __fastcall TFeedbackHandler::EditorChange(TObject *Sender)
{
// OnChange fires for every new value: clicked, dragged or typed
Summary->Caption = FormatFloat("0.0", Stars->Value) + " stars, budget " +
FormatFloat("0", Budget->Value) + " to " + FormatFloat("0", Budget->EndValue) +
", " + IntToStr(Tags->Tokens->Count) + " tags";
}
TFeedbackHandler * __fastcall CreateFeedbackForm(TForm *Form)
{
TFeedbackHandler *H = new TFeedbackHandler();
H->Stars = new TsgcVCLRating(Form);
H->Stars->Parent = Form;
H->Stars->SetBounds(16, 16, 200, 32);
H->Stars->Glyph = ergHeart;
H->Stars->Precision = erpHalf;
H->Stars->Value = 3.5;
H->Stars->OnChange = H->EditorChange;
H->Budget = new TsgcVCLRangeSlider(Form);
H->Budget->Parent = Form;
H->Budget->SetBounds(16, 60, 320, 48);
H->Budget->Max = 500;
H->Budget->Step = 10;
H->Budget->RangeMode = true;
H->Budget->Value = 80;
H->Budget->EndValue = 240;
H->Budget->ShowLabels = true;
H->Budget->OnChange = H->EditorChange;
H->Tags = new TsgcVCLTokenEdit(Form);
H->Tags->Parent = Form;
H->Tags->SetBounds(16, 120, 320, 64);
H->Tags->TextHint = "Add a tag";
H->Tags->AutoCompleteItems->CommaText = "Breakfast,Parking,Pool";
H->Tags->AddToken("Breakfast");
H->Tags->OnChange = H->EditorChange;
H->Summary = new TLabel(Form);
H->Summary->Parent = Form;
H->Summary->SetBounds(16, 196, 320, 20);
H->EditorChange(NULL);
return H;
}using System;
using System.Drawing;
using System.Windows.Forms;
using esegece.sgcUICore;
using esegece.sgcEditors;
public class FeedbackForm : Form
{
private readonly TsgcWinFormsRating stars;
private readonly TsgcWinFormsRangeSlider budget;
private readonly TsgcWinFormsTokenEdit tags;
private readonly Label summary = new Label { Location = new Point(12, 196), Size = new Size(320, 20) };
public FeedbackForm()
{
ClientSize = new Size(360, 230);
stars = new TsgcWinFormsRating { Location = new Point(12, 12), Size = new Size(200, 32) };
stars.Glyph = TsgcEditorRatingGlyph.ergHeart;
stars.Precision = TsgcEditorRatingPrecision.erpHalf;
stars.Value = 3.5;
budget = new TsgcWinFormsRangeSlider { Location = new Point(12, 56), Size = new Size(320, 48) };
budget.BeginInit();
budget.Max = 500;
budget.Step = 10;
budget.RangeMode = true;
budget.Value = 80;
budget.EndValue = 240;
budget.EndInit();
budget.ShowLabels = true;
tags = new TsgcWinFormsTokenEdit { Location = new Point(12, 116), Size = new Size(320, 64) };
tags.TextHint = "Add a tag";
foreach (string s in new[] { "Breakfast", "Parking", "Pool" })
tags.AutoCompleteItems.Add(s);
tags.Tokens.Add("Breakfast");
// OnChange fires for every new value: clicked, dragged or typed
foreach (TsgcWinFormsCustomEditor e in new TsgcWinFormsCustomEditor[] { stars, budget, tags })
{
e.OnChange = s => ShowSummary();
Controls.Add(e);
}
Controls.Add(summary);
ShowSummary();
}
private void ShowSummary() =>
summary.Text = $"{stars.Value:0.0} stars, budget {budget.Value:0} to {budget.EndValue:0}, {tags.Tokens.Count} tags";
}dotnet add package esegece.sgcEditors.WinFormsA lookup edit, a masked edit and a currency edit checked by the validator of sgcUICore. Call Validate when the user saves: it shows every error and focuses the first invalid field.
function CreateOrderValidator(aForm: TForm; aCountry: TsgcVCLLookupEdit;
aPhone: TsgcVCLMaskEdit; aPrice: TsgcVCLCurrencyEdit): TsgcVCLValidator;
var
oRule: TsgcVCLValidationRule;
begin
// cells: key | name, the edit shows the name and KeyValue keeps the code
aCountry.Items.Add('ES|Spain');
aCountry.Items.Add('FR|France');
aCountry.Items.Add('DE|Germany');
aCountry.KeyColumn := 0;
aCountry.DisplayColumn := 1;
// Delphi EditMask syntax: the user types the digits, the literals stay
aPhone.EditMask := '(000) 000-0000;0;_';
aPrice.CurrencyCode := 'EUR';
Result := TsgcVCLValidator.Create(aForm);
Result.Container := aForm;
Result.Display := [uvdBorder, uvdIcon];
oRule := TsgcVCLValidationRule(Result.Rules.Add);
oRule.Control := aCountry;
oRule.Kind := uvrRequired;
oRule := TsgcVCLValidationRule(Result.Rules.Add);
oRule.Control := aPrice;
oRule.Kind := uvrRange;
oRule.MinValue := '1';
oRule.MaxValue := '10000';
end;public class Country
{
public string Code { get; set; }
public string Name { get; set; }
}
public class OrderForm : Form
{
private readonly TsgcWinFormsLookupEdit country = new TsgcWinFormsLookupEdit();
private readonly TsgcWinFormsMaskEdit phone = new TsgcWinFormsMaskEdit();
private readonly TsgcWinFormsCurrencyEdit price = new TsgcWinFormsCurrencyEdit();
private readonly TsgcWinFormsValidator validator = new TsgcWinFormsValidator();
public OrderForm()
{
country.SetBounds(16, 16, 240, 28);
phone.SetBounds(16, 56, 240, 28);
price.SetBounds(16, 96, 240, 28);
Controls.AddRange(new Control[] { country, phone, price });
// any list: the edit shows Name, SelectedValue returns Code
country.ItemsSource = new List<Country>
{
new Country { Code = "ES", Name = "Spain" },
new Country { Code = "FR", Name = "France" }
};
country.DisplayMember = "Name";
country.ValueMember = "Code";
phone.EditMask = "(000) 000-0000"; // MaskedTextBox syntax by default
price.Decimals = 2;
validator.Container = this;
validator.Rules.Add(new TsgcWinFormsValidationRule
{ Control = country, Kind = TsgcUIValidationRuleKind.uvrRequired });
validator.Rules.Add(new TsgcWinFormsValidationRule
{ Control = price, Kind = TsgcUIValidationRuleKind.uvrRange, MinValue = "1" });
}
public bool Save() => validator.Validate();A TsgcVCLDataForm on an open dataset creates the editors, the validation rules and the navigator. Set the kind and the group of a field, rebuild, and the Smart Paste button of the navigator fills the record from the clipboard.
uses
Forms, Controls, DB,
sgcUICore_AI, sgcEditors_DataForm, sgcEditors_VCL_DataForm;
function CreateCustomerForm(aOwner: TForm; aSource: TDataSource;
aProvider: TsgcUIAIProvider): TsgcVCLDataForm;
var
oField: TsgcDataFormField;
begin
Result := TsgcVCLDataForm.Create(aOwner);
Result.Parent := aOwner;
Result.Align := alClient;
// an open dataset: one field, one editor and one rule per TField
Result.DataSource := aSource;
oField := Result.Fields.FindField('EMAIL');
oField.Kind := edfEmail;
oField.Required := True;
oField.Group := 'Contact';
Result.Fields.FindField('PHONE').Group := 'Contact';
Result.RebuildEditors;
// the Smart Paste button of the navigator fills every field from the
// clipboard; without a provider a local parser reads "Name: value" lines
Result.Provider := aProvider;
end;Gallery, Calendar, BookingForm, Validation and DataAware ship for VCL and C++ Builder, plus GalleryFMX and ValidationFMX for FireMonkey; the .NET edition has Gallery and Validation for WinForms, WPF and Avalonia, BookingForm, BindingWpf and DataAwareWinForms.
All fifteen editors on one form with a theme switch, a read only switch, an event log and PNG export. The fastest way to try every control and its keyboard behaviour.
A range of up to 14 days, week numbers, disabled weekends and holidays, and a locale switch between English, German, Spanish, French and Italian.
A hotel booking with a live summary of the stay, guests and arrival time, a country lookup, a masked phone number and a validator that checks the guest fields before the booking. It shows how the controls work together on a real form.
The ten data aware editors on a TClientDataSet with a TDBGrid and a TDBNavigator, with a lookup edit filled from a second dataset and a validator for the required fields. The data aware controls need the Registered or Trial edition.
The gallery built with the FireMonkey editors, for Windows and Android, with the same properties and events as the VCL controls.
Every rule kind on standard and sgcEditors controls, the three triggers, the border and icon display and the summary list. ValidationFMX does the same in FireMonkey, and the .NET edition has Validation, ValidationWpf and ValidationAvalonia.
Ready to run executables of every sgcUI product, nothing to install.
Download sgcUI_bin.zip →Five QuickStart demos for Delphi (VCL) ship in Demos\Editors\Delphi\00.QuickStart. The PDF guide walks through them step by step: the first editors on a form, reading and writing values, themes, validation, and a contacts application built on a data form.
sgcEditors is in every sgcUI edition, and it is also sold on its own. sgcEditors is also included in the All-Access bundle.
€199 / developer, full source code, 1 year of updates.
Buy sgcEditors → See pricing →The free Community edition (esegece.sgcEditors.Community on NuGet) has all fifteen controls, the layout control and the validation framework, but the colour picker has no HSV square and alpha bar, the token edit has no auto-complete list, the range slider has one thumb, and there are no data-aware editors, no data form and no WinForms DataSource binding.
| Feature | Community (free) | Registered |
|---|---|---|
| All fifteen controls for VCL, FireMonkey and .NET | ✓ | ✓ |
| Validation: rules, error display, summary (sgcUICore) | ✓ | ✓ |
| Lookup edit lists from ItemsSource in WinForms, WPF and Avalonia | ✓ | ✓ |
| Native text entry, lenient parsing, localisation | ✓ | ✓ |
| Calendar ranges, limits and disabled days | ✓ | ✓ |
| Keyboard, DPI, themes and headless output | ✓ | ✓ |
| NumPad for touch panels | ✓ | ✓ |
| On-screen keyboard with ten layouts | ✓ | ✓ |
| Toggle switch for settings | ✓ | ✓ |
| IP address edit for IPv4 and IPv6 | ✓ | ✓ |
| Time span edit for durations | ✓ | ✓ |
| Font picker with a preview of every family | ✓ | ✓ |
| Checked list box with Select all and a filter | ✓ | ✓ |
| Dual list box with move and reorder buttons | ✓ | ✓ |
| Layout control with layouts saved as JSON (created in code in Delphi Community) | ✓ | ✓ |
| Two thumb range slider | − | ✓ |
| HSV square and alpha bar of the colour picker | − | ✓ |
| Auto complete list of the token edit | − | ✓ |
| Data aware editors (Delphi and C++ Builder) | − | ✓ |
| WinForms DataSource, DataMember and DataField | − | ✓ |
| Data form from a TDataSet, a class, a DataTable or an object, with validation and Smart Paste | − | ✓ |
Every control exists for VCL, FireMonkey, WinForms, WPF and Avalonia with the same properties and events.
| Control | VCL and C++ Builder | FireMonkey | .NET |
|---|---|---|---|
| Month calendar | TsgcVCLMonthCalendar | TsgcFMXMonthCalendar | TsgcWinFormsMonthCalendar |
| Date picker | TsgcVCLDatePicker | TsgcFMXDatePicker | TsgcWinFormsDatePicker |
| Time picker | TsgcVCLTimePicker | TsgcFMXTimePicker | TsgcWinFormsTimePicker |
| Date and time picker | TsgcVCLDateTimePicker | TsgcFMXDateTimePicker | TsgcWinFormsDateTimePicker |
| Range slider | TsgcVCLRangeSlider | TsgcFMXRangeSlider | TsgcWinFormsRangeSlider |
| Colour picker | TsgcVCLColorPicker | TsgcFMXColorPicker | TsgcWinFormsColorPicker |
| Token edit | TsgcVCLTokenEdit | TsgcFMXTokenEdit | TsgcWinFormsTokenEdit |
| Rating | TsgcVCLRating | TsgcFMXRating | TsgcWinFormsRating |
| Spin edit | TsgcVCLSpinEdit | TsgcFMXSpinEdit | TsgcWinFormsSpinEdit |
| Button edit | TsgcVCLButtonEdit | TsgcFMXButtonEdit | TsgcWinFormsButtonEdit |
| Search edit | TsgcVCLSearchEdit | TsgcFMXSearchEdit | TsgcWinFormsSearchEdit |
| Masked edit | TsgcVCLMaskEdit | TsgcFMXMaskEdit | TsgcWinFormsMaskEdit |
| Currency edit | TsgcVCLCurrencyEdit | TsgcFMXCurrencyEdit | TsgcWinFormsCurrencyEdit |
| Lookup edit | TsgcVCLLookupEdit | TsgcFMXLookupEdit | TsgcWinFormsLookupEdit |
| Memo | TsgcVCLMemo | TsgcFMXMemo | TsgcWinFormsMemo |
| Toggle switch | TsgcVCLToggleSwitch | TsgcFMXToggleSwitch | TsgcWinFormsToggleSwitch |
| IP address edit | TsgcVCLIPAddressEdit | TsgcFMXIPAddressEdit | TsgcWinFormsIPAddressEdit |
| Time span edit | TsgcVCLTimeSpanEdit | TsgcFMXTimeSpanEdit | TsgcWinFormsTimeSpanEdit |
| Font picker | TsgcVCLFontPicker | TsgcFMXFontPicker | TsgcWinFormsFontPicker |
| Checked list box | TsgcVCLCheckListBox | TsgcFMXCheckListBox | TsgcWinFormsCheckListBox |
| Dual list box | TsgcVCLDualListBox | TsgcFMXDualListBox | TsgcWinFormsDualListBox |
| NumPad | TsgcVCLNumPad, TsgcVCLNumPadPopup | TsgcFMXNumPad, TsgcFMXNumPadPopup | TsgcWinFormsNumPad, TsgcWinFormsNumPadPopup |
| On-screen keyboard | TsgcVCLKeyboard, TsgcVCLKeyboardPopup | TsgcFMXKeyboard, TsgcFMXKeyboardPopup | TsgcWinFormsKeyboard, TsgcWinFormsKeyboardPopup |
| Layout control | TsgcVCLLayoutControl | TsgcFMXLayoutControl | TsgcWinFormsLayoutControl |
| Data form | TsgcVCLDataForm | TsgcFMXDataForm | TsgcWinFormsDataForm |
The .NET column shows the WinForms names, the same controls exist for WPF and Avalonia with the prefixes TsgcWpf and TsgcAvalonia. Non visual helpers: TsgcEditorModel, TsgcEditorLocale and TsgcEditorFieldLink. The ten data-aware editors (TsgcVCLDBDatePicker, TsgcVCLDBTimePicker, TsgcVCLDBSpinEdit, TsgcVCLDBRating, TsgcVCLDBRangeSlider, TsgcVCLDBButtonEdit, TsgcVCLDBMaskEdit, TsgcVCLDBCurrencyEdit, TsgcVCLDBMemo and TsgcVCLDBLookupEdit, plus the FireMonkey twins) are Registered only and exist for Delphi and C++ Builder; in .NET the Registered WinForms editors bind through DataSource, DataMember and DataField. The layout control is in every edition, and the data form is Registered only. The validator and the validation summary are part of sgcUICore: TsgcVCLValidator, TsgcFMXValidator, TsgcWinFormsValidator, TsgcWpfValidator and TsgcAvaloniaValidator.
| Target | Component | Platforms |
|---|---|---|
| Delphi 7 to 13, VCL | TsgcVCL editors | Win32, and Win64 from XE2 |
| Delphi XE6 to 13, FireMonkey | TsgcFMX editors | Windows, macOS, iOS and Android |
| C++ Builder 2007 to 13 | TsgcVCL and TsgcFMX editors | Generated .hpp headers and static libraries |
| Delphi 10.2 to 13, framework neutral | Models, the layout model and its JSON, headless PNG and SVG output | Linux64 (no Linux controls) |
| .NET Framework 4.7.2, .NET 8, 9 and 10 | WinForms, WPF and Avalonia editors | Windows desktop and Avalonia targets |
Yes. Every text field is a real edit of the platform, a borderless TEdit in VCL and an FMX TEdit in FireMonkey, so IME composition for Japanese, Chinese and Korean, the clipboard, undo, the context menu and screen readers work without special code. See Text entry and IME.
Yes. MinDate and MaxDate set the limits, DisabledDates lists holidays, DisabledWeekDays blocks weekends and OnIsDateDisabled decides any other rule. Disabled days are struck through, skipped by the keyboard and refused when typed into a picker. The Calendar demo blocks weekends and two holidays to show the rules at work.
Ten, in Delphi and C++ Builder: the date picker, time picker, spin edit, rating, range slider, button edit, masked edit, currency edit, memo and lookup edit, each as VCL and FireMonkey control. They need the Registered or Trial edition. In .NET the Registered WinForms editors bind a field through DataSource, DataMember and DataField, and in both editions the controls bind with the data binding of WinForms, WPF and Avalonia and the lookup edit takes its rows from ItemsSource.
All fifteen controls and the validation framework are included. Community leaves out the HSV square and alpha bar of the colour picker, the auto complete list of the token edit, the second thumb of the range slider and the DataSource, DataMember and DataField members of the WinForms editors. The Delphi data aware editors are Registered only. See Editions.
Yes. Drop the validator of sgcUICore on the form, set its Container and add rules: required, range, length, regular expression, email, compare and custom. It checks the sgcEditors controls and the standard edits, memos, combos, check boxes and pickers, shows a frame, an icon and an optional summary, and screen readers hear the messages. Call Validate before you save. It is in every edition, for VCL, FireMonkey, WinForms, WPF and Avalonia. See Validation.
Yes. Each control keeps its own copy of FormatSettings, so day and month names, formats, separators and the first day of the week can differ per control. The Calendar demo switches between English, German, Spanish, French and Italian at run time, and week numbers follow ISO 8601 unless you choose otherwise.
For dates and times, yes: TsgcVCLDatePicker, TsgcVCLTimePicker and TsgcVCLDateTimePicker are typed edits with a drop down calendar or time list. On top they parse month names leniently, honour limits and disabled days, follow the sgcUI theme and are drawn at the DPI of each monitor.
Yes. C++ Builder 2007 and 2010 to 13 use the same VCL and FireMonkey controls through generated headers and libraries, and every Delphi demo, including DataAware, ships as a C++ Builder project too. The code tab on this page shows the same form in Delphi, C++ Builder and C#, and each sample was compiled before it was published.
Introduction, Quick Start VCL, Quick Start FireMonkey, Quick Start data aware, Controls, Month calendar, Lookup edit, Masks, Validation, Text entry and IME, Localisation, Editions, Platforms.
Introduction, Quick Start C++ Builder, Controls, DB date picker, Validation.
.NET overview, Quick Start WinForms, Quick Start WPF, Quick Start Avalonia, Data binding, Validation.
Delphi, C++ Builder and .NET, covering every sgcUI product.
Edit the selected row of a live data grid in a form of themed editors, with the same accent colour and keyboard model.
Explore sgcGrid →
Let users pick the dates and times of tasks and appointments with the calendar and pickers before they land in the scheduler.
Explore sgcPlanner →
Frame your data entry forms with a toolbar and a status bar that follow the same light or dark theme.
Explore sgcToolbar →