Использование CSS и setStyle

Question

У меня есть объект, где у меня есть css, стилизующий объект. В моей программе я хотел бы изменить определенные элементы в стиле, например, цвет фона. Проблема, с которой я столкнулся, заключалась в том, что при вызове setStyle (-fx-background-color: red) он переопределит все элементы стиля. Даже если я просто изменил цвет фона.

#header { 
-fx-background-color: #4d4d4d; 
-fx-border-color: #545454; 
-fx-border-width: 1px; 
-fx-border-style: solid; 
} 
#header:hover { 
-fx-background-color: #9ACD32; 
} 

Answer 1

Вы должны определить свои цвета в своем CSS, используя «искомые цвета».

Подробнее см. В JavaFX CSS reference.

Посмотрел вверх Цвет

С смотрели вверх цветы вы можете обратиться к любой другому цвету собственности, который установлен на текущем узле или любом из его родителей. Это очень мощная функция, так как она позволяет указать общую палитру цветов на сцене, а затем использовать ее вне приложения. Если вы хотите изменить один из этих цветов палитры, вы можете сделать это на любом уровне в дереве сцен, и это повлияет на этот узел и все его деления. Выбранные цвета не просматриваются до тех пор, пока они не будут применены, поэтому они будут жить и реагировать на любые изменения стиля, которые могут возникнуть, например, заменить цвет палитры во время выполнения с помощью свойства «style» на узле.

В следующем примере весь цвет фона всех кнопок использует искомый цвет «abc».

.root { abc: #f00 } 
.button { -fx-background-color: abc } 

Пример приложения

В примере приложения, код ключа является установка искомое значение цвета динамически в коде:

headerColorToggleGroup.selectedToggleProperty().addListener(new ChangeListener<Toggle>() { 
    @Override 
    public void changed(
     ObservableValue<? extends Toggle> observableValue, 
     Toggle oldToggle, 
     Toggle newToggle 
    ) { 
     RadioButton radio = (RadioButton) newToggle; 
     header.setStyle("header-base-color: " + radio.getText()); 
    } 
}); 

Вместе с определением header-base-color поиск идентификатор для цвета в поле ниже CSS:

заголовка-color.css

.root { 
    header-base-color: #4d4d4d; 
} 

#header { 
    -fx-background-color: header-base-color; 
    -fx-border-color: #545454; 
    -fx-border-width: 1px; 
    -fx-border-style: solid; 
} 

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

заголовка-color.fxml

<?xml version="1.0" encoding="UTF-8"?> 

<?scenebuilder-stylesheet header-color.css?> 

<?import javafx.geometry.Insets?> 
<?import javafx.scene.control.*?> 
<?import javafx.scene.layout.BorderPane?> 
<?import javafx.scene.layout.HBox?> 
<?import javafx.scene.layout.VBox?> 
<?import java.net.URL?> 

<BorderPane id="BorderPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="-1.0" prefWidth="-1.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="HeaderColorController"> 
    <top> 
    <HBox fx:id="header" prefHeight="-1.0" prefWidth="-1.0"> 
     <children> 
     <Label text="A really hard to read label" /> 
     </children> 
    </HBox> 
    </top> 
    <center> 
    <VBox prefHeight="-1.0" prefWidth="-1.0" spacing="10.0" style="-fx-background-color: azure;"> 
     <children> 
     <RadioButton mnemonicParsing="false" style="-fx-text-fill: forestgreen;" text="forestgreen"> 
      <toggleGroup> 
      <ToggleGroup fx:id="headerColorToggleGroup" /> 
      </toggleGroup> 
     </RadioButton> 
     <RadioButton mnemonicParsing="false" style="-fx-text-fill: firebrick;" text="firebrick" toggleGroup="$headerColorToggleGroup" /> 
     <RadioButton mnemonicParsing="false" selected="true" style="-fx-text-fill: #4d4d4d;" text="#4d4d4d" toggleGroup="$headerColorToggleGroup" /> 
     </children> 
     <padding> 
     <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" /> 
     </padding> 
    </VBox> 
    </center> 
    <stylesheets> 
    <URL value="@header-color.css" /> 
    </stylesheets> 
</BorderPane> 

HeaderColorApp.java

import javafx.application.Application; 
import javafx.fxml.FXMLLoader; 
import javafx.scene.Parent; 
import javafx.scene.Scene; 
import javafx.stage.Stage; 

public class HeaderColorApp extends Application { 
    @Override 
    public void start(Stage primaryStage) throws Exception{ 
     Parent root = FXMLLoader.load(getClass().getResource("header-color.fxml")); 
     primaryStage.setScene(new Scene(root)); 
     primaryStage.show(); 
    } 

    public static void main(String[] args) { launch(args); } 
} 

HeaderColorController.java

import java.net.URL; 
import java.util.ResourceBundle; 

import javafx.beans.value.*; 
import javafx.fxml.FXML; 
import javafx.scene.control.*; 
import javafx.scene.layout.HBox; 

public class HeaderColorController { 

    @FXML 
    private ResourceBundle resources; 

    @FXML 
    private URL location; 

    @FXML 
    private HBox header; 

    @FXML 
    private ToggleGroup headerColorToggleGroup; 

    @FXML 
    void initialize() { 
     assert header != null : "fx:id=\"header\" was not injected: check your FXML file 'header-color.fxml'."; 
     assert headerColorToggleGroup != null : "fx:id=\"headerColorToggleGroup\" was not injected: check your FXML file 'header-color.fxml'."; 

     headerColorToggleGroup.selectedToggleProperty().addListener(new ChangeListener<Toggle>() { 
      @Override 
      public void changed(ObservableValue<? extends Toggle> observableValue, Toggle oldToggle, Toggle newToggle) { 
       RadioButton radio = (RadioButton) newToggle; 
       header.setStyle("header-base-color: " + radio.getText()); 
      } 
     }); 
    }  
}