菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

开通VIP

领取更多软件工程师实用特权

 入驻

搜索

类型： 全部 | 视频教程 | 实战项目 | 项目源码 | 技术手册 | 课件 | 测试题 | 技术文章 | 软件下载 | 问答求助
水平： 全部 | 入门 | 普通 | 进阶

历史记录 清除记录

    你还没搜索过喔。

近期热搜

项目开发全程实录（电商EW_Shop）

8713 人 2年前

轻松学会Laravel-项目篇（商城API）

2030 人 2年前

Python数据分析2.0-金融

329 人 3年前

Python办公自动化2.0

243 人 3年前
阅读(23) 书签 赞(0) 我要纠错

JSF Facelets模板示例

原创
Java教程
05/13 14:22 更新
尊享10+项VIP特权
会员卡
开通学习猿地会员卡

JSF教程 - JSF Facelets模板示例

以下代码显示了如何使用JSF Facelets标签创建模板。

JSF应用程序中的模板定义了公共接口布局和样式。

例如，我们可以创建一个页面模板，其中有横幅，标题和页脚中的版权信息。

然后我们可以重用模板来创建页面。

JSF有以下facelets标签来创建模板布局。

标签 描述
ui:insert 定义要放置在模板中的内容。ui:define标签可以替换其内容。
ui:define 在模板中插入内容。
ui:include 将一个xhtml页面的内容包含到另一个xhtml页面中。
ui:composition 使用模板属性加载模板。它可以定义要插入xhtml页面的一组组件。

以下步骤显示如何创建模板。

创建头部文件：header.xhtml如下使用ui:composition标记。

<ui:composition> 
   <h1>Default Header</h1>  
</ui:composition>

创建页脚文件:footer.xhtml作为页脚

<ui:composition> 
   <h1>Default Footer</h1>  
</ui:composition>

创建内容文件:contents.xhtml定义内容部分的默认内容。

<ui:composition> 
   <h1>Default Contents</h1>  
</ui:composition>

创建模板：common.xhtml通过使用ui:insert和ui:include标记在模板文件中包含页眉/页脚和内容文件。在ui:insert标记中命名每个部分。
ui:insert标签的name属性将用于替换相应section的内容。

<h:body> 
   <ui:insert name="header" >
      <ui:include src="header.xhtml" />
   </ui:insert> 
   <ui:insert name="content" >
      <ui:include src="contents.xhtml" />
   </ui:insert>    
   <ui:insert name="footer" >
      <ui:include src="footer.xhtml" />
   </ui:insert>
</h:body>

以下代码显示如何使用带默认内容的模板创建home.xhtml

<h:body>
   <ui:composition template="common.xhtml">  
</h:body>

我们也可以结合模板和其他标签来创建一个新的页面。使用ui:define标记来覆盖默认值。

<h:body>
   <ui:composition template="templates/common.xhtml">  
      <ui:define name="content">        
         <h:link value="Page 1" outcome="page1" />
         &nbsp;
         <h:link value="Page 2" outcome="page2" />      
      </ui:define>
   </ui:composition>
</h:body>

例子

以下代码来自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>

以下代码来自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>

以下代码来自demo.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>

以下代码来自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>

下面的代码来自UserBean.java。

package com.lmonkey.common;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean implements Serializable{  
  private static final long serialVersionUID = 1L;

}

以下代码来自common-style.css。

#page{
  width: 800px;
  margin: 0 auto;
}

#header{
  width: 100%;
  height:100px;
  border: 1px solid #000;
  margin-bottom:16px;
}

#content{
  width: 100%;
  height:200px;
  margin-right:16px;
  margin-bottom:16px;
  border: 1px solid #000;
}

#footer{
  width: 100%;
  height:100px;
  border: 1px solid #000;
}

以下代码来自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>

以下代码来自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>

运行

将生成的WAR文件从目标文件夹复制到Tomcat部署文件夹，并运行Tomcat-Install-folder/bin/startup.bat。

Tomcat完成启动后，在浏览器地址栏中键入以下URL。

http://localhost:8080/simple-webapp/demo.xhtml

推荐文章

推荐教程

推荐课程

    © 著作权归作者所有

    举报
    综合评分：9.9 评分 请对本文进行纠错，及学习过程中有困难疑惑可在此进行讨论

    学习猿地
    程序员学习的地方

    扫码关注

    成就自己的只需一套精品