新品:sgcCustomization HTML。我们为您构建 Web 应用。 描述您需要的应用,我们的团队即使用 sgcHTML + sgcWebSockets 为您构建。套餐价格自 €149 起。
了解 sgcCustomization HTML
Delphi 7 至 13、C++ Builder 和 .NET 110 个组件,十大家族

sgcHTML:面向 Delphi、C++ Builder 和 .NET 的 Web UI 组件

直接用 Delphi、C++ Builder 和 .NET 构建完整、现代的 Web 界面。sgcHTML 是一个服务器端组件框架,提供 110 个现成控件:图表、网格、表单、仪表板、聊天等。许多组件可直接绑定到 TDataSet,渲染为 Bootstrap 5 标记,并通过 htmx 保持交互。您编写 Object Pascal 或 C#,HTML、CSS 和 JavaScript 由 sgcHTML 生成。

DelphiC++ Builder.NETBootstrap 5 + htmx数据感知 / TDataSet无需 JavaScript

不想自己动手?我们为您构建 →

使用 Delphi 版 sgcHTML 构建的 ERP 仪表板,显示在浏览器窗口中:KPI 卡片、营收柱状图和最近发票网格。

快速开始 →

一个应用,完全由 sgcHTML 构建

客户、产品、供应商与开票,配备仪表板图表、基于角色的后台管理和 passkey 登录。一个 7.7 MB 的 Delphi 可执行文件,旁边没有任何 DLL,基于 SQLite 提供完整的 Web ERP。

单个 exe 承载完整 ERP

ERP:使用 sgcHTML 构建的 Delphi Web 应用程序,在浏览器中运行的界面。

客户

ERP:使用 sgcHTML 构建的 Delphi Web 应用程序,在浏览器中运行的界面。

发票

ERP:使用 sgcHTML 构建的 Delphi Web 应用程序,在浏览器中运行的界面。

报表

110 个组件,十大家族

从导航外壳到数据网格、图表、表单、覆盖层和 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:对话框和状态显示界面。

查看组件 →

聊天与 AI

ChatBox、Chat(WhatsApp 风格)、AIChat,带有提供商选择器、令牌流式传输和 RAG 来源引用,以及用于实时在线状态的 Presence。

查看组件 →

身份验证

Login、SocialLogin (OAuth)、OAuthCallback、WebAuthnLogin (passkeys)、UserManagement、RolesPermissions:现成的登录流程和管理界面。

查看组件 →

仪表与 SCADA

Gauge、LinearGauge、LED、LEDBar、SegmentDisplay、Odometer、AnalogClock、Compass、VUMeter、Knob、ToggleSwitch、PushButton、NumericStepper、StripChart、Oscilloscope、Annunciator、SCADAPanel。控制室面板由服务器保持实时更新,并支持 MQTT 绑定。

查看组件 →

基础设施与引擎

EngineServer、HTMXEngine、PageBuilder、TemplateBootstrap、ThemeController、ThemeBuilder、HTMXFragment、HTMXRouter:负责提供页面并保持页面实时更新的非可视组件。

查看组件 →

查看完整功能矩阵 →

您编写 Pascal 或 C#,sgcHTML 负责前端。

sgcHTML 将您现有的 Delphi、C++ Builder 或 .NET 后端变成一个 Web 应用服务器。每个组件都是一个发出 Bootstrap 5 HTML 的原生类;htmx 让页面保持交互和实时,无需手写一行 JavaScript。

渲染 HTML 的组件

每个控件都是一个类:TsgcHTMLComponent_Chart、TsgcHTMLComponent_Grid、TsgcHTMLComponent_Form 以及另外 86 个。设置其属性,然后读取其 HTML 属性,即可得到干净、可直接提供的 Bootstrap 5 标记。

由您自己的服务器提供服务

放置一个 TsgcHTMLEngine_Server(或将 HTML 接入现有的 TsgcWebSocketHTTPServer)。请求到达您的 OnCommandGet 处理器;您用由组件构建的页面进行响应。无需外部 Web 技术栈。

WebBroker 和 DataSnap 托管

sgcHTML 并不绑定于 sgcWebSockets 服务器。通过 TsgcHTMX_Engine_Server_WebBroker,从任何 Embarcadero WebBroker 应用程序提供同一批由组件构建的页面,或者从 DataSnap 服务器提供,并在与您的 REST 端点相同的端口上实现实时 WebSocket 推送。

WebBroker 和 DataSnap 托管 →

通过 htmx 实现交互

添加一个 TsgcHTMX_Engine_Server,点击、表单提交和实时更新都会往返于您的 Pascal/C# 事件处理程序。服务器就地替换 HTML 片段。拥有 SPA 的体验,却没有 JavaScript 构建工具链。

通过 WebSocket 实时通信

由于 htmx 运行在 sgcWebSockets 服务器之上,您可以向每个已连接的浏览器推送实时 HTML。仪表板、监视器和聊天窗口会在数据变化的瞬间更新,由服务器驱动,无需轮询。如果代理阻止了 WebSocket,同一页面可以改用服务器发送事件来接收更新。

主题与模板

TsgcHTMLTemplate_Bootstrap 将您的内容包装成完整的响应式文档;TsgcHTMLThemeController 和 TsgcHTMLThemeBuilder 提供浅色/深色主题和共享样式表。Bootstrap 5.3 和 htmx 内嵌发布:运行时无需 CDN。

直接数据库绑定

Grid、DataTable、Chart、Select、TreeView、Scheduler、Timeline 和 Form 通过 LoadFromDataSet / DataSource 直接绑定到 TDataSet。将组件指向一个查询,它便会渲染出这些行。

本地化 UI,17 种语言

sgcHTML 内置 17 种语言的界面文本(按钮、标签、验证消息):英语、西班牙语、法语、德语、葡萄牙语、意大利语、荷兰语、瑞典语、挪威语、波兰语、捷克语、土耳其语、俄语、中文、日语、韩语和阿拉伯语。使用 sgcHTMLSetLanguage 选择其中一种,组件便会以访问者的语言渲染,并正确显示各自的原生文字,包括中日韩文字、西里尔文和阿拉伯文。阿拉伯语和希伯来语等从右到左的语言会自动翻转整个页面:页面以 dir="rtl" 渲染,加载 Bootstrap 的 RTL 样式表,并镜像侧边栏、网格、步骤条、聊天及其他组件,无需修改代码。

默认安全输出

每个组件都会让其动态文本、属性、内联 JavaScript 和 URL 经过自动的 HTML、属性、JavaScript 和 URL 编码以及 URL 净化(sgcHTMLEncode、sgcHTMLAttrEncode、sgcJSEncode、sgcHTMLSanitizeURL),因此用户数据无法跳出其上下文并注入脚本。无需额外工作,XSS 和注入防护即已启用。

从右到左的语言:阿拉伯语和希伯来语

阿拉伯语和希伯来语会自动将整个页面翻转为从右到左:dir="rtl"、Bootstrap 的 RTL 样式表和镜像组件,无需修改代码。

从右到左 (RTL)

一个页面,三种语言:英语、阿拉伯语和希伯来语。选择阿拉伯语或希伯来语,整个布局便会变为从右到左,从侧边栏到网格无一例外。无需修改代码,只需切换语言。

内置界面文本(按钮、标签、验证消息)支持英语、西班牙语、法语、德语、葡萄牙语、意大利语、荷兰语、瑞典语、挪威语、波兰语、捷克语、土耳其语、俄语、中文、日语、韩语和阿拉伯语。使用 sgcHTMLSetLanguage 选择其中一种。

打开在线演示 →

阅读本地化帮助主题

sgcHTML 新增功能

每项新增功能在您使用之前都是关闭的,因此不使用它们的页面渲染结果与以前完全相同。完整列表见功能矩阵。

在 ChatGPT 和 Claude 中显示您的页面

