JSF----------基础知识初解

r囧r小猫 2022-05-29 12:47 777阅读 0赞

初次学习JSF,对其基础进行了一些学习与整理。

JSF(JavaServer Faces)它是一个基于服务器端组件的用户界面框架。 它用于开发Web应用程序。 它提供了一个定义良好的编程模型，由丰富的API和标签库组成。最新版本JSF 2使用Facelets作为其默认模板系统。 它是用Java编写的。

JSF API提供组件(inputText，commandButton等)并帮助管理其状态。 它还提供服务器端验证，数据转换，定义页面导航，提供可扩展性，国际化支持，可访问性等。

JSF标签库用于在Web页面上添加组件，并将组件与服务器上的对象进行连接。 它还包含实现组件标签的标签处理程序。

借助这些功能和工具，您可以轻松轻松地创建服务器端用户界面。

# 1.JSF的特点 #

<table> 
 <thead> 
  <tr> 
   <th>特点</th> 
   <th align="center">解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>基于组件的框架</td> 
   <td align="center">JSF是一个基于服务器端组件的框架，它提供内置组件来构建Web应用程序。您可以使用HTML5，Facelets标签来创建网页</td> 
  </tr> 
  <tr> 
   <td>实现Facelets技术</td> 
   <td align="center">Facelets是一个开源Web模板系统。它是JavaServer Faces(JSF)的默认视图处理程序技术。 该语言需要有效的输入XML文档才能正常工作。 Facelets支持所有的JSF UI组件，并且完全侧重于构建JSF应用程序的视图</td> 
  </tr> 
  <tr> 
   <td>与表达语言的集成</td> 
   <td align="center">表达式语言提供了创建用户界面(网页)与应用程序逻辑(被管理的bean)通信的重要机制。 EL表示由JavaServer Faces技术提供的表达式语言的并集</td> 
  </tr> 
  <tr> 
   <td>支持HTML5</td> 
   <td align="center">HTML5是编写网页的新标准。 JavaServer Faces版本2.2提供了一种简单的方法，将新的HTML 5属性包含在JSF组件中，并提供了HTML5友好的标记</td> 
  </tr> 
  <tr> 
   <td>轻松快捷的网页开发</td> 
   <td align="center">JSF提供丰富的内置工具和库，以便您可以轻松快速地开发应用程序</td> 
  </tr> 
  <tr> 
   <td>支持国际化</td> 
   <td align="center">JSF支持国际化创建世界一流Web应用程序，您可以使用不同的语言创建应用程序。 在JSF的帮助下，您可以使应用程序适应各种语言和区域</td> 
  </tr> 
  <tr> 
   <td>Bean注释</td> 
   <td align="center">JSF提供注释工具，您可以在其中执行被管理的Bean中的验证相关任务。这是很好的，因为你可以验证数据，而不是HTML验证</td> 
  </tr> 
  <tr> 
   <td>默认异常处理</td> 
   <td align="center">JSF提供默认的异常处理，以便您可以开发异常和无bug的Web应用程序</td> 
  </tr> 
  <tr> 
   <td>模板</td> 
   <td align="center">在新版本的JSF中引入模板提供了组件的可重用性。在JSF应用程序中，您可以创建新模板，重用模板并将其视为应用程序的组件</td> 
  </tr> 
  <tr> 
   <td>内置AJAX支持</td> 
   <td align="center">JSF提供内置的AJAX支持。 因此，您可以将应用程序请求提交到服务器端，而无需刷新网页。 JSF还支持使用AJAX进行部分渲染</td> 
  </tr> 
  <tr> 
   <td>安全</td> 
   <td align="center">当状态保存在服务器上并且不使用无状态视图时，JSF提供了隐含的保护，因为Post-back必须包含一个有效的javax.faces.ViewState隐藏参数。 与早期版本相反，在现代JSF实现中，这个值似乎是非常随机的。请注意，客户端上的无状态视图和保存状态没有这种隐含的保护</td> 
  </tr> 
 </tbody> 
</table>

# 2.JSF的生命周期 #

通常将JSF的生命周期分为两个阶段：

*  执行阶段
 *  渲染阶段

下面一个个来分析一下：

## 1.执行阶段 ##

在执行阶段，当第一次请求时，构建或恢复应用程序视图。 对于其他后续请求，执行其他操作，如应用请求参数值，对组件值执行转换和验证，受托管的bean将使用组件值进行更新，并调用应用程序逻辑。

**执行阶段被进一步分成以下子阶段。**

*  恢复视图阶段
 *  应用请求值阶段
 *  流程验证阶段
 *  更新模型值阶段
 *  调用应用阶段
 *  渲染响应阶段
 *  恢复视图阶段

##### 1.1恢复视图阶段 #####

当客户端请求一个JavaServer Faces页面时，JavaServer Faces实现开始恢复视图阶段。 在此阶段，JSF将视图中的组件构建为请求页面，线性事件处理程序和验证器的视图，并将视图保存在FacesContext实例中。

如果对该页面的请求是回发，那么与该页面相对应的视图已经存在于FacesContext实例中。 在此阶段，JavaServer Faces实现通过使用保存在客户端或服务器上的状态信息来还原视图。

##### 1.2应用请求值阶段 #####

在此阶段，在回发请求期间恢复组件树。 组件树是表单元素的集合。树中的每个组件通过使用其decode(processDecodes())方法从请求参数中提取其新值。 之后，该值将本地存储在每个组件上。

