p：嚮導帶進度條

我想創建一個包含兩個PrimeFaces組件的註冊表單：Wizard和Progress Bar。對於支持bean，我使用下列之一：p：嚮導帶進度條

支持bean：UserWizard.xhtml

import java.io.Serializable; 
import java.util.Map; 
import java.util.TreeMap; 

import javax.annotation.PostConstruct; 
import javax.faces.application.FacesMessage; 
import javax.faces.context.FacesContext; 
import javax.faces.event.AjaxBehaviorEvent; 
import javax.faces.view.ViewScoped; 
import javax.inject.Named; 

import org.primefaces.context.RequestContext; 
import org.primefaces.event.FlowEvent; 

    @ViewScoped 
    @Named 
    public class UserWizard implements Serializable { 

     private User user = new User(); 

     private boolean skip; 

     private Integer progress = 0; 

     public User getUser() { 
      return user; 
     } 

     public void setUser(User user) { 
      this.user = user; 
     } 

     public void save() {   
      FacesMessage msg = new FacesMessage("Successful", "Welcome :" + user.getFirstname()); 
      FacesContext.getCurrentInstance().addMessage(null, msg); 
     } 

     public boolean isSkip() { 
      return skip; 
     } 

     public void setSkip(boolean skip) { 
      this.skip = skip; 
     } 

     public String onFlowProcess(FlowEvent event) { 
      String oldStep = event.getOldStep(); 
      Integer oldValue = getStepNumber(oldStep); 
      String newStep = event.getNewStep(); 
      Integer newValue = getStepNumber(newStep); 
      if(oldValue < newValue) 
       progress += 25; 
      else 
       progress += 25; 

      return event.getNewStep(); 
} 

public Integer getStepNumber(String Step) { 
    Integer StepNumber; 
    switch(Step) { 
     case "personal": 
      StepNumber = 1; 
      break; 
     case "address": 
      StepNumber = 2; 
      break; 
     case "contact": 
      StepNumber = 3; 
      break; 
     default: 
      StepNumber = 4; 
      break; 
    } 
    return StepNumber; 
} 

     public Integer getProgress() { 
      return progress; 
     } 

     public void setProgress(Integer progress) { 
      this.progress = progress; 
     } 

     public void onComplete() { 
      FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Progress Completed")); 
     } 

     public void cancel() { 
      progress = null; 
     } 
    }

登記表：registration.xhtml

<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets" 
    xmlns:f="http://xmlns.jcp.org/jsf/core" 
    xmlns:p="http://primefaces.org/ui" 
    xmlns:h="http://xmlns.jcp.org/jsf/html"> 
<body> 
    <f:view contracts="#{view.locale.language}"> 
     <ui:composition template="/template.xhtml"> 
      <ui:define name="centralBody"> 
<h:form> 

<p:growl id="growl" sticky="true" showDetail="true"/> 

<p:wizard flowListener="#{userWizard.onFlowProcess}"> 
    <p:tab id="personal" title="Personal"> 
     <p:panel header="Personal Details"> 
      <p:messages /> 
      <h:panelGrid columns="2" columnClasses="label, value"> 
       <h:outputText value="Firstname: *" /> 
       <p:inputText value="#{userWizard.user.firstname}" required="true" label="Firstname"/> 

       <h:outputText value="Lastname: *" /> 
       <p:inputText value="#{userWizard.user.lastname}" required="true" label="Lastname"/> 

       <h:outputText value="Age: " /> 
       <p:inputText value="#{userWizard.user.age}" /> 

       <h:outputText value="Skip to last: " /> 
       <h:selectBooleanCheckbox value="#{userWizard.skip}" /> 
      </h:panelGrid> 
     </p:panel> 
    </p:tab> 

    <p:tab id="address" title="Address"> 
     <p:panel header="Address Details"> 
      <p:messages /> 
      <h:panelGrid columns="2" columnClasses="label, value"> 
       <h:outputText value="Street: " /> 
       <p:inputText value="#{userWizard.user.street}" /> 

       <h:outputText value="Postal Code: " /> 
       <p:inputText value="#{userWizard.user.postalCode}" /> 

       <h:outputText value="City: " /> 
       <p:inputText value="#{userWizard.user.city}" /> 

       <h:outputText value="Skip to last: " /> 
       <h:selectBooleanCheckbox value="#{userWizard.skip}" /> 
      </h:panelGrid> 
     </p:panel> 
    </p:tab> 

    <p:tab id="contact" title="Contact"> 
     <p:panel header="Contact Information"> 
      <p:messages /> 
      <h:panelGrid columns="2" columnClasses="label, value"> 
       <h:outputText value="Email: *" /> 
       <p:inputText value="#{userWizard.user.email}" required="true" label="Email"/> 

       <h:outputText value="Phone: " /> 
       <p:inputText value="#{userWizard.user.phone}"/> 

       <h:outputText value="Additional Info: " /> 
       <p:inputText value="#{userWizard.user.info}"/> 
      </h:panelGrid> 
     </p:panel> 
    </p:tab> 

    <p:tab id="confirm" title="Confirmation"> 
     <p:panel header="Confirmation"> 
      <h:panelGrid id="confirmation" columns="3" columnClasses="grid,grid,grid"> 
       <h:panelGrid columns="2" columnClasses="label, value"> 
        <h:outputText value="Firstname: " /> 
        <h:outputText value="#{userWizard.user.firstname}" styleClass="outputLabel"/> 

        <h:outputText value="Lastname: " /> 
        <h:outputText value="#{userWizard.user.lastname}" styleClass="outputLabel"/> 

        <h:outputText value="Age: " /> 
        <h:outputText value="#{userWizard.user.age}" styleClass="outputLabel"/> 
       </h:panelGrid> 

       <h:panelGrid columns="2" columnClasses="label, value"> 
        <h:outputText value="Street: " /> 
        <h:outputText value="#{userWizard.user.street}" styleClass="outputLabel"/> 

        <h:outputText value="Postal: " /> 
        <h:outputText value="#{userWizard.user.postalCode}" styleClass="outputLabel"/> 

        <h:outputText value="City: " /> 
        <h:outputText value="#{userWizard.user.city}" styleClass="outputLabel"/> 
       </h:panelGrid> 

       <h:panelGrid columns="2" columnClasses="label, value"> 
        <h:outputText value="Email: " /> 
        <h:outputText value="#{userWizard.user.email}" styleClass="outputLabel"/> 

        <h:outputText value="Phone " /> 
        <h:outputText value="#{userWizard.user.phone}" styleClass="outputLabel"/> 

        <h:outputText value="Info: " /> 
        <h:outputText value="#{userWizard.user.info}" styleClass="outputLabel"/> 

        <h:outputText /> 
        <h:outputText /> 
       </h:panelGrid> 
      </h:panelGrid> 

      <p:commandButton value="Submit" actionListener="#{userWizard.save}" update="growl" process="@this"/> 
     </p:panel> 
    </p:tab> 
