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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/371703.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

常用的好用的window工具

1. FastStone Capture截图录屏软件 百度软件中心&#xff1a;http://rj.baidu.com/soft/detail/13504.html?ald 注册企业版&#xff1a; 用户名&#xff1a;c1ikm 注册码&#xff1a;AXMQX-RMMMJ-DBHHF-WIHTV 中文输入乱码解决方法&#xff1a; 2. Notepad文本编辑器&#xff…

python socket模块实现udp通信_Python基于socket模块实现UDP通信功能示例

Python基于socket模块实现UDP通信功能示例本文实例讲述了Python基于socket模块实现UDP通信功能。分享给大家供大家参考&#xff0c;具体如下&#xff1a;一 代码1、接收端import socket#使用IPV4协议&#xff0c;使用UDP协议传输数据ssocket.socket(socket.AF_INET, socket.SOC…

创建Java动态代理

Java动态代理机制提供了一种有趣的方式来创建代理实例。 不过&#xff0c;创建动态代理的步骤有些繁琐&#xff0c;请考虑将代理用于审核服务实例的方法调用所花费的时间– public interface InventoryService {public Inventory create(Inventory inventory);public List<I…

java udp丢包_linux 系统 UDP 丢包问题分析思路

最近工作中遇到某个服务器应用程序 UDP 丢包&#xff0c;在排查过程中查阅了很多资料&#xff0c;总结出来这篇文章&#xff0c;供更多人参考。在开始之前&#xff0c;我们先用一张图解释 linux 系统接收网络报文的过程。● 首先网络报文通过物理网线发送到网卡● 网络驱动程…

java lambda 多个参数_Java Lambda行为参数化

Java Lambda行为参数化我们可以将lambda表达式作为参数传递给方法。例子以下代码创建了一个名为Calculator的函数接口。在Calculator中有一个称为calculate的方法&#xff0c;它接受两个int参数并返回一个int值。在Main类中有一个引擎方法&#xff0c;它接受函数接口Calculator…

java main test_java调用main自动执行testng方法一

主方法import com.com.utlis.createTestngXml;import org.testng.TestNG;import java.util.ArrayList;import java.util.List;/*** author lw* createTime 2019/3/30 15:35* description testng调试类*/public class inittet {private static final String ESCAPE_PROPERTY &q…

ADF:动态视图对象

今天&#xff0c;我想写有关动态视图对象的文章&#xff0c;它允许我在运行时更改其数据源&#xff08;SQL查询&#xff09;和属性。 我将使用oracle.jbo.ApplicationModule :: createViewObjectFromQueryStmt方法来解决此问题。 我将逐步介绍如何执行此操作 创建视图对象和应…

java stack list_JAVA自己实现List接口Stack

package 集合.Stack;import java.util.Arrays;import java.util.EmptyStackException;import java.util.Vector;public class MyStack {//底层数组默认长度为10private Object[] myStack new Object[10];//sizeprivate int size 0;public MyStack() {}//pushpublic Object pu…

I / O神秘化

由于对高度可扩展的服务器设计的所有炒作以及对nodejs的狂热&#xff0c;我一直想重点研究IO设计模式&#xff0c;直到现在为止都没有足够的时间进行投资。 现在已经做了一些研究&#xff0c;我认为最好记下我遇到的东西&#xff0c;作为对我以及可能遇到这篇文章的任何人的未来…

java三大特性 继承_java基础(二)-----java的三大特性之继承

在《Think in java》中有这样一句话&#xff1a;复用代码是Java众多引人注目的功能之一。但要想成为极具革命性的语言&#xff0c;仅仅能够复制代码并对加以改变是不够的&#xff0c;它还必须能够做更多的事情。在这句话中最引人注目的是“复用代码”,尽可能的复用代码使我们程…

delphi用TAdoStoredProc调用存储过程,兼容sql2005、2008、2014的远程事务问题

delphi7写的程序&#xff0c;在sql2000里没问题&#xff0c;调用sql2008、2014里的存储过程时&#xff0c;如果存储过程里操作了大量数据&#xff0c;很容易会莫名其妙的自己撤销掉&#xff0c;但是程序还识别不到&#xff0c;认为还在正常执行。今天尝试换了个控件&#xff1a…

8、SpringCloud高频面试题-版本1

1、SpringCloud组件有哪些 SpringCloud 是一系列框架的有序集合。它利用 SpringBoot 的开发便利性巧妙地简化了分布式系统基础设施的开发&#xff0c;如服务发现注册、配置中心、消息总线、负载均衡、断路器、数据监控等&#xff0c;都可以用 SpringBoot 的开发风格做到一键启…

JavaOne 2012:Java策略主题演讲和IBM主题演讲

与 JavaOne 2010 相似&#xff0c;我对JavaOne 2012的开始也很艰难。由于“计算机和打印机技术上的困难”&#xff0c;办理登机手续的人花了70分钟为我提供JavaOne徽章。 尽管我不是世界上最有耐心的人&#xff0c;但比等待更令人失望的是&#xff0c;我错过了参加“社区会议&a…

java citymap_Java实现Map集合二级联动

Map集合可以保存键值映射关系&#xff0c;这非常适合本实例所需要的数据结构&#xff0c;所有省份信息可以保存为Map集合的键&#xff0c;而每个键可以保存对应的城市信息&#xff0c;本实例就是利用Map集合实现了省市级联选择框&#xff0c;当选择省份信息时&#xff0c;将改变…

JavaOne 2012:使用HTML5和Java构建移动应用程序

我返回了Parc 55 &#xff08;任务会议室&#xff09;&#xff0c;观看Max Katz的&#xff08; Exadel开发人员关系&#xff09;“用HTML5和Java构建移动应用程序” Bird-of-Feather&#xff08;BoF&#xff09;演示。 具体来说&#xff0c;Katz在Tiggzi &#xff08;基于云的应…

HDU 2602.Bone Collector-动态规划0-1背包

Bone Collector Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 85530 Accepted Submission(s): 35381 Problem DescriptionMany years ago , in Teddy’s hometown there was a man who was called “Bone Col…

简单谈谈js中的MVC

MVC是什么&#xff1f; MVC是一种架构模式&#xff0c;它将应用抽象为3个部分&#xff1a;模型&#xff08;数据&#xff09;、视图、控制器&#xff08;分发器&#xff09;。 本文将用一个经典的例子todoList来展开&#xff08;代码在最后&#xff09;。 一个事件发生的过程&a…

BTrace:Java开发人员工具箱中的隐藏宝石

这篇文章是关于BTrace的 &#xff0c;我正在考虑将其作为Java开发人员的隐藏宝藏。 BTrace是用于Java平台的安全&#xff0c;动态跟踪工具。 BTrace可用于动态跟踪正在运行的Java程序&#xff08;类似于DTrace&#xff0c;适用于OpenSolaris应用程序和OS&#xff09;。 不久&am…

Spring–添加SpringMVC –第2部分

在上一部分中&#xff0c;我们为经理和员工实现了控制器。 既然我们知道了解决方法&#xff0c;我们将做很少&#xff08;但仅做很少&#xff09;更复杂的事情–任务和时间表的控制器。 因此&#xff0c;让我们从org.timesheet.web开始。 TaskController 。 首先创建一个类&…