如果任何解码方法或事件侦听器在当前FacesContext实例上调用了renderResponse方法，则JavaServer Faces实现将跳过“渲染响应”阶段。  
如果任何事件在此阶段已排队，则JavaServer Faces实现将事件广播到有兴趣的监听器。  
如果应用程序需要重定向到其他Web应用程序资源或生成不包含任何JavaServer Faces组件的响应，则可以调用FacesContext.responseComplete()方法。  
如果当前请求被识别为部分请求，则从FacesContext检索部分上下文，并应用部分处理方法。

##### 1.3流程验证阶段 #####

在此阶段，JavaServer Faces通过使用其validate()方法来处理在组件上注册的所有验证器。 它检查指定验证规则的组件属性，并将这些规则与为组件存储的本地值进行比较。 JavaServer Faces还完成了没有将immediate属性设置为true的输入组件的转换。

如果任何验证方法或事件侦听器在当前FacesContext上调用了renderResponse方法，则JavaServer Faces实现将跳过“渲染响应”阶段。  
如果应用程序需要重定向到不同的Web应用程序资源或生成不包含任何JavaServer Faces组件的响应，则可以调用FacesContext.responseComplete方法。  
如果事件在此阶段已排队，则JavaServer Faces实现将它们广播给有兴趣的监听器。  
如果当前请求被识别为部分请求，则从FacesContext检索部分上下文，并应用部分处理方法。

##### 1.4更新模型值阶段 #####

确保数据有效后，它遍历组件树，并将相应的服务器端对象属性设置为组件的本地值。 JavaServer Faces实现只更新输入组件的value属性指向bean属性。 如果本地数据无法转换为bean属性指定的类型，生命周期将直接前进到“渲染响应”阶段，以便重新呈现页面并显示错误。

如果任何updateModels方法或任何监听器在当前FacesContext实例上调用了renderResponse()方法，则JavaServer Faces实现将跳过“渲染响应”阶段。  
如果应用程序需要重定向到其他Web应用程序资源或生成不包含任何JavaServer Faces组件的响应，则可以调用FacesContext.responseComplete()方法。  
如果任何事件在此阶段已排队，JavaServer Faces实现将它们广播到有兴趣的监听器。  
如果当前请求被识别为部分请求，则从FacesContext检索部分上下文，并应用部分处理方法。

##### 1.5调用应用阶段 #####

在此阶段，JSF处理应用程序级事件，例如提交表单或链接到另一个页面。  
现在，如果应用程序需要重定向到其他Web应用程序资源或生成不包含任何JSF组件的响应，则可以调用FacesContext.responseComplete()方法。

之后，JavaServer Faces实现将控制转移到“渲染响应”阶段。

##### 1.6渲染响应阶段 #####

这是JSF生命周期的最后阶段。 在此阶段，JSF将构建视图并将权限委托给相应的资源来呈现页面。

如果这是初始请求，则页面上表示的组件将被添加到组件树中。  
如果这不是初始请求，组件已经添加到树中，不需要再添加。  
如果请求是回应，并且在应用请求值阶段，过程验证阶段或更新模型值阶段期间遇到错误，则在此阶段将再次呈现原始页面。  
如果页面包含h:message或h:messages标签，页面上会显示任何排队的错误消息。  
在渲染视图的内容之后，保存响应的状态，以便后续请求可以访问它。 恢复视图阶段可以使用保存的状态。

## 2.渲染阶段 ##

在此阶段，请求的视图作为对客户端浏览器的响应。 视图渲染是以HTML或XHTML生成输出的过程。 所以，用户可以在浏览器看到它。

在渲染过程中采取以下步骤。

*  当客户端对index.xhtml网页进行初始请求时，编译应用程序。
 *  应用程序在编译后执行，并为应用程序构建一个新的组件树，并放置在FacesContext中。
 *  使用由EL表达式表示的组件和与其关联受托管bean属性填充组件树。
 *  基于组件树。 建立了新的视图。
 *  该视图作为响应呈现给请求客户端。
 *  组件树被自动销毁。
 *  在后续请求中，重新构建组件树，并应用已保存的状态。

# 3.JSF的Bean #

JSF中同样存在Bean概念，JSF中的Bean有以下的特点：

*  验证组件的数据
 *  处理组件触发的事件
 *  执行处理以确定应用程序必须导航的下一页
 *  它也可以作为JFS框架的模型。

这一点很类似于Spring,JSF也有对Bean的使用，通常注册Bean也有两种方式：

*  XML注册
 *  注解注册

## 2.1注册Bean ##

##### 1.XML注册 #####

<managed-bean>  
        <managed-bean-name>user</managed-bean-name>  
        <managed-bean-class>User</managed-bean-class>  
        <managed-bean-scope>session</managed-bean-scope>  
    </managed-bean>

其中由managed-bean指定Bean。  
由name:名称；class:对应的类；scope：作用域 组成。

##### 2.注解 #####

@ManagedBean    // Using ManagedBean annotation 
    @RequestScoped  // Using Scope annotation 
    public class User {   
        private String name;  
        public String getName() {  
            return name;  
        }  
        public void setName(String name) {  
             this.name = name;  
        }  
    }

类中的@ManagedBean注解自动将该类注册为JavaServer Faces的资源。 这种注册的托管bean在应用程序配置资源文件中不需要托管bean配置项。

