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