17

I have a simple Scene with this code:

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

And my testcss.css is:

.button { 
    -fx-background-color: #DDFFA4;
}

.button:hover {
    -fx-background-color: #9ACD32;
}

What i achieve is the nice effect that is aka hover when in web applications.

enter image description here ... enter image description here

QUESTION
How can i achieve the same effect but without a separate css file, just via the setStyle method of my Button?
The problem is that setStyle accepts just the style definition and leave out the selector.

button.setStyle("-fx-background-color: #DDFFA4;");

The selector, in my hover case is the pseudo-class: 

.button:hover

but where am I supposed to set it?

Moreover, the javadoc is explicit in excluding the selector from the setStyle method argument:

Note that, like the HTML style attribute, this variable contains style properties and values and not the selector portion of a style rule.

AgostinoX
  • 7,477
  • 20
  • 77
  • 137

2 Answers2

31

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):

sample program output

jewelsea
  • 150,031
  • 14
  • 366
  • 406
  • +1 for the completeness of the answer with both the innovative (binding based) and the traditional (event based) solution. Interesting also the fact of group into changeBackgroundOnHoverUsingEvents both event setting and initialization to the standard style, this way we have a single point of configuration for the widget, reducing the risk of incoherent modifications, and highlighting that event-based solution requires the additional step of initialization. Such method may also be seen as an initializator, with some name like "initButtonStyle". – AgostinoX Oct 31 '12 at 10:26
  • Hello Jewelea , you mentioned that JavaFX 8 allows some modifications . Can we have a link or an example :) .Cause the question is really old and needs a little bit of update in this part. – GOXR3PLUS Dec 27 '16 at 10:06
  • Updated answer to link to JavaFX 8 background API. – jewelsea Dec 27 '16 at 18:35
1

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);
        }
    }
Howard J
  • 421
  • 3
  • 7