这是应用程序配置资源文件方法的替代方法，并减少配置托管bean的任务。  
@RequestScoped注释用于提供托管的范围。 您可以使用注解来定义bean将被存储的范围。

您可以对bean类使用以下范围：

<table> 
 <thead> 
  <tr> 
   <th>作用域注解</th> 
   <th align="center">解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>应用程序(@ApplicationScoped)</td> 
   <td align="center">应用程序范围在所有用户中保持不变，与Web应用程序的交互。</td> 
  </tr> 
  <tr> 
   <td>会话(@SessionScoped)</td> 
   <td align="center">会话范围在Web应用程序中的多个HTTP请求中保持不变。</td> 
  </tr> 
  <tr> 
   <td>视图(@ViewScoped)</td> 
   <td align="center">在用户与Web应用程序的单个页面(视图)进行交互时，视图范围仍然存在。</td> 
  </tr> 
  <tr> 
   <td>请求(@RequestScoped)</td> 
   <td align="center">在Web应用程序中的单个HTTP请求期间，请求范围仍然存在。</td> 
  </tr> 
  <tr> 
   <td>无(@NoneScoped)</td> 
   <td align="center">表示未为应用程序定义作用域。</td> 
  </tr> 
  <tr> 
   <td>自定义(@CustomScoped)</td> 
   <td align="center">用户定义的非标准作用域。 其值必须配置为java.util.Map，自定义范围很少使用。</td> 
  </tr> 
 </tbody> 
</table>

概念插入：懒惰式托管：  
懒惰式托管意味着只有当应用程序发出请求的时候才会去实例化bean，如果想自动提前强制将bean实例化，那么可在应用程序启动时，可以强制将bean实例化并放置在应用程序(@ApplicationScoped)范围内。您需要将托管 bean 的eager属性设置为true

@ManagedBean(eager=true)

# 4.JSF标签 #

JSF有自己的标签，这里总结一下：  
JavaServer Faces提供丰富的组件库来定义应用程序的体系结构。

它包括以下内容：

丰富的用于指定用户界面组件的状态和行为的类：

*  一种渲染模型，定义如何以各种方式呈现组件。
 *  一种定义如何将数据转换器注册到组件上的转换模型。
 *  一个定义如何处理组件事件的事件和监听器模型。
 *  一种验证模型，用于定义如何将验证器注册到组件上。

在详细的解释JSF组件之前，我们来看一下JSF标签是怎么用的，如果你学过一定的JSP标签的使用，那么应该是很好理解这些东西的。

在jsp页面中，EL标签和jsp本身自带的标签帮助我们将数据呈现在页面之上，JSF同理，只不过JSP利用的是servlet，而JSF利用的是JSF框架。

以一个完整的案例说明一下。  
**这是我的项目目录树：**  
![这里写图片描述][70]

下面说一下项目的配置：

1.  JavaEE 7
2.  Maven项目管理
3.  MyEclipse

整个项目就几个部分：

1.  欢迎页面
2.  反馈页面
3.  bean类

###### index.xhtml ######

<?xml version="1.0" encoding="UTF-8"?>  
    <!DOCTYPE html>  
    <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:head>  
        <title>Hello.xhtml</title>  
        <meta name="keywords" content="enter,your,keywords,here" />  
        <meta name="description" content="A short description of this page." />  
        <meta name="content-type" content="text/html; charset=UTF-8" />  
    
          
    </h:head>  
    <h:body>  
        <p>This is my XHTML page.</p>  
        <h:form id="form">  
            <div style="padding: 100px 0 0 100px; font-size: 22px; font-weight: bold">  
               
                <h:outputLabel>User Name:</h:outputLabel>
                <h:inputText id="username" value="#{user.name}" required="true" requiredMessage="User Name is required"></h:inputText>
                <h:commandButton id="submit-button" value="Submit" action="response.xhtml"/>
            </div>  
        </h:form>  
    </h:body>  
    </html>

###### response.xhtml ######

<?xml version="1.0" encoding="UTF-8"?>  
    <!DOCTYPE html>  
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html">  
        <h:head>  
            <title>Welcome Page</title>  
        </h:head>  
        <h:body>  
    
            <h2>Hello, <h:outputText value="#{user.name}"></h:outputText></h2>  
        </h:body>  
    </html>

###### user.bean ######

package entity;
    
    import javax.faces.bean.ManagedBean;
    import javax.faces.bean.RequestScoped;
    
    /** *@author:gang *@version: **/
    
    @ManagedBean
    @RequestScoped
    public class User { 
    
        String name;
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
    
    }

其余的所有都是配置的时候自动生成导入的：web.xml以及faces-config.xml（因为没有用xml配置bean，所以为空）

<?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
      <display-name>MyJSFTest</display-name>
      <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
      </servlet>
      <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.faces</url-pattern>
        <url-pattern>*.xhtml</url-pattern>
      </servlet-mapping>
      <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
      </context-param>
    
      <welcome-file-list>
        <welcome-file>
            index.xhtml
        </welcome-file>
      </welcome-file-list>
    </web-app>

以及效果：  
![这里写图片描述][70 1]  
![这里写图片描述][70 2]

**很简单的就实现了一个数据的传递，当然，后面我们还可以使用持久化工具实现数据库的交互等更复杂的操作。**

JSF HTML标签库表示HTML表单组件和其他基本HTML元素，用于显示或接受来自用户的数据。 JSF表单在提交表单后将此数据发送到服务器。