MCP 工具以页面而不是文本作答,页面由与任何网页相同的组件构建,并由 ChatGPT、Claude 和 VS Code 渲染。需要 Enterprise 或 All-Access 版本,或者 sgcAI 包。参见 MCPApp。

AI 页面生成器

描述一个页面,或者把截图交给设计器,它会用您自己的组件构建出该页面。它根据由您的注册表构建的 schema 作答,因此不会提到您没有提供的类,并且在您接受之前不会应用任何内容。它需要 Enterprise 或 All-Access 版本的 AI 单元,或者 sgcAI 包。阅读指南。

作为单个组件的 CRUD

一张表的列表、搜索、分页、表单、删除和写入路径,集于一个组件,基于数据集或您自己的 SQL。IDE 向导可以创建它。参见 CRUD。

向网格提问

用自然语言提出的问题会变成筛选、排序、分组和高亮,在应用任何内容之前,先根据您自己的列进行验证。它通过内置解析器无需 API 密钥即可工作,当您的版本包含 AI 单元时,还支持七个提供商。参见 AIAssistant。

触达已关闭的浏览器

面向屏蔽 WebSocket 的网络的服务器发送事件、面向未运行浏览器的 Web Push、通知收件箱和偏好设置表。Web Push 需要 Enterprise 或 All-Access 版本。参见 WebPush。

会话、路由与测试

Cookie 会话、CSRF 令牌、登录限流,以及按角色的路由保护。路由上的路径参数和方法过滤器,来自页面模板的单页导航,以及用于测试所生成标记的辅助方法。参见 Auth。

ASP.NET Core Razor Tag Helpers

如果您像使用 Telerik 或 DevExpress 那样构建 ASP.NET Core MVC 或 Razor Pages 应用程序,sgcHTML 现在说的是同一种语言。<sgc-grid>、<sgc-form>、<sgc-dialog> 和 <sgc-chart> 等 Tag Helper,以及 Html.Sgc() 下与之对应的流式辅助方法,在服务器端渲染 Bootstrap 5 HTML,并通过 htmx 与您的控制器通信。无需学习任何 JavaScript 框架,也无需编写 JSON 数据源。Razor 层随 esegece.sgcHTML.AspNetCore NuGet 包一起提供,Community 版也包含在内。

基于 IQueryable 的网格

<sgc-grid> 在服务器端完成分页、排序、筛选(文本和范围)、搜索,并可导出为 XLSX 和 PDF。控制器只需返回 this.SgcGrid(request, query),EF Core 会把每一次点击转换为参数化 SQL。push-url 会把页码、排序和筛选条件保存在地址栏中,因此刷新页面和后退按钮都能正常工作。

用 asp-for 绑定的表单

<sgc-textbox>、<sgc-select>、<sgc-datepicker>、<sgc-checkbox> 和 <sgc-autocomplete> 通过 asp-for 绑定到您的模型,并在每个输入框下方显示 ModelState 错误。<sgc-form hx="true"> 通过 htmx 提交,保存成功后 this.SgcRedirect(url) 负责跳转。

在对话框中编辑

任何带有 sgc-dialog="name" 的元素都会把其 URL 加载到 <sgc-dialog> 中。提交成功后,this.SgcCloseDialog("edit-order", refresh: "orders") 会关闭对话框并重新加载网格,这就是无需自己编写脚本的弹窗编辑模式。

实时推送图表,无需 SignalR

<sgc-chart> 可以渲染静态数据,可以用 refresh-every="5s" 轮询某个 action,也可以设置 live="true":后台服务调用 hub.BroadcastChartAsync(...),每个打开的浏览器都会通过 sgcHTML WebSocket 重绘图表。Telerik 和 DevExpress 的图表需要 SignalR 相关代码才能实现服务器推送,而 sgcHTML 已内置此功能。

@* Views/Orders/Index.cshtml, page 1 renders inline from the model *@
@model IQueryable<OrderRow>

