推广 热搜:   公司  企业  中国  快速    行业  上海  未来  设备 

Delphi 12.2 新增的 WebStencils 尝鲜

   日期:2024-12-27     移动:http://fabua.ksxb.net/mobile/quote/4765.html

这个玩意怎么用,用起来有意义吗

试试才知道。以下测试的描述都是基于 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 个页面分为两组,每一组的页面的 部分是相同的。如果 10 个页面文件都复制粘贴上相同页面代码,就很土气。应该把相同的部分,单独写在一个文件里面,需要使用的页面,仅仅只需要引用这个文件就好了。

另外,页面的页头,抬头的 Banner 部分,菜单部分,可能也是多个页面是相同的。

另外,页面的页脚部分,可能也是很多页面相同。

都有类似的情况。

写 Delphi 代码的人,当然想把相同的代码抽离出来,放到一个函数里面。如果函数太复杂,那就搞一个类。其它需要这个代码的地方,调用这个函数,或者这个类就好了。

使用传统的 PageProducer 的方法

解决上述问题,在 12.2 之前的 Delphi 版本中,在页面代码需要嵌入一个外部文件的地方,写上一个 Tag 字符串,比如:<#MyPageHead>。然后在 Delphi 的代码里面,使用一个 PageProducer 来加载这个页面,在 PageProducer.onTag 事件方法里面,写代码,根据对应的 Tag 字符串,把内容换成需要的字符串(比如,这个字符串是加载的一个外部 HTML 或者 TXT 文件,也就是一个页面组件)。

这样做的问题是:如果有很多页面,页面里面有很多组件需要用 Tag 方式替换,服务器端的 Delphi 代码就要写很多。没什么技术含量,就是代码多,很累。

PageProducer 把页面的各个组件都装配好以后,程序使用

 

就可以把服务器端渲染好的页面代码发送给浏览器。

使用 WebStencils 的方法

类似 PageProducer ,设计期拖一个 TWebStencilsProcessor 到 WebModule1 里面,就可以开始使用它了。注意:这里必须还要有一个【引擎】控件,TWebStencilsEngine

假设我要输出 index.html 页面给浏览器,只需要

 

到这里,服务器端的 Delphi 代码就写完了。

至于在 Index.html 里面,组装其它页面代码,方法很简单

页面模板和页面内容

首先,有一个所有页面都要使用的页面模板,大概就是一个框架页面,比如

 

这个框架页面代码保存为 Temp.html;

然后我们的 index.html 页面这样使用框架页面,以下是 index.html 的代码

 
这里的逻辑是

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 的方式。

以下是我测试成功的框架页面的代码

 
One more thing
简单总结一下

1. 使用一个框架页面,在需要装正式内容的地方,写上@RenderBody;

2. 页面内容文件比如 index.html,不需要有页面框架代码诸如 等等,仅仅只需要提供页面显示内容。然后在文件开头把要使用的框架文件的名字写上去@LayoutPage 框架.html

3. 页面的其它地方的代码,需要引入其它外部文件的内容,使用 @import 文件名.html 的方式。

问题来了

我的页面组装正确了,也正确显示了。但我在页头里引用的 HTMX 的 javascript 没有起作用。用浏览器的开发者工具查看,发现提示是,这个 javascript 文件不存在。

把开发工具里面显示的这个 Javascript 的 URL 拷贝出来,放到文本编辑器里面,和能够正常工作的页面里面的 URL 上下排在一起,逐个字母用眼睛对比看,发现了问题。原来那个 URL 里面有一个圈@)符号。经过WebStencilsProcessor1 处理后,那个圈没有了。

那个 HTMX 的引用如下

 

这才想起官方文档里面有提到,如果需要一个圈,就来两个圈。

于是,把代码修改为

 

我靠,通过了。问题解决。

想要少写重复代码,省掉复制粘贴,以及减少复制粘贴为未来的代码修改带来的麻烦,使用WebStencilsProcessor1 还是很有意义的。更不要提还可以直接在页面的 HTML 代码里面访问 Delphi 的对象。再结合 HTMX,会让 Delphi 写 Web 服务器的代码架构更加的合理顺畅。

有人有兴趣的话,可以一起探讨。

本文地址:http://fabua.ksxb.net/quote/4765.html    海之东岸资讯 http://fabua.ksxb.net/ , 查看更多

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


相关最新动态
推荐最新动态
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  粤ICP备2023022329号