下表中列出了包含用户界面组件。

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th align="center">功能</th> 
   <th>呈现为</th> 
   <th align="center">外观</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>h:inputText</td> 
   <td align="center">显示用户输入字符串的输入框</td> 
   <td>HTML的&lt; input type=”text”&gt;元素</td> 
   <td align="center">一个输入字段域</td> 
  </tr> 
  <tr> 
   <td>h:outputText</td> 
   <td align="center">显示一行文本 纯文本</td> 
   <td>纯文本</td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td>h:form</td> 
   <td align="center">代表一个输入表单</td> 
   <td>HTML &lt; form&gt;元素标签</td> 
   <td align="center">无外观</td> 
  </tr> 
  <tr> 
   <td>h:commandButton</td> 
   <td align="center">它向应用程序提交表单</td> 
   <td>HTML &lt; input type = “value”&gt;元素，类型值可以为“submit”，“reset”或“image”</td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td>h:inputSecret</td> 
   <td align="center">它允许用户输入字符串，但不会在字段中显示实际的字符串</td> 
   <td>HTML &lt; input type=”password”&gt;元素</td> 
   <td align="center">显示一行字符而不是输入的实际字符串的字段</td> 
  </tr> 
  <tr> 
   <td>h:inputTextarea</td> 
   <td align="center">它允许用户输入多行字符串</td> 
   <td>HTML &lt; textarea&gt;元素标签</td> 
   <td align="center">多行字段</td> 
  </tr> 
  <tr> 
   <td>h:commandLink</td> 
   <td align="center">它链接到页面上的另一页或位置</td> 
   <td>HTML &lt; a href=”“&gt;元素标签</td> 
   <td align="center">一个链拉</td> 
  </tr> 
  <tr> 
   <td>h:inputHidden</td> 
   <td align="center">它允许页面写入包含一个隐藏的变量和值</td> 
   <td>HTML &lt; input type=”hidden”&gt;元素</td> 
   <td align="center">无外观</td> 
  </tr> 
  <tr> 
   <td>h:inputFile</td> 
   <td align="center">它允许用户上传文件</td> 
   <td>HTML &lt; input type=”file”&gt;元素标签</td> 
   <td align="center">具有浏览按钮的字段</td> 
  </tr> 
  <tr> 
   <td>h:graphicImage</td> 
   <td align="center">它显示一个图像</td> 
   <td>HTML &lt; img&gt;元素标签</td> 
   <td align="center">一个图像</td> 
  </tr> 
  <tr> 
   <td>h:dataTable</td> 
   <td align="center">它代示数据包装器</td> 
   <td>HTML &lt; table&gt;元素标签</td> 
   <td align="center">可以动态更新的表</td> 
  </tr> 
  <tr> 
   <td>h:message</td> 
   <td align="center">它显示本地化的消息</td> 
   <td>HTML &lt; span&gt;标签，如果使用样式</td> 
   <td align="center">一个文本字符串</td> 
  </tr> 
  <tr> 
   <td>h:messages</td> 
   <td align="center">它显示本地化的消息</td> 
   <td>一组HTML &lt; span&gt;标签，如果使用样式 一个文本字符串</td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td>h:outputFormat</td> 
   <td align="center">它显示格式化的消息</td> 
   <td>纯文本</td> 
   <td align="center">纯文本</td> 
  </tr> 
  <tr> 
   <td>h:outputLabel</td> 
   <td align="center">它将嵌套组件显示为指定输入字段的标签</td> 
   <td>HTML &lt; label&gt;元素</td> 
   <td align="center">纯文本</td> 
  </tr> 
  <tr> 
   <td>h:outputLink</td> 
   <td align="center">它链接到页面上的另一个页面或位置，但不生成操作事件。</td> 
   <td>HTML &lt; a&gt;元素</td> 
   <td align="center">一个链接</td> 
  </tr> 
  <tr> 
   <td>h:panelGrid</td> 
   <td align="center">它在一个父项下分组一组组件</td> 
   <td>HTML &lt; div&gt; 或 &lt; span&gt; 元素</td> 
   <td align="center">在一个表中的一行</td> 
  </tr> 
  <tr> 
   <td>h:selectBooleanCheckbox</td> 
   <td align="center">它允许用户更改布尔值的值</td> 
   <td>HTML &lt; input type=”checkbox”&gt; 元素</td> 
   <td align="center">一个复选框</td> 
  </tr> 
  <tr> 
   <td>h:selectManyCheckbox</td> 
   <td align="center">它显示一组复选框，用户可以从中选择多个值。</td> 
   <td>一组HTML &lt; input&gt;类型复选框的元素</td> 
   <td align="center">一组复选框</td> 
  </tr> 
  <tr> 
   <td>h:selectManyListbox</td> 
   <td align="center">它允许用户从一组全部显示的项目中选择多个项目。</td> 
   <td>HTML &lt; select&gt;元素</td> 
   <td align="center">选择框</td> 
  </tr> 
  <tr> 
   <td>h:selectManyMenu</td> 
   <td align="center">它允许用户从一组项目中选择多个项目</td> 
   <td>HTML &lt; select&gt;元素</td> 
   <td align="center">菜单</td> 
  </tr> 
  <tr> 
   <td>h:selectOneListbox</td> 
   <td align="center">它允许用户从一组全部显示的项目中选择一个项目</td> 
   <td>HTML &lt; select&gt;元素</td> 
   <td align="center">选择框</td> 
  </tr> 
  <tr> 
   <td>h:selectOneMenu</td> 
   <td align="center">它允许用户从一组项目中选择一个项目</td> 
   <td>HTML &lt; select&gt;元素</td> 
   <td align="center">菜单</td> 
  </tr> 
  <tr> 
   <td>h:selectOneRadio</td> 
   <td align="center">它允许用户从一组项目中选择一个项目</td> 
   <td>HTML &lt; input type=”radio”&gt;元素</td> 
   <td align="center">一组选项</td> 
  </tr> 
  <tr> 
   <td>h:column</td> 
   <td align="center">它表示数据组件中的一列数据</td> 
   <td>HTML表中的一列数据</td> 
   <td align="center">表中的列</td> 
  </tr> 
 </tbody> 
