Glassfish complaining about JSF component IDs

Question

Hello All

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.

Answer 1

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.