Primefaces ajax根据backbean结果更新不同的面板答案

【问题标题】：Primefaces ajax update different panels according to backbean resultPrimefaces ajax根据backbean结果更新不同的面板
【发布时间】：2013-01-24 15:34:13
【问题描述】：

我是 JSF、Primefaces 和 Ajax 的新手，所以我想做的是如果我的后 bean 上的验证为真，则更新一个面板，并在它为假时更新另一个面板。

<h:panelGroup id="panel1">
    ...
    <h:commandButton id="btn1" action="#{bean.validate}">
        <p:ajax process="panel1" update="panel1"/>
    </h:commandButton>
</h:panelGroup>

<h:panelGroup id="panel2">
    ...
</h:panelGroup>

回豆：

public void validate() {
    ...
    if(validatecondition) {
        // Update panel 1
    } else {
        // update panel 2
    }
}

那么是否可以使用 ajax 来做到这一点？提前致谢！！

【问题讨论】：

标签： ajax jsf primefaces

【解决方案1】：

当然，有两种方法。由于您使用的是primefaces，因此两个选项中更容易的是

使用RequestContext 对象选择性地更新面板。您的代码将如下所示：

 public void validate() {
   RequestContext context = RequestContext.getCurrentInstance();
   if(validatecondition) {
     context.update("panel1");
   } else {
     context.update("panel2");
   }
}

JSF PartialViewContext 可以完成同样的工作，只需多输入一点代码

FacesContext ctxt = FacesContext.getCurrentInstance(); //get your hands on the current request context
     if(validatecondition) {
         ctxt.getPartialViewContext().getRenderIds().add("panel1");
       } else {
         ctxt.getPartialViewContext().getRenderIds().add("panel2");
       }

getRenderIds() 调用返回一个组件 ID 列表，JSF 将在响应完成时通过 ajax 更新这些 ID。这基本上是 primefaces 中的 RequestContext 在幕后所做的。

【讨论】：

【解决方案2】：

这是可能的，如果您使用 PrimeFaces 也很容易。但首先我建议你让你的按钮更像“primefaces like”。把它重新组织成这样：

<p:commandButton id="btn1" action="#{bean.validate}" process="panel1"/>

PrimeFaces 按钮默认启用 AJAX，因此不需要额外的标签。删除更新属性（我们将在支持 bean 中这样做）。

现在，你在 backing bean 中的方法：

public void validate() {
  // ...
  if(validatecondition) {
    RequestContext.getCurrentInstance().update("panel1");
  } else {
    RequestContext.getCurrentInstance().update("panel2");
  }
}

RequestContext 是一个非常有用的类，您可以使用它来更新、重置字段或在 AJAX 请求后执行一些 JavaScript。在此示例中，它仅用于有条件地更新 panel1 或 panel2。

【讨论】：

【解决方案3】：

JSF 页面代码将跟随在支持 bean 中，输入中的内容将检查并相应地启用正确的面板。在输入中输入 1 将激活面板 1，为面板 2 输入 2 并为两个面板留空。

JSF 是一个优秀的企业应用程序开发规范，它提供了更大的灵活性和关注点分离。您需要将用户界面元素远离业务逻辑组件的地方。我的解决方案是通过不引用支持 bean 中的 UI 元素 ID 来遵守该原则。

<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        Hello from Facelets
        <h:form id="frm" >

            <h:commandButton value="click me" action="#{test2.aa()}">                
                <f:ajax execute="@form" render=":mainpanel" ></f:ajax> 
            </h:commandButton>
            <h:inputText id="intest" value="#{test2.selection}"></h:inputText> 

        </h:form>
        <h:panelGroup id="mainpanel">
            <h:panelGroup id="panel1" rendered="#{test2.prop1=='v'}">panel1
                <h:outputLabel id="lbl1" value="#{test2.prop1}" ></h:outputLabel>                
            </h:panelGroup>
            <h:panelGroup id="panel2" rendered="#{test2.prop2=='v'}">panel2
                <h:outputLabel id="lbl2" value="#{test2.prop2}"></h:outputLabel>
            </h:panelGroup>
        </h:panelGroup>
    </h:body>
</html>

尽可能简单的支持 bean 代码我在请求范围内也可以使用会话范围。

package test;

import javax.inject.Named;
import javax.enterprise.context.SessionScoped;
import java.io.Serializable;

@Named(value = "test2")
@SessionScoped
public class test2 implements Serializable {


    String prop1;
    String prop2;
    String selection;

    public String getProp1() {
        return prop1;
    }

    public void setProp1(String prop1) {
        this.prop1 = prop1;
    }

    public String getProp2() {
        return prop2;
    }

    public void setProp2(String prop2) {
        this.prop2 = prop2;
    }

    public test2() {
        prop1 = "v";
        prop2 = "v";
        selection = "";
    }

    public String getSelection() {
        return selection;
    }

    public void setSelection(String selection) {
        this.selection = selection;
    }

    public String aa() {
        if ("".equals(selection)) {
            prop1 = "v";
            prop2 = "v";
            return "";
        } else if ("1".equals(selection)) {
            prop1 = "v";
            prop2 = "h";
            return "";
        } else if ("2".equals(selection)) {
            prop1 = "h";
            prop2 = "v";
            return "";
        }
        return "";
    }
}

【讨论】：