</table>

对于jsf标签的使用有点类似WCM平台的置标，这里将每个语句和对应的输出罗列出来。

## 4.1 表单 ##

//form表单生成
    <h:form id="user-form">  
        <h:outputLabel for="username">User Name</h:outputLabel>  
        <h:inputText id="username" value="#{user.name}" required="true" requiredMessage="Username is required"/><br/>  
        <h:commandButton id="submit-button" value="Submit" action="response.xhtml"/>  
    </h:form>
    
    
    
    //selectBooleanCheckBox:单选框
    <h:outputLabel>单选框</h:outputLabel>
    <h:selectBooleanCheckbox value="Remember Me" id="chkRememberMe" />
    <input id="jsfForm1:chkRememberMe" type="checkbox" name="jsfForm1:chkRememberMe" checked="checked" />
    
    
    
    //复选框，并且用table直接格式化
    <h:outputLabel>复选框/h:outputLabel>
    <h:selectManyCheckbox value="#{userData.data}">
       <f:selectItem itemValue="1" itemLabel="Item 1" />
       <f:selectItem itemValue="2" itemLabel="Item 2" />
    </h:selectManyCheckbox>
    
    //注意，这里的table是直接格式化的，但是，现在一般table的灵活度没有div块好使，所以还是存在一定约束性
    //上面的item value被自动翻译成input中的value
    <table>
       <tr>
          <td><input name="j_idt6:j_idt8" id="j_idt6:j_idt8:0" value="1" type="checkbox" checked="checked" />
             <label for="j_idt6:j_idt8:0" class=""> Item 1</label>
          </td>
          <td><input name="j_idt6:j_idt8" id="j_idt6:j_idt8:1" value="2" type="checkbox" checked="checked" />
             <label for="j_idt6:j_idt8:1" class=""> Item 2</label>
          </td>     
       </tr>
    </table>
    
    //提交按钮
     <h:commandButton id="submit-button" value="Submit" action="response.xhtml"/>
    
    
    //多行文本输入
       <h:inputTextarea id="text-area-id" value="#{user.address}" required="true" requiredMessage="Address is required" cols="50" rows="10"></h:inputTextarea>
    
    //a标签
    <h:commandLink id="image-link-id" action="response.xhtml">  
    <h:outputText value="Click here"></h:outputText>  
    </h:commandLink>
    
    
    //密码输入
    <h:inputSecret value="#{user.password}" maxlength="10" size="15" required="true" requiredMessage="Password is required"></h:inputSecret>

属性：

###### < h:form> 标签属性 ######

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>accept</td> 
   <td align="center">服务器处理此表单的内容类型列表将正确处理</td> 
  </tr> 
  <tr> 
   <td>class</td> 
   <td align="center">组件的CSS类名称。</td> 
  </tr> 
  <tr> 
   <td>enctype</td> 
   <td align="center">它用于向服务器提交内容。 如果未指定，则默认值为：”application/x-www-form-urlencoded“。</td> 
  </tr> 
  <tr> 
   <td>id</td> 
   <td align="center">它是此组件的标识符，此ID值必须是唯一的。 您可以使用它来访问CSS和JS文件中的HTML元素。</td> 
  </tr> 
  <tr> 
   <td>lang</td> 
   <td align="center">它描述了该组件生成的标记中使用的语言。</td> 
  </tr> 
  <tr> 
   <td>rendered</td> 
   <td align="center">它用于渲染组件。 该属性的默认值为true。</td> 
  </tr> 
  <tr> 
   <td>onclick</td> 
   <td align="center">当单击指针按钮时，它将执行Javascript代码。</td> 
  </tr> 
  <tr> 
   <td>onsubmit</td> 
   <td align="center">当表单提交时，它会执行Javascript代码。</td> 
  </tr> 
 </tbody> 
</table>

###### < h:outputText>标签属性 ######

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value</td> 
   <td align="center">它保存此组件的当前值。</td> 
  </tr> 
  <tr> 
   <td>id</td> 
   <td align="center">它是此组件的标识符，此ID必须是唯一的。您可以使用它来访问CSS和JS文件中的HTML元素。</td> 
  </tr> 
  <tr> 
   <td>style</td> 
   <td align="center">它用于为组件应用CSS。</td> 
  </tr> 
  <tr> 
   <td>class</td> 
   <td align="center">它给组件的类名，它用于从CSS和JS文件访问组件。</td> 
  </tr> 
  <tr> 
   <td>lang</td> 
   <td align="center">它用于指定语言，它有助于使网页本地化。</td> 
  </tr> 
 </tbody> 
