用 jetbrick-template 来实现 HTML layout 功能

最新推荐文章于 2021-06-20 13:36:13 发布

weixin_33752045

最新推荐文章于 2021-06-20 13:36:13 发布

阅读量109

点赞数

原文链接：https://my.oschina.net/sub/blog/181943

版权

为什么80%的码农都做不了架构师？>>>

1 在 jetbrick-template 中如何实现 layout 功能

通常页面都有一个布局，大体上有页面头部，尾部，以及正文三部分。头部和尾部内容基本上固定，只有正文是变化的。

jetbrick-template 可以使用 3 种方法实现模板的 layout 功能。

#include(file, ...) 指令
#tag layout(file, ...) 标签
#tag block(name) + #inlcude(file, ...) 组合

1.1 常规模式

我们将页面公共部分放在 include 文件中，然后在每个页面中应用 include 文件来实现内容共享。

main.jetx

#include("/include/header.jetx")
这是正文内容
#include("/include/footer.jetx")

这个不算 layout?
呵呵，继续放下看。

1.2 变种模式

常规模式中，只是共享了一些公共内容，但是并没有实现真正的 layout，因为 layout 一变，include 的方式可能就会发生变化，这样所有文件都要重新 include，不是很方便。

下面就是 #include 模式的变种（动态 include），来实现真正的 layout。

layout.jetx

<html>
  <head>
    <title>${title}</title>
  </head>
  <body>
    <div class="header">This is a logo image.</div>

    #include(parameter.pageUrl)

    <div class="footer">Copyright @2000-2010, All Rights Reserved.</div>
  </body>
</html>

main.jetx

<table>  
  这是正文内容  
</table>

Action.java

String url = "/layout.jetx?pageUrl=" + URLEncoder.encode("/main.jetx", "utf-8);
RequestDispatcher rd = getServletContext().getRequestDispatcher(url);
rd.forward(request, response);

怎么样？通过一个 pageUrl 参数来达到动态 layout 的目的，这样我们以后只要修改layout.jetx 文件就能达到修改所有页面布局了。

URL 访问方法： http://127.0.0.1:8080/layout.jetx?pageUrl=main.jetx

1.3 #tag layout(file, ...)

这里再介绍一种采用 layout 自定义标签来实现。

layout.jetx

<html>
  <head>
    <title>${title}</title>
  </head>
  <body>
    <div class="header">This is a logo image.</div>

    ${bodyContent}

    <div class="footer">Copyright @2000-2010, All Rights Reserved.</div>
  </body>
</html>

main.jetx

#tag layout("layout.jetx") 
<table>  
  这是正文内容  
</table>
#end

layout 标签允许指定一个 layout 模板文件，在渲染页面的时候，会将layout标签体的渲染内容作为一个 bodyContent 变量插入到 layout 指定模板文件里。

这样，我们就可以通过直接访问 http://127.0.0.1:8080/main.jetx

1.4 组合 #tag block() + #inlcude

上面的 #tag layout() 标签只能嵌入一块自定义的内容 ${bodyContent}，那么如果想要嵌入多个自定义的变量块呢？

main.jetx

#tag block("bodyContent1")
    BODY 1111
#end
#tag block("bodyContent2")
    BODY 2222
#end
#include ("layout.jetx")

layout.jetx

This is a header.
<div>
    ${bodyContent1}
</div>
<div>
    ${bodyContent2}
</div>
This is a footer.

输出结果：

This is a header.
<div>
    BODY 1111
</div>
<div>
    BODY 2222
</div>
This is a footer.

怎么样？现在就可以随意的进行组合了。

1.5 总结

不管采用哪种方式，jetbrick-template 都提供很大的灵活性来实现页面布局功能。

其中自定义 #tag 标签机制提供了非常强大功能，很容易实现其他模板引擎难以实现的功能，比如像 JSP Taglib 一样实现自定义标签，如 Cache Tag 将内容缓存到 memecached/redis 的标签等等。

转载于:https://my.oschina.net/sub/blog/181943

weixin_33752045

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用 jetbrick-template 来实现 HTML layout 功能

为什么80%的码农都做不了架构师？>>> ...
复制链接

扫一扫