Question

I have a bean class that represents a calculator. This class exposes 4 methods: add, subtract, multiply, and divide.

For the front end I am writing a JSP page. This page contains two text input boxes (one for x, and one for y). I have a pulldown menu where the user selects the operation and then one Calculate command button that performs the selected operation.

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

The issue I am running into is I don’t know how to change the action of the command button depending on the user selection.

I could do this with four different command buttons but that is not an elegant solution:

<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

You can do this by binding the user’s selection to a property in the backing bean and using that selected value as a condition in your action method to do the proper calculation.

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

In your single unique action method, according to the selected calculation type you can do operation on the given x and y values.

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

}