</table>

###### < h:inputText> 标签的属性 ######

<table> 
 <thead> 
  <tr> 
   <th>属性名称</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td align="center">它是此组件的标识符，ID必须是唯一的。您可以使用它来访问CSS和JS文件中的HTML元素。</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td align="center">它用于收集输入文本的当前值。</td> 
  </tr> 
  <tr> 
   <td>class</td> 
   <td align="center">它给组件的类名，它用于从CSS和JS文件访问组件。</td> 
  </tr> 
  <tr> 
   <td>maxlength</td> 
   <td align="center">在此字段中可能输入的最大字符数。</td> 
  </tr> 
  <tr> 
   <td>alt</td> 
   <td align="center">由该组件呈现的元素的替代文本描述。</td> 
  </tr> 
  <tr> 
   <td>accesskey</td> 
   <td align="center">按键的访问键将焦点转移到该元素。它将根据浏览器的不同而不同。</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td align="center">用于确定此字段宽度的字符数。</td> 
  </tr> 
  <tr> 
   <td>required</td> 
   <td align="center">它表示用户需要为此输入组件提供提交的值。</td> 
  </tr> 
  <tr> 
   <td>requiredMessage</td> 
   <td align="center">如果将required属性设置为true，则在“RequiredMessage”中提供的消息描述将显示到网页。</td> 
  </tr> 
  <tr> 
   <td>style</td> 
   <td align="center">它用于为组件应用CSS。</td> 
  </tr> 
  <tr> 
   <td>rendered</td> 
   <td align="center">它用于渲染组件。该属性的默认值为true。</td> 
  </tr> 
  <tr> 
   <td>convertor</td> 
   <td align="center">它用于注册此组件的转换器实例。</td> 
  </tr> 
  <tr> 
   <td>readonly</td> 
   <td align="center">它表示该组件禁止用户进行更改，通过将readonly作为此属性的值传递，可以使组件只读。 例如。 readonly =“readonly”</td> 
  </tr> 
 </tbody> 
</table>

###### < h:commandButton>标签的属性 ######

它创建一个提交按钮，用于提交申请表。 您可以使用以下语法创建它。

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td align="center">它是此组件的标识符，此ID必须是唯一的。您可以使用它来访问CSS和JS文件中的HTML元素。</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td align="center">它保存命令按钮的当前值，并将其显示为提交按钮的名称。</td> 
  </tr> 
  <tr> 
   <td>action</td> 
   <td align="center">它用于指定表单的操作。 commandButton在指定的操作中将表单提交到服务器。 如果您不提供操作的值，在提交后将页面重定向到同一页面。</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td align="center">它用于禁用命令按钮，应用此属性后，您不能单击按钮。</td> 
  </tr> 
  <tr> 
   <td>image</td> 
   <td align="center">它用于在commandButton上设置图像。 在本示例中，您的图像将作为提交按钮。</td> 
  </tr> 
  <tr> 
   <td>label</td> 
   <td align="center">它用于为commandButton创建本地化的名称。</td> 
  </tr> 
  <tr> 
   <td>rendered</td> 
   <td align="center">它用于渲染组件，该属性的默认值为true。</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td align="center">它用于指定按钮的类型，可以设置“reset”，“submit”或“button”。 如果不指定，则默认为“submit”。</td> 
  </tr> 
  <tr> 
   <td>style</td> 
   <td align="center">它用于为组件指定CSS。</td> 
  </tr> 
  <tr> 
   <td>onclick</td> 
   <td align="center">当单击commandButton时，它用于执行JavaScript代码。</td> 
  </tr> 
  <tr> 
   <td>accesskey</td> 
   <td align="center">它用于通过使用指定的键来访问提交按钮。</td> 
  </tr> 
 </tbody> 
</table>

###### < h:inputtextarea>标签属性 ######

JSF将< h:inputtextarea>标签作为HTML的“textarea”元素。 它允许用户输入多行字符串。

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td align="center">它是此组件的标识符，此ID必须是唯一的。可以使用它来访问CSS和JS文件中的HTML元素。</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td align="center">它保存此组件的当前值。</td> 
  </tr> 
  <tr> 
   <td>cols</td> 
   <td align="center">它用于设置文本区域的列数。</td> 
  </tr> 
  <tr> 
   <td>rows</td> 
   <td align="center">它用于设置textarea的行数。</td> 
  </tr> 
  <tr> 
   <td>required</td> 
   <td align="center">它表示用户需要为此输入组件提供提交的值。</td> 
  </tr> 
  <tr> 
   <td>requiredMessage</td> 
   <td align="center">如果将required属性设置为true，则在“RequiredMessage”中提供的消息描述将显示到网页。</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td align="center">它用于禁用组件。 您可以通过分配真实值来禁用它。</td> 
  </tr> 
  <tr> 
   <td>onclick</td> 
   <td align="center">它是在textarea上onclick事件触发后调用JavaScript代码的方法。</td> 
  </tr> 
  <tr> 
   <td>onselect</td> 
   <td align="center">它是一种在用户选择此组件时调用JavaScript代码的方法。</td> 
  </tr> 
  <tr> 
   <td>readonly</td> 
   <td align="center">它表示该组件禁止用户进行更改。 通过将readonly作为此属性的值传递，可以使组件只读。 例如： readonly =“readonly”</td> 
  </tr> 
  <tr> 
   <td>rendered</td> 
   <td align="center">它用于渲染此组件。您可以将其值设置为true或false。 默认值为true。</td> 
  </tr> 
  <tr> 
   <td>label</td> 
   <td align="center">它用于设置此组件的本地化名称。</td> 
  </tr> 
  <tr> 
   <td>lang</td> 
   <td align="center">它用于设置此组件的语言。</td> 
  </tr> 
  <tr> 
   <td>style</td> 
   <td align="center">它用于设置CSS样式代码，以提供该组件的更好的用户界面。</td> 
  </tr> 
  <tr> 
   <td>accesskey</td> 
   <td align="center">按键的访问键将焦点转移到该元素。 它同浏览器的不同而不同。</td> 
  </tr> 
 </tbody> 
