基于 Delphi 的前后端分离：之四，使用 HTMX 让页面元素组件化

原创

已于 2024-06-15 02:48:32 修改 · 1.6k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#Delphi #前端 #开发语言

于 2024-06-15 02:41:51 首次发布

Delphi 最厉害的地方就是 Delphi 的可视化控件。在设计期可以拖拉控件设计界面，运行期也可以动态创建控件并且用程序决定控件摆放在界面的哪个位置，如何摆放。

对于 HTML5 的页面，使用 HTMX 就可以很容易把各路开源的页面代码，组件化，实现模块化开发，简化代码，方便维护。

以下是一个简单的例子

需求：

我想在页面上，放一个图表。这个图表不是写死在页面代码里面的，而是作为一个独立组件，在页面打开以后，当用户点击了一个按钮以后，才动态呈现出来。

额外说明：如果这个功能可以实现，那就可以让页面定时去刷新这个图表。

说明：图表代码来自：Beautiful HTML5 Charts & Graphs | 10x Fast | Simple API (canvasjs.com)

对于 Delphi 程序员来说，漂亮的 HTML5 页面图表的代码多半不会写，没关系，我们去找成熟的开源代码，把它封装一下变成 Delphi 的控件！

实现方法：

页面代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Delphi & HTMX Demo</title>
    <script src="https://unpkg.com/htmx.org@1.9

最低0.47元/天解锁文章