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

🕗 发布于 2024-11-13 03:21 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

原文地址：https://blog.csdn.net/m0_69824302/article/details/143725859

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

谷歌推出设备内置人工智能，实时向手机用户发出诈骗电话警报
Google 宣布推出适用于 Android 的新安全功能，可实时防御诈骗和有害应用。
阅读更多2024-11-16
动手学深度学习70 BERT微调
13 bert一般可以用工具转成c++ 开销大。考虑怎么提升bert性能。14 设备性能不高，可以用蒸馏bert。模型中有大量冗余的东西。9 10, 一般不固定，固定参数可以使训练速度加快，可以尝试
阅读更多2024-11-16
怎么改变网络IP地址：实用指南与注意事项
在数字化时代，IP地址作为设备连接互联网的“身份证”，扮演着至关重要的角色。无论是出于隐私保护、访问限制绕过，还是网络安全考虑，有时我们需要更改设备的IP地址。然而，对于许多非技术用户而言，这一过程可
阅读更多2024-11-16
huggingface 下载方法测试ok
huggingface 下载方法：
阅读更多2024-11-16
计算机网络（10）网络性能
在计算机网络中，网络性能是指网络传输数据的效率、速度和稳定性。
阅读更多2024-11-16
Springboot校园失物招领平台
Springboot校园失物招领平台
阅读更多2024-11-16
HarmonyOS 如何获取设备信息（系统、版本、网络连接状态）
HarmonyOS 提供了一个强大的 API 集，方便开发者获取设备的硬件和软件信息。通过模块的deviceInfo接口，开发者可以访问设备的型号、品牌、系统版本等详细信息。本文将详细介绍如何使用这些
阅读更多2024-11-16
Vue3集成搜索引擎智能提示API
问题：因为API返回的是JSONP数据，JSONP是跨域访问的一种方式，网上很多都是用的原生的 js 代码去发送请求，嵌入到vue中不太方便，因此我想着vue能不能直接发送jsonp 请求，后面发现v
阅读更多2024-11-16
【Linux】Linux 权限的理解
本文简单介绍了Linux的基础知识--权限。
阅读更多2024-11-16
Python 中.title()函数和.lower()函数
将字符串中的每一大写字母都变成的小写字母。将字符串中的每一单词的首字母大写。1.lower()函数的功能。1.title()函数的功能。一.title()函数。二.lower()函数。
阅读更多2024-11-16

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

JSF OutputScript示例

JSF教程 - JSF OutputScript示例

例子

运行

JSF 表单命令按钮示例

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

标签属性

例子

运行

JSF 链接示例

JSF教程 - JSF链接示例

标签属性

例子

运行

JSF 命令链接

JSF教程 - JSF命令链接

标签属性

例子

运行

JSF 输出链接

JSF教程 - JSF输出链接

标签属性

例子

运行

JSF 相对应消息标记

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

标签属性

例子

运行

JSF 所有消息标记

JSF教程 - JSF所有消息标记

标签属性

例子

运行

JSF PanelGrid示例

JSF教程 - JSF PanelGrid示例

标签属性

例子

运行

JSF 参数示例

JSF教程 - JSF参数示例

标签属性

例子

运行

JSF 属性示例

JSF教程 - JSF属性示例

标签属性

例子

运行

JSF setPropertyActionListener示例

JSF教程 - JSF setPropertyActionListener示例

例子

运行

相关文章