jsf 2 - How can I create toggle buttons in JSF?

Question

How can I create toggle buttons in JSF?

Basically, I need two buttons "in" and "out". They essentially call the same managed bean, but as a result of every click the one should be disabled and the other should be enabled and vice versa. How can this be done? Should I use ajax functionality?

Answer 1

Just have a boolean property which you inverse in action method and use exactly that property in the disabled attribute of the both buttons, inversed.

Kickoff example:

@ManagedBean
@ViewScoped
public class Bean {

    private boolean enabled;

    public void toggle() {
        enabled = !enabled;
    }

    public boolean isEnabled() {
        return enabled;
    }

}

With

<h:form>
    <h:commandButton value="Enable" action="#{bean.toggle}" disabled="#{bean.enabled}" />
    <h:commandButton value="Disable" action="#{bean.toggle}" disabled="#{not bean.enabled}" />
</h:form>

Ajax is technically not necessary. Feel free to add <f:ajax> to both buttons to improve the user experience though.

A @ViewScoped bean is in turn very necessary. A @RequestScoped one would be trashed on end of request and recreated in next request, hereby causing the boolean to be reinitialized to default and thus seemingly fail to work after second click, because JSF will as part of safeguard against tampered/hacked requests also check the disabled (and rendered) attribute before actually invoking the action.

See also:

• How to choose the right bean scope?
• commandButton/commandLink/ajax action/listener method not invoked or input value not updated (point 5)