How to Set the background color for h:commandButton in backing bean

You’re making some conceptual mistakes.

  1. You’re confusing JSF with Swing.
  2. You’re trying to manipulate the view in the controller.

To learn what JSF is, start here. To learn what Swing is, start here. They are not the same. Stop thinking in Swing or searching for Swing solutions when developing with JSF.

As to the MVC aspect, the backing bean is the controller. It should only manipulate the model (bean’s properties), not the view (XHTML file). The view (XHTML file) should only access the model (bean’s properties) via the controller (the managed bean instance).

Below is the right way:

private boolean dateEqual;

public void someActionMethod() {
    dateEqual = dt.equals(date);

public boolean isDateEqual() {
    return dateEqual;
<h:commandButton ... style="background: #{bean.dateEqual ? 'yellow' : 'none'}" />

Alternatively, you can even get away without an additional property if you have getter methods for both dt and date properties:

<h:commandButton ... style="background: #{bean.dt eq ? 'yellow' : 'none'}" />

Note that using inline CSS via style attribute is a poor practice in HTML perspective. Best would be to create a CSS class representing the specific condition. E.g. “highlight” (or whatever specific term the particular conditon has).

.highlight {
    background: yellow;
<h:outputStylesheet name="style.css" />
<h:commandButton ... styleClass="#{bean.dateEqual ? 'highlight' : ''}" />

Leave a Comment