Glassfish complaining about JSF component IDs

I am very new to JSF (v2.0) and I am attempting to learn it at places like netbeans.org and coreservlets.com. I am working on a very simple "add/subtract/multiply/divide" Java webapp and I have 开发者_运维知识库run into a problem. When I first started out, the application was enter two numbers and hit a '+' key and they would be automatically added together. Now that I have added more complexity I am having trouble getting the operation to the managed bean. This is what I had when it was just "add":

<h:inputText styleClass="display" id="number01" size="4" maxlength="3" value="#{Calculator.number01}" />  
<h:inputText styleClass="display" id="number02" size="4" maxlength="3" value="#{Calculator.number02}" />  
<h:commandButton id="add" action="answer" value="+" />  

For the "answer" page, I display the answer like this:

<h:outputText value="#{Calculator.answer}" />  

I had the proper getters and setters in the Calculator.java managed bean and the operation worked perfectly.

Now I have added the other three operations and I am having trouble visualizing how to get the operation parameter to the bean so that I can switch around it. I tried this:

<h:commandButton id="operation" action="answer" value="+" />       
<h:commandButton id="operation" action="answer" value="-" />  
<h:commandButton id="operation" action="answer" value="*" />  
<h:commandButton id="operation" action="answer" value="/" />  

However, Glassfish complained that I have already used "operation" once and I am trying to use it four times here.

Any adivce/tips on how to get multiple operations to the managed bean so that it can preform the desired operation?

Thank you for taking the time to read.

The component id should indeed be unique. This is implicitly required by the HTML specification. You know, all JSF does is just generating the appropriate HTML/CSS/JS code. Give them all a different id or just leave it away, it has no additional value in this specific situation (unless you'd like to hook some CSS/JS on it).

To achieve your functional requirement, you may find f:setPropertyActionListener useful.

<h:commandButton action="answer" value="+">
    <f:setPropertyActionListener target="#{calculator.operation}" value="+" />
</h:commandButton>      
<h:commandButton action="answer" value="-">  
    <f:setPropertyActionListener target="#{calculator.operation}" value="-" />
</h:commandButton>      
<h:commandButton action="answer" value="*">  
    <f:setPropertyActionListener target="#{calculator.operation}" value="*" />
</h:commandButton>      
<h:commandButton action="answer" value="/"> 
    <f:setPropertyActionListener target="#{calculator.operation}" value="/" />
</h:commandButton>      

And have a property operation in your calculator managed bean:

private String operation; // +setter.

You can access it in the getAnswer() method and handle accordingly.

Alternatively, let the buttons each point to a different bean action but which returns all "answer":

<h:commandButton action="#{calculator.add}" value="+" />      
<h:commandButton action="#{calculator.substract}" value="-" />      
<h:commandButton action="#{calculator.multiply}" value="*" />      
<h:commandButton action="#{calculator.divide}" value="/" />      

with the following methods in your calculator managed bean:

public String add() {
    answer = number1 + number2;
    return "answer";
}

public String substract() {
    answer = number1 - number2;
    return "answer";
}

// etc...

and just let getAnswer() return answer and do nothing else there. That's a more clean separation of responsibilities.