直接从 Delphi、C++ Builder 和 .NET 构建完整、现代的 Web 界面。sgcHTML 是一个服务器端组件框架,提供 93 个现成的数据感知控件 — 图表、网格、表单、仪表板、聊天等等 — 它们可直接绑定到 TDataSet,渲染为 Bootstrap 5 标记,并通过 htmx 保持交互。您编写 Object Pascal 或 C#,sgcHTML 负责生成 HTML、CSS 和 JavaScript。
用 Delphi 构建完整的 Web 界面,服务端组件搭配 Bootstrap 5 标记和 htmx,无需 JavaScript 构建步骤。
下面的每一个界面,都是通过 sgcHTML 输出自身 HTML 的 Delphi 应用程序。无需 JavaScript 构建步骤,也无需独立的前端项目。用各登录页上已预填的凭据登录即可。
Gantt 计划器、Chart.js 系列、仪表盘、迷你图、树状图和热力图,全部由您的 Pascal 或 C# 代码生成。您只需设置数据,sgcHTML 负责输出标记和客户端脚本。
用户选择维度、度量和聚合方式,交叉表即从 TFDQuery 重新生成。中间没有 REST 层,页面在进程内直接读取数据库。
每个组件都渲染响应式 Bootstrap 5 标记,因此仓库终端布局只是同一套组件库在手机宽度下的呈现,而不是另一份移动端代码。
每段视频都是这些应用程序实际运行时的屏幕录像,配有讲解和字幕。按下播放之前不会下载任何内容。
一个 7.7 MB 的 Delphi 可执行文件,身边不带任何 DLL,基于 SQLite 提供完整的 Web ERP。
遍览 93 个组件,从表格、图表到 Kanban 面板和签名板。
排序、筛选、分页、行内编辑、选择和数据集绑定,全部由 Pascal 驱动。
片段替换如何取代整页刷新,以及它在 Delphi 代码里的写法。
服务器指标推送为带外片段,卡片和图表随数据变化实时更新。
销售点演示在进程内直接读取数据库,中间没有 JSON API。
面向 27,000 条订单明细的仪表板、透视构建器和探索视图。
仓库演示逐屏清点它所依赖的组件库。
同一个应用同时运行在桌面看板和手机上,保持同步。
一个二进制文件、一个数据库,严格的按租户隔离,用演示而非口头保证。
登录之后自助管理订单、个人资料和支持工单。
边输入边搜索,行内新增、编辑和删除,全部以 htmx 片段替换完成。
注册、工单会话和状态变更,全部由服务端渲染。
商店助手依据商品目录作答,而不是凭空编造。
导航、侧边栏和页面组合,全部由 Site 组件构建。
为现有的 Delphi WebBroker 应用添加 sgcHTML 输出。
在您已有的服务层之上提供现代化前端。
sgcHTML 将您现有的 Delphi、C++ Builder 或 .NET 后端变成一个 Web 应用服务器。每个组件都是一个发出 Bootstrap 5 HTML 的原生类;htmx 让页面保持交互和实时,无需手写一行 JavaScript。
每个控件都是一个类 — TsgcHTMLComponent_Chart、TsgcHTMLComponent_Grid、TsgcHTMLComponent_Form 等 86 个。设置其属性,然后读取其 HTML 属性,即可获得干净、可直接服务的 Bootstrap 5 标记。
放置一个 TsgcHTMLEngine_Server(或将 HTML 接入现有的 TsgcWebSocketHTTPServer)。请求到达您的 OnCommandGet 处理器;您用由组件构建的页面进行响应。无需外部 Web 技术栈。
sgcHTML 并不绑定于 sgcWebSockets 服务器。通过 TsgcHTMX_Engine_Server_WebBroker,从任何 Embarcadero WebBroker 应用程序提供同一批由组件构建的页面,或者从 DataSnap 服务器提供,并在与您的 REST 端点相同的端口上实现实时 WebSocket 推送。
添加一个 TsgcHTMX_Engine_Server,点击、表单提交和实时更新便会往返于您的 Pascal/C# 事件处理器。服务器就地替换 HTML 片段 — 拥有 SPA 般的体验,却没有任何 JavaScript 构建链。
由于 htmx 运行在 sgcWebSockets 服务器之上,您可以向每个已连接的浏览器推送实时 HTML。仪表板、监控器和聊天窗口会在您的数据变化的瞬间更新 — 由服务器驱动,无需轮询。
TsgcHTMLTemplate_Bootstrap 将您的内容包装成一个完整的响应式文档;TsgcHTMLThemeController 和 TsgcHTMLThemeBuilder 提供明亮/暗黑主题和共享样式表。Bootstrap 5.3 和 htmx 已内嵌发布 — 运行时无需 CDN。
Grid、DataTable、Chart、Select、TreeView、Scheduler、Timeline 和 Form 通过 LoadFromDataSet / DataSource 直接绑定到 TDataSet。将组件指向一个查询,它便会渲染出这些行。
sgcHTML 内置了 17 种语言的 UI 文本(按钮、标签、验证消息):英语、西班牙语、法语、德语、葡萄牙语、意大利语、荷兰语、瑞典语、挪威语、波兰语、捷克语、土耳其语、俄语、中文、日语、韩语和阿拉伯语。使用 sgcHTMLSetLanguage 选择其中一种,组件便会以访问者的语言渲染,并采用正确的原生文字,包括中日韩文字、西里尔文和阿拉伯文。
每个组件都会将其动态文本、属性、内联 JavaScript 和 URL 通过自动的 HTML、属性、JavaScript 和 URL 编码以及 URL 净化(sgcHTMLEncode、sgcHTMLAttrEncode、sgcJSEncode、sgcHTMLSanitizeURL)进行处理,因此用户数据无法突破其上下文并注入脚本。XSS 和注入防护无需额外工作即可启用。
从导航框架到数据网格、图表、表单、覆盖层和 AI 聊天 — 完整的 Bootstrap 5 词汇表,皆为原生组件。每一个都链接到自己的页面,附有 Delphi、C++ Builder 和 .NET 示例。
NavBar、Sidebar、Breadcrumb、Tabs、Pagination、Toolbar、TreeView、Stepper、Dropdown、ButtonGroup、ListGroup、DashboardLayout、Splitter。
查看组件 →Grid、DataTable、TreeGrid、PivotTable、Calendar、Scheduler、Timeline、ActivityFeed、KanbanBoard、Gantt — 可排序、可筛选、可导出、可绑定数据集。
查看组件 →Chart(Chart.js)、CandlestickChart、Gauge、Heatmap、Sparkline、TreeMap、Diagram(SVG 流程图)、Map(Leaflet)、QRCode、Barcode — 来自您自己数据集的数据驱动视觉效果。
查看组件 →Form、Edit、Memo、CheckBox、RadioGroup、Select、MultiSelect、InputGroup、AutoComplete、DatePicker、TimePicker、ColorPicker、Slider、FileUpload、RichEditor、Rating、SignaturePad、Transfer。
查看组件 →Panel、StatCard、Accordion、Carousel、Image、Avatar、Video、Badge、PDFViewer — 用于仪表板的卡片、媒体和 KPI 磁贴。
查看组件 →Modal、Offcanvas、Popover、Toast、Snackbar、Notification、Spinner、Placeholder、ContextMenu、ProgressBar、JobProgress、LogViewer — 对话框和状态展示。
查看组件 →Login、SocialLogin(OAuth)、OAuthCallback、WebAuthnLogin(通行密钥)、UserManagement、RolesPermissions — 现成的登录流程和管理界面。
查看组件 →EngineServer、HTMXEngine、PageBuilder、TemplateBootstrap、ThemeController、ThemeBuilder、HTMXFragment、HTMXRouter — 提供页面服务并保持其实时性的非可视化部件。
查看组件 →启动一个 HTTP 服务器,附加 htmx 引擎,然后用由组件构建的页面响应请求。Delphi、C++ Builder 和 .NET 中是相同的 API。
uses
sgcWebSocket_Server, sgcHTMX_Engine_Server,
sgcHTML_Template_Bootstrap, sgcHTML_Component_Chart;
// 1. Start a server and attach the htmx engine
FServer := TsgcWSHTTPServer.Create(nil);
FServer.Port := 8080;
FServer.OnCommandGet := HandleGet;
FHTMX := TsgcHTMX_Engine_Server.Create(nil);
FHTMX.Server := FServer; // realtime htmx over WebSocket
FServer.Active := True;
// 2. Build the page from components
function TForm1.BuildDashboard: string;
var
oChart: TsgcHTMLComponent_Chart;
oPage: TsgcHTMLTemplate_Bootstrap;
begin
oChart := TsgcHTMLComponent_Chart.Create(nil);
oPage := TsgcHTMLTemplate_Bootstrap.Create(nil);
try
oChart.ChartType := ctBar;
oChart.AddLabel('Q1'); oChart.AddLabel('Q2'); oChart.AddLabel('Q3');
oChart.AddDataset('Revenue', [1200, 1900, 1500],
'#7C3AED', 'rgba(124,58,237,.25)', True);
oPage.Title := 'Dashboard';
oPage.BodyContent := oChart.HTML; // component -> HTML
Result := oPage.GetHTML; // full Bootstrap document
finally
oPage.Free;
oChart.Free;
end;
end;
// includes: sgcWebSocket_Server.hpp, sgcHTMX_Engine_Server.hpp,
// sgcHTML_Template_Bootstrap.hpp, sgcHTML_Component_Chart.hpp
// 1. Start a server and attach the htmx engine
FServer = new TsgcWSHTTPServer(this);
FServer->Port = 8080;
FServer->OnCommandGet = HandleGet;
FHTMX = new TsgcHTMX_Engine_Server(this);
FHTMX->Server = FServer; // realtime htmx over WebSocket
FServer->Active = true;
// 2. Build the page from components
String __fastcall TForm1::BuildDashboard()
{
TsgcHTMLComponent_Chart *oChart = new TsgcHTMLComponent_Chart(NULL);
TsgcHTMLTemplate_Bootstrap *oPage = new TsgcHTMLTemplate_Bootstrap(NULL);
try
{
oChart->ChartType = ctBar;
oChart->AddLabel("Q1"); oChart->AddLabel("Q2"); oChart->AddLabel("Q3");
oChart->AddDataset("Revenue", OPENARRAY(double, (1200, 1900, 1500)),
"#7C3AED", "rgba(124,58,237,.25)", true);
oPage->Title = "Dashboard";
oPage->BodyContent = oChart->HTML; // component -> HTML
return oPage->GetHTML(); // full Bootstrap document
}
__finally
{
delete oPage;
delete oChart;
}
}
using esegece.sgcWebSockets;
// 1. Start a server and attach the htmx engine
var server = new TsgcWebSocketHTTPServer();
server.Port = 8080;
server.OnCommandGet += HandleGet;
var htmx = new TsgcHTMX_Engine_Server();
htmx.Server = server; // realtime htmx over WebSocket
server.Active = true;
// 2. Build the page from components
string BuildDashboard()
{
var chart = new TsgcHTMLComponent_Chart();
chart.ChartType = TsgcHTMLChartType.ctBar;
chart.AddLabel("Q1"); chart.AddLabel("Q2"); chart.AddLabel("Q3");
chart.AddDataset("Revenue", new double[] { 1200, 1900, 1500 },
"#7C3AED", "rgba(124,58,237,.25)", true);
var page = new TsgcHTMLTemplate_Bootstrap();
page.Title = "Dashboard";
page.BodyContent = chart.HTML; // component -> HTML
return page.GetHTML(); // full Bootstrap document
}
当您想用一行代码实现一个控件时,使用现成的组件;当您需要完全控制标记时,则深入到节点层。
93 个 TsgcHTMLComponent_* 控件。配置属性,可选地绑定数据集,读取 HTML。许多组件还提供一个静态 Build(...) 辅助方法,用于一行内联使用。
TsgcHTMLContainer(带有用于自闭合标签的 Void 标志)、TsgcHTMLCard、TsgcHTMLForm、TsgcHTMLField、TsgcHTMLButton、TsgcHTMLTable 等基本元素可组合成任意布局,然后用 TsgcHTMLTemplate_Bootstrap 渲染。节点集还包含 Bootstrap 构建块,例如 TsgcHTMLModal、TsgcHTMLOffcanvas、TsgcHTMLAccordion、TsgcHTMLCarousel、TsgcHTMLToast、TsgcHTMLProgress、TsgcHTMLSpinner、TsgcHTMLListGroupNode、TsgcHTMLInputGroup、TsgcHTMLButtonGroupNode、TsgcHTMLRadio、TsgcHTMLBreadcrumb、TsgcHTMLNavbarNode 和 TsgcHTMLImage。
TsgcHTMLPageBuilder 及其设计时编辑器让您在 IDE 中组装页面,而 TsgcHTMLThemeController 在整个应用范围内管理明亮/暗黑主题。
通过 sgcCustomization HTML,您描述所需的应用,eSeGeCe 团队即使用 sgcHTML + sgcWebSockets 组件为您构建。三个一次性套餐,价格自 €149 起,您将收到一个可以使用已授权组件编译、扩展和重新设计样式的完整项目。
将 sgcHTML 与我们的其他 Delphi、C++ Builder 和 .NET 组件库搭配使用。
企业级 WebSocket、HTTP/2、MQTT、AMQP、WebRTC 和 AI/LLM 组件。sgcHTML 通过同样的高性能 HTTP 和 WebSocket 服务器提供服务。
了解更多 →面向 Delphi、C++ Builder 和 .NET 的 QUIC 与 HTTP/3 客户端和服务器组件。通过 HTTP/3 提供 sgcHTML 渲染的界面,在不稳定网络上实现更低延迟的页面加载。
了解更多 →面向 Delphi 和 C++ Builder 的完整 WebRTC 媒体引擎:音视频通话、数据通道和屏幕共享。sgcWebSockets Enterprise 的附加组件。
了解更多 →面向 Delphi 和 C++ Builder 的 15 个 AI、LLM 和 MCP 组件。一个聊天组件即可接入 OpenAI、Anthropic、Gemini、DeepSeek、Ollama、Grok 和 Mistral。独立产品,已包含 sgcWebSockets Core 运行时。
了解更多 →面向 Delphi 和 C++ Builder 的 MQTT 3.1.1 和 5.0、AMQP 0.9.1、AMQP 1.0、Apache Kafka 与 STOMP 客户端组件。独立产品,已包含 sgcWebSockets Core 运行时。
了解更多 →面向 Delphi 和 C++ Builder 的通用密码学库:对称与非对称加密算法、哈希和后量子算法。自 sgcWebSockets Standard 起免费提供。
了解更多 →