添加Form组件
标签h:form展示一个输入表单,包括能够包含展示给用户或和表单一起提交的数据的子组件。
下图显示了一个典型的登录表单,用户可以在这个表单中输入用户名和密码,然后点击login按钮提交表单。
标签h:form展示了页面上的表单,它将显示和收集数据的组件包括在内,如下所示:
- <h:form>
- ... other JavaServer Faces tags and other content...
- </h:form>
标签h:form能够包括HTML标记来布局在页面上的组件。注意h:form自身并不做任何的布局,它的目的只是收集数据以及声明能被表单中其他的组件使用的属性。
一个页面能够包含多个h:form标签,但是只有用户提交的表单内的值会被包含在送回的request中。
使用Text组件
Text组件允许用户在web应用程序中查看和修改文本。Text组件的基本的类型有:
- Label:显示一个只读的文本
- Text field:允许用户输入文本,通常作为表单的一部分提交
- Text area:也是text field的一种,允许用户输入多行的文本。
- Password:也是text field的一种,当用户输入文本的时候显示其他的符号如星号代替用户输入的文本。
下图显示了这些文本组件的例子.
Text组件可以被归类为输入组件,也可以归类为输出组件。JavaServer Faces输出组件被呈现为只读文本,一个例子是label。JavaServer Faces输入组件被呈现为可编辑的文本,一个例子是text field。
Input组件和output组件都可以被以多种方式呈现来显示特定的文本。
下表列出展示输入组件的标签
标签 |
功能 |
h:inputHidden |
允许页面作者在页面上添加一个隐藏的变量 |
h:inputSecret |
允许用户在页面上输入字符串但是不显示用户的实际输入 |
h:inputText |
允许用户在页面上输入一行字符 |
h:inputTextarea |
允许用户在页面上输入多行的字符 |
除了在前面的章节中“通用组件标签属性”中的属性外,输入标签还支持下表中显示的标签属性。注意这个表中并没有包含input标签所支持的所有属性,只是列出了最常用的一些属性。要看完整的属性列表,见位于http://download.oracle.com/javae ... s/pdldocs/facelets/的文档。
属性 |
描述 |
converter |
指定一个转换器来转换组件的本地数据。关于怎样使用这个属性的更多信息见第165页的“使用标准的转换器” |
converterMessage |
指定当该注册在该组件上的转换器失败的时候显示的消息。 |
dir |
指定这个组件显示的文本的方向,可以接受的值是LTR(left-to-right)或RTL(right-to-left) |
label |
指定一个可以用在错误信息中确定该组件的名称 |
lang |
指定在呈现的标记中使用的语言的编码,如en_us |
required |
接受一个boolean值来表明是否用户必须要输入值 |
requiredMessage |
指定当用户没有输入值的时候要显示的错误信息 |
validator |
一个指向后台bean的方法的方法表达式,这个方法会执行对组件数据的验证。 |
f:validatorMessage |
指定当注册到组件上的验证器验证组件数据失败的时候显示的错误消息。 |
valueChangeListener |
一个指向后台bean的方法的方法表达式,这个方法会处理用户向组件中输入值的事件。 |
下面的表格中列出了输出组件的标签属性
标签 |
功能 |
h:outputFormat |
显示一个本地信息 |
h:outputLabel |
一个标准的只读label。组件显示为一个指定的输入框的label |
h:outputLink |
到另一个页面或页面上的位置的<a href>链接,不产生任何action事件 |
h:outputText |
显示一行文本 |
本节的其余部分将会介绍怎样使用上面两个表格中列出的标签。
使用h:inputText标签呈现一个文本框
标签h:inputText是用来显示一个文本框的。相似的标签h:outputText显示一个只读的单行文本。本节将会介绍怎样使用h:inputText标签。h:outputText的使用方式也是类似的。
下面是一个使用h:inputText标签的例子:
- <h:inputText id="name" label="Customer Name" size="50"
- value="#{cashier.name}"
- required="true"
- requiredMessage="#{customMessages.CustomerName}">
- <f:valueChangeListener
- type="com.sun.bookstore6.listeners.NameChanged" />
- </h:inputText>
属性label给出了一个用户友好的名字,这个名字会替换组件的错误信息中的参数来显示。属性value指向一个名为CashierBean的后台bean的name属性。这个name属性持有这个name组件使用的数据。当用户提交了表单之后,CashierBean的name属性会被设置成用户在这个name组件中对应的文本框中输入的值。
属性required表明这个值是必须输入的,如果用户没有在相应的文本框中输入值,会显示一个错误信息。JavaServer Faces实现了这个检查,当组件的值是null或空字符串的时候就会报错。
如果需要组件必须要有一个不为null的值或至少一个字符的字符串,就需要将这个属性添加到标签上,并将值设置为true。如果标签有这个属性并且被设置为了true,那么当组件的值是null或长度为0的字符串是,其他的注册到该组件上的验证器不会被调用。如果标签没有被设置为true的required属性,其他的注册到该组件的验证器会被调用,但是这些验证器必须要处理null值或长度为0的字符串的情况。更多信息见第195页的“验证null值和空字符串”。
使用h:inputSecret标签呈现一个密码输入框
标签h:inputSceret会呈现为一个<input type="password">的HTML标签。当用户在这个输入框内输入字符的时候,一行星号会代替输入的字符显示出来。下面是一个该标签的例子:
- <h:inputSecret redisplay="false" value="#{LoginBean.password}" />
在这个例子中,属性redisplay被设置成了false。这会阻止密码显示在查询字符串中或HTML页面的源文件中。
使用h:outputLable显示一个Label
标签h:outputLabel用来将一个label加到指定的输入字段上,使得其更加具有可读性。下面的页面中使用h:outputLabel标签来呈现一个check box的label:
- <h:selectBooleanCheckbox
- id="fanClub"
- binding="#{cashier.specialOffer}" />
- <h:outputLabel for="fanClub"
- binding="#{cashier.specialOfferText}" >
- <h:outputText id="fanClubLabel"
- value="#{bundle.DukeFanClub}" />
- </h:outputLabel>
- …
h:outputLabel标签的for属性映射到输入字段的id,label会被添加到该id对应的组件。被嵌套在h:outputLabel里面的h:outputText标签显示了这个label组件。h:outputText标签的value属性指定了显示的文本。
除了使用h:outputText标签来显示label的文本之外,还可以直接使用h:outputLabel标签的value属性。下面的代码片段展示了怎样使用h:outputLabel标签的value属性来指定label的文本来获得和上面的例子相似的页面:
- <h:selectBooleanCheckbox
- id="fanClub"
- binding="#{cashier.specialOffer}" />
- <h:outputLabel for="fanClub"
- binding="#{cashier.specialOfferText}"
- value="#{bundle.DukeFanClub}" />
- </h:outputLabel>
- ...
使用h:outputLink标签来呈现一个超链接
标签h:outputLink用来呈现一个超链接,当点击该超链接的时候,另外一个页面会被装入,但是不会生成action事件。这个标签的value属性指定了要打开的页面的URL。如果只是希望用户点击链接的时候指定的URL被打开,并不希望执行其他的处理,那么就应该使用这个标签,而不是使用h:commandLink标签。下面是一个例子:
- <h:outputLink value="javadocs">
- Documentation for this demo
- </h:outputLink>
标签h:outputLink的标签体中的文本是会显示在页面上的超链接的文本,用户点击这个文本就会打开指定的页面。
使用h:outputFormat标签来显示一个格式化的消息
标签h:outputFormat允许以MessageFormat模式来显示连接在一起的信息,关于MessageFormat模式见java.text.MessageFormat的API文档。下面是一个outputFormat标签的例子:
- <h:outputFormat value="Hello, {0}!">
- <f:param value="#{hello.name}"/>
- </h:outputFormat>
属性value指定了MessageFormat的模式。标签param指定了消息的替换的参数。param标签的value值会替换outputFormat的value中的{0}。如果表达式#{hello.name}的值是Bill,那么显示在页面上的消息就是Hello,Bill!
如果消息中有多于一个的参数,可以使用包含多个param标签的h:outputFormat标签。在使用多个param标签的时候,确保这些param标签的顺序,这样这些标签的值才会正确的插入到消息中。下面是一个例子:
- <h:outputFormat value="Hello, {0}! You are visitor number {1} to the page.">
- <f:param value="#{hello.name}" />
- <f:param value="#{bean.numVisitor}"/>
- </h:outputFormat>
消息中的{1}会被第二个param标签中的值代替。该标签的值是一个EL表达式,获取bean.numVisitor,这个后台bean的numVisitor参数追踪访问这个页面的访问者的个数。这是一个接受值表达式的EL表达式的标签属性的例子。显示在页面上的消息类似于:
相关推荐
### JSF自定义组件知识点详解 #### 一、JSF生命周期与组件概述 **1.1 JSF生命周期** JavaServer Faces (JSF) 是一种基于Java的Web应用框架,主要用于构建用户界面。为了更好地理解如何自定义JSF组件,首先需要...
【JSF自定义组件实现详解】 在JavaServer Faces (JSF)框架中,自定义组件允许开发者根据项目需求创建具有特定功能的UI元素。本文将引导你逐步了解如何在JSF中实现一个自定义组件,从基础开始,一步步构建一个简单的...
### JSF UI组件详解 #### 一、引言 JavaServer Faces (JSF) 是一个为简化企业级Java Web应用程序创建而设计的标准组件框架。它不仅提供了强大的模型-视图-控制器(MVC)架构,还引入了一系列标准UI组件,使得开发者...
Servlet 3.0引入了对文件上传的内置支持,无需像Servlet 2.x那样依赖第三方库如Commons FileUpload。我们可以通过实现`javax.servlet.http.Part`接口来处理上传的文件部分。在Managed Bean中,我们可以定义一个方法...
jsf官方实现默认是不支持multipart/form-data类型的表单的,为了使jsf能够解析multipart/form-data表单的数据,我参考了myfaces1.1的方式,然后按照commons-fileupload1.2重构了部分代码(myfaces1.1使用的是commons...
我们可以在这里看到JSF组件的使用,如`<h:form>`、`<h:outputText>`和可能的PrimeFaces组件。 4. **META-INF** 这个目录通常包含应用的元数据,如`MANIFEST.MF`文件,它定义了应用的属性和依赖。在JSF应用中,可能...
本篇文章将深入探讨如何使用JSF组件实现文件上传功能,并结合描述和标签来阐述这一主题。 首先,我们需要理解JSF组件的工作原理。JSF是一种基于Java的MVC(模型-视图-控制器)框架,用于构建动态的、数据驱动的Web...
2. **JSF页面(Facelets)**:JSF使用Facelets作为默认的视图技术,Facelets文件通常以`.xhtml`为扩展名,它们是XML格式,可以包含HTML和JSF组件。 3. **JSF组件**:JSF组件是UI元素,如输入框、按钮等。例如,在...
JSF2 允许开发者创建自定义组件,这大大增强了应用程序的灵活性和可扩展性。自定义组件可以通过以下步骤来实现: 1. **定义组件类**:继承 `UIComponentBase` 或其他适当的基类。 2. **实现渲染逻辑**:重写 `...
- **关键字**:`@this`, `@none`, `@form`, 和 `@all`分别代表当前组件、不渲染任何组件、渲染表单内所有组件以及渲染所有组件。 #### 示例分析 文档中给出了具体的代码示例,如一个简单的输入框和输出文本的场景...
2. **RichFaces 4.2.3**: RichFaces 4.x系列是该框架的一个主要版本,它基于JSF 2.x并提供了一组强大的组件和AJAX功能。其中4.2.3是稳定版本,包含了一些性能优化和新特性,如更灵活的CSS3支持,以及对现代浏览器的...
JSF页面以XHTML格式编写,使用命名空间声明JSF相关的组件,例如`<h:form>`、`<h:inputText>`等。Facelets作为JSF页面的默认模板系统,使用`<ui:composition>`或`<ui:include>`标签来组合页面。在示例中,`<h:head>`...
然而,由于JSF本身没有内置的文件上传组件,也不具备智能处理multipart/form-data请求的能力,因此在使用JSF进行文件上传时会遇到困难。对于希望利用JSF上传文件的开发者(如文中提到的Benjmaz)来说,通常有以下三...
1. `<h:form>`:这是JSF中的表单组件,用于封装用户输入的数据,并在提交时发送到服务器。 2. `<h:inputText>`:这是一个文本输入组件,用于获取用户名或密码。 3. `<h:commandButton>`:这是一个按钮组件,当用户...
JSF有许多第三方组件库,如PrimeFaces、RichFaces等,它们提供了更多定制化的组件,可以增强登录界面的功能和外观。例如,PrimeFaces的`p:password`组件可以显示密码强度指示器,提升用户体验。 综上所述,"jsf...
这里,`h:inputText`和`h:commandButton`是JSF组件,`#{bean.name}`和`#{bean.submit}`则是EL(Expression Language)表达式,用于绑定到后台Bean的属性和方法。 **四、JSF Managed Bean** Managed Bean是JSF中的...
2. **自定义组件框架**:允许开发者创建自己的组件,扩展JSF的功能。 3. **官方标准**:JSF作为官方标准,得到了各大厂商的支持,例如IBM和Oracle,促进了工具和库的发展。 4. **事件驱动**:JSF的组件通过事件...
JSF的核心概念是组件,这些组件代表了用户界面的元素,如按钮、文本框、表格等。在JSF中,控件是这些组件的实例,它们负责处理用户输入、显示数据以及与其他组件和应用程序逻辑进行交互。 ### JSF控件分类 JSF控件...
在JavaServer Faces (JSF)框架中,PrimeFaces是一个非常流行的UI组件库,它提供了许多增强用户界面的功能。其中,`<p:fileUpload>`组件是用于实现文件上传功能的一个重要元素。本篇文章将深入探讨如何使用PrimeFaces...