<sgc-grid name="orders" key="Id" items="Model"
          asp-action="Read" asp-export-action="Export" export="xlsx,pdf"
          page-size="15" sortable="true" filterable="true"
          searchable="true" push-url="true">
    <sgc-column field="Reference" searchable="true" />
    <sgc-column field="Customer" searchable="true" />
    <sgc-column field="OrderDate" title="Date" format="{0:yyyy-MM-dd}" filter="range" />
    <sgc-column field="Total" format="{0:N2}" align="right" filter="range" />
    <sgc-column field="Paid" />
</sgc-grid>
// Program.cs
builder.Services.AddControllersWithViews();
builder.Services.AddSgcHtml(o => o.ServeRootPage = false);  // the MVC app owns "/"
builder.Services.AddSgcHtmlRazor();   // SgcDataRequest binder, grid state, /sgcHTML.css
// ...
app.UseWebSockets();   // before UseSgcHtml, needed by live charts
app.UseSgcHtml();
app.MapDefaultControllerRoute();

// Controllers/OrdersController.cs
public class OrdersController : Controller
{
    private readonly ShopDb FDb;

    public OrdersController(ShopDb db) { FDb = db; }

    // An IQueryable projection: EF Core turns paging, sort and filters into SQL.
    private IQueryable<OrderRow> Rows() =>
        FDb.Orders.AsNoTracking().Select(o => new OrderRow
        {
            Id = o.Id, Reference = o.Reference, Customer = o.Customer.Name,
            OrderDate = o.OrderDate, Total = o.Total, Paid = o.Paid
        });

    public IActionResult Index() => View(Rows());

    // Every page, sort, filter and search click of the grid lands here.
    public IActionResult Read(SgcDataRequest request) => this.SgcGrid(request, Rows());

    // The toolbar export links: the filtered and sorted rows as XLSX or PDF.
    public IActionResult Export(SgcDataRequest request) =>
        this.SgcGridExport(request, Rows(), "orders");
}
@* The same grid with the fluent builder, the twin of Html.Kendo().Grid<T>() *@
@(Html.Sgc().Grid<OrderRow>("orders")
    .Key(o => o.Id)
    .Columns(c =>
    {
        c.Bound(o => o.Reference).Searchable();
        c.Bound(o => o.Customer).Searchable();
        c.Bound(o => o.OrderDate).Title("Date").Format("{0:yyyy-MM-dd}").Filter(SgcGridFilterKind.Range);
        c.Bound(o => o.Total).Format("{0:N2}").Align("right").Filter(SgcGridFilterKind.Range);
        c.Bound(o => o.Paid);
    })
    .Items(Model)
    .Read("Read")
    .Export(SgcExportFormat.Xlsx, SgcExportFormat.Pdf)
    .ExportAction("Export")
    .Pageable(15)
    .Sortable().Filterable().Searchable().PushUrl())
@* _Layout.cshtml: live="ws" opens the WebSocket that live charts listen to *@
<sgc-scripts live="ws" />

@* The view *@
<sgc-chart name="live-orders" type="line" height="260" live="true">
    <sgc-series name="Orders / s" data="new double[] { 0 }" color="#dc3545" />
</sgc-chart>
// builder.Services.AddHostedService<LiveSalesFeed>();
public sealed class LiveSalesFeed : BackgroundService
{
    private readonly ISgcHtmlHub FHub;
    private readonly Queue<string> FLabels = new Queue<string>();
    private readonly Queue<double> FValues = new Queue<double>();

    public LiveSalesFeed(ISgcHtmlHub hub) { FHub = hub; }

    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
    {
        var oRandom = new Random();
        while (!stoppingToken.IsCancellationRequested)
        {
            await Task.Delay(1000, stoppingToken);
            FLabels.Enqueue(DateTime.Now.ToString("HH:mm:ss"));
            FValues.Enqueue(oRandom.Next(0, 20));
            if (FValues.Count > 20) { FLabels.Dequeue(); FValues.Dequeue(); }

            // One WebSocket message redraws the chart in every open browser.
            await FHub.BroadcastChartAsync("live-orders", FLabels.ToArray(),
                new SgcChartSeries("Orders / s", FValues.ToArray(), "#dc3545"));
        }
    }
}

