2.23. HTML标签

Beetl 也支持HTML tag形式的标签, 区分beetl的html tag 与 标准html tag。如设定HTML_TAG_FLAG=#,则如下html tag将被beetl解析

  1. <#footer style=”simple”/>
  2. <#richeditor id=”rid” path="${ctxPath}/upload" name=”rname” maxlength=”${maxlength}”> ${html} …其他模板内容 </#richdeitor>
  3. <#html:input id=’aaaa’ />

如对于标签footer,Beetl默认会寻找WebRoot/htmltag/footer.tag(可以通过配置文件修改路径和后缀) ,内容如下:

  1. <% if(style==’simple’){ %>
  2. 请联系我 ${session.user.name}
  3. <% }else{ %>
  4. 请联系我 ${session.user.name},phone:${session.user.phone}
  5. <% } %>

如下还包含了自定义html标签一些规则

  • 可以在自定义标签里引用标签体的内容,标签体可以是普通文本,beetl模板,以及嵌套的自定义标签等。如上<#richeditor 标签体里,可用“tagBody”来引用
  • HTML自定义标签 的属性值均为字符串 如<#input value="123" />,在input.tag文件里 变量value的类型是字符串
  • 可以在属性标签里引用beetl变量,如<#input value="${user.age}" />,此时在input.tag里,value的类型取决于user.age
  • 在属性里引用beetl变量,不支持格式化,如<#input value="${user.date,'yyyy-MM-dd'}"/>,如果需要格式化,需要在input.tag文件里自行格式化
  • 在标签属性里传json变量需要谨慎,因为json包含了"}",容易与占位符混合导致解析出错,因此得使用"\"符号,如<#input value="${ {age:25} }" />
  • html tag 属性名将作为 其对应模板的变量名。如果属性名包含“-”,则将转为驼峰命名的变量,如data-name,转为dataName
  • 默认机制下,HTMLTagSupportWrapper2 实现了标签(2.8.x以前使用HTMLTagSupportWrapper)
  • 标签属性带有"-“符号,会自动去掉,后面的字母大写,以符合变量命名规范
  • 所有的标签属性都保存在"$cols" 变量里,这是一个map,key为属性转化后的变量名,value是属性名(参考下面例子) 如果采用模板来写html标签功能不够强大,beetl支持写标签函数(参考上一节)来实现html标签,标签函数args[0]表示标签名,这通常没有什么用处,args[1] 则是标签的属性,参数是个map,key是html tag的属性,value是其属性值,如下用java完成的html 标签用于输出属性值
  1. public class SimpleHtmlTag extends Tag{
  2. @Override
  3. public void render(){
  4. String tagName = (String) this.args[0];
  5. Map attrs = (Map) args[1];
  6. String value = (String) attrs.get("attr");
  7. //Map allColsDefine = (map)attrs.get("$cols");
  8. try{
  9. this.ctx.byteWriter.writeString(value);
  10. }catch (IOException e){
  11. }
  12. }
  13. }

如果注册gt.registerTag("simpleTag", SimpleHtmlTag.class); 则如下模板输出了attr属性值abc

  1. <#simpleTag attr="abc"></#simpleTag>

HTML_TAG_FLAG默认为#用来区别是否是beetl的html tag,你也可以设置成其他符号,比如 "my:",这样,\my:table\\</my:table> 其实是一个指向table.tag的标签实现

Beetl默认标签并不包含父子关系,如果想在标签传递参数,可以使用pageCtx函数

  1. <#form>
  2. <#input name="user"></#input>
  3. </#form>

form标签实现如下

  1. <%
  2. var a = pageCtx("formParas",{"user":"abc"});
  3. %>
  4. <form>
  5. ${tagBody}
  6. </form>

input标签可以获取formParas参数

  1. <%
  2. var all = pageCtx("formParas");
  3. var value = all[name];
  4. %>
  5. <input name="${name}" value=${value} />