JSF 2使用Facelets进行模板化的示例

最新推荐文章于 2020-07-08 16:05:24 发布

cyan20115

最新推荐文章于 2020-07-08 16:05:24 发布

阅读量260

点赞数

文章标签： ui xhtml java

在Web应用程序中，大多数页面遵循相似的Web界面布局和样式，例如，相同的页眉和页脚。在JSF 2.0中，您可以使用Facelets标记轻松提供标准的Web界面布局，实际上，它与Apache Tiles框架看起来很相似。

在此示例中，它显示了使用4个Facelets标签来从模板构建页面：

ui：insert –在模板文件中使用，它定义了将由加载模板的文件替换的内容。内容可以替换为“ ui：define”标签。
ui：define –使用匹配的“ ui：insert”标签定义插入模板的内容。
ui：include –与JSP的“ jsp：include”类似，包括来自另一个XHTML页面的内容。
ui：composition –如果与“ template”属性一起使用，则将加载指定的模板，并且此标记的子代定义模板布局；否则，它是一组元素，可以插入到某处。另外，JSF删除了“ ui：composition”标签“ outside”之外的所有标签。

1.模板布局

在JSF 2.0中，模板文件只是普通的XHTML文件，几乎没有JSF facelets标记来定义模板布局。

文件：commonLayout.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:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >

    <h:head>
	<h:outputStylesheet name="common-style.css" library="css" />
    </h:head>
    
    <h:body>

	<div id="page">
		
	    <div id="header">
		<ui:insert name="header" >
		  <ui:include src="/template/common/commonHeader.xhtml" />
		</ui:insert>
	    </div>
	    
	    <div id="content">
	  	<ui:insert name="content" >
	 	  <ui:include src="/template/common/commonContent.xhtml" />
	   	</ui:insert>
	    </div>
		    
	    <div id="footer">
	    	<ui:insert name="footer" >
	    	  <ui:include src="/template/common/commonFooter.xhtml" />
	    	</ui:insert>
    	    </div>

        </div>

    </h:body>
</html>

在此模板中，它定义了标准的Web布局：

使用“ h：outputStylesheet ”标签在头部包含一个CSS文件，以样式化整个页面布局。
使用“ ui：insert ”标签定义三个可替换的部分：页眉，内容和页脚。
如果在使用模板时未指定替换内容，则使用“ ui：include ”标签提供默认内容。

2.页眉，内容和页脚

三个默认页面内容。

文件：commonHeader.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>
	
		<h1>This is default header</h1>
				
	    </ui:composition>
    </body>
</html>

文件：commonContent.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>
	
		<h1>This is default content</h1>
				
	    </ui:composition>
    </body>
</html>

文件：commonFooter.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>
	
		<h1>This is default footer</h1>
				
	    </ui:composition>
    </body>
</html>

将这些页面插入模板文件后，“ ui:composition ”之外的所有标签都将被删除。例如，

文件：commonHeader.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>
	    ALL TAGS ABOVE THIS LINE WILL BE REMOVED BY JSF
	    <ui:composition>
	
		<h1>This is default header</h1>
				
	    </ui:composition>
	    ALL TAGS BELOW THIS LINE WILL BE REMOVED BY JSF
    </body>
</html>

JSF仅采用以下元素并将其插入模板文件

<ui:composition>
	
	<h1>This is default header</h1>
				
</ui:composition>

当插入“ commonLayout”模板时，它变成了……

文件：commonLayout.xhtml

...
    <h:body>

	<div id="page">
		
	    <div id="header">
		<h1>This is default header</h1>
	    </div>
	...

3.使用模板

利用现有模板，例如 “ commonLayout.xhtml ”， commonLayout.xhtml “ ui:composition ”标记与“ template”属性一起使用。请参阅以下两个示例：

文件：default.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:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <h:body>
    	
    	<ui:composition template="template/common/commonLayout.xhtml">

    	</ui:composition>
    	
    </h:body>

</html>

此JSF页面加载“ commonLayout.xhtml”模板并显示所有默认页面内容。

文件：page1.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:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <h:body>
    	
    	<ui:composition template="/template/common/commonLayout.xhtml">
    	
    		<ui:define name="content">
    			<h2>This is page1 content</h2>
    		</ui:define>
    		
		<ui:define name="footer">
    			<h2>This is page1 Footer</h2>
    		</ui:define>
			
    	</ui:composition>
    	
    </h:body>

</html>

此JSF页面加载“ commonLayout.xhtml”模板，并使用“ ui：define”标记覆盖模板文件中定义的“ ui：insert”标记。

注意
只要将“ ui：define ”标记的名称与模板中定义的“ ui：insert ”标记的名称匹配，就会替换“ ui：insert”内容。

下载源代码

下载它– JSF-2-Facelets-Template-Example.zip （12KB）

参考文献
Apache Tiles框架
JSF“ ui：include” JavaDoc
JSF“ ui：insert” JavaDoc
JSF“ ui：define” JavaDoc
JSF“ ui：composition” JavaDoc

标签： jsf2 模板

翻译自: https://mkyong.com/jsf2/jsf-2-templating-with-facelets-example/

cyan20115

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JSF 2使用Facelets进行模板化的示例

在Web应用程序中，大多数页面遵循相似的Web界面布局和样式，例如，相同的页眉和页脚。在JSF 2.0中，您可以使用Facelets标记轻松提供标准的Web界面布局，实际上，它与Apache Tiles框架看起来很相似。在此示例中，它显示了使用4个Facelets标签来从模板构建页面： ui：insert –在模板文件中使用，它定义了将由加载模板的文件替换的内容。内容可以替换为“...
复制链接

扫一扫