JSP命令按鈕操作取決於用戶選擇

Question

我有一個代表計算器的bean類。這個類暴露了4種方法：加，減，乘，除。

對於前端我正在寫一個JSP頁面。該頁面包含兩個文本輸入框（一個用於x，另一個用於y）。我有一個下拉菜單，用戶選擇操作，然後一個計算執行所選操作的命令按鈕。

<h:form> 
    <h:inputText value="#{calcBean.x}"></h:inputText> 
    <h:inputText value="#{calcBean.y}"></h:inputText> 
    <h:selectOneMenu> 
     <f:selectItem itemValue="Add"></f:selectItem> 
     <f:selectItem itemValue="Subtract"></f:selectItem> 
     <f:selectItem itemValue="Multiply"></f:selectItem> 
     <f:selectItem itemValue="Divide"></f:selectItem> 
    </h:selectOneMenu> 
    <h:commandButton value="Calculate" action="@SEE COMMENT"> 
    <%-- TODO the action of this command button needs to change depending on --%> 
    <%-- the user selection. For example: If the user selects "Add" the action --%> 
    <%-- needs to be #{calcBean.add} --%> 
    </h:commandButton> 
</h:form> 

我遇到了是我不知道如何改變這取決於用戶的選擇命令按鈕的行動問題。

我能做到這一點有四個不同的命令按鈕，但不是一個完美的解決方案：

<h:form> 
    <h:inputText value="#{calcBean.x}"></h:inputText> 
    <h:inputText value="#{calcBean.y}"></h:inputText> 
    <br/> 
    <h:commandButton value="Add" action="#{calcBean.add}"></h:commandButton> 
    <h:commandButton value="Subtract" action="#{calcBean.subtract}"></h:commandButton> 
    <h:commandButton value="Multiply" action="#{calcBean.multiply}"></h:commandButton> 
    <h:commandButton value="Divide" action="#{calcBean.divide}"></h:commandButton> 
</h:form> 

Answer 1

您可以通過用戶的選擇綁定到後端bean的屬性，並使用該選擇的值作爲做到這一點你的行動方法中的一個條件來做適當的計算。

<h:selectOneMenu value=#{calcBean.calculationType}> 
    <f:selectItem itemValue="Add"></f:selectItem> 
    <f:selectItem itemValue="Subtract"></f:selectItem> 
    <f:selectItem itemValue="Multiply"></f:selectItem> 
    <f:selectItem itemValue="Divide"></f:selectItem> 
</h:selectOneMenu> 

<h:commandButton value="Add" action="#{calcBean.doSelectedCalculation}"></h:commandButton> 

在您的單一唯一操作方法中，根據所選的計算類型，您可以對給定的x和y值執行操作。

public void doSelectedCalculation() 
{ 
    if(calculationType.equals("Add")) 
    { 
      result = x + y; 
    } 
    else if(calculationType.equals("Subtract")) 
    { 
      result = x - y; 
    } 
    ... 

} 

Answer 2

的JSF上下的辦法是：

1. 綁定您的<h:selectOneMenu>與財產託管的bean，讓我們說，int selectedOption。

2. 顯示給用戶的選項設置值（<f:selectItem>）。它可能是1,2,3和4（僅用於一個基本示例）

3. 從您的託管bean公開了一種方法calculate。此方法將在您的<h:commandButton>操作屬性中。該方法將使用selectedOption屬性來知道要使用的操作。

有了這個信息，則結果將是：

JSF代碼

<h:form> 
    <h:inputText value="#{calcBean.x}" /> 
    <h:inputText value="#{calcBean.y}" /> 
    <h:selectOneMenu value="#{calcBean.selectedOption}"> 
     <f:selectItem itemLabel="Add" itemValue="1" /> 
     <f:selectItem itemLabel="Subtract" itemValue="2" /> 
     <f:selectItem itemLabel="Multiply" itemValue="3" /> 
     <f:selectItem itemLabel="Divide" itemValue="4" /> 
    </h:selectOneMenu> 
    <h:commandButton value="Calculate" action="#{calcBean.calculate}" /> 
</h:form> 
Result: <h:outputText value="#{calcBean.result}" /> 

CalcBean代碼

public class CalcBean { 

    private int x; 
    private int y; 
    private int selectedOption; 
    private double result; 
    //constructor... 
    //getters and setters... 

    public String calculate() { 
     result = 0; 
     switch(selectedOption) { 
      case 1: 
       result = x + y; 
       break; 
      //write the other cases... 
     } 
     return null; 
    } 
} 

上面的代碼對應於JSF 1.2。如果您使用的是JSF 2.x，那麼您應該停止使用JSP並移至Facelets，如the JSF wiki中所述。恕我直言，最好學習JSF 2而不是JSF 1.x.