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

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

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

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

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

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

1.JSF的特点

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

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类使用以下范围:

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

概念插入:懒惰式托管:
懒惰式托管意味着只有当应用程序发出请求的时候才会去实例化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框架。

以一个完整的案例说明一下。
这是我的项目目录树:
这里写图片描述

下面说一下项目的配置:

  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" />  

    <!--<link rel="stylesheet" type="text/css" href="styles.css">-->  
</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">  
           <!-- 输出标签,就是Label -->
            <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>

以及效果:
这里写图片描述
这里写图片描述

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

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

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

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

对于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> 标签属性
属性描述
accept服务器处理此表单的内容类型列表将正确处理
class组件的CSS类名称。
enctype它用于向服务器提交内容。 如果未指定,则默认值为:”application/x-www-form-urlencoded“。
id它是此组件的标识符,此ID值必须是唯一的。 您可以使用它来访问CSS和JS文件中的HTML元素。
lang它描述了该组件生成的标记中使用的语言。
rendered它用于渲染组件。 该属性的默认值为true。
onclick当单击指针按钮时,它将执行Javascript代码。
onsubmit当表单提交时,它会执行Javascript代码。
< h:outputText>标签属性
属性描述
value它保存此组件的当前值。
id它是此组件的标识符,此ID必须是唯一的。您可以使用它来访问CSS和JS文件中的HTML元素。
style它用于为组件应用CSS。
class它给组件的类名,它用于从CSS和JS文件访问组件。
lang它用于指定语言,它有助于使网页本地化。
< h:inputText> 标签的属性
属性名称描述
id它是此组件的标识符,ID必须是唯一的。您可以使用它来访问CSS和JS文件中的HTML元素。
value它用于收集输入文本的当前值。
class它给组件的类名,它用于从CSS和JS文件访问组件。
maxlength在此字段中可能输入的最大字符数。
alt由该组件呈现的元素的替代文本描述。
accesskey按键的访问键将焦点转移到该元素。它将根据浏览器的不同而不同。
size用于确定此字段宽度的字符数。
required它表示用户需要为此输入组件提供提交的值。
requiredMessage如果将required属性设置为true,则在“RequiredMessage”中提供的消息描述将显示到网页。
style它用于为组件应用CSS。
rendered它用于渲染组件。该属性的默认值为true。
convertor它用于注册此组件的转换器实例。
readonly它表示该组件禁止用户进行更改,通过将readonly作为此属性的值传递,可以使组件只读。 例如。 readonly =“readonly”
< h:commandButton>标签的属性

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

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

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

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

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

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

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

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

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"/>

这里写图片描述

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

4.3 其他

<p>图片标签</p>
<h:graphicImage id="image-id" name="user-image" url="#{user.fileLocation()}"   
height="50px" width="50px" alt="Image not found"></h:graphicImage>
< h:inputFile>标签的属性

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

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

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

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

n.总结

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

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

参考:
https://www.yiibai.com/jsf/jsf_form_checkbox.html

  • 12
    点赞
  • 88
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值