JSF 中模板(template)标签指令的使用

简介: 本文介绍了JSF中模板标签的使用,通过Facelets标签指令创建网页模板。将页面分为header, content和footer三部分,分别用header.xhtml, content.xhtml和footer.xhtml定义。主模板文件通过ui:insert和ui:include将子模块组装在一起,实现页面布局。最后简要提及了JSF标签库的作用和JSTL的相关内容。

JSF 中模板(template)标签指令的使用

一、JSF 的小面板(Facelets)标签指令

image.png

二、网页模板系统定义的宏观关系

image.png

三、JSF 模板面板的创建

这个网页从上到下划分为 3 个版块或分区,则分别定义 header.xhtml、
content.xhtml 和 footer.xhtml 文件,以定义排版格式。
3.1:header.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<body>
<ui:composition> <!--面板内容定义-->
<h2>默认的页面标题版块内容</h2>
</ui:composition>
</body>
</html>

3.2:content.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<body>
<ui:composition> <!--面板内容定义-->
<h2>默认的内容</h2>
</ui:composition>
</body>
</html>

3.3:footer.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<body>
<ui:composition> <!--面板内容定义-->
<h2>默认的页脚版块信息————XX 公司版权所有, 2021.</h2>
</ui:composition>
</body>
</html>

四、建立主模板文件,实现三个子模块页面的组装

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<h:outputStylesheet name="commonStyle.css" library="css" /><!--使用 css 样式-->
</h:head>
<h:body>
<div id="page">
<div id="header"> <!--html 页面区名为 header,区域显示风格设置-->
<ui:insert name="header" ><!--jsf 页面版块区名为 header,版块内容设置-->
<ui:include src="header.xhtml" /> <!--包含的版块内容-->
</ui:insert>
</div>
<div id="content">
<ui:insert name="content" >
<ui:include src="contents.xhtml" />
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer" >
<ui:include src="footer.xhtml" />
</ui:insert>
</div>
</div>
</h:body>
</html>

五、总结

标签库的功能:
主要是辅助 JSP 页面数据后数据的格式转换、输出等效率提升问题.
核心的数据处理,仍然采用 JSP 服务脚本的方式予以处理.
JSTL 标签库的组成
JSTL 标签库与页面表达式语言结合使用的方法.
JSTL 标签库中常用标签的参数与设置方法.
JSF 标签库的功能特点.
JSF 页面模板系统的功能与作用.

如果上述内容帮助到你了,点个赞支持一下吧。

目录
相关文章
|
6月前
|
XML JavaScript 前端开发
springboot配合Freemark模板生成word,前台vue接收并下载【步骤详解并奉上源码】
springboot配合Freemark模板生成word,前台vue接收并下载【步骤详解并奉上源码】
206 2
|
28天前
|
人工智能 JavaScript 程序员
vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持
vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持
114 0
|
2月前
|
XML 前端开发 PHP
ThinkPHP6 模板引擎普通标签中,模板引擎运算符函数,循环标签,判断标签的使用,及一些特殊标签
本文介绍了ThinkPHP6模板引擎中普通标签和XML标签的使用方法,包括模板引擎运算符函数、循环标签、判断标签以及一些特殊标签的使用。文中详细解释了普通标签的运算符和函数、注释、循环标签(foreach、volist、for)和判断标签(if、switch)的语法规范和示例。此外,还提到了literal和php标签用于原样输出和编写PHP代码的方法。
ThinkPHP6 模板引擎普通标签中,模板引擎运算符函数,循环标签,判断标签的使用,及一些特殊标签
|
4月前
|
JSON JavaScript 数据格式
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
|
6月前
|
前端开发 数据可视化 UED
【Web 前端】标签上title与alt属性有什么区别?
【4月更文挑战第22天】【Web 前端】标签上title与alt属性有什么区别?
|
JavaScript 安全 前端开发
Vue3-文本类指令
Vue3-文本类指令
77 0
21Vue - 绑定 HTML Class(对象语法)
21Vue - 绑定 HTML Class(对象语法)
60 0
|
JavaScript
Vue antdv a-select 自定义 dropdownRender 的内容放到头部
Vue antdv a-select 自定义 dropdownRender 的内容放到头部
1550 0
|
前端开发 Unix Linux
|
Java
strus2中页面的s标签,替换jsp的el和jstl标签
strus2中页面的s标签,替换jsp的el和jstl标签
112 0
strus2中页面的s标签,替换jsp的el和jstl标签