JSF HTML标签教程一口气讲完！（下）

JSF OutputScript示例

JSF教程 - JSF OutputScript示例

h:outputScript标记渲染类型为“script"的HTML元素，类型为“text/javascript"。

此标记将外部JavaScript文件添加到JSF页面。

以下JSF标记

<h:outputScript library="js" name="help.js" />

被渲染为以下HTML代码。

<script type="text/javascript" 
   src="/helloworld/javax.faces.resource/help.js.jsf?ln=js"></script>

例子

以下代码来自common.js。

document.write("www.w3cschool.cn");

下面的代码来自UserBean.java。

package cn.w3cschool.common;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
 
  
}

以下代码来自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">
    <h:head></h:head>
    <h:body>
      
      <h:outputScript library="js" name="common.js" target="head" />
      
    </h:body>

</html>

下载 OutputScript.zip

运行

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

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

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

JSF 表单命令按钮示例

JSF教程 - JSF表单命令按钮示例

h:commandButton标签渲染类型为“submit"的HTML输入元素。

下面的JSF代码

<h:commandButton value="Click Me!" οnclick="alert("Hello World!");" />

被渲染成以下HTML代码。

<input type="submit" name="j_idt10:j_idt13" value="Click Me!"
   οnclick="alert("Hello World!");" />

标签属性

属性	描述
id	标签的标识
rendered	布尔值; false将抑制渲染
styleClass	级联样式表(CSS)类名称
value	值绑定
valueChangeListener	响应值更改的方法绑定
required	布尔值; 如果为true，则根据需要标记标签
coords	形状为矩形，圆形或多边形的元素的坐标
dir	文本的方向。有效值为 ltr (从左到右)和 rtl (从右到左)。
disabled	输入元素或按钮的禁用状态
style	内联样式信息
tabindex	指定制表符索引的数值
target	打开文档的框架的名称
title	用于辅助功能的标题。浏览器通常为标题的值创建工具提示
width	元素的宽度
onblur	失去焦点的事件处理程序
onchange	值更改的事件处理程序
onclick	鼠标按钮的事件处理程序点击该元素
ondblclick	双击鼠标按钮的事件处理程序
onfocus	元素接收焦点的事件处理程序
onkeydown	按键的事件处理程序
onkeypress	键按下并释放的事件处理程序
onkeyup	Key的事件处理程序发布
onmousedown	鼠标按钮的事件处理程序
onmousemove	鼠标移动的事件处理程序
onmouseout	鼠标左的事件处理程序
onmouseover	鼠标移动到的事件处理程序
onmouseup	释放鼠标按钮的事件处理程序
onreset	表单重置的事件处理程序
onselect	选择文本的事件处理程序

例子

以下代码来自login.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"
      >
 
    <h:body>
      
      <h1>login.xhtml</h1>
      
    </h:body>

</html>

下面的代码来自UserBean.java。

package cn.w3cschool.common;


import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
 
  public String goLoginPage(){
    
    return "login";
    
  }
}

以下代码来自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"
      >
    <h:head></h:head>
    <h:body>
      
      <h1>JSF 2 button and commandButton example</h1>
      
      <h:form>
      <ol>
        <li>
          <h:commandButton value="submit" type="submit" action="#{user.goLoginPage}" />
        </li>
        <li>
          <h:commandButton value="reset" type="reset" />
        </li>
        <li>
          <h:commandButton value="button" type="button" />
        </li>
        <li>
          <h:commandButton value="Click Me" type="button" οnclick="alert("h:commandButton");" />
        </li>
        <li>
          <h:button value="buton" />
        </li>
        <li>
          <h:button value="Click Me" οnclick="alert("h:button");" />
        </li>
        <li>
          <h:button value="buton" outcome="login" />
        </li>
      </ol>
      </h:form>
      
    </h:body>

</html>

下载 Form_CommandButton.zip

运行

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

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

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

JSF 链接示例

JSF教程 - JSF链接示例

h:Link标签渲染一个HTML“anchor"元素。

