как управлять файлом CSS из контроллера Java в JavaFX - PullRequest
Новая
       5

как управлять файлом CSS из контроллера Java в JavaFX

0 голосов
/ 29 ноября 2018

Я создал приложение с одной темой, и я использую для этого файл CSS, когда я закончил, я пытаюсь дать Пользователю выбор цвета, который он предпочитает, и файл CSS включен в файлы FXML для каждого.Этап 

 *{
    -fx-primary :#2A2E37 ;
    -fx-secondary : #FFFF8D;
    -fx-primarytext : #B2B2B2;
    -fx-blue: #1976D2;
    -fx-red: #FF0000;
    -fx-green:#2E7D32; 

}
.root{ 
    -fx-background-color: -fx-primary;
}

Я хочу какой-нибудь метод, который, например, изменит значение моего -fx-primary, и цвет будет выбран из палитры (я могу это сделать), а для fxml я использую простой метод 

<AnchorPane fx:id="rootAnchoreFW" prefHeight="800.0" prefWidth="767.0" stylesheets="@../Style/myTheme.css" >

Ответы [ 3 ]

0 голосов
/ 29 ноября 2018

Вы можете сделать несколько тем для этого цвета.Например, файл с именем themeRed.css, themeBlue.css 

   .root{
    -fx-font-size: 14pt;
    -fx-font-family: "Tahoma";
    -fx-base: #DFB951;
    -fx-background: #A78732;
    -fx-focus-color: #B6A678;
}

И у вас есть кнопка, которая меняет цвета или темы.

Вы можете установить свои темы в своем приложении следующим образом:

public String themeRed = getClass (). GetResource ("themeRed.css"). ToExternalForm ();public String themeBlue = getClass (). getResource ("themeBlue.css"). toExternalForm ();

и в действии нажатия кнопки или в методе, инициируемом при щелчке, вы можете использовать: 

btn.setOnAction(new EventHandler<ActionEvent>() {
    @Override
    public void handle(ActionEvent event) {
        scene.getStylesheets().remove(themeRed);
        scene.getStylesheets().add(themeBlue);
        System.out.println("Stylesheets: " + scene.getStylesheets());
        //You can see the stylesheet being used
    }
});

Вы можете поиграть с этим, чтобы изменить темы.

Другой вариант, если вы просто измените, скажем, одну строку CSS, например, фон в одной кнопке, вы можете использовать setStyleметод в каждом элементе, который вы хотите.

Например: 

btn.setStyle("-fx-background: #A78732;");
0 голосов
/ 29 ноября 2018

вы можете создать «Редактор CSS»

у вас будет два css:

myTheme.css : 

@import url("main.css");

*{
    -fx-primary :#2A2E37 ;
    -fx-secondary : #FFFF8D;
    -fx-primarytext : #B2B2B2;
    -fx-blue: #1976D2;
    -fx-red: #FF0000;
    -fx-green:#2E7D32; 
}

main.css : 

.root{ 
    -fx-background-color: -fx-primary;
}

у вас будет тот же код для вашего fxml: 

<AnchorPane fx:id="rootAnchoreFW" prefHeight="800.0" prefWidth="767.0"
            stylesheets="@../Style/myTheme.css" >

для редактирования css у вас есть два варианта:

  • чтение файла CSS, экспорт данных, обновление его (удаление старого файла CSS)и создайте новый файл)

  • прочитайте файл конфигурации (txt, JSON, XLM ...), чтобы сохранить данные вашей конфигурации и воссоздать scc с ним.

Это будет частью ответа, я думаю

0 голосов
/ 29 ноября 2018

Если, например, вы используете ColorPicker colorPicker: 

colorPicker.valueProperty().addListener((obs, oldValue, newValue) -> {
            yourAnchorPane.setStyle("-fx-primary : " + newValue);
});

Так что в основном вам нужно использовать функцию setStyle, добавьте атрибут, который вы хотите изменить, и его значение, как в CSS.Или (если вы не хотите помещать атрибут), вы можете просто сделать что-то вроде этого, например, чтобы изменить цвет метки:

label.setTextFill(colorPicker.getValue())
...