从 Telerik UI for ASP.NET Core 或 DevExpress 迁移?[DataSourceRequest] 变为 SgcDataRequest,ToDataSourceResult 变为 this.SgcGrid(request, query)(只需要数据时用 query.ToSgcDataResult(request)),Html.Kendo().TextBoxFor(m => m.X) 变为 Html.Sgc().TextBoxFor(m => m.X)。可运行的 MVC 演示 22.RazorMvc 是用 sgcHTML 在 EF Core 之上重写的 Telerik 订单示例。

几行代码即可构建 Web 仪表板

启动一个 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
}

两分钟了解 sgcHTML

用 Delphi 构建完整的 Web 界面,使用服务器端组件、Bootstrap 5 标记和 htmx,无需 JavaScript 构建步骤。

高级组件或低级节点

当您想用一行代码实现一个控件时,使用现成的组件;当您需要完全控制标记时,则深入到节点层。

组件层

110 个 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 在整个应用范围内管理明亮/暗黑主题。

sgcHTML 的运行环境

目标详情
Delphi 7 至 13Delphi 7、2007、2009、2010、XE 至 XE8、10 Seattle 至 10.4 Sydney、11 Alexandria、12 Athens 和 13 Florence。支持 Windows、macOS 和 Linux。
C++ BuilderC++ Builder(对应版本)
.NET.NET 8、.NET 9、.NET 10、.NET Standard 2.0,运行于 Windows、Linux 和 macOS 主机,并支持 ASP.NET Core Razor Tag Helper。
托管sgcWebSockets HTTP 服务器、任何 WebBroker 应用程序、DataSnap 服务器或 ASP.NET Core。
浏览器内嵌 Bootstrap 5 和 htmx 资源。运行时无需 CDN。

sgcHTML 是一个服务器端库:手机通过网络接收 HTML,因此 Android 和 iOS 不是构建目标。

十五个真实应用,此刻正在运行

下面的每一个界面,都是通过 sgcHTML 输出自身 HTML 的 Delphi 应用程序。无需 JavaScript 构建步骤,也无需独立的前端项目。用各登录页上已预填的凭据登录即可。

ERP:使用 sgcHTML 构建的 Delphi Web 应用程序,在浏览器中运行的界面。

ERP

客户、产品、供应商与开票,配备仪表板图表、基于角色的后台管理和 passkey 登录。

打开在线演示 →
报表 & BI:使用 sgcHTML 构建的 Delphi Web 应用程序,在浏览器中运行的界面。

报表 & BI

仪表板、报表目录、即席透视表构建器,以及针对 27,000 条订单明细的探索视图,全部在进程内查询。

打开在线演示 →
销售终端:使用 sgcHTML 构建的 Delphi Web 应用程序,在浏览器中运行的界面。

销售终端

触摸式收银台,支持商品分类、促销、挂单、班次管理和实时顾客显示屏。

打开在线演示 →
仓库管理(WMS):使用 sgcHTML 构建的 Delphi Web 应用程序,在浏览器中运行的界面。

仓库管理(WMS)

入库、出库、现有库存、移库与循环盘点,另有面向扫描枪的手持终端布局。

打开在线演示 →
现场服务:使用 sgcHTML 构建的 Delphi Web 应用程序,在浏览器中运行的界面。

现场服务

调度看板、Gantt 计划器和实时技师地图,用于安排工程师与工单。

打开在线演示 →
管理控制台:使用 sgcHTML 构建的 Delphi Web 应用程序,在浏览器中运行的界面。

管理控制台

即输即搜、行内新增、编辑与删除,全部以 htmx 片段替换,无需刷新页面。

打开在线演示 →
实时监控:使用 sgcHTML 构建的 Delphi Web 应用程序,在浏览器中运行的界面。

实时监控

服务器指标通过 WebSocket 推送到带外 htmx 片段,实时更新 KPI 卡片和图表。

打开在线演示 →
从右到左:使用 sgcHTML 构建的 Delphi Web 应用程序,以阿拉伯语显示,整个布局均已镜像。

从右到左 (RTL)

一个页面,三种语言:英语、阿拉伯语和希伯来语。选择阿拉伯语或希伯来语,整个布局便会变为从右到左,从侧边栏到网格无一例外。无需修改代码,只需切换语言。

打开在线演示 →
客户门户:使用 sgcHTML 构建的 Delphi Web 应用程序,在浏览器中运行的界面。

客户门户

登录后的自助区域,客户可查看自己的订单、资料和支持工单。

打开在线演示 →
多租户 SaaS:使用 sgcHTML 构建的 Delphi Web 应用程序,在浏览器中运行的界面。

多租户 SaaS

面向公众的营销网站、定价页面和注册流程,背后是按租户隔离的控制平面。

打开在线演示 →

更多在线演示:AI、仪表与 SCADA

AI Data Pack

一个数据网格、一个数据透视表和一个表单,均由自然语言驱动:对 26,000 行订单数据进行筛选、排序和分组,配备 AI 列助手和智能粘贴。无需 API 密钥即可运行。

打开在线演示 →

购物助手

一个完全由 sgcHTML 组件构建的商店前台,配备一个悬浮聊天助手,其回答均以产品目录为依据。在线版本无需 LLM API 密钥。

打开在线演示 →

MCP 应用

一个在 ChatGPT、Claude 或 VS Code 内部渲染的 Delphi 应用:MCP 工具返回 sgcHTML 页面,由宿主显示,页面上的按钮在其中依然可以正常使用。

打开在线演示 →

仪表

一个模拟锅炉回路的控制室:仪表、显示器、操作控制件、条形图记录仪和示波器,全部由服务器保持实时更新,无需轮询。

打开在线演示 →

SCADA / IoT

一个冷却水厂模拟图,包含水箱、阀门、水泵和动态流动效果,另有仪表、条形图记录仪和报警,全部由 MQTT 驱动。在线版本运行一座模拟工厂。

打开在线演示 →

查看全部在线演示 →

短视频,没有幻灯片

每段视频都是这些应用程序实际运行时的屏幕录像,配有讲解和字幕。按下播放之前不会下载任何内容。

组件总览

遍览 110 个组件,从表格、图表到 Kanban 面板和签名板。

表格的九种行为

排序、筛选、分页、行内编辑、选择和数据集绑定,全部由 Pascal 驱动。

htmx 速览

片段替换如何取代整页刷新,以及它在 Delphi 代码里的写法。

基于 WebSocket 的实时更新

服务器指标推送为带外片段,卡片和图表随数据变化实时更新。

没有 REST 层的收银台

销售点演示在进程内直接读取数据库,中间没有 JSON API。

直接基于数据出报表

面向 27,000 条订单明细的仪表板、透视构建器和探索视图。

一个应用,五十个组件

仓库演示逐屏清点它所依赖的组件库。

调度员与技师,同屏并列

同一个应用同时运行在桌面看板和手机上,保持同步。

多租户隔离,眼见为实

一个二进制文件、一个数据库,严格的按租户隔离,用演示而非口头保证。

客户自助门户

登录之后自助管理订单、个人资料和支持工单。

无需刷新的实时 CRUD

边输入边搜索,行内新增、编辑和删除,全部以 htmx 片段替换完成。

带工单流程的服务台

注册、工单会话和状态变更,全部由服务端渲染。

基于自有数据的 AI 助手

商店助手依据商品目录作答,而不是凭空编造。

整站布局

导航、侧边栏和页面组合,全部由 Site 组件构建。

接入现有 WebBroker

为现有的 Delphi WebBroker 应用添加 sgcHTML 输出。

WebBroker 与 DataSnap 并用

在您已有的服务层之上提供现代化前端。

选择您的许可证

所有许可证均包含完整源代码、1 年更新,以及 70% 续订折扣。

Delphi 和 C++ Builder

包含 sgcWebSockets Core

€299 / 开发者

1 年更新

  • 110 个 HTML/UI 组件
  • Delphi 和 C++ Builder
  • Bootstrap 5 + htmx 引擎
  • 数据感知 TDataSet 绑定
  • 完整源代码
  • 免费二进制再分发