以下JSF标记

<h:link value="Page 1" outcome="page1" />

被渲染为以下HTML代码

<a href="/helloworld/page1.jsf">Page 1</a>

标签属性

属性	描述
id	标签的标识
binding	引用在backing bean中使用的组件
rendered	布尔值; false将抑制渲染
styleClass	级联样式表(CSS)类名称
value	值绑定
valueChangeListener	响应值更改的方法绑定
converter	转换器类名
validator	附加到组件的验证器的类名
required	布尔值; 如果为true，则根据需要标记标签
accesskey	给予一个元素的焦点
accept	表单的内容类型的逗号分隔列表
accept-charset	表单的字符编码的逗号或空格分隔列表。
alt	非文字元素(例如图片)的替代文字
border	元素的边框宽度的像素值
charset	链接资源的字符编码
coords	形状为矩形，圆形或多边形的元素的坐标
dir	文本的方向。有效值为 ltr (从左到右)和 rtl (从右到左)。
hreflang	使用 href 属性指定的资源的基本语言;
lang	元素的属性和文本的基本语言
maxlength	文本字段的最大字符数
readonly	输入字段的只读状态
rel	当前页面和链接页面之间的关系
rev	将从 href 指定的锚点反向链接到当前文档。
style	内联样式信息
tabindex	指定制表符索引的数值
target	打开文档的框架的名称
title	用于辅助功能的标题。浏览器通常为标题的值创建工具提示
type	链接类型; 例如样式表
width	元素的宽度
onblur	失去焦点的事件处理程序
onchange	值更改的事件处理程序
onclick	鼠标按钮的事件处理程序点击该元素
ondblclick	双击鼠标按钮的事件处理程序
onfocus	元素接收焦点的事件处理程序
onkeydown	按键的事件处理程序
onkeypress	键按下并释放的事件处理程序
onkeyup	Key的事件处理程序发布
onmousedown	鼠标按钮的事件处理程序
onmousemove	鼠标移动的事件处理程序
onmouseout	鼠标左的事件处理程序
onmouseover	鼠标移动到的事件处理程序
onmouseup	释放鼠标按钮的事件处理程序
onreset	表单重置的事件处理程序
onselect	选择文本的事件处理程序

例子

以下代码来自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:f="http://java.sun.com/jsf/core">
    <h:body>
      <h:form>
       <h:link value="Login page" outcome="login" />
      <br/>
      <h:link value="Login page + Param " outcome="login" >
        <f:param name="username" value="mkyong" />
      </h:link>
      <br/>
       <h:link outcome="login" >
         <h:graphicImage library="images" name="myImage.png" />
       </h:link>
      <br/>
       <h:commandLink value="Login page" />
      <br/>
       <h:commandLink action="#{user.goLoginPage}" value="Login page" />
      <br/>
       <h:commandLink action="#{user.goLoginPage}" value="Login page + Param ">
         <f:param name="username" value="mkyong" />
       </h:commandLink>
      <br/>
       <h:commandLink action="#{user.goLoginPage}">
         <h:graphicImage library="images" name="myImage.png" />
       </h:commandLink>
      <br/>
       <h:outputLink>Login page</h:outputLink>
      <br/>
       <h:outputLink value="login.xhtml" >Login page</h:outputLink>
      <br/>
       <h:outputLink value="login.xhtml">
         <h:outputText value="Login page" />
         <f:param name="username" value="www.w3cschool.cn" />
       </h:outputLink>
      <br/>
       <h:outputLink value="login.xhtml">
         <h:graphicImage library="images" name="myImage.png" />
       </h:outputLink>
      </h:form>
    </h:body>
</html>

下面的代码来自UserBean.java。

package cn.w3cschool.common;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
 
  public String goLoginPage(){
    
    return "login";
    
  }
}

以下代码来自login.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"
      >
 
    <h:body>
      
      <h1>login.xhtml</h1>
      
    </h:body>

</html>

下载 Link-commandLink-outputLink.zip

