16

私はこのコードで簡単なシーンを持っています：

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

そして私のtestcss.cssは：

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

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

私が達成しているのは、Webアプリケーションでホバーと呼ばれる素晴らしい効果です。

ここに画像の説明を入力してください ..。 ここに画像の説明を入力してください

質問
ボタンのsetStyleメソッドを使用して、別のcssファイルなしで同じ効果を実現するにはどうすればよいですか？
問題は、setStyleがスタイル定義のみを受け入れ、セレクターを除外することです。

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

私のホバーの場合、セレクターは疑似クラスです。

.button:hover

しかし、どこに設定すればよいのでしょうか。

さらに、javadocは、setStyleメソッドの引数からセレクターを除外することを明示しています。

HTMLスタイル属性と同様に、この変数にはスタイルのプロパティと値が含まれ、スタイルルールのセレクター部分は含まれないことに注意してください。

4

2 に答える 2

30

質問でお気づきのように、JavaFX 2.2の時点では、css疑似クラスはJavaコード内のスタイル操作に使用できるパブリックAPIの一部として公開されていません。

スタイルシートを使用せずに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);
      }
    });
  }    
}

事前定義された色とスタイルに問題のあるスタイルシートを使用して色を本当に動的にする必要がある場合、またはcssスタイルシートを使用することに他の嫌悪感がある場合にのみ、スタイルシートではなくコードで実際に実行します。

JavaFX 8には、CSSを使用せずにリージョンの背景色を操作できるパブリックAPIがあります（必要な場合）。

サンプルプログラム出力（[更新]ボタンをホバーした状態）：

サンプルプログラム出力

于 2012-10-25T19:53:54.347 に答える
1

オプションで、さまざまなイベントがトリガーされたときにプログラムで変更/更新されるように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);
        }
    }
于 2018-12-28T18:10:14.210 に答える