如何在条件内显示和更新“子页面”(使用primefaces)

时间:2021-07-25 07:24:13

I have a scenario to achieve but I don't know how to do it(I'am using primefaces) The scenario is: I have a selectOneMenu that contain options that the user can choose one of them, when the user choose an option ,a "form" or a "Sub-page" should appear below the selectOneMenu , the user should fill it. The "Sub-page" change according to the choosen option

我有一个场景要实现,但我不知道该怎么做(我使用的是primefaces)场景是:我有一个selectOneMenu,包含用户可以选择其中一个的选项,当用户选择一个选项时, “表单”或“子页面”应出现在selectOneMenu下方,用户应填写它。 “子页面”根据选择的选项更改

eg :option1 ---> Sub-Page1

例如:option1 ---> Sub-Page1

option2 --->Sub-Page2 etc..

option2 ---> Sub-Page2等..

JSF

<h:selectOneMenu  style="width:200px" immediate="true"  value="#{ToolsKPI.myChoice}" onchange="submit()"  valueChangeListener="#{BeanTest.selectChangeHandler}" required="true" >
           <f:selectItems value="#{ToolsKPI.getMyListKPI()}" />
             </h:selectOneMenu>

         <p:panel rendered="#{BeanTest.showPanelBool}" >
          <h1>KPI1</h1>
           <br></br>
             <h:inputText value="test1" />
         </p:panel>
                <p:panel rendered="#{BeanTest.showPanelBool1}" >
                    <br></br>
                    <h1>KPI2</h1>
              <h:inputText value="test2" />
             <h:inputText value="test3" />
         </p:panel>

My Bean

public class BeanTest implements java.io.Serializable {

 private String myChoice;
 private  boolean showPanelBool;
private  boolean showPanelBool1;


  public BeanTest() {
}

//getters ande setters


public void selectChangeHandler(ValueChangeEvent event){

 myChoice = (String) event.getNewValue(); // Must however be the exact page URL. E.g. "contact.jsf".
  FacesContext.getCurrentInstance().getExternalContext();

if(myChoice.equals("Number Of Closed issues") ){
this.showPanelBool = true;
} else{
this.showPanelBool = false;
this.showPanelBool1 = true;
}  
FacesContext.getCurrentInstance().renderResponse();
}

 }      

1 个解决方案

#1


0  

You should really post some semblance of the code: a picture something. What you're probably looking for is a "p:outputPanel" component or something similar.

你应该发布一些相似的代码:一张图片。您可能正在寻找的是“p:outputPanel”组件或类似的东西。

http://www.primefaces.org/showcase/ui/outputPanel.jsf

You can do something with a ValueChangeListener akin to

你可以使用类似于ValueChangeListener的东西

public void onSelectItem(ValueChangeEvent evt)
{
  if("someValue".equals(evt.getNewValue())
    showPageOne = true;//boolean
  else
    showPageTwo = true;//boolean
}

//JSF
<h:form id="myForm">
  <h:selectOneMenu valueChangeListener="#{myBean.onSelectItem}" update="myForm">
    <f:selectItems value="items">
  </h:selectOneMenu>
  <p:outputPanel rendered="#{myBean.showPageOne}">
    hi I'm page one
  </p:outputPanel>

  <p:outputPanel rendered="#{myBean.showPageTwo}">
    hi I'm page two
  </p:outputPanel>
</h:form>

Sorry for the pseudo code, the examples on Primefaces will really help you here. OutputPanel has saved my bacon often. You'll need to specify an update target, but the example is really clear and easy to run. Play with it.

抱歉,对于伪代码,Primefaces上的示例将真正帮助您。 OutputPanel经常保存我的培根。您需要指定更新目标,但该示例非常清晰且易于运行。玩它。

(Also Primefaces is fantastic you'll likely be very happy with their component suite)

(此外,Primefaces非常棒,你可能对它们的组件套件非常满意)

#1


0  

You should really post some semblance of the code: a picture something. What you're probably looking for is a "p:outputPanel" component or something similar.

你应该发布一些相似的代码:一张图片。您可能正在寻找的是“p:outputPanel”组件或类似的东西。

http://www.primefaces.org/showcase/ui/outputPanel.jsf

You can do something with a ValueChangeListener akin to

你可以使用类似于ValueChangeListener的东西

public void onSelectItem(ValueChangeEvent evt)
{
  if("someValue".equals(evt.getNewValue())
    showPageOne = true;//boolean
  else
    showPageTwo = true;//boolean
}

//JSF
<h:form id="myForm">
  <h:selectOneMenu valueChangeListener="#{myBean.onSelectItem}" update="myForm">
    <f:selectItems value="items">
  </h:selectOneMenu>
  <p:outputPanel rendered="#{myBean.showPageOne}">
    hi I'm page one
  </p:outputPanel>

  <p:outputPanel rendered="#{myBean.showPageTwo}">
    hi I'm page two
  </p:outputPanel>
</h:form>

Sorry for the pseudo code, the examples on Primefaces will really help you here. OutputPanel has saved my bacon often. You'll need to specify an update target, but the example is really clear and easy to run. Play with it.

抱歉,对于伪代码,Primefaces上的示例将真正帮助您。 OutputPanel经常保存我的培根。您需要指定更新目标,但该示例非常清晰且易于运行。玩它。

(Also Primefaces is fantastic you'll likely be very happy with their component suite)

(此外,Primefaces非常棒,你可能对它们的组件套件非常满意)