Delphi 12.2 新增的 WebStencils 尝鲜
pcplayer 2024-10-01 17:03:00 阅读 60
WebStencils 是 Delphi 新增的服务器端 WEB 控件
这个玩意怎么用，用起来有意义吗？
试试才知道。以下测试的描述都是基于 Delphi WebBroker 这个 WEB 服务器端框架。
最新出来的，各方面资料很少，官方也没有详细文档，只能自己摸索。
网上我能够搜到的相关资料：
corneliusdavid/webstencils-demo: a couple of Delphi WebBroker programs to compare PageProducers with new WebStencils (github.com)
WebStencils - RAD Studio (embarcadero.com)
初步试探总结
在页面 HTML 代码里面可以嵌入 Delphi 的对象或者 DataSet
这个有本文上述的 github 链接里面的例子代码。
如何让页面代码组件化
这个是我最关心的问题。
比如，有 10 个页面。假设 10 个页面分为两组，每一组的页面的 <head></head> 部分是相同的。如果 10 个页面文件都复制粘贴上相同页面代码，就很土气。应该把相同的部分，单独写在一个文件里面，需要使用的页面，仅仅只需要引用这个文件就好了。
另外，页面的页头，抬头的 Banner 部分，菜单部分，可能也是多个页面是相同的。
另外，页面的页脚部分，可能也是很多页面相同。
都有类似的情况。
写 Delphi 代码的人，当然想把相同的代码抽离出来，放到一个函数里面。如果函数太复杂，那就搞一个类。其它需要这个代码的地方，调用这个函数，或者这个类就好了。
使用传统的 PageProducer 的方法
解决上述问题，在 12.2 之前的 Delphi 版本中，在页面代码需要嵌入一个外部文件的地方，写上一个 Tag 字符串，比如：<#MyPageHead>。然后在 Delphi 的代码里面，使用一个 PageProducer 来加载这个页面，在 PageProducer.OnTag 事件方法里面，写代码，根据对应的 Tag 字符串，把内容换成需要的字符串（比如，这个字符串是加载的一个外部 HTML 或者 TXT 文件，也就是一个页面组件）。
这样做的问题是：如果有很多页面，页面里面有很多组件需要用 Tag 方式替换，服务器端的 Delphi 代码就要写很多。没什么技术含量，就是代码多，很累。
PageProducer 把页面的各个组件都装配好以后，程序使用：
<code>Response.Content := PageProducer1.Content;
就可以把服务器端渲染好的页面代码发送给浏览器。
使用 WebStencils 的方法
类似 PageProducer ，设计期拖一个 TWebStencilsProcessor 到 WebModule1 里面，就可以开始使用它了。注意：这里必须还要有一个【引擎】控件，TWebStencilsEngine
假设我要输出 index.html 页面给浏览器，只需要：
WebStencilsProcessor1.InputFileName := 'index.html';
Response.Content := WebStencilsProcessor1.Content;
到这里，服务器端的 Delphi 代码就写完了。
至于在 Index.html 里面，组装其它页面代码，方法很简单：
页面模板和页面内容
首先，有一个所有页面都要使用的页面模板，大概就是一个框架页面，比如：
<html>
<head>
<style>xxxxxx</style>
<link xxxxx />
</head>
<body>
@RenderBody
</body>
</html>
这个框架页面代码保存为 Temp.html;
然后我们的 index.html 页面这样使用框架页面，以下是 index.html 的代码：
@LayoutPage Temp.html
<div>
我的页面内容，显示给用户看的部分
</div>
这里的逻辑是：
1. WebStencilsProcessor1 的 InputFileName 是 index.html，它加载这个文件；
2. 它发现 index.html 里面有一个 @LayoutPage Temp.html，去加载 temp.html 这个框架页面。
3. 框架页面里面，有个 @RenderBody ，它在这里，把 Index.html 的内容放进去，最终形成一个完整的页面代码，作为 WebStencilsProcessor1.Content 输出。
其它页面组件怎么办
上面那个逻辑把我误导了。以为在其它地方要引入一个页面组件，也是类似的画个圈（@）的方式。尤其是本文前面提到的那个官方文档里面有说：
@ExtraHeader { ... }: Used within the specific HTML page to indicate a block of code to be added as extra header information.@RenderHeader: Indicates in the template file (generally in the HTML head section) where to add the extra header of the page, if available
浪费我一个小时来回测试这个 RenderHeader，就是没效果。我怕是我打错字导致的，逐个字母用眼睛反复检查。怕我理解有错误，把这个 RenderHeader 和 ExtraHeader 反复在不同页面文件之间来回测试，不管哪个放到框架文件里面，都不行。
简单说，我的测试结果，上述玩意没有预期的输出结果。也查不到更多使用细节和方式。
最后发现文档里面还提到一个 @Import ，这个试试，发现，用它就对了。
注意：@Import 后面的文件名，必须是 .html 不能是 .txt 或者其它。
1. 把需要重复使用的页面 HTML 代码，抽出来单独保存为一个文件，我把它叫做一个 HTML 片段，一个 HTML 组件。
2. 在一个页面，需要这个组件的地方，使用 @Import 文件名.html 的方式。
以下是我测试成功的框架页面的代码：
<!DOCTYPE html>
<html lang="en">code>
@Import HTMLHeader.html
<body>
<!-- Header -->
@Import PageHeader.html
<!-- ./ Header -->
<!-- Main -->
<main class="container">code>
@RenderBody
<!-- ./ Main -->
</main>
<!-- Footer -->
@Import PageFooter.html
<!-- ./ Footer -->
</body>
</html>
One more thing
简单总结一下：
1. 使用一个框架页面，在需要装正式内容的地方，写上：@RenderBody;
2. 页面内容文件比如 index.html，不需要有页面框架代码诸如 <html> 等等，仅仅只需要提供页面显示内容。然后在文件开头把要使用的框架文件的名字写上去：@LayoutPage 框架.html；
3. 页面的其它地方的代码，需要引入其它外部文件的内容，使用 @Import 文件名.html 的方式。
问题来了：
我的页面组装正确了，也正确显示了。但我在页头里引用的 HTMX 的 javascript 没有起作用。用浏览器的开发者工具查看，发现提示是，这个 javascript 文件不存在。
把开发工具里面显示的这个 JavaScript 的 URL 拷贝出来，放到文本编辑器里面，和能够正常工作的页面里面的 URL 上下排在一起，逐个字母用眼睛对比看，发现了问题。原来那个 URL 里面有一个圈（@）符号。经过 WebStencilsProcessor1 处理后，那个圈没有了。
那个 HTMX 的引用如下：
<script src="https://unpkg.com/htmx.org@2.0.2" integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" crossorigin="anonymous"></script>code>
这才想起官方文档里面有提到，如果需要一个圈，就来两个圈。
于是，把代码修改为：
<script src="https://unpkg.com/htmx.org@@2.0.2" integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" crossorigin="anonymous"></script>code>
我靠，通过了。问题解决。
结论
想要少写重复代码，省掉复制粘贴，以及减少复制粘贴为未来的代码修改带来的麻烦，使用 WebStencilsProcessor1 还是很有意义的。更不要提还可以直接在页面的 HTML 代码里面访问 Delphi 的对象。再结合 HTMX，会让 Delphi 写 Web 服务器的代码架构更加的合理顺畅。
有人有兴趣的话，可以一起探讨。
各位，我写这文到夜里 1 点 50 分。看了感觉还行的话，给点个赞嘛。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。