Question

我是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>

Back Bean：

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

那么使用ajax可以做到这一点吗？在此先感谢!!

Answer 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更新。这基本上是主要内容中RequestContext的内容。

Answer 2

这是可能的，如果您使用PrimeFaces也很容易。但首先我建议你让你的按钮更加“像素面”。将其重组为以下内容：

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

PrimeFaces按钮默认启用AJAX，因此不需要其他标签。删除更新属性（我们将在支持bean中执行此操作）。

现在，你的方法在支持bean：

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

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

Answer 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 "";
    }
}

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

3 个答案: