JSF简单Ajax示例

今天，我们将看到一些使用JSF的Ajax简单样本。

如果要查看有关JSF / Web应用程序的其他文章，请单击以下链接：重定向后的JSF持久化对象和消息，使用JAAS和JSF进行用户登录验证， JSF：Converter and Bean AutoComplete ， JSF – Hello World，Auto Complete ，在WebApp上处理异常，用户身份验证（过滤器/ Servlet），创建WebServer 。

在本文的结尾，您将找到下载示例源代码的链接。在本文（使用JAAS和JSF进行用户登录验证）中，我展示了如何安装JBoss 6，以防您从今天开始运行该项目。您将需要在Eclipse中安装JBoss工具插件。

看一下下面的页面及其代码：

<!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:ui='http://java.sun.com/jsf/facelets' xmlns:h='http://java.sun.com/jsf/html'xmlns:f='http://java.sun.com/jsf/core'>
<h:head>
</h:head>
<h:body><h:form>Your Name: <h:inputText id='inputname' label='${msgs.prompt}' value='#{user.name}'/><br /><h:commandButton action='#{user.sayHello}' value='Display my name here, now!'/><br /></h:form>
</h:body>
</html>

我们如何使用Ajax在同一屏幕上显示键入的名称？小菜一碟，只需添加“ f：ajax”组件。检查代码更新和结果：

<!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:ui='http://java.sun.com/jsf/facelets' xmlns:h='http://java.sun.com/jsf/html'xmlns:f='http://java.sun.com/jsf/core'>
<h:head>
</h:head>
<h:body><h:form>Your Name: <h:inputText id='inputname' label='${msgs.prompt}' value='#{user.name}'/><br /><h:commandButton action='#{user.sayHello}' value='Display my name here, now!'><f:ajax render='myName' execute='inputname' /></h:commandButton><br /><br /><h:outputText id='myName' value='#{user.name}' /></h:form>
</h:body>
</html>

很容易吧？我们只需要将“ execute”参数传递给ManagedBean的值即可；使用“ render”参数，我们将告知JSF“刷新”哪个组件。

还要注意，键入的名称将出现在控制台中。

使用此代码，我们可以“刷新”所有类型的组件。让我们看看另一个示例？

如果用户键入的名称少于4个字符，我们将显示一条错误消息。

检查我们的新消息和新代码：

<!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:ui='http://java.sun.com/jsf/facelets' xmlns:h='http://java.sun.com/jsf/html'xmlns:f='http://java.sun.com/jsf/core'>
<h:head>
</h:head>
<h:body><h:form><h:messages id='myMessage' globalOnly='true' showDetail='true'/>Your Name: <h:inputText id='inputname' label='${msgs.prompt}' value='#{user.name}'/><br /><h:commandButton action='#{user.sayHello}' value='Display my name here, now!'><f:ajax render='myName myMessage' execute='inputname' /></h:commandButton><br /><br /><h:outputText id='myName' value='#{user.name}' /></h:form>
</h:body>
</html>

package demo;import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.context.FacesContext;/*** Created by JBoss Tools*/
@ManagedBean(name = 'user')
@RequestScoped
public class User {private String name;public String sayHello() {if (isNameIncorrect()) {FacesContext context = FacesContext.getCurrentInstance();context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, 'Too small', 'Can you write it a little bigger?'));}System.out.println(name);return null;}private boolean isNameIncorrect() {return ''.equals(name.trim()) || name.length() < 3;}public String getName() {return name;}public void setName(String name) {this.name = name;}
}

请注意，我们具有“ h：messages”组件，其ID在“ f：ajax”组件中使用。当您使用“ h：message for =” YYY ”组件时，此代码也适用。

如果我们现在使用组合框怎么办？让我们显示一个组合框，当我们使用少于6个字符的名称时，将包含4个项目；如果键入的名称超过6个字符，则将显示一个包含4个以上项目的列表。