</p:wizard> 
<p:progressBar id="progressBar" widgetVar="pbAjax" ajax="true" value="#{UserWizard.progress}" labelTemplate="{value}%" styleClass="animated" global="false"> 
     <p:ajax event="complete" listener="#{UserWizard.onComplete}" update="growl" oncomplete="PF('startButton2').enable()"/> 
    </p:progressBar> 
</h:form> 
     </ui:define> 
     </ui:composition> 
    </f:view> 
</body> 
</html>

我的目的是，當註冊流程通過不同的註冊標籤（Perso nal，地址，聯繫人和確認），屏幕下方的進度條根據下一個或後退按鈕進行更新。爲了實現這一點，我想要使用的方法

public String onFlowProcess(FlowEvent event) { 
    String oldStep = event.getOldStep(); 
    Integer oldValue = getStepNumber(oldStep); 
    String newStep = event.getNewStep(); 
    Integer newValue = getStepNumber(newStep); 
    if(oldValue < newValue) 
     progress += 25; 
    else 
     progress -= 25; 

    return event.getNewStep(); 
} 

public Integer getStepNumber(String Step) { 
    Integer StepNumber; 
    switch(Step) { 
     case "personal": 
      StepNumber = 1; 
      break; 
     case "address": 
      StepNumber = 2; 
      break; 
     case "contact": 
      StepNumber = 3; 
      break; 
     default: 
      StepNumber = 4; 
      break; 
    } 
    return StepNumber; 
}

但我不知道如何更新進度欄。我曾嘗試：

在
功能onFlowProcess改變進度條值（可變進展）的值。這是行不通的。
<p:wizard ... update="progress_bar">。我已經意識到，對於Wizard組件，不允許屬性更新。
<p:ajax listener="#{UserWizard.onFlowProcess}" update="@this">在<p:progressBar>元素內。

來源

2016-12-05 julian

而實際的問題是？ – Kukeltje

如果事件發生，我會將當前步驟服務器端保留在一個bean中，並與'newstep'進行比較... – Kukeltje

您嘗試**的是什麼？更新屬性？阿賈克斯？遠程命令？ – Kukeltje

由於嚮導（至少在/高達PrimeFaces 6.0）似乎並不支持update屬性使用flowListener並沒有明確的AJAX事件支持的時候，我看到的唯一選擇是使用PrimeFaces RequestContext到更新其他組件。請記住，您需要使用元素的「完全絕對路徑」，因此包括它所在的命名容器的所有ID。最好是將ID明確分配給所有命名容器（包括表單！）

因此使用

RequestContext.getCurrentInstance().update("formId:progress_bar");

like eg

public String onFlowProcess(FlowEvent event) { 
    String oldStep = event.getOldStep(); 
    Integer oldValue = getStepNumber(oldStep); 
    String newStep = event.getNewStep(); 
    Integer newValue = getStepNumber(newStep); 
    if(oldValue < newValue) 
     progress += 25; 
    else 
     progress -= 25; 

    RequestContext.getCurrentInstance().update("formId:progress_bar");   

    return event.getNewStep(); 
}

in flowListener should work。請記住，在bean的更新中，'：'作爲絕對路徑的前綴不是必需的，它們被假定始終是絕對的

來源

2016-12-07 09:44:39 Kukeltje

p：嚮導帶進度條

回答

相關問題