javafx 2 and css pseudo-classes: setting hover attributes in setStyle method

Question

I have a simple Scene with this code:

scene.getStylesheets().add(\"packagename/testcss.css\");

And my testcss.css is:

.button {         


        

Answer 1

As you note in your question, as of JavaFX 2.2, the css pseudoclasses aren't exposed as part of the public API you can use for style manipulation inside Java code.

If you want to change style attributes from Java code without using a stylesheet, you need to set the styles based on events or changelisteners. There are a couple of options in the sample below.

import javafx.application.Application;
import javafx.beans.binding.*;
import javafx.beans.property.SimpleStringProperty;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.*;
import javafx.scene.control.Button;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.*;
import javafx.stage.Stage;

/** Changing button styles on hover without a css stylesheet. */
public class ButtonBackgroundChanger extends Application {
  private static final String STANDARD_BUTTON_STYLE = "-fx-background-color: #DDFFA4;";
  private static final String HOVERED_BUTTON_STYLE  = "-fx-background-color: #9ACD32;";

  public static void main(String[] args) throws Exception { launch(args); }
  @Override public void start(final Stage stage) throws Exception {
    Button configure = new Button("Configure");
    changeBackgroundOnHoverUsingBinding(configure);
    Button update = new Button("Update");
    changeBackgroundOnHoverUsingEvents(update);

    VBox layout = new VBox(10);
    layout.setAlignment(Pos.CENTER);
    layout.setStyle("-fx-padding: 10;");
    layout.getChildren().addAll(configure, update);
    stage.setScene(new Scene(layout));
    stage.show();
  }

  private void changeBackgroundOnHoverUsingBinding(Node node) {
    node.styleProperty().bind(
      Bindings
        .when(node.hoverProperty())
          .then(
            new SimpleStringProperty(HOVERED_BUTTON_STYLE)
          )
          .otherwise(
            new SimpleStringProperty(STANDARD_BUTTON_STYLE)
          )
    );
  }

  public void changeBackgroundOnHoverUsingEvents(final Node node) {
    node.setStyle(STANDARD_BUTTON_STYLE);
    node.setOnMouseEntered(new EventHandler<MouseEvent>() {
      @Override public void handle(MouseEvent mouseEvent) {
        node.setStyle(HOVERED_BUTTON_STYLE);
      }
    });
    node.setOnMouseExited(new EventHandler<MouseEvent>() {
      @Override public void handle(MouseEvent mouseEvent) {
        node.setStyle(STANDARD_BUTTON_STYLE);
      }
    });
  }    
}

I'd only really do it in code rather than a stylesheet if colors needed to be really dynamic making use of stylesheets with predefined colors and styles problematic, or if there was some other aversion to using css stylesheets.

In JavaFX 8 there is be a public API which allows you (if you want to) to manipulate Region background colors without use of CSS.

Sample program output (with the Update button hovered):

Answer 2

You can optionally set them css to be changed/updated programmatically when different events are triggered.. I added the following functions to the fxml files events against my checkin button.

 @FXML
    private void onHover(MouseEvent event)
    {
        if(btnCheckin.getText().contentEquals("Check Out"))
        {
            btnCheckin.setStyle("-fx-font-size: 20; -fx-font-weight: bold; -fx-padding: -5 -5 -5 -5;   \n" +
                            "    -fx-border-color: #e2e2e2;\n" +
                            "    -fx-border-width: 2;\n" +
                            "    -fx-border-radius: 5;\n" +
                            "    -fx-background-radius: 5;\n" +
                            "    -fx-background-color: #3a3a3a;\n" +
                            "    -fx-font-family: \"Lato Bold\", Helvetica, Arial, sans-serif;\n" +
                            "    -fx-text-fill: white;\n" +
                            "    -fx-background-insets: 0 0 0 0, 0, 1, 2;");
        }
    }

    @FXML
    private void onExit(MouseEvent event)
    {
        if(btnCheckin.getText().contentEquals("Check Out"))
        {
            btnCheckin.setStyle("-fx-font-size: 20; -fx-font-weight: bold; -fx-padding: -5 -5 -5 -5;   \n" +
                            "    -fx-border-width: 2;\n" +
                            "    -fx-border-radius: 5;\n" +
                            "    -fx-background-radius: 5;\n" +
                            "    -fx-font-family: \"Lato Bold\", Helvetica, Arial, sans-serif;\n" +
                            "    -fx-text-fill: white;\n" +
                            "    -fx-background-insets: 0 0 0 0, 0, 1, 2;\n" +
                            "    -fx-background-color: #EE6559;\n" +
                            "    -fx-border-color: #EE6559;");
        }
    }

    @FXML
    private void onPress(MouseEvent event)
    {
        if(btnCheckin.getText().contentEquals("Check Out"))
        {
            btnCheckin.setStyle("-fx-font-size: 20; -fx-font-weight: bold; -fx-padding: -5 -5 -5 -5;   \n" +
                            "    -fx-border-color: #e2e2e2;\n" +
                            "    -fx-border-width: 2;\n" +
                            "    -fx-border-radius: 5;\n" +
                            "    -fx-background-radius: 5;\n" +
                            "    -fx-background-color: white;\n" +
                            "    -fx-font-family: \"Lato Bold\", Helvetica, Arial, sans-serif;\n" +
                            "    -fx-text-fill: #1d1d1d;\n" +
                            "    -fx-background-insets: 0 0 0 0, 0, 1, 2;");
        }
    }

    @FXML
    private void onRelease(MouseEvent event)
    {
        if(btnCheckin.getText().contentEquals("Check Out"))
        {
            onHover(event);
        }
    }