2013-02-08 51 views
3

我是JSF,Primefaces和Ajax的新手,所以我想要做的是更新一個面板,如果我的後臺bean驗證是真實的,更新另一個面板時假。Primefaces ajax根據backbean結果更新不同的面板

<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?提前致謝!!

回答

8

當然,有兩種方法。由於您使用的primefaces,兩個選項更容易將

  1. 使用RequestContext對象選擇性地更新面板。您的代碼看起來就像這樣:

    public void validate() { 
        RequestContext context = RequestContext.getCurrentInstance(); 
        if(validatecondition) { 
        context.update("panel1"); 
        } else { 
        context.update("panel2"); 
        } 
    } 
    
  2. 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進行更新。這基本上是primefaces中的RequestContext將在引擎蓋下完成的。

4

這是可能的,而且使用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。

0

JSF頁面代碼將在backing 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 ""; 
    } 
}