sgcHTML

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

60 多个 UI 组件
Bootstrap 5 + htmx
Delphi / C++ Builder / .NET
无需 JavaScript

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

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

渲染 HTML 的组件

每个控件都是一个类 — TsgcHTMLComponent_ChartTsgcHTMLComponent_GridTsgcHTMLComponent_Form 等 60 多个。设置其属性,然后读取其 HTML 属性,即可获得干净、可直接服务的 Bootstrap 5 标记。

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

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

通过 htmx 实现交互

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

通过 WebSocket 实时通信

由于 htmx 运行在 sgcWebSockets 服务器之上,您可以向每个已连接的浏览器推送实时 HTML。仪表板、监控器和聊天窗口会在您的数据变化的瞬间更新 — 由服务器驱动,无需轮询。

主题与模板

TsgcHTMLTemplate_Bootstrap 将您的内容包装成一个完整的响应式文档;TsgcHTMLThemeControllerTsgcHTMLThemeBuilder 提供明亮/暗黑主题和共享样式表。Bootstrap 5.3 和 htmx 已内嵌发布 — 运行时无需 CDN。

直接数据库绑定

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

60 多个组件,八大家族

从导航框架到数据网格、图表、表单、覆盖层和 AI 聊天 — 完整的 Bootstrap 5 词汇表,皆为原生组件。每一个都链接到自己的页面,附有 Delphi、C++ Builder 和 .NET 示例。

导航与结构

NavBar、Sidebar、Breadcrumb、Tabs、Pagination、Toolbar、TreeView、Stepper、Dropdown、ButtonGroup、ListGroup、DashboardLayout。

查看组件 →

数据与表格

Grid、DataTable、Calendar、Scheduler、Timeline、KanbanBoard、Gantt — 可排序、可筛选、可导出、可绑定数据集。

查看组件 →

图表与可视化

Chart(Chart.js)、Gauge、Diagram(SVG 流程图)、Map(Leaflet)— 来自您自己数据集的数据驱动视觉效果。

查看组件 →

表单与输入

Form、Edit、Memo、CheckBox、RadioGroup、Select、InputGroup、AutoComplete、DatePicker、FileUpload、RichEditor、Rating。

查看组件 →

内容与布局

Panel、StatCard、Accordion、Carousel、Image、Avatar、Video — 用于仪表板的卡片、媒体和 KPI 磁贴。

查看组件 →

覆盖层与反馈

Modal、Offcanvas、Popover、Toast、Snackbar、Notification、Spinner、Placeholder — 对话框和状态展示。

查看组件 →

聊天与 AI

ChatBox、Chat(WhatsApp 风格)、AIChat,带有提供商选择器、令牌流式传输和 RAG 来源引用。

查看组件 →

身份验证

Login、SocialLogin(OAuth)、OAuthCallback、WebAuthnLogin(通行密钥)— 现成的登录流程。

查看组件 →

查看完整功能矩阵 →

几行代码即可构建 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
}

高级组件或低级节点

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

组件层

60 多个 TsgcHTMLComponent_* 控件。配置属性,可选地绑定数据集,读取 HTML。许多组件还提供一个静态 Build(...) 辅助方法,用于一行内联使用。

节点 / 组合层

TsgcHTMLContainerTsgcHTMLCardTsgcHTMLFormTsgcHTMLFieldTsgcHTMLButtonTsgcHTMLTable 等基本元素可组合成任意布局,然后用 TsgcHTMLTemplate_Bootstrap 渲染。

可视化页面构建器

TsgcHTMLPageBuilder 及其设计时编辑器让您在 IDE 中组装页面,而 TsgcHTMLThemeController 在整个应用范围内管理明亮/暗黑主题。

3,000+Developers
20+Years
761+Components
30+API Integrations
5Platforms
30 天退款保证不满意?可在购买后 30 天内申请全额退款。 查看退款政策

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

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

eSeGeCe 的其他产品

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

sgcWebSockets

企业级 WebSocket、HTTP/2/3、MQTT、AMQP、WebRTC 和 AI/LLM 组件。sgcHTML 通过同样的高性能 HTTP 和 WebSocket 服务器提供服务。

了解更多 →

sgcSign

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

了解更多 →

sgcOpenAPI

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

了解更多 →

sgcBiometrics

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

了解更多 →