Single — €299 Team — €449 Site — €749

.NET

.NET Framework、.NET Core 和 .NET 5+(NuGet)

€299 / 开发者

1 年更新

  • 服务器端 HTML/UI 组件
  • Bootstrap 5 + htmx 引擎
  • 完整源代码
  • 免费二进制再分发
Single — €299 Team — €449 Site — €749

sgcCustomization HTML

我们为您构建 Web 应用。

€149

三个一次性套餐

通过 sgcCustomization HTML,您描述所需的应用,eSeGeCe 团队即使用 sgcHTML + sgcWebSockets 组件为您构建。

了解 sgcCustomization HTML

sgcHTML 是一款独立组件包。上面的价格已经包含其所基于的 sgcWebSockets Core 运行时,因此您的订单无需再添加其他内容。

从您的现状出发

来自其他 Web 框架?

已经有一个用 IntraWeb、uniGUI、TMS WEB Core、Elevate Web Builder 或 D2Bridge 构建的 Web 应用?分步指南将引导您把它迁移到 sgcHTML,并为每个框架提供概念映射。如果您希望我们的团队帮助规划或执行迁移,还有一个迁移协助表单。

打开迁移指南 →
框架对比 →

已在使用 WebBroker 或 DataSnap?

可从任何 Embarcadero WebBroker 应用,或从 DataSnap 服务器提供同样由组件构建的页面,并在与 REST 端点相同的端口上进行实时 WebSocket 推送。

WebBroker 和 DataSnap 托管 →

不想自己动手构建?

通过 sgcCustomization HTML,您描述所需的应用,eSeGeCe 团队即使用 sgcHTML + sgcWebSockets 组件为您构建。三个一次性套餐,价格自 €149 起,您将收到一个可以使用已获许可的组件编译、扩展和重新设计样式的完整项目。

了解 sgcCustomization HTML →

试用 sgcHTML

sgcHTML 已包含在 sgcWebSockets All-Access 试用版中。一个安装程序,两款产品。

RAD Studio / Delphi 下载

试用版在单台工作站上可使用有限时间,包含所有 sgcHTML 组件。

下载试用版 →

C++ Builder 下载

C++ Builder(对应版本)

下载试用版 →

NuGet 包

直接从 nuget.org 安装,适用于所有 .NET 目标。

在 NuGet 上查看 →

演示

GitHub 上的 sgcHTML for ASP.NET Core 演示源代码。

在 GitHub 上查看 →

常见问题解答

不需要。库会生成 Bootstrap 5 标记和 htmx 属性,htmx 使按钮能够回传并在不刷新的情况下替换页面的一部分。您用 Pascal 描述交互,属性会自动为您生成。如果您愿意,仍然可以通过 CustomHead 和 BodyEndHTML 添加自己的脚本。

由您自己把它写入 HTTP 响应。HTML 是一个普通的 string 属性,因此任何服务器都可以。随包附带的演示在 Professional 构建上使用 TsgcWSHTTPServer,否则回退到 TIdHTTPServer,设置 ResponseNo := 200 和 ContentType := 'text/html; charset=utf-8',并把该字符串赋给 ContentText。

TsgcHTMLComponent_Site,来自单元 sgcHTML_Component_Site.pas。它会渲染完整的页面外壳,因此您无需自己组装,就能得到导航、侧边栏、主题和内容区域。构建它,调用 AddMenu 以及 AddContent 或 AddSection,然后读取 HTML 属性。随包附带的 Site 演示正是这样做的。

当您把页面构建为节点时,可以,因为节点会写入文本并对其进行转义。当您绕过节点自己拼接标记时就会出现风险,例如通过 AddContent 传入由用户输入构建的字符串。对于任何携带用户数据的内容,请优先使用节点单元。

