sgcHTML 设计界面 — 以可视化方式构建页面，而不仅仅是通过代码

2026年8月23日 · 组件

sgcWebSockets 2026.9.0 新增了一种构建 sgcHTML 页面的方式：设计界面（Design Surface）。此前，每个页面都是通过代码组合而成的—创建组件、设置其属性、读取生成的 HTML。这种方式依然有效，并且仍是构建页面的主要方式。新增的是第二条可视化路径：将相同的组件直接拖放到普通的 VCL 窗体上，排列它们，在对象查看器中调整其属性，即可渲染出与手写代码完全相同的页面。

两种构建页面的方式

运行时方式并没有改变。用 Pascal、C# 或 .NET 代码创建或拖放组件、设置其属性并绑定数据，然后读取组件的 HTML 属性：

uses
  sgcHTML_Component_Grid;

var
  oGrid: TsgcHTMLComponent_Grid;
begin
  oGrid := TsgcHTMLComponent_Grid.Create(nil);
  try
    oGrid.Columns.Add.Title := 'Customer';
    oGrid.Columns.Add.Title := 'Total';
    oGrid.Clear;
    oGrid.AddRow(['Acme Corp', '1,240.00']);
    Response.Write(oGrid.HTML);
  finally
    oGrid.Free;
  end;
end;

设计界面为相同的组件提供了第二种选择：将它们拖放到窗体上，让页面的结构来自窗体自身的布局，而不是来自构造函数调用。

设计界面

组件在窗体上的位置和宽度会推断出其 Bootstrap 行与列，其已发布的属性则在对象查看器中调整，而不是在代码中调整。添加到窗体上的 TsgcHTMLDesignSurface 组件会读取该布局。调用一次 sgcHTMLDesignBuildFromControls（通常在启动时调用），即可将窗体上拖放的组件遍历到界面的节点树中，然后读取 Surface.GetBodyHTML 即可渲染它：

uses
  sgcHTMLDesign_Surface;

procedure TfrmDashboard.Build;
begin
  sgcHTMLDesignBuildFromControls(Surface, Self);
end;

function TfrmDashboard.BodyHTML: string;
begin
  Surface.Invalidate;
  Result := Surface.GetBodyHTML;
end;

对于组件面板未覆盖的标记，Surface.AddHTML 可以将固定的 HTML 节点添加到同一节点树中，通过该节点的 Order 属性定位，或使用 Slot := 'Body' 嵌入到某个已拖放组件自身的主体中。

相同的组件，相同的输出

设计界面只改变了页面结构的表达方式，并不改变组件本身或其行为。拖放到已设计窗体上的组件是一个普通的组件实例—Grid1.LoadFromDataSet(qry) 的运行方式与在完全用代码构建的页面上完全相同。这两种创作方式也可以在同一页面上自由混用，构建完成后生成的组件在编译和运行时都完全一致。

何时使用哪一种

当页面结构本身是动态的或由数据驱动时—例如循环生成的行、条件性区块、依赖于仅在运行时才知道的状态的内容—运行时组合方式依然最合适；对于需要在 Delphi 7–13 之间共享同一份源代码、且不依赖 IDE 的场景，也是如此。而当需要以可视化方式布局大部分为静态结构的页面、在构建过程中就能看到页面的形态、并希望通过对象查看器而不是代码来调整属性时，设计界面最为适用。两者在运行时能力上并无差异，选择哪一种纯粹是创作时的偏好问题。

仍在不断完善

设计界面的组件面板正在持续扩展，目前仍存在少数差距。部分组件自身的包装标记，例如 TsgcHTMLComponent_Panel 的卡片外壳，目前还没有可以将其抑制的属性。TsgcHTMLComponent_Form 的字段目前尚不能像手写标记那样应用列类或跨列宽度。并非每个属性在每个同级组件上都存在—例如 UseColorClass 存在于 Panel 上，但不存在于 Login 或 StatCard 上。而 TsgcHTMLComponent_Grid 目前尚未将可排序的列标题作为设计时属性公开。这些都不会影响运行时路径，并且组件面板会在后续每个版本中持续弥合这些差距。

实际效果一览

要并排看清两种方式的最直观途径，是 sgcWebSockets 附带的 Demos\60.HTML 文件夹。01.RunTime 保存着最初的、通过代码构建的演示；02.DesignTime 则保存着其中每一个演示的对应版本—AdminCRUD、LiveMonitor、Portal、HTMX、Grid、Site、Components、Helpdesk、ShopAssistant、WebBroker 和 WebBrokerHTML，以及开创这一模式的 ERP 演示—全部改用设计界面在窗体上重新构建。对比这两个文件夹中的同一个演示，就能看到两种不同创作方式生成的同一个页面。

升级

设计界面作为 sgcHTML 组件包的一部分，随 sgcWebSockets 2026.9.0 一同发布，现有的运行时构建页面无需任何迁移。获取免费试用版亲自体验，并在组件中心浏览完整的组件集。

有疑问、反馈或需要迁移方面的帮助？与我们联系—回复您的将是编写这些代码的人。