</table>

###### < h:commandLink> ######

SF将< h:commandLink>标签作为一个HTML “a”锚点元素，当单击时，它就像一个表单提交按钮。 因此，您可以使用此标签创建锚标签。 < h:commandLink>标签必须包含一个嵌套的< h:outputText>标记，表示用户单击文本以生成事件。 它还需要放在 < h:form>标签中。

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td align="center">它是此组件的标识符，此ID必须是唯一的。可以使用它来访问CSS和JS文件中的HTML元素。</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td align="center">它保存此组件的当前值。</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td align="center">由此超链接指定的资源的内容类型。</td> 
  </tr> 
  <tr> 
   <td>actionListener</td> 
   <td align="center">它表示一个动作监听器方法，当该组件被用户激活时，该方法将被通知。</td> 
  </tr> 
  <tr> 
   <td>charset</td> 
   <td align="center">由此超链接指定的资源的字符编码。</td> 
  </tr> 
  <tr> 
   <td>coords</td> 
   <td align="center">它用于设置屏幕上热点的位置和形状(用于客户端图像映射)。</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td align="center">它用于禁用组件。 您可以通过分配真实值来禁用它。</td> 
  </tr> 
  <tr> 
   <td>hreflang</td> 
   <td align="center">它用于设置由此超链接指定的资源的语言代码。</td> 
  </tr> 
  <tr> 
   <td>rel</td> 
   <td align="center">从当前文档到由此超链接指定的锚点的关系。 此属性的值是空格分隔的链接类型列表。</td> 
  </tr> 
  <tr> 
   <td>rev</td> 
   <td align="center">它是从此超链接指定的锚点到当前文档的反向链接，此属性的值是空格分隔的链接类型列表。</td> 
  </tr> 
  <tr> 
   <td>rendered</td> 
   <td align="center">它用于渲染此组件。您可以将其值设置为true或false。 默认值为true。</td> 
  </tr> 
  <tr> 
   <td>shape</td> 
   <td align="center">它代表屏幕上热点的形状。 有效值为：default(整个区域); 直角(矩形区域); 圆(圆形区域); 和聚(多边形区域)。</td> 
  </tr> 
  <tr> 
   <td>style</td> 
   <td align="center">它用于设置CSS样式代码，以提供该组件的更好的用户界面。</td> 
  </tr> 
 </tbody> 
</table>

###### < h:inputSecret> ######

它是一个标准的密码字段，它接受一行没有空格的文本，并在输入时将其显示为一组星号。 换句话说，它用于创建一个HTML密码字段，允许用户输入字符串，而不会在字段中显示实际的字符串。

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td align="center">它是此组件的标识符，此ID必须是唯一的。可以使用它来访问CSS和JS文件中的HTML元素。</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td align="center">它保存此组件的当前值。</td> 
  </tr> 
  <tr> 
   <td>maxlength</td> 
   <td align="center">它表示可以在此字段中输入的最大字符数。</td> 
  </tr> 
  <tr> 
   <td>readonly</td> 
   <td align="center">它表示该组件禁止用户进行更改。 通过将readonly作为此属性的值传递，可以使组件只读。 例如：readonly=”readonly”</td> 
  </tr> 
  <tr> 
   <td>required</td> 
   <td align="center">它表示用户需要为此输入组件提供提交的值。</td> 
  </tr> 
  <tr> 
   <td>requiredMessage</td> 
   <td align="center">如果将required属性设置为true，则在“RequiredMessage”中提供的消息描述将显示到网页。</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td align="center">用于确定此字段宽度的字符数。</td> 
  </tr> 
  <tr> 
   <td>rendered</td> 
   <td align="center">它用于渲染此组件。您可以将其值设置为true或false。 默认值为true。</td> 
  </tr> 
  <tr> 
   <td>class</td> 
   <td align="center">此组件的CSS类名称。</td> 
  </tr> 
  <tr> 
   <td>style</td> 
   <td align="center">它用于设置CSS样式代码，以提供该组件的更好的用户界面。</td> 
  </tr> 
  <tr> 
   <td>label</td> 
   <td align="center">它用于为inputSecret创建本地化的名称。</td> 
  </tr> 
  <tr> 
   <td>lang</td> 
   <td align="center">它用于指定语言。 它有助于使网页本地化。</td> 
  </tr> 
  <tr> 
   <td>accesskey</td> 
   <td align="center">它用于通过使用指定的键访问组件。</td> 
  </tr> 
 </tbody> 
</table>

## 4.2 提示类 ##

< h:message>用于显示特定组件的单个消息。您可以通过将该组件的id传递给for属性来显示您的自定义消息。  
举例来说：就是当我们的操作不合格的时候，会有一个提示。