运行

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

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

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

JSF 命令链接

JSF教程 - JSF命令链接

h:commandLink标签渲染一个HTML“anchor"元素。

以下JSF标记

<h:commandLink value="Page 1" action="page1" />

被渲染为以下HTML代码

<a href="#" οnclick="mojarra.jsfcljs(document.getElementById("j_idt13"),
{"j_idt13:j_idt14":"j_idt13:j_idt14"},"");return false">Page 1</a>

标签属性

属性	描述
id	标签的标识
binding	引用在backing bean中使用的组件
rendered	布尔值; false将抑制渲染
styleClass	级联样式表(CSS)类名称
value	值绑定
valueChangeListener	响应值更改的方法绑定
converter	转换器类名
validator	附加到组件的验证器的类名
required	布尔值; 如果为true，则根据需要标记标签
accesskey	给予一个元素的焦点
accept	表单的内容类型的逗号分隔列表
accept-charset	表单的字符编码的逗号或空格分隔列表。
alt	非文字元素(例如图片)的替代文字
border	元素的边框宽度的像素值
charset	链接资源的字符编码
coords	形状为矩形，圆形或多边形的元素的坐标
dir	文本的方向。有效值为 ltr (从左到右)和 rtl (从右到左)。
hreflang	使用 href 属性指定的资源的基本语言;
lang	元素的属性和文本的基本语言
maxlength	文本字段的最大字符数
readonly	输入字段的只读状态
rel	当前页面和链接页面之间的关系
rev	将从 href 指定的锚点反向链接到当前文档。
style	内联样式信息
tabindex	指定制表符索引的数值
target	打开文档的框架的名称
title	用于辅助功能的标题。浏览器通常为标题的值创建工具提示
type	链接类型; 例如样式表
width	元素的宽度
onblur	失去焦点的事件处理程序
onchange	值更改的事件处理程序
onclick	鼠标按钮的事件处理程序点击该元素
ondblclick	双击鼠标按钮的事件处理程序
onfocus	元素接收焦点的事件处理程序
onkeydown	按键的事件处理程序
onkeypress	键按下并释放的事件处理程序
onkeyup	Key的事件处理程序发布
onmousedown	鼠标按钮的事件处理程序
onmousemove	鼠标移动的事件处理程序
onmouseout	鼠标左的事件处理程序
onmouseover	鼠标移动到的事件处理程序
onmouseup	释放鼠标按钮的事件处理程序
onreset	表单重置的事件处理程序
onselect	选择文本的事件处理程序

例子

以下代码来自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:f="http://java.sun.com/jsf/core">
    <h:body>
      <h:form>
       <h:link value="Login page" outcome="login" />
      <br/>
      <h:link value="Login page + Param " outcome="login" >
        <f:param name="username" value="mkyong" />
      </h:link>
      <br/>
       <h:link outcome="login" >
         <h:graphicImage library="images" name="myImage.png" />
       </h:link>
      <br/>
       <h:commandLink value="Login page" />
      <br/>
       <h:commandLink action="#{user.goLoginPage}" value="Login page" />
      <br/>
       <h:commandLink action="#{user.goLoginPage}" value="Login page + Param ">
         <f:param name="username" value="mkyong" />
       </h:commandLink>
      <br/>
       <h:commandLink action="#{user.goLoginPage}">
         <h:graphicImage library="images" name="myImage.png" />
       </h:commandLink>
      <br/>
       <h:outputLink>Login page</h:outputLink>
      <br/>
       <h:outputLink value="login.xhtml" >Login page</h:outputLink>
      <br/>
       <h:outputLink value="login.xhtml">
         <h:outputText value="Login page" />
         <f:param name="username" value="www.w3cschool.cn" />
       </h:outputLink>
      <br/>
       <h:outputLink value="login.xhtml">
         <h:graphicImage library="images" name="myImage.png" />
       </h:outputLink>
      </h:form>
    </h:body>
</html>

下面的代码来自UserBean.java。