package demo;import java.util.ArrayList;
import java.util.List;import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.component.UISelectItems;
import javax.faces.component.html.HtmlSelectOneMenu;
import javax.faces.context.FacesContext;
import javax.faces.event.AjaxBehaviorEvent;/*** Created by JBoss Tools*/
@ManagedBean(name = 'user')
@RequestScoped
public class User {private String name;private List<String> cars;private String selectedCar;private HtmlSelectOneMenu htmlSelectCars;private static final String SELECT_A_CAR = 'Select One Car';public User() {cars = new ArrayList<String>();}public String sayHello() {if (isNameInCorrect()) {FacesContext context = FacesContext.getCurrentInstance();context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, 'Too small', 'Can you write it a little bigger?'));}System.out.println(name);return null;}private boolean isNameInCorrect() {return name == null || ''.equals(name.trim()) || name.length() < 3;}public String getName() {return name;}public void setName(String name) {this.name = name;}public void editMyCarsList(AjaxBehaviorEvent event) {if (htmlSelectCars == null) {htmlSelectCars = new HtmlSelectOneMenu();}htmlSelectCars.getChildren().clear();UISelectItems items = new UISelectItems();items.setValue(getCars());htmlSelectCars.getChildren().add(items);}public List<String> getCars() {cars.clear();cars.add(SELECT_A_CAR);if (!isNameInCorrect() && name.length() >= 6) {cars.add('Ferrari');cars.add('Porch');cars.add('Beetle');cars.add('Opala');cars.add('Passat');cars.add('Vectra');cars.add('Chevet');cars.add('Corvet');} else {cars.add('Ferrari');cars.add('Porch');cars.add('Beetle');cars.add('Opala');}return cars;}public void setCars(List<String> cars) {this.cars = cars;}public String getSelectedCar() {return selectedCar;}public void setSelectedCar(String selectedCar) {this.selectedCar = selectedCar;}public HtmlSelectOneMenu getHtmlSelectCars() {editMyCarsList(null);return htmlSelectCars;}public void setHtmlSelectCars(HtmlSelectOneMenu htmlSelectCars) {this.htmlSelectCars = htmlSelectCars;}
}

现在看一下我们的页面：

<!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:ui='http://java.sun.com/jsf/facelets' xmlns:h='http://java.sun.com/jsf/html'xmlns:f='http://java.sun.com/jsf/core'>
<h:head>
</h:head>
<h:body><h:form><h:messages id='myMessage' globalOnly='true' showDetail='true' />Your Name: <h:inputText id='inputname' label='${msgs.prompt}' value='#{user.name}' /><br /><h:commandButton action='#{user.sayHello}' value='Display my name here, now!'><f:ajax render='myName myCars myMessage' execute='inputname' listener='#{user.editMyCarsList}' /></h:commandButton><br /><br /><h:outputText id='myName' value='#{user.name}' /><br /><br />Choose your car: <h:selectOneMenu id='myCars' binding='#{user.htmlSelectCars}' value='#{user.selectedCar}' /><br /><br /></h:form>
</h:body>
</html>

请注意，我们的组合框项目大小会根据键入的名称进行更新。在本文的结尾，我将详细讨论为什么我对HtmlSelectOneMenu使用binding属性而不是返回List <String>。

作为最后一个示例，让我们创建一个组合框，该组合框将根据Car组合框中的选定值出现和消失。

看看我们的ManagedBean：

package demo;import java.util.ArrayList;
import java.util.List;import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.component.UISelectItems;
import javax.faces.component.html.HtmlSelectOneMenu;
import javax.faces.context.FacesContext;
import javax.faces.event.AjaxBehaviorEvent;/*** Created by JBoss Tools*/
@ManagedBean(name = 'user')
@RequestScoped
public class User {private String name;private List<String> cars;private List<String> colors;private String selectedCar;private String selectedColor;private HtmlSelectOneMenu htmlSelectCars;private static final String SELECT_A_CAR = 'Select One Car';public User() {cars = new ArrayList<String>();colors = new ArrayList<String>();colors.add('Red');colors.add('Blue');colors.add('Orange');colors.add('Pink --> O.o');}public String sayHello() {if (isNameInCorrect()) {FacesContext context = FacesContext.getCurrentInstance();context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, 'Too small', 'Can you write it a little bigger?'));}System.out.println(name);return null;}private boolean isNameInCorrect() {return name == null || ''.equals(name.trim()) || name.length() < 3;}public String getName() {return name;}public void setName(String name) {this.name = name;}public void editMyCarsList(AjaxBehaviorEvent event) {if (htmlSelectCars == null) {htmlSelectCars = new HtmlSelectOneMenu();}htmlSelectCars.getChildren().clear();UISelectItems items = new UISelectItems();items.setValue(getCars());htmlSelectCars.getChildren().add(items);}public List<String> getCars() {cars.clear();cars.add(SELECT_A_CAR);if (!isNameInCorrect() && name.length() >= 6) {cars.add('Ferrari');cars.add('Porch');cars.add('Beetle');cars.add('Opala');cars.add('Passat');cars.add('Vectra');cars.add('Chevet');cars.add('Corvet');} else {cars.add('Ferrari');cars.add('Porch');cars.add('Beetle');cars.add('Opala');}return cars;}public void setCars(List<String> cars) {this.cars = cars;}public String getSelectedCar() {return selectedCar;}public void setSelectedCar(String selectedCar) {this.selectedCar = selectedCar;}public List<String> getColors() {return colors;}public void setColors(List<String> colors) {this.colors = colors;}public boolean isColorsAlloweToDisplay() {if (isNameInCorrect()) {return false;}if (selectedCar == null || selectedCar.trim().equals('') || selectedCar.equals(SELECT_A_CAR)) {return false;}return true;}public String getSelectedColor() {return selectedColor;}public void setSelectedColor(String selectedColor) {this.selectedColor = selectedColor;}public HtmlSelectOneMenu getHtmlSelectCars() {editMyCarsList(null);return htmlSelectCars;}public void setHtmlSelectCars(HtmlSelectOneMenu htmlSelectCars) {this.htmlSelectCars = htmlSelectCars;}
}

我们的ManagedBean进行了轻微更新，我们只是添加了一个List，该List的方法返回了将填充组合框的颜色列表。我们还添加了一个方法，该方法将返回布尔值-如果允许显示组合框，则返回true。

检查我们的新页面：

<!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:ui='http://java.sun.com/jsf/facelets' xmlns:h='http://java.sun.com/jsf/html'xmlns:f='http://java.sun.com/jsf/core'>
<h:head>
</h:head>
<h:body><h:form><h:messages id='myMessage' globalOnly='true' showDetail='true' />Your Name: <h:inputText id='inputname' label='${msgs.prompt}' value='#{user.name}' /><br /><h:commandButton action='#{user.sayHello}' value='Display my name here, now!'><f:ajax render='myName myCars myMessage myColors' execute='inputname' listener='#{user.editMyCarsList}' /></h:commandButton><br /><br /><h:outputText id='myName' value='#{user.name}' /><br /><br />Choose your car:<h:selectOneMenu id='myCars' binding='#{user.htmlSelectCars}' value='#{user.selectedCar}'><f:ajax render='myColors' execute='inputname myCars'/></h:selectOneMenu><br /><br /><h:panelGroup id='myColors'><h:selectOneMenu value='#{user.selectedColor}' rendered='#{user.colorsAlloweToDisplay}'><f:selectItems value='#{user.colors}' /></h:selectOneMenu></h:panelGroup></h:form></h:body>
</html>

我将讨论帖子中使用的代码：

HtmlSelectOneMenu –我使用组件而不是列表，因为JSF在用户屏幕（DOM树）中呈现组件的效果不是很好。如果您的组合框有4行，并且使用ajax将更多行添加到列表中，那么JSF / Ajax将无法识别新添加的行；您将只能使用旧值。您可以尝试将代码与List <String>一起使用，而不是使用HtmlSelectOneMenu来查看结果；我花了大约3到4个小时来通过互联网上的大量搜索来了解这一点。
“ h：panelGroup”组件内的HtmlSelectOneMenu –我这样做是因为每次您要呈现未呈现的组件时，都需要更新其容器。如果我们的selectOne位于汽车selectOne的同一窗体内，则需要呈现所有窗体。

单击此处下载此文章的代码。

希望这篇文章对您有所帮助。

如果您有任何疑问/疑问/建议，请将其发布。

参考： uaiHebert博客上来自JCG合作伙伴 Hebert Coelho的JSF Simple Ajax Samples 。

翻译自: https://www.javacodegeeks.com/2012/07/jsf-simple-ajax-samples.html

JSF简单Ajax示例相关推荐

jsf标签p:ajax_JSF简单Ajax示例
jsf标签<p:ajax> 今天,我们将看到一些使用JSF的Ajax简单样本. 如果要查看有关JSF / Web应用程序的其他文章,请单击以下链接: 重定向后的JSF持久化对象和消息 , ...
Seam - 无缝集成 JSF，第 3 部分: 用于 JSF 的 Ajax
Seam - 无缝集成 JSF,第 3 部分: 用于 JSF 的 Ajax 用 Seam Remoting 和 Ajax4jsf 无缝熔接客户机和服务器文档选项未显示需要 JavaScript 的 ...
Spring Boot AJAX 示例
本文以spring boot框架.thymeleaf引擎为基础,利用jquery.ajax提交HTML表单请求到后台(spring rest api),后台返回一个JSON格式的数据为例进行说明. 开 ...
jap页面使用ajax动态加载列表数据,JSF - 使用AJAX调用基于DataTable中的mimetype值加载不同形式...
对于我的一个项目,我需要根据DataTable组件中可用的mimetype值加载不同的表单.我有标题,内容 - 中间的DataTable和页脚中的数据显示.单击DataTable条目应根据mimety ...
ajax 示例_通过示例了解挥发
ajax 示例我们已经花了几个月的时间来稳定Plumbr中的锁定检测功能 . 在此期间,我们遇到了许多棘手的并发问题. 许多问题是独特的,但是一种特殊类型的问题一直反复出现. 您可能已经猜到了–滥用 ...
WCF与AJAX编程开发实践(1):AJAX基础概念和纯AJAX示例
[0]开篇序言: 在<WCF分布式安全开发实践>系列文章之后,很想重新开启一个系列文章,来完善WCF的学习知识.思考很久,决定写一下WCF和AJAX学习的文章,取名为<WCF ...
JSP中使用AJAX示例分别将结果提交为STRUTS，SERVLET WEBWORK的不同操作方式
我原先刚开始学AJAX的时候,忘了从什么地方拉下来的一篇文章,不过,如果没有AJAX基础,最好不看这篇示例,因为你肯定看不懂,因为这个示例页不能够给你立即看到立即实现的效果,你应该先去看一个最简单的示 ...
jquery ajax示例_jQuery AJAX JSP Servlet Java示例
jquery ajax示例 Ajax in Java JSP Servlet based web applications are very common. Recently I have writt ...
WCF入门（一）——简单的示例
这篇随笔写了一段时间了,当时没有发布,今天整理文档的时候发现了,顺便给配了些图.主要是绍了一下WCF编程模型,并给了一个简单的示例. 概述 WCF框架是下一代.NET平台通信应用程序的核心.它包含了W ...

JSF简单Ajax示例

JSF简单Ajax示例相关推荐

最新文章

热门文章