预订和预约窗体
预订窗体需要一个遵守休息日的入住范围、客人数量、到达时间,也许还有对上次入住的评分。月历强制执行 MinDate、MaxRangeDays 和禁用日期,数值调节框统计客人数,时间选择器接受键入的时间,评分收集反馈,全都使用同一个主题。BookingForm 演示用七个编辑器搭建了一个酒店预订,并带有实时摘要。
- 日历范围
- 数值调节框
- 评分
九款窗体输入控件,在每台显示器上外观一致,行为如同原生编辑框:带真实预订规则的日历、日期和时间选择器、范围滑块、颜色选择器、标签、星级评分和数值调节框。用您自己的语言输入日期,一个属性即可切换到深色主题,还能将编辑器绑定到数据集。
十一项功能,让日期、范围、颜色和标签输入快捷又不易出错。
九款输入控件涵盖真实业务窗体的各类字段,每一款都提供 VCL、FireMonkey 和 .NET 版本。
控件一览
预订窗体、设置页面和筛选器总是需要同样的输入:日历、日期或时间选择器、滑块、颜色、标签列表、星级评分和带单位的数字。sgcEditors 将这九款控件作为一个风格统一的系列提供给您。每款控件都有 VCL 和 FireMonkey 版本,发布的属性和事件相同,也有 WinForms、WPF 和 Avalonia 版本,名称相同,因此您在一款控件上学到的知识适用于其他所有控件。它们共用同一个主题、同一种强调色和同一套键盘模型。从工具面板的 SGC Editors 页拖放它们,第一次运行就外观正确。
TsgcVCLMonthCalendar、TsgcVCLDatePicker、TsgcVCLTimePicker、TsgcVCLDateTimePickerTsgcVCLRangeSlider 和用于数字的 TsgcVCLSpinEditTsgcVCLColorPicker、TsgcVCLTokenEdit、TsgcVCLRatingTsgcVCLCustomEditor
控件一览
酒店、诊所或租赁柜台从不会接受任意日期。月历可选择单个日期,或在 SelectionMode 设为 esmRange 时选择一段日期范围,并由 MaxRangeDays 限制范围的最大天数。超出 MinDate 和 MaxDate 的日期、DisabledDates 列出的日期、周末等 DisabledWeekDays,以及您的 OnIsDateDisabled 处理程序拒绝的任何日期,都会以删除线绘制且无法选择。ISO 8601 周数以及月、年和十年视图可帮助用户快速跳转到很远的日期。同一个日历也驱动日期选择器的下拉面板,因此凡是选择日期的地方,规则都同样适用。
SelectionMode:esmSingle 或 esmRangeMinDate、MaxDate 和 MaxRangeDaysDisabledDates、DisabledWeekDays、OnIsDateDisabledShowWeekNumbers 显示 ISO 周数
控件一览 仅限注册版
价格、重量或距离的筛选器,用滑轨上的范围来表达最直观。范围滑块可用一个滑块在 Min 和 Max 之间选取一个值,或在 RangeMode 下用两个滑块选取一个范围,水平或垂直均可。它会绘制刻度、标签,并在被拖动的滑块上方显示数值提示,点击滑轨会把最近的滑块移到该处。两个滑块绝不会交叉,Step 使数值对齐步长,MinRange 保持最小间隔,因此筛选范围不会意外变空。数值和标签遵循控件的区域设置,包括小数点和千位分隔符。
RangeMode 配合 Value 和 EndValueMin、Max、Step 和 MinRangeTickInterval、ShowLabels、ShowValueTipLabelFormat 或 OnFormatLabel 用于货币社区版:只绘制并编辑一个滑块;EndValue 会保留但不显示。
阅读帮助主题
控件一览 仅限注册版
标签、收件人和技能是列表,而不是一行文字。标记编辑框将每个条目绘制为带删除按钮的胶囊,胶囊会自动换行,放不下时可滚动。分隔符、Enter、Tab 或失去焦点都会把输入的文字变成胶囊,粘贴 a, b, c 会生成三个。OnValidateToken 可规范化或拒绝每个条目,AllowDuplicates、CaseSensitive 和 MaxTokens 设置规则。在注册版中,自动补全列表会在用户输入时给出建议。加载或保存记录时,可用 AddToken、RemoveToken 和 Clear 通过代码修改列表。
Tokens 保存胶囊;Delimiters 结束一个胶囊OnValidateToken 和 InvalidTokens 检查每个条目AutoCompleteItems 和 AutoCompleteMinChars 用于建议OnTokenAdded 和 OnTokenRemoved 报告变化社区版:胶囊、验证和限制可用;自动补全列表不会打开。
阅读帮助主题控件一览 仅限注册版
主题编辑器、图表设置和标签设计器需要的不只是固定调色板。颜色选择器将色板网格、饱和度与明度方块、色相条、透明度条,以及带预览和十六进制编辑框的一行叠放在一起,由 Parts 选择显示其中哪些部分。十六进制编辑框接受 #RGB、#RGBA、#RRGGBB 和 #RRGGBBAA。选择器将色相与颜色分开保存,因此灰色也保留其色相,用户拖动时方块不会跳动。您可以把品牌调色板定义为色板,用户仍可一键使用完整的选择器。
Parts 配合 ecpSwatches、ecpHSV、ecpAlpha、ecpHexSwatches 和 SwatchColumns 用于您的调色板SelectedColor 为 ARGB 值OnChangeComplete社区版:仅有色板和十六进制;不绘制 HSV 方块和透明度条,透明度始终为 $FF。
阅读帮助主题为键盘用户提供快速输入,为每位用户提供合适的语言,并可直接链接到您的数据集。
输入、语言与数据
数据录入人员是键入日期的,而不是在日历里一路点击。sgcEditors 的每个文本字段都是平台的真实编辑控件,因此日语、中文和韩语的输入法组合、剪贴板、撤销、上下文菜单和屏幕阅读器都能正常工作。解析很宽松:斜杠、连字符、点、冒号、逗号或空格都可分隔各字段,区域设置中的月份和星期名称也能识别,两位数年份会按基准年处理。上下键可滚动光标所在的部分,无法解析的文本会触发 OnParseError。
DisplayFormat 使用 d、m、y、h、n、s 段OnParseError 用于接受或拒绝异常输入AllowEmpty 和 TextHint 用于可选字段
输入、语言与数据
国际化团队和多语言产品需要让每位用户读起来都自然的日期。每个控件都有自己的 FormatSettings,由用户区域设置填充,并可在运行时更改,因此同一窗体上的两个控件甚至可以使用两种区域设置。日历和选择器从中获取日名和月名、日期和时间格式、AM 和 PM 字符串以及分隔符。FirstDayOfWeek 和 WeekNumbering 遵循区域设置或您的选择,数字则使用正确的小数点和千位分隔符。单位、提示和无障碍名称仍是您自己的属性,因此可以和窗体的其余部分一起翻译。
FormatSettingsFirstDayOfWeek:efdLocale 或强制 efdMondayWeekNumbering:默认为 ewnISO8601TsgcEditorLocale
输入、语言与数据 仅限注册版
大多数 Delphi 业务窗体都建立在 TDataSet 之上,而手动连接每个编辑器既重复又繁琐。五款数据感知控件通过 DataSource 和 DataField 直接绑定到字段:日期选择器、时间选择器、数值调节框、评分,以及第二个滑块绑定 EndDataField 的范围滑块。AllowEmpty 开启时,空字段显示为空。它们通过 TsgcEditorFieldLink 绑定,该类只使用 DB 单元,因此 FireMonkey 版本无需 LiveBindings。在 .NET 中,普通控件使用各框架自带的数据绑定。把它们放到现有窗体上,您已有的数据集逻辑照常工作,无需改动。
TsgcVCLDBDatePicker、TsgcVCLDBTimePicker、TsgcVCLDBSpinEditTsgcVCLDBRating 和 TsgcVCLDBRangeSliderDataSource、DataField、EndDataField社区版:数据感知单元为空;两个版本中,普通控件的 .NET 数据绑定都可使用。
阅读帮助主题评审人员会检查的细节:无需鼠标,在每台显示器上都清晰,外观与您的应用程序匹配。
键盘、DPI 与主题
如今,150% 缩放的笔记本电脑旁边放着 100% 缩放的外接显示器是常态,而模糊的输入控件显得廉价。sgcEditors 以 96 DPI 的逻辑像素布局每个控件,并按屏幕的缩放比例绘制,您的代码无需做任何事。当 VCL 窗体移动到 DPI 不同的显示器时,内部编辑框及其字体会随控件缩放,下拉面板则按其打开所在显示器的 DPI 绘制。FireMonkey 的光栅化遵循场景缩放,适用于 Retina 和 Android。
WM_DPICHANGED 时重新缩放SaveToPNG 接受缩放比例以生成清晰图像
键盘、DPI 与主题
sgcEditors 的任何功能都不需要鼠标。绘制型控件自行获取焦点,文本控件则把焦点转交给其内部编辑框,获得焦点的控件会以强调色绘制 2 像素的焦点环。在日历中,方向键按一天或一周移动并跳过禁用日期,PageUp 和 PageDown 按月移动,Shift 可扩展范围。在选择器中,F4 或 Alt+Down 打开下拉面板,Escape 恢复原值。数值调节框可用 Up、Down、PageUp 和 PageDown 步进。
Increment 和 LargeIncrement
键盘、DPI 与主题
当每个输入控件都遵循同一个主题时,窗体才显得完整。每个控件都有 Theme、AccentColor 和 TextStyle,边框、悬停、按下状态、选中和禁用状态的颜色都由它们推导而来,因此一个属性就能改变整体外观。这些令牌与每款 sgcUI 产品使用的相同,所以放在 sgcDashboard 磁贴中或 sgcToolbar 下方的编辑器无需额外工作即可匹配。禁用的控件会自动向背景色过渡。在运行时切换主题,每个编辑器都会重绘,方便您提供深色模式设置。
Theme:utDefault(默认,跟随应用程序主题)、utLight 或 utDarkAccentColor 用于选中、滑块、填充和焦点环TextStyle 用于大小、粗体和颜色sgcUI 套件演示中的 sgcEditors:使用内置模拟数据、可离线运行的完整应用程序。
客户联系人卡片上的评分和信用额度编辑器。
Altamira ERP →
日期和时间选择器设置工艺趋势的可见时间窗口。
Altamira Plant →
预订窗体需要一个遵守休息日的入住范围、客人数量、到达时间,也许还有对上次入住的评分。月历强制执行 MinDate、MaxRangeDays 和禁用日期,数值调节框统计客人数,时间选择器接受键入的时间,评分收集反馈,全都使用同一个主题。BookingForm 演示用七个编辑器搭建了一个酒店预订,并带有实时摘要。
业务线应用整天都在编辑记录。五款数据感知编辑器通过 DataSource 和 DataField 绑定到 TDataSet 字段,范围滑块绑定两端,空字段显示为空。结合真正的键盘输入和宽松解析,操作员可以快速键入数值,数据集接收到的是干净的数据。DataAware 演示把这五个编辑器放在 TClientDataSet 上,旁边是 TDBGrid 和 TDBNavigator。
在多个国家使用的计划工具必须向每位用户显示正确的周起始日、周数和月份名称。每个控件都带有自己的 FormatSettings,因此同一窗体可以并排显示德语日历和英语日历,FirstDayOfWeek 和 WeekNumbering 遵循区域设置或您的规则。Calendar 演示可在英语、德语、西班牙语、法语和意大利语之间切换,并将范围限制为 14 天。
Delphi、C++ Builder 和 C# 中使用相同的 API:一个评分、一个范围滑块和一个标记编辑框,全部通过 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.WinFormsGallery、Calendar、BookingForm 和 DataAware 提供 VCL 和 C++ Builder 版本,另有适用于 FireMonkey 的 GalleryFMX;.NET 版本提供适用于 WinForms、WPF 和 Avalonia 的 Gallery,以及 BookingForm 和 BindingWpf。
九个编辑器位于同一窗体中,带有主题开关、只读开关、事件日志和 PNG 导出。这是体验每款控件及其键盘行为的最快方式。
最长 14 天的范围、周数、禁用的周末和节假日,以及在英语、德语、西班牙语、法语和意大利语之间切换的区域设置。
由七个编辑器搭建的酒店预订,带有入住、客人和到达时间的实时摘要。它展示了这些控件如何在真实窗体上协同工作。
五款数据感知编辑器位于 TClientDataSet 上,并配有 TDBGrid 和 TDBNavigator。数据感知控件需要注册版或试用版。
使用 FireMonkey 编辑器构建的 Gallery,适用于 Windows 和 Android,属性和事件与 VCL 控件相同。
免费的社区版(NuGet 上的 esegece.sgcEditors.Community)包含全部九款控件,但颜色选择器没有 HSV 方块和透明度条,标记编辑框没有自动补全列表,范围滑块只有一个滑块,并且没有数据感知编辑器。
| 功能 | 社区版(免费) | 注册版 |
|---|---|---|
| All nine controls for VCL, FireMonkey and .NET | ✓ | ✓ |
| Native text entry, lenient parsing, localisation | ✓ | ✓ |
| Calendar ranges, limits and disabled days | ✓ | ✓ |
| Keyboard, DPI, themes and headless output | ✓ | ✓ |
| 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) | − | ✓ |
每款控件都提供 VCL、FireMonkey、WinForms、WPF 和 Avalonia 版本,属性和事件相同。
| 控件 | VCL 和 C++ Builder | FireMonkey | .NET |
|---|---|---|---|
| 月历 | TsgcVCLMonthCalendar | TsgcFMXMonthCalendar | TsgcWinFormsMonthCalendar |
| 日期选择器 | TsgcVCLDatePicker | TsgcFMXDatePicker | TsgcWinFormsDatePicker |
| 时间选择器 | TsgcVCLTimePicker | TsgcFMXTimePicker | TsgcWinFormsTimePicker |
| 日期时间选择器 | TsgcVCLDateTimePicker | TsgcFMXDateTimePicker | TsgcWinFormsDateTimePicker |
| 范围滑块 | TsgcVCLRangeSlider | TsgcFMXRangeSlider | TsgcWinFormsRangeSlider |
| 颜色选择器 | TsgcVCLColorPicker | TsgcFMXColorPicker | TsgcWinFormsColorPicker |
| 标记编辑框 | TsgcVCLTokenEdit | TsgcFMXTokenEdit | TsgcWinFormsTokenEdit |
| 评分 | TsgcVCLRating | TsgcFMXRating | TsgcWinFormsRating |
| 数值调节框 | TsgcVCLSpinEdit | TsgcFMXSpinEdit | TsgcWinFormsSpinEdit |
.NET 列显示的是 WinForms 的名称,WPF 和 Avalonia 也有相同的控件,前缀分别为 TsgcWpf 和 TsgcAvalonia。非可视辅助类:TsgcEditorModel、TsgcEditorLocale 和 TsgcEditorFieldLink。数据感知编辑器(TsgcVCLDBDatePicker、TsgcVCLDBTimePicker、TsgcVCLDBSpinEdit、TsgcVCLDBRating 和 TsgcVCLDBRangeSlider,以及对应的 FireMonkey 版本)仅限注册版,适用于 Delphi 和 C++ Builder。
| 目标 | 组件 | 平台 |
|---|---|---|
| Delphi 7 至 13,VCL | TsgcVCL 编辑器 | Win32,XE2 起支持 Win64 |
| Delphi XE6 至 13,FireMonkey | TsgcFMX 编辑器 | Windows、macOS、iOS 和 Android |
| C++ Builder 2007 至 13 | TsgcVCL 和 TsgcFMX 编辑器 | 生成的 .hpp 头文件和静态库 |
| Delphi 10.2 至 13,框架无关 | 模型和无界面 PNG 与 SVG 输出 | Linux64(无 Linux 控件) |
| .NET Framework 4.7.2、.NET 8、9 和 10 | WinForms、WPF 和 Avalonia 编辑器 | Windows 桌面和 Avalonia 目标平台 |
支持。每个文本字段都是平台的真实编辑控件,VCL 中是无边框 TEdit,FireMonkey 中是 FMX TEdit,因此日语、中文和韩语的输入法组合、剪贴板、撤销、上下文菜单和屏幕阅读器无需特殊代码即可工作。请参阅文本输入与输入法。
可以。MinDate 和 MaxDate 设置范围,DisabledDates 列出节假日,DisabledWeekDays 屏蔽周末,OnIsDateDisabled 决定任何其他规则。禁用的日期以删除线绘制,键盘会跳过它们,在选择器中键入时也会被拒绝。Calendar 演示屏蔽了周末和两个节假日,以展示规则的实际效果。
在 Delphi 和 C++ Builder 中有五款:日期选择器、时间选择器、数值调节框、评分和范围滑块,每款都有 VCL 和 FireMonkey 版本。它们需要注册版或试用版。在 .NET 中,普通控件使用 WinForms、WPF 和 Avalonia 的数据绑定,两个版本都支持。
全部九款控件都包含在内。社区版不含颜色选择器的 HSV 方块和透明度条、标记编辑框的自动补全列表,以及范围滑块的第二个滑块。Delphi 数据感知编辑器仅限注册版。请参阅版本。
可以。每个控件都保留自己的 FormatSettings 副本,因此日名和月名、格式、分隔符以及每周的第一天可以因控件而异。Calendar 演示可在运行时在英语、德语、西班牙语、法语和意大利语之间切换,除非您另行选择,否则周数遵循 ISO 8601。
对于日期和时间,可以:TsgcVCLDatePicker、TsgcVCLTimePicker 和 TsgcVCLDateTimePicker 是带下拉日历或时间列表的键入式编辑框。此外,它们还能宽松地解析月份名称,遵守限制和禁用日期,遵循 sgcUI 主题,并按每台显示器的 DPI 绘制。
可以。C++ Builder 2007 以及 2010 至 13 通过生成的头文件和库使用相同的 VCL 和 FireMonkey 控件,每个 Delphi 演示(包括 DataAware)也都提供 C++ Builder 工程。本页的代码标签页展示了 Delphi、C++ Builder 和 C# 中的同一个窗体,每个示例在发布前都已编译通过。