初次学习JSF,对其基础进行了一些学习与整理。
JSF(JavaServer Faces)它是一个基于服务器端组件的用户界面框架。 它用于开发Web应用程序。 它提供了一个定义良好的编程模型,由丰富的API和标签库组成。最新版本JSF 2使用Facelets作为其默认模板系统。 它是用Java编写的。
JSF API提供组件(inputText,commandButton等)并帮助管理其状态。 它还提供服务器端验证,数据转换,定义页面导航,提供可扩展性,国际化支持,可访问性等。
JSF标签库用于在Web页面上添加组件,并将组件与服务器上的对象进行连接。 它还包含实现组件标签的标签处理程序。
借助这些功能和工具,您可以轻松轻松地创建服务器端用户界面。
特点 | 解释 |
---|---|
基于组件的框架 | JSF是一个基于服务器端组件的框架,它提供内置组件来构建Web应用程序。您可以使用HTML5,Facelets标签来创建网页 |
实现Facelets技术 | Facelets是一个开源Web模板系统。它是JavaServer Faces(JSF)的默认视图处理程序技术。 该语言需要有效的输入XML文档才能正常工作。 Facelets支持所有的JSF UI组件,并且完全侧重于构建JSF应用程序的视图 |
与表达语言的集成 | 表达式语言提供了创建用户界面(网页)与应用程序逻辑(被管理的bean)通信的重要机制。 EL表示由JavaServer Faces技术提供的表达式语言的并集 |
支持HTML5 | HTML5是编写网页的新标准。 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实现中,这个值似乎是非常随机的。请注意,客户端上的无状态视图和保存状态没有这种隐含的保护 |
通常将JSF的生命周期分为两个阶段:
下面一个个来分析一下:
在执行阶段,当第一次请求时,构建或恢复应用程序视图。 对于其他后续请求,执行其他操作,如应用请求参数值,对组件值执行转换和验证,受托管的bean将使用组件值进行更新,并调用应用程序逻辑。
执行阶段被进一步分成以下子阶段。
当客户端请求一个JavaServer Faces页面时,JavaServer Faces实现开始恢复视图阶段。 在此阶段,JSF将视图中的组件构建为请求页面,线性事件处理程序和验证器的视图,并将视图保存在FacesContext实例中。
如果对该页面的请求是回发,那么与该页面相对应的视图已经存在于FacesContext实例中。 在此阶段,JavaServer Faces实现通过使用保存在客户端或服务器上的状态信息来还原视图。
在此阶段,在回发请求期间恢复组件树。 组件树是表单元素的集合。树中的每个组件通过使用其decode(processDecodes())方法从请求参数中提取其新值。 之后,该值将本地存储在每个组件上。
如果任何解码方法或事件侦听器在当前FacesContext实例上调用了renderResponse方法,则JavaServer Faces实现将跳过“渲染响应”阶段。
如果任何事件在此阶段已排队,则JavaServer Faces实现将事件广播到有兴趣的监听器。
如果应用程序需要重定向到其他Web应用程序资源或生成不包含任何JavaServer Faces组件的响应,则可以调用FacesContext.responseComplete()方法。
如果当前请求被识别为部分请求,则从FacesContext检索部分上下文,并应用部分处理方法。
在此阶段,JavaServer Faces通过使用其validate()方法来处理在组件上注册的所有验证器。 它检查指定验证规则的组件属性,并将这些规则与为组件存储的本地值进行比较。 JavaServer Faces还完成了没有将immediate属性设置为true的输入组件的转换。
如果任何验证方法或事件侦听器在当前FacesContext上调用了renderResponse方法,则JavaServer Faces实现将跳过“渲染响应”阶段。
如果应用程序需要重定向到不同的Web应用程序资源或生成不包含任何JavaServer Faces组件的响应,则可以调用FacesContext.responseComplete方法。
如果事件在此阶段已排队,则JavaServer Faces实现将它们广播给有兴趣的监听器。
如果当前请求被识别为部分请求,则从FacesContext检索部分上下文,并应用部分处理方法。
确保数据有效后,它遍历组件树,并将相应的服务器端对象属性设置为组件的本地值。 JavaServer Faces实现只更新输入组件的value属性指向bean属性。 如果本地数据无法转换为bean属性指定的类型,生命周期将直接前进到“渲染响应”阶段,以便重新呈现页面并显示错误。
如果任何updateModels方法或任何监听器在当前FacesContext实例上调用了renderResponse()方法,则JavaServer Faces实现将跳过“渲染响应”阶段。
如果应用程序需要重定向到其他Web应用程序资源或生成不包含任何JavaServer Faces组件的响应,则可以调用FacesContext.responseComplete()方法。
如果任何事件在此阶段已排队,JavaServer Faces实现将它们广播到有兴趣的监听器。
如果当前请求被识别为部分请求,则从FacesContext检索部分上下文,并应用部分处理方法。
在此阶段,JSF处理应用程序级事件,例如提交表单或链接到另一个页面。
现在,如果应用程序需要重定向到其他Web应用程序资源或生成不包含任何JSF组件的响应,则可以调用FacesContext.responseComplete()方法。
之后,JavaServer Faces实现将控制转移到“渲染响应”阶段。
这是JSF生命周期的最后阶段。 在此阶段,JSF将构建视图并将权限委托给相应的资源来呈现页面。
如果这是初始请求,则页面上表示的组件将被添加到组件树中。
如果这不是初始请求,组件已经添加到树中,不需要再添加。
如果请求是回应,并且在应用请求值阶段,过程验证阶段或更新模型值阶段期间遇到错误,则在此阶段将再次呈现原始页面。
如果页面包含h:message或h:messages标签,页面上会显示任何排队的错误消息。
在渲染视图的内容之后,保存响应的状态,以便后续请求可以访问它。 恢复视图阶段可以使用保存的状态。
在此阶段,请求的视图作为对客户端浏览器的响应。 视图渲染是以HTML或XHTML生成输出的过程。 所以,用户可以在浏览器看到它。
在渲染过程中采取以下步骤。
JSF中同样存在Bean概念,JSF中的Bean有以下的特点:
这一点很类似于Spring,JSF也有对Bean的使用,通常注册Bean也有两种方式:
<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:作用域 组成。
@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)
JSF有自己的标签,这里总结一下:
JavaServer Faces提供丰富的组件库来定义应用程序的体系结构。
它包括以下内容:
丰富的用于指定用户界面组件的状态和行为的类:
在详细的解释JSF组件之前,我们来看一下JSF标签是怎么用的,如果你学过一定的JSP标签的使用,那么应该是很好理解这些东西的。
在jsp页面中,EL标签和jsp本身自带的标签帮助我们将数据呈现在页面之上,JSF同理,只不过JSP利用的是servlet,而JSF利用的是JSF框架。
下面说一下项目的配置:
整个项目就几个部分:
<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.xhtmltitle>
<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>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Welcome Pagetitle>
h:head>
<h:body>
<h2>Hello, <h:outputText value="#{user.name}">h:outputText>h2>
h:body>
html>
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,所以为空)
<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>MyJSFTestdisplay-name>
<servlet>
<servlet-name>Faces Servletservlet-name>
<servlet-class>javax.faces.webapp.FacesServletservlet-class>
<load-on-startup>1load-on-startup>
servlet>
<servlet-mapping>
<servlet-name>Faces Servletservlet-name>
<url-pattern>*.facesurl-pattern>
<url-pattern>*.xhtmlurl-pattern>
servlet-mapping>
<context-param>
<param-name>javax.faces.PROJECT_STAGEparam-name>
<param-value>Developmentparam-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平台的置标,这里将每个语句和对应的输出罗列出来。
//form表单生成
<h:form id="user-form">
<h:outputLabel for="username">User Nameh: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 1label>
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 2label>
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>
属性:
属性 | 描述 |
---|---|
accept | 服务器处理此表单的内容类型列表将正确处理 |
class | 组件的CSS类名称。 |
enctype | 它用于向服务器提交内容。 如果未指定,则默认值为:”application/x-www-form-urlencoded“。 |
id | 它是此组件的标识符,此ID值必须是唯一的。 您可以使用它来访问CSS和JS文件中的HTML元素。 |
lang | 它描述了该组件生成的标记中使用的语言。 |
rendered | 它用于渲染组件。 该属性的默认值为true。 |
onclick | 当单击指针按钮时,它将执行Javascript代码。 |
onsubmit | 当表单提交时,它会执行Javascript代码。 |
属性 | 描述 |
---|---|
value | 它保存此组件的当前值。 |
id | 它是此组件的标识符,此ID必须是唯一的。您可以使用它来访问CSS和JS文件中的HTML元素。 |
style | 它用于为组件应用CSS。 |
class | 它给组件的类名,它用于从CSS和JS文件访问组件。 |
lang | 它用于指定语言,它有助于使网页本地化。 |
属性名称 | 描述 |
---|---|
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” |
它创建一个提交按钮,用于提交申请表。 您可以使用以下语法创建它。
标签 | 描述 |
---|---|
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 | 它用于通过使用指定的键来访问提交按钮。 |
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样式代码,以提供该组件的更好的用户界面。 |
它是一个标准的密码字段,它接受一行没有空格的文本,并在输入时将其显示为一组星号。 换句话说,它用于创建一个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 | 它用于通过使用指定的键访问组件。 |
< h:message>用于显示特定组件的单个消息。您可以通过将该组件的id传递给for属性来显示您的自定义消息。
举例来说:就是当我们的操作不合格的时候,会有一个提示。
"username" value="#{user.name}" required="true" requiredMessage="User Name is required">
//定义了一个长度5-20
for="username" minimum="5" maximum="20" />
for="output" style="color:red;margin:8px;" />
"submit-button" value="Submit" action="response.xhtml"/>
我认为这个提示是可以自己设定的,应该可以被重写,只是时间有限,先不关注这个。
<p>图片标签p>
<h:graphicImage id="image-id" name="user-image" url="#{user.fileLocation()}"
height="50px" width="50px" alt="Image not found">h:graphicImage>
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样式代码,以提供该组件的更好的用户界面。 |
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”元素)的名称。 |
暂时基础就总结这些,后面还有一些慢慢的整理进去。
另外实际应用部分在另外一篇博客中。
参考:
https://www.yiibai.com/jsf/jsf_form_checkbox.html