<h:inputText id="username" value="#{user.name}" required="true" requiredMessage="User Name is required">
                //定义了一个长度5-20
                <f:validateLength for="username" minimum="5" maximum="20" />
                </h:inputText>
                <h:messages for="output" style="color:red;margin:8px;" />
                <h:commandButton id="submit-button" value="Submit" action="response.xhtml"/>

![这里写图片描述][70 3]

我认为这个提示是可以自己设定的，应该可以被重写，只是时间有限，先不关注这个。

## 4.3 其他 ##

###### < h:inputFile>标签的属性 ######

JSF将其呈现为文件类型的HTML元素，它用于获取文件作为输入。 在HTML表单中，它允许用户上传文件。

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td align="center">它是此组件的标识符，此ID必须是唯一的。可以使用它来访问CSS和JS文件中的HTML元素。</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td align="center">它保存此组件的当前值。</td> 
  </tr> 
  <tr> 
   <td>required</td> 
   <td align="center">它表示用户需要为此输入组件提供提交的值。</td> 
  </tr> 
  <tr> 
   <td>requiredMessage</td> 
   <td align="center">如果将required属性设置为true，则在“RequiredMessage”中提供的消息描述将显示到网页。</td> 
  </tr> 
  <tr> 
   <td>class</td> 
   <td align="center">此组件的CSS类名称。</td> 
  </tr> 
  <tr> 
   <td>alt</td> 
   <td align="center">它用于设置组件的备用名称。</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td align="center">它用于禁用组件，您可以通过分配真实值来禁用它。</td> 
  </tr> 
  <tr> 
   <td>label</td> 
   <td align="center">它用于设置此组件的本地化名称。</td> 
  </tr> 
  <tr> 
   <td>lang</td> 
   <td align="center">它用于设置此组件的语言。</td> 
  </tr> 
  <tr> 
   <td>onclick</td> 
   <td align="center">当用户单击此组件时，它会调用JavaScript代码。</td> 
  </tr> 
  <tr> 
   <td>onselect</td> 
   <td align="center">它是一种在用户选择此组件时调用JavaScript代码的方法。</td> 
  </tr> 
  <tr> 
   <td>rendered</td> 
   <td align="center">它用于渲染此组件，默认值是：true。</td> 
  </tr> 
  <tr> 
   <td>style</td> 
   <td align="center">它用于设置CSS样式代码，以提供该组件的更好的用户界面。</td> 
  </tr> 
 </tbody> 
</table>

###### \#< h:graphicImage>标签的属性 ######

JSF呈现一个HTML元素“img”标签。 该标签用于在网页上呈现图像。

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td align="center">它是此组件的标识符，此ID必须是唯一的。可以使用它来访问CSS和JS文件中的HTML元素。</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td align="center">它保存此组件的当前值。</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td align="center">它用于为此资源设置资源名称。</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td align="center">它是一个上下文相关URL来检索与此组件关联的资源。 这是“value”属性的别名。</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td align="center">它用于设置图像的高度。</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td align="center">用于设置此图像的宽度。</td> 
  </tr> 
  <tr> 
   <td>alt</td> 
   <td align="center">它用于设置图像的备用名称。</td> 
  </tr> 
  <tr> 
   <td>class</td> 
   <td align="center">它代表这个组件的CSS类。</td> 
  </tr> 
  <tr> 
   <td>dir</td> 
   <td align="center">这是一种不继承方向性的文本的方向指示。 有效值为“LTR”(从左到右)和“RTL”(从右到左)。</td> 
  </tr> 
  <tr> 
   <td>onclick</td> 
   <td align="center">它是在图像上点击之后调用JavaScript代码的方法。</td> 
  </tr> 
  <tr> 
   <td>rendered</td> 
   <td align="center">它用于渲染此组件。 您可以将其值设置为true或false。 默认值为true。</td> 
  </tr> 
  <tr> 
   <td>rendered</td> 
   <td align="center">它是一个标志，表示该图像将被用作服务器端图像映射。 这样的图像必须被包含在超链接(“a”)中。 值为false导致不呈现属性，而true值会导致属性被渲染为ismap =“ismap”。</td> 
  </tr> 
  <tr> 
   <td>style</td> 
   <td align="center">它用于设置CSS样式代码，以提供该组件的更好的用户界面。</td> 
  </tr> 
  <tr> 
   <td>usemap</td> 
   <td align="center">该元素提供图像的客户端图像映射(HTML “map”元素)的名称。</td> 
  </tr> 
 </tbody> 
</table>

# n.总结 #

暂时基础就总结这些，后面还有一些慢慢的整理进去。

另外实际应用部分在另外一篇博客中。

参考：  
[https://www.yiibai.com/jsf/jsf\_form\_checkbox.html][https_www.yiibai.com_jsf_jsf_form_checkbox.html]

[70]: /images/20220529/d6d3fb092a77438a8ddd963a937114fe.png
[70 1]: /images/20220529/f0d1484a408b4389a60cde1184118d58.png
[70 2]: /images/20220529/69dd00a61c824019870e597b8e4bc10f.png
[70 3]: /images/20220529/c76365909bf34185868c9fc01fa289ef.png
[https_www.yiibai.com_jsf_jsf_form_checkbox.html]: https://www.yiibai.com/jsf/jsf_form_checkbox.html