如何为IntraWeb应用创建自定义组件？解决运行时不显示问题

问题根源 #

你的代码在设计时正常但运行时不显示，核心原因是IntraWeb的组件渲染逻辑和VCL完全不同：

• VCL通过Paint方法在本地画布绘制界面，而IntraWeb是生成HTML/CSS/JS代码，在浏览器中渲染页面。
• 你重写的Paint方法仅在IDE设计模式下生效，运行时IntraWeb不会调用这个方法。
• 另外你创建的TStream没有释放，会导致内存泄漏；且选择TIWImage作为基类不合适，它的定位是显示图片资源，而非自定义绘制图形。

正确实现步骤 #

1. 选择合适的基类 #

根据组件功能选择对应基类：

• 若要自定义HTML内容，优先选TIWCustomControl（最灵活的自定义容器）；
• 若需处理图片，可选择TIWCustomImage；
• 基础HTML元素可基于TIWHTMLControl。

2. 重写RenderHTML方法 #

IntraWeb组件通过RenderHTML生成前端代码，这是实现运行时显示的核心。以下是两种实现红色椭圆的示例：

示例代码（纯CSS实现）

unit IWTestPK;

interface

uses
  System.SysUtils, System.Classes, IWVCLBaseControl, IWBaseControl,
  IWBaseHTMLControl, IWControl;

type
  TIWTest = class(TIWCustomControl)
  protected
    procedure RenderHTML; override;
  published
    // 发布设计时需要调整的属性
    property Width;
    property Height;
    property Align;
  end;

procedure Register;

implementation

procedure Register;
begin
  RegisterComponents('Samples', [TIWTest]);
end;

procedure TIWTest.RenderHTML;
begin
  inherited;
  // 用CSS border-radius实现红色椭圆
  AddTag('div', [
    'style', Format(
      'width:%dpx; height:%dpx; border:2px solid red; border-radius:50%;',
      [Width, Height]
    )
  ]);
end;

end.

示例代码（Canvas+JS绘制）

如果需要更复杂的图形，可使用HTML5 Canvas：

procedure TIWTest.RenderHTML;
begin
  inherited;
  // 输出Canvas元素
  AddTag('canvas', [
    'width', IntToStr(Width),
    'height', IntToStr(Height),
    'id', HTMLName  // 用组件的HTMLName确保ID唯一
  ]);
  // 输出JS代码绘制椭圆
  AddJavaScript(Format(
    'var ctx = document.getElementById("%s").getContext("2d");' +
    'ctx.strokeStyle = "red";' +
    'ctx.lineWidth = 2;' +
    'ctx.beginPath();' +
    'ctx.ellipse(%d, %d, %d, %d, 0, 0, 2 * Math.PI);' +
    'ctx.stroke();',
    [HTMLName, Width div 2, Height div 2, Width div 2, Height div 2]
  ));
end;

3. 资源与生命周期管理 #

如果需要动态生成图片（比如从内存流生成），需将流注册到IntraWeb的资源管理器：

• 在组件中创建图片流后，调用WebApplication.RegisterStream注册，获取资源URL；
• 在RenderHTML中引用该URL作为图片的src属性；
• 在组件的Destroy方法中释放流，并调用WebApplication.UnregisterStream移除资源。

关键注意事项 #

• 不要用VCL的Paint逻辑来实现IntraWeb组件的运行时显示，必须基于HTML/CSS/JS；
• 确保组件的属性（如Width、Height）已发布，方便设计时调整；
• 管理好内存资源，避免泄漏；
• 若需要交互逻辑，可通过AddJavaScript添加前端事件处理代码。

内容的提问来源于stack exchange，提问作者Fayyaz