javafx 2 和 css 伪类：在 setStyle 方法中设置悬停属性

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

提问by AgostinoX

I have a simple Scene with this code:

我有一个带有此代码的简单场景：

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

And my testcss.css is:

我的 testcss.css 是：

.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.

我实现的是很好的效果，即在 Web 应用程序中悬停。

...

...

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.

问题
我如何在没有单独的 css 文件的情况下，仅通过我的 Button 的 setStyle 方法实现相同的效果？
问题是 setStyle 只接受样式定义而忽略了选择器。

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:

此外，javadoc 明确地从 setStyle 方法参数中排除了选择器：

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

请注意，与 HTML 样式属性一样，此变量包含样式属性和值，而不是样式规则的选择器部分。

回答by jewelsea

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.

正如您在问题中指出的那样，从 JavaFX 2.2 开始，css 伪类不会作为公共 API 的一部分公开，您可以在 Java 代码中用于样式操作。

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.

如果要在不使用样式表的情况下从 Java 代码更改样式属性，则需要根据事件或更改侦听器设置样式。下面的示例中有几个选项。

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.

如果颜色需要真正动态地使用带有预定义颜色和样式的样式表有问题，或者如果有其他一些不喜欢使用 css 样式表的情况，我只会在代码中而不是在样式表中真正做到这一点。

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.

在 JavaFX 8 中有一个公共 API，它允许您（如果您愿意）在不使用 CSS 的情况下操作 Region 背景颜色。

Sample program output (with the Update button hovered):

示例程序输出（悬停更新按钮）：

回答by Howard J

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.

您可以选择将它们设置为在触发不同事件时以编程方式更改/更新的 css.. 我将以下函数添加到我的签入按钮的 fxml 文件事件中。

 @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);
        }
    }