如果要查看有关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