不能,而且这是有意为之。SGC_HTML 定义在第 885 行,位于第 883 行的 {$IFNDEF ANDROID} 和第 884 行的 {$IFNDEF IOS} 之内,因此在这些目标上,每个 sgcHTML 单元都会编译成空单元。它是服务器端库:手机通过网络接收 HTML,所以移动目标不需要渲染器。Windows、macOS 和 Linux 都受支持。

下载包在 Demos\60.HTML\01.RunTime 下附带十五个以上的运行时演示,包括 ERP 仪表板、服务台、销售终端、仓库、报表应用和现场服务应用。画廊中有每个演示的短视频。

帮助与资源

在线帮助

每个组件都附有 Delphi、C++ Builder 和 .NET 示例。

在线帮助 →

入门指南

启动一个 HTTP 服务器,附加 htmx 引擎,然后用由组件构建的页面响应请求。

快速入门 →

PDF 指南

入门指南:在 VCL 窗体上设计页面,通过 Surface 的 action 运行 Delphi 代码,并跟随六个 QuickStart 演示。

入门指南(PDF,英文) →

功能矩阵

110 个组件,十大家族

查看完整功能矩阵 →

画廊

十五个真实应用,此刻正在运行

画廊 →
3,000+开发者
20+年
761+组件
30+API 集成
5平台
30 天退款保证不满意?可在购买后 30 天内申请全额退款。 查看退款政策

无需离开 IDE 即可交付 Web 界面

使用您已经熟悉的语言,为您的 Delphi、C++ Builder 或 .NET 应用程序添加图表、网格、表单、仪表板和实时页面。

eSeGeCe 的其他产品

将 sgcHTML 与我们的其他 Delphi、C++ Builder 和 .NET 组件库搭配使用。

sgcWebSockets

企业级 WebSocket、HTTP/2、MQTT、AMQP、WebRTC 和 AI/LLM 组件。为您的 sgcHTML 应用添加实时消息传递和完整的网络技术栈。

了解更多 →

sgcQUIC

面向 Delphi、C++ Builder 和 .NET 的 QUIC 与 HTTP/3 客户端和服务器组件。通过 HTTP/3 提供 sgcHTML 渲染的界面,在不稳定网络上实现更低延迟的页面加载。

了解更多 →

sgcWebRTC

面向 Delphi 和 C++ Builder 的完整 WebRTC 媒体引擎:音视频通话、数据通道和屏幕共享。sgcWebSockets Enterprise 的附加组件。

了解更多 →

sgcSign

企业级数字签名:XAdES、PAdES、CAdES 和 ASiC,支持 10 家密钥提供商和 21 个欧盟国家配置文件。

了解更多 →

sgcOpenAPI

OpenAPI 3.0 解析器和 SDK 生成器。几秒钟内将任何 OpenAPI 规范转换为强类型的 Delphi 客户端。

了解更多 →

sgcBiometrics

面向 Delphi 和 C++ Builder 的原生 Windows Hello、指纹和 Windows 生物识别框架组件。

了解更多 →

sgcIndy

更新版 Indy TCP/IP 组件,为 Delphi 7 至 13 提供现代 TLS、IPv6 和 HTTP/2 支持。

了解更多 →

sgcAI

面向 Delphi 和 C++ Builder 的 15 个 AI、LLM 和 MCP 组件。一个聊天组件即可接入 OpenAI、Anthropic、Gemini、DeepSeek、Ollama、Grok 和 Mistral。独立产品,已包含 sgcWebSockets Core 运行时。

了解更多 →

sgcMQ

面向 Delphi 和 C++ Builder 的 MQTT 3.1.1 和 5.0、AMQP 0.9.1、AMQP 1.0、Apache Kafka 与 STOMP 客户端组件。独立产品,已包含 sgcWebSockets Core 运行时。

了解更多 →

sgcCrypto

面向 Delphi 和 C++ Builder 的通用密码学库:对称与非对称加密算法、哈希和后量子算法。自 sgcWebSockets Standard 起免费提供。

了解更多 →

sgcSocial

WhatsApp Business Cloud API 和 Telegram TDLib 客户端。独立产品,已包含 sgcWebSockets Core 运行时。

了解更多 →