package cn.w3cschool.common;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
 
  public String goLoginPage(){
    
    return "login";
    
  }
}

以下代码来自login.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"
      >
 
    <h:body>
      
      <h1>login.xhtml</h1>
      
    </h:body>

</html>

下载 Link-commandLink-outputLink.zip

运行

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

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

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

JSF 输出链接

JSF教程 - JSF输出链接

h:outputLink标签渲染一个HTML“anchor"元素。

以下JSF标记

<h:outputLink value="page1.jsf" >Page 1</h:outputLink>

将渲染为以下HTML标记。

<a href="page1.jsf">Page 1</a>

标签属性

属性	描述
id	标签的标识
binding	引用在backing bean中使用的组件
rendered	布尔值; false将抑制渲染
styleClass	级联样式表(CSS)类名称
value	值绑定
valueChangeListener	响应值更改的方法绑定
converter	转换器类名
validator	附加到组件的验证器的类名
required	布尔值; 如果为true，则根据需要标记标签
accesskey	给予一个元素的焦点
accept	表单的内容类型的逗号分隔列表
accept-charset	表单的字符编码的逗号或空格分隔列表。
alt	非文字元素(例如图片)的替代文字
border	元素的边框宽度的像素值
charset	链接资源的字符编码
coords	形状为矩形，圆形或多边形的元素的坐标
dir	文本的方向。有效值为 ltr (从左到右)和 rtl (从右到左)。
hreflang	使用 href 属性指定的资源的基本语言;
lang	元素的属性和文本的基本语言
maxlength	文本字段的最大字符数
readonly	输入字段的只读状态
rel	当前页面和链接页面之间的关系
rev	将从 href 指定的锚点反向链接到当前文档。
style	内联样式信息
tabindex	指定制表符索引的数值
target	打开文档的框架的名称
title	用于辅助功能的标题。浏览器通常为标题的值创建工具提示
type	链接类型; 例如样式表
width	元素的宽度
onblur	失去焦点的事件处理程序
onchange	值更改的事件处理程序
onclick	鼠标按钮的事件处理程序点击该元素
ondblclick	双击鼠标按钮的事件处理程序
onfocus	元素接收焦点的事件处理程序
onkeydown	按键的事件处理程序
onkeypress	键按下并释放的事件处理程序
onkeyup	Key的事件处理程序发布
onmousedown	鼠标按钮的事件处理程序
onmousemove	鼠标移动的事件处理程序
onmouseout	鼠标左的事件处理程序
onmouseover	鼠标移动到的事件处理程序
onmouseup	释放鼠标按钮的事件处理程序
onreset	表单重置的事件处理程序
onselect	选择文本的事件处理程序

例子

以下代码来自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:f="http://java.sun.com/jsf/core">
    <h:body>
      <h:form>
       <h:link value="Login page" outcome="login" />
      <br/>
      <h:link value="Login page + Param " outcome="login" >
        <f:param name="username" value="mkyong" />
      </h:link>
      <br/>
       <h:link outcome="login" >
         <h:graphicImage library="images" name="myImage.png" />
       </h:link>
      <br/>
       <h:commandLink value="Login page" />
      <br/>
       <h:commandLink action="#{user.goLoginPage}" value="Login page" />
      <br/>
       <h:commandLink action="#{user.goLoginPage}" value="Login page + Param ">
         <f:param name="username" value="mkyong" />
       </h:commandLink>
      <br/>
       <h:commandLink action="#{user.goLoginPage}">
         <h:graphicImage library="images" name="myImage.png" />
       </h:commandLink>
      <br/>
       <h:outputLink>Login page</h:outputLink>
      <br/>
       <h:outputLink value="login.xhtml" >Login page</h:outputLink>
      <br/>
       <h:outputLink value="login.xhtml">
         <h:outputText value="Login page" />
         <f:param name="username" value="www.w3cschool.cn" />
       </h:outputLink>
      <br/>
       <h:outputLink value="login.xhtml">
         <h:graphicImage library="images" name="myImage.png" />
       </h:outputLink>
      </h:form>
    </h:body>
</html>

下面的代码来自UserBean.java。

package cn.w3cschool.common;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
 
  public String goLoginPage(){
    
    return "login";
    
  }
}

以下代码来自login.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"
      >
 
    <h:body>
      
      <h1>login.xhtml</h1>
      
    </h:body>

</html>

下载 Link-commandLink-outputLink.zip

运行

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

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

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

JSF 相对应消息标记

JSF教程 - JSF相对应消息标记

h:message标记显示与UI元素相对应的消息。

以下JSF标记

<h:inputText  id="username"  size="20" label="UserName" required="true">
   <f:validateLength for="username" minimum="5" maximum="20" />      
</h:inputText>

<h:message for="username" style="color:red" />

如果输入超过20个字符。

<span style="color:red">UserName: Validation Error: 
Length is greater than allowable maximum of "20"</span>

如果输入小于5个字符。

<span style="color:red">UserName: Validation Error: 
Length is less than allowable minimum of "5"</span>

如果未输入输入字段。

<span style="color:red">UserName: Validation Error: Value is required</span>

标签属性

属性	描述
id	标签的标识
binding	引用在backing bean中使用的组件
rendered	布尔值; false将抑制渲染
styleClass	级联样式表(CSS)类名称
for	显示消息的组件ID
errorClass	应用于错误消息的CSS类
errorStyle	CSS样式应用于错误消息
fatalClass	CSS类应用于致命消息
fatalStyle	CSS样式应用于致命消息
globalOnly	仅显示全局消息的指令。默认值:false
infoClass	CSS类应用于信息消息
infoStyle	CSS样式应用于信息消息
layout	消息布局规范:表或列表
showDetail	确定是否显示邮件详细信息的布尔值。 h:messages的默认值为false，h:message的默认值为true
showSummary	确定是否显示消息摘要的布尔值。h:messages的默认值为true，h:message的值为false
tooltip	一个布尔值，用于设置是否在工具提示中呈现消息详细信息;仅当showDetail和showSummary为true时才会呈现工具提示
warnClass	警告消息的CSS类
warnStyle	CSS样式的警告消息
style	内联样式信息
title	用于辅助功能的标题。浏览器通常为标题的值创建工具提示

例子

以下代码来自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:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
     
    <h:body>
    <h:form>
      <h:messages style="color:red;margin:8px;" />
      <br />
      <h:panelGrid columns="3">
        Enter your username :
        <h:inputText id="username" value="#{user.username}" 
          size="20" required="true"
          label="UserName" >
          <f:validateLength minimum="5" maximum="10" />
        </h:inputText>
 
        <h:message for="username" style="color:red" />

        Enter your age :
        <h:inputText id="age" value="#{user.age}" 
          size="20" required="true"
          label="Age" >
          <f:validateLongRange for="age" minimum="1" maximum="200" />
        </h:inputText>
 
        <h:message for="age" style="color:red" />
        
      </h:panelGrid>
    
      <h:commandButton value="Submit" action="result" />
    
    </h:form>
    
    </h:body>
</html>

下面的代码来自UserBean.java。

package cn.w3cschool.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;
  
  public String username;
  public int age;
  
  public String getUsername() {
    return username;
  }
  public void setUsername(String username) {
    this.username = username;
  }
  public int getAge() {
    return age;
  }
  public void setAge(int age) {
    this.age = age;
  }
  
}

以下代码来自result.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">
    <h:body>
    Username : #{user.username}
    <br />
    Age : #{user.age}
    </h:body>
</html>

下载 Message_Tag.zip

运行

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

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

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

JSF 所有消息标记

JSF教程 - JSF所有消息标记

h:messages标记在与UI元素对应的一个地方显示所有消息。

以下JSF标记

<h:messages style="color:red;margin:8px;" />

如果输入的用户名超过20个字符，输入的密码小于5个字符。

<ul style="color:red;margin:8px;">
   <li>  UserName: Validation Error: 
   Length is greater than allowable maximum of "20" </li>
   <li>  Password: Validation Error: 
   Length is less than allowable minimum of "5" </li>
</ul>

标签属性

属性	描述
id	标签的标识
binding	引用在backing bean中使用的组件
rendered	布尔值; false将抑制渲染
styleClass	级联样式表(CSS)类名称
for	显示消息的组件ID
errorClass	应用于错误消息的CSS类
errorStyle	CSS样式应用于错误消息
fatalClass	CSS类应用于致命消息
fatalStyle	CSS样式应用于致命消息
globalOnly	仅显示全局消息的指令。默认值:false
infoClass	CSS类应用于信息消息
infoStyle	CSS样式应用于信息消息
layout	消息布局规范:表或列表
showDetail	确定是否显示邮件详细信息的布尔值。h:messages的默认值为false，h:message的默认值为true
showSummary	确定是否显示消息摘要的布尔值。h:messages的默认值为true，h:message的值为false
tooltip	一个布尔值，用于设置是否在工具提示中呈现消息详细信息;仅当showDetail和showSummary为true时才会呈现工具提示
warnClass	警告消息的CSS类
warnStyle	CSS样式的警告消息
style	内联样式信息
title	用于辅助功能的标题。浏览器通常为标题的值创建工具提示

例子

以下代码来自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:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
     
    <h:body>
    <h:form>
      <h:messages style="color:red;margin:8px;" />
      <br />
      <h:panelGrid columns="3">
        Enter your username :
        <h:inputText id="username" value="#{user.username}" 
          size="20" required="true"
          label="UserName" >
          <f:validateLength minimum="5" maximum="10" />
        </h:inputText>
 
        <h:message for="username" style="color:red" />

        Enter your age :
        <h:inputText id="age" value="#{user.age}" 
          size="20" required="true"
          label="Age" >
          <f:validateLongRange for="age" minimum="1" maximum="200" />
        </h:inputText>
 
        <h:message for="age" style="color:red" />
        
      </h:panelGrid>
    
      <h:commandButton value="Submit" action="result" />
    
    </h:form>
    
    </h:body>
</html>

下面的代码来自UserBean.java。

package cn.w3cschool.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;
  
  public String username;
  public int age;
  
  public String getUsername() {
    return username;
  }
  public void setUsername(String username) {
    this.username = username;
  }
  public int getAge() {
    return age;
  }
  public void setAge(int age) {
    this.age = age;
  }
  
}

以下代码来自result.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"
      >
     
    <h:body>
    
    Username : #{user.username}
    
    <br />
    
    Age : #{user.age}
    
    </h:body>
</html>

下载 Message_Tag.zip

运行

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

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

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

JSF PanelGrid示例

JSF教程 - JSF PanelGrid示例

h:panelGrid标记渲染一个HTML“table"元素。

以下JSF标记

<h:panelGrid id="panel" columns="2" border="1"
   cellpadding="10" cellspacing="1">
      <f:facet name="header">
         <h:outputText value="Login"/>
      </f:facet>
      <h:outputLabel value="Username" />
      <h:inputText  />
      <h:outputLabel value="Password" />
      <h:inputSecret />
      <f:facet name="footer">
         <h:panelGroup style="display:block; text-align:center">
            <h:commandButton id="submit" value="Submit" />
         </h:panelGroup>
      </f:facet>
</h:panelGrid>

将渲染为以下HTML标记。

<table id="j_idt10:panel" border="1" cellpadding="10" cellspacing="1">
<thead>
   <tr><th colspan="2" scope="colgroup">Login</th></tr>
</thead>
<tfoot>
   <tr>
      <td colspan="2">
      <span style="display:block; text-align:center">
      <input id="j_idt10:submit" type="submit"
      name="j_idt10:submit" value="Submit" />
      </span></td></tr>
</tfoot>
<tbody>
   <tr>
      <td><label>Username</label></td>
      <td><input type="text" name="j_idt10:j_idt17" /></td>
   </tr>
   <tr>
      <td><label>Password</label></td>
      <td><input type="password" name="j_idt10:j_idt21" value="" /></td>
   </tr>
</tbody>
</table>

标签属性

属性	描述
id	标签的标识
binding	引用在backing bean中使用的组件
rendered	布尔值; false将抑制渲染
styleClass	级联样式表（CSS）类名称
value	值绑定
bgcolor	表的背景颜色
border	表格边框的宽度
cellpadding	表格单元周围的填充
cellspacing	表格单元格之间的间距
columnClasses	列的CSS类的逗号分隔列表
columns	表中的列数
footerClass	表的页脚的CSS类
frame	框架框架侧面的规格围绕要绘制的表格; 有效值: none，above，below，hsides，vsides，lhs，rhs，box，border
headerClass	表头的CSS类
rowClasses	列的CSS类的逗号分隔列表
rules	细胞之间画线的规格; 有效值:组，行，列，全部
summary	表的摘要“使用的目的和结构用于诸如语音的非视觉反馈
dir	文本的方向。有效值为 ltr (从左到右)和 rtl (从右到左)。
lang	元素的属性和文本的基本语言
border	元素的边框宽度的像素值
lang	元素的属性和文本的基本语言
title	用于辅助功能的标题。浏览器通常为标题的值创建工具提示
width	元素的宽度
onblur	失去焦点的事件处理程序
onchange	值更改的事件处理程序
onclick	鼠标按钮的事件处理程序点击该元素
ondblclick	双击鼠标按钮的事件处理程序
onfocus	元素接收焦点的事件处理程序
onkeydown	按键的事件处理程序
onkeypress	键按下并释放的事件处理程序
onkeyup	Key的事件处理程序发布
onmousedown	鼠标按钮的事件处理程序
onmousemove	鼠标移动的事件处理程序
onmouseout	鼠标左的事件处理程序
onmouseover	鼠标移动到的事件处理程序
onmouseup	释放鼠标按钮的事件处理程序

例子

以下代码来自result.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:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:body>
  Number :  <h:outputText value="#{user.number}" />
        
    </h: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:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      >
    <h:body>
    <h:form>
      <h:panelGrid columns="3">
        Enter a number : 
        <h:inputText id="number" value="#{user.number}" 
          size="20" required="true"
          label="Number" >
          <f:convertNumber />
        </h:inputText>
        <h:message for="number" style="color:red" />
      </h:panelGrid>
      <h:commandButton value="Submit" action="result" />
    </h:form>
    </h:body>
</html>

下面的代码来自UserBean.java。

package cn.w3cschool.common;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean implements Serializable{
  
  int number;

  public int getNumber() {
    return number;
  }

  public void setNumber(int number) {
    this.number = number;
  }
  
}

下载 PanelGrid.zip

运行

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

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

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

JSF 参数示例

JSF教程 - JSF参数示例

我们可以使用f:param标签将参数传递给组件或传递请求参数。

以下代码显示如何将参数传递到UI组件。

<h:outputFormat value="Hello {0}!.">        
   <f:param value="World" />
</h:outputFormat>

以下代码传递请求参数及其名称。

<h:commandButton id="submit" 
   value="Show Message" action="#{userData.showResult}">
   <f:param name="username" value="JSF 2.0 User" />
</h:commandButton>

标签属性

属性	描述
id	组件的标识符
binding	引用可以在backing bean中使用的组件
name	参数组件的可选名称
value	存储在组件中的值

例子

以下代码来自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:f="http://java.sun.com/jsf/core">
    <h:body>
    <h:form id="form">
      Enter your name :
      <h:inputText size="10" value="#{user.name}" />
      <br /><br />
      <h:commandButton id="submitButton" 
        value="Submit - US" action="#{user.outcome}">
        <f:param name="country" value="United States" />
      </h:commandButton>
    </h:form>
    </h:body>
</html>

以下代码来自result.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:f="http://java.sun.com/jsf/core"
      >
     
    <h:body>
    
    <h3>
    <h:outputFormat value="Hello,{0}. You are from {1}.">
      <f:param value="#{user.name}" />
      <f:param value="#{user.country}" />
    </h:outputFormat>
    </h3>
    
    </h:body>
    
</html>

下面的代码来自UserBean.java。

package cn.w3cschool.common;


import java.util.Map;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean(name="user")
@SessionScoped
public class UserBean{

  public String name;
  public String country;
  
  public String outcome(){
    
    FacesContext fc = FacesContext.getCurrentInstance();
    this.country = getCountryParam(fc);
    
    return "result";
  }

  //get value from "f:param"
  public String getCountryParam(FacesContext fc){
    
    Map<String,String> params = fc.getExternalContext().getRequestParameterMap();
    return params.get("country");
    
  }
  
  public String getName() {
    return name;
  }

  public void setName(String name) {
    this.name = name;
  }

  public String getCountry() {
    return country;
  }

  public void setCountry(String country) {
    this.country = country;
  }

}

下载 Param.zip

运行

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

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

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

JSF 属性示例

JSF教程 - JSF属性示例

我们可以使用h:attribute标签将属性值传递给组件，或者通过动作侦听器将参数传递给组件。

以下代码显示如何使用h:attribute标签。

<h:commandButton id="submit" 
actionListener="#{userData.attributeListener}" action="result"> 
   <f:attribute name="value" value="Show Message" />        
   <f:attribute name="username" value="JSF 2.0 User" />
</h:commandButton>

标签属性

属性	描述
name	要设置的属性的名称
value	属性的值

例子

下面的代码来自UserBean.java。

package cn.w3cschool.common;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ActionEvent;

@ManagedBean(name="user")
@SessionScoped
public class UserBean{
  public String nickname;
  
  public void attrListener(ActionEvent event){
    nickname = (String)event.getComponent().getAttributes().get("username");
  }
  public String outcome(){
    return "result";
  }
  public String getNickname() {
    return nickname;
  }
  public void setNickname(String nickname) {
    this.nickname = nickname;
  }
  
}

以下代码来自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:f="http://java.sun.com/jsf/core">
    <h:body>
    <h:form id="form">
      <h:commandButton action="#{user.outcome}"
          actionListener="#{user.attrListener}">
        <f:attribute name="username" value="www.w3cschool.cn" />
        <f:attribute name="value" value="Click Me" />
      </h:commandButton>
    </h:form>
    </h:body>
</html>

以下代码来自result.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">
     
    <h:body>
    #{user.nickname}
    </h:body>
</html>

下载 Attribute.zip

运行

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

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

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

JSF setPropertyActionListener示例

JSF教程 - JSF setPropertyActionListener示例

h:setPropertyActionListener标记将一个操作监听器添加到将bean属性设置为给定值的组件。

以下代码显示如何使用 f:setPropertyActionListener 。

<h:commandButton id="submit" action="result" value="Show Message"> 
   <f:setPropertyActionListener target="#{userData.data}" 
      value="JSF 2.0 User" />
</h:commandButton>

例子

下面的代码来自UserBean.java。

package cn.w3cschool.common;


import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name="user")
@SessionScoped
public class UserBean{

  public String username;
  
  public String outcome(){
    return "result";
  }

  public String getUsername() {
    return username;
  }

  public void setUsername(String username) {
    this.username = username;
  }
  
}

以下代码来自result.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"
      >
     
    <h:body>
      
      <h1>JSF 2 setPropertyActionListener example</h1>
    
    #{user.username}
    
    </h: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:f="http://java.sun.com/jsf/core"
      >
     
    <h:body>
    <h:form id="form">
      
      <h:commandButton action="#{user.outcome}" value="Click Me">
      
        <f:setPropertyActionListener target="#{user.username}" value="w3cschool" />
        
      </h:commandButton>
      
    </h:form>
    
    </h:body>
</html>

下载 setPropertyActionListener.zip

运行

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

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

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