Как добавить таблицу стилей CSS в FXML

Я хотел бы связать файл css с моим приложением. В моем файле fxml я использую это:

  <stylesheets>
    <URL value="@../stylesheet1.css" />
  </stylesheets>

... и я могу увидеть предварительный просмотр в стиле, когда я открываю файл fxml в построителе сцен. Но когда я пытаюсь запустить приложение, я получаю сообщение об ошибке:

java.net.MalformedURLException: нет протокола: ../stylesheet1.css

Итак, я проверил это следующим образом:

<stylesheets>
    <String fx:value="stylesheet1.css" />
</stylesheets>

а теперь наоборот - приложение запускается и применяет css, но превью в scenebuilder не вижу. Сообщение об ошибке:

"Файл stylesheet1.css не существует. Ресурс stylesheet1.css не найден."

Итак, как мне правильно прикрепить файл css?


Ну, хотя на мой вопрос не ответили, почему именно это не работает вышеописанным способом, я нашел решение, которое работает для меня. В моем FXML у меня есть только строка

<?scenebuilder-stylesheet ../stylesheet1.css?>

поэтому Scenebuilder работает с этим css. И в моем основном классе я программно устанавливаю таблицу стилей:

Scene scene = new Scene(root);
String css = this.getClass().getResource("../stylesheet1.css").toExternalForm(); 
scene.getStylesheets().add(css);

person cody    schedule 01.06.2014    source источник
comment
Может быть, вы указали разные места для файла CSS?   -  person display-name-is-missing    schedule 01.06.2014
comment
Спасибо за ваш комментарий. Файл css находится в папке src, а файл fxml — в пакете src/main. Я пробовал разные строки, но это не сработало. Но я нашел какой-то обходной путь. Я обновляю свой пост.   -  person cody    schedule 01.06.2014
comment
Для меня сработало использование абсолютного URL. Например: ‹URL value=@/fxmlexample/Login.bss /›   -  person Petr    schedule 15.04.2016


Ответы (4)


То, что я нашел полезным и рабочим решением для включения файла css в fxml, - это добавить stylesheets="@app/cssfilename.css" к родительскому узлу файла fxml так же, как для панели стека.

<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="app.fxml.SettingsController" stylesheets="@app/cssfilepath.css">

......
.....
.....
</StackPane>
person Mr.AshishGK    schedule 15.02.2015

Вот решение, которое работает в среде разработки, в Scene Builder и в упакованном JAR.

Структура папки:

введите здесь описание изображения

Основная.java:

package application;

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


public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {

            FXMLLoader loader = new FXMLLoader(Main.class.getResource("view/RootLayout.fxml"));
            AnchorPane rootLayout = (AnchorPane) loader.load();

            Scene scene = new Scene(rootLayout, 400, 400);
            scene.getStylesheets().add(getClass().getResource("css/application.css").toExternalForm());

            primaryStage.setScene(scene);
            primaryStage.show();

        } catch(Exception e) {
            e.printStackTrace();
        }
    }

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

RootLayout.fxml:

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

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.view.RootLayoutController">
   <children>
      <Pane layoutX="0.0" layoutY="0.0" prefHeight="200.0" prefWidth="200.0">
         <children>
            <Button fx:id="sunButton" layoutX="74.0" layoutY="88.0" mnemonicParsing="false" onAction="#handleSunButtonClick" styleClass="sun-button" stylesheets="@../css/toolbar.css" text="Button" />
         </children>
      </Pane>
   </children>
</AnchorPane>

RootLayoutController.java:

package application.view;

import javafx.fxml.FXML;
import javafx.scene.control.Button;

public class RootLayoutController {


    @FXML
    Button sunButton;

    @FXML
    public void handleSunButtonClick() {
        System.out.println( "Button clicked");
    }
}

панель инструментов.css:

.sun-button {
  -fx-graphic: url('./icons/sun.png');
}

приложение.css:

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

солнце.png:

введите здесь описание изображения

Это работает как в среде разработки, так и при упаковке JAR (выберите «Извлечь необходимые библиотеки в сгенерированный JAR» в Eclipse).

Скриншот (просто кнопка со значком, загруженным через css)

введите здесь описание изображения

person Roland    schedule 24.01.2015
comment
scene.getStylesheets().add(getClass().getResource(/css/application.css).toExternalForm()); - person Suroj; 06.01.2017

Если вы не хотите делать это программно, вы можете сделать это, разделив код и ресурсы. У меня есть такая структура проекта Maven, но это не обязательно.

src/main/java/${packageName}
    MainWindow.fxml
src/main/resources/${packageName}
    stylesheet1.css

Теперь вы можете использовать таблицу стилей в .fxml

stylesheets="@stylesheet1.css"

или с помощью тега таблицы стилей, как вы это сделали.

В SceneBuilder может быть предупреждение, но оно работает.

person DaRich    schedule 23.01.2015

Если вы используете SceneBuilder в качестве исходного вопросника, просто добавьте таблицу стилей css в SceneBuilder. В разделе «Предварительный просмотр» выберите элемент, относящийся к таблицам стилей, и в подменю появится элемент для добавления таблицы стилей css. Однако будьте осторожны, так как стиль будет отображаться в элементах управления в рабочей области и предварительном просмотре SceneBuilder, но не будет отображаться при запуске приложения. Вам по-прежнему необходимо выбрать каждый элемент управления и выбрать таблицу стилей в свойствах этого элемента управления, прежде чем элемент управления отобразит стиль при запуске приложения.

Я бы также посоветовал, если Натану Тагги нечего добавить, кроме своего довольно детского комментария, ему следует вернуться к своему обычному режиму аутоэротизма и видеоигр.

person Hal    schedule 05.08.2017