鹿泉城乡建设局网站懒设计官网
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