5 Replies Latest reply: Jan 4, 2013 2:27 AM by 963802 RSS

    CSS Image loading problem by dynamically loading from fxml file?

    963802
      h1. Introduction
      The application I am developing loads an FXML file from a Controller. The FXML uses CSS and images for buttons are set in the CSS.

      CSS directory structure
      <package>.fxml

      Images
      <package>.fxml.resources.<subdir>

      Example CSS Code
      .buttonImage {
          -fx-background-image: url("resources/subdir/image.png"); 
      }
      Example loading fxml from controller code
               URL location = getClass().getResource("/package/fxml/UI.fxml");
               FXMLLoader fxmlLoader = new FXMLLoader(location);
               fxmlLoader.setLocation(location);
               fxmlLoader.setBuilderFactory(new JavaFXBuilderFactory());
               Parent root = (Parent)fxmlLoader.load(location.openStream());
               Controller = (Controller) fxmlLoader.getController();
               newPane.getChildren().add(root);
      h1. Problem
      The fxml file does not load and causes the following error:
      javafx.fxml.LoadException: Page language not specified.
      Note, the fxml file loaded correctly before images were added.

      Any ideas of what might be going wrong?

      h1. Attempted
      I have attempted the following: tried changing the url of the image as an absolute path.
        • 1. Re: CSS Image loading problem by dynamically loading from fxml file?
          866711
          Your problem is not CSS but that your FXML can not be loaded. Show us you FXML File.
          • 2. Re: CSS Image loading problem by dynamically loading from fxml file?
            963802
            No Problem: Note, this is the actual FXML, my previous examples were simplifications of package names and class names in order to directly illustrate the problem. Note, I am using SceneBuilder to develop the FXML file.
            <?xml version="1.0" encoding="UTF-8"?>
            
            <?import java.lang.*?>
            <?import java.net.*?>
            <?import java.util.*?>
            <?import javafx.collections.*?>
            <?import javafx.scene.*?>
            <?import javafx.scene.control.*?>
            <?import javafx.scene.layout.*?>
            <?import javafx.scene.text.*?>
            
            <AnchorPane id="AnchorPane" prefHeight="396.0000999999975" prefWidth="350.0" styleClass="mainFxmlClass" xmlns:fx="http://javafx.com/fxml" fx:controller="com.monkygames.kbmaster.controller.ProfileUIController">
              <children>
                <Label layoutX="14.0" layoutY="14.0" text="Profiles">
                  <font>
                    <Font size="18.0" />
                  </font>
                </Label>
                <GridPane layoutX="15.0" layoutY="44.0" prefHeight="99.0" prefWidth="335.0">
                  <children>
                    <Label text="Type: " GridPane.columnIndex="0" GridPane.rowIndex="0" />
                    <ComboBox fx:id="typeCB" prefWidth="249.0" GridPane.columnIndex="1" GridPane.rowIndex="0">
                      <items>
                        <FXCollections fx:factory="observableArrayList">
                          <String fx:value="Item 1" />
                          <String fx:value="Item 2" />
                          <String fx:value="Item 3" />
                        </FXCollections>
                      </items>
                    </ComboBox>
                    <Label text="Program: " GridPane.columnIndex="0" GridPane.rowIndex="1" />
                    <ComboBox fx:id="programCB" prefWidth="249.0" GridPane.columnIndex="1" GridPane.rowIndex="1">
                      <items>
                        <FXCollections fx:factory="observableArrayList">
                          <String fx:value="Item 1" />
                          <String fx:value="Item 2" />
                          <String fx:value="Item 3" />
                        </FXCollections>
                      </items>
                    </ComboBox>
                    <Label text="Profile: " GridPane.columnIndex="0" GridPane.rowIndex="2" />
                    <ComboBox prefWidth="249.0" GridPane.columnIndex="1" GridPane.rowIndex="2">
                      <items>
                        <FXCollections fx:factory="observableArrayList">
                          <String fx:value="Item 1" />
                          <String fx:value="Item 2" />
                          <String fx:value="Item 3" />
                        </FXCollections>
                      </items>
                    </ComboBox>
                  </children>
                  <columnConstraints>
                    <ColumnConstraints fillWidth="false" halignment="RIGHT" hgrow="NEVER" maxWidth="-Infinity" minWidth="10.0" prefWidth="80.0" />
                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                  </columnConstraints>
                  <rowConstraints>
                    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                  </rowConstraints>
                </GridPane>
                <HBox layoutX="14.0" layoutY="150.0" prefHeight="159.0" prefWidth="335.0">
                  <children>
                    <Label text="Description: " />
                    <TextArea prefHeight="172.0" prefWidth="247.0" wrapText="true" />
                  </children>
                </HBox>
                <HBox alignment="CENTER" layoutX="11.0" layoutY="334.0" prefHeight="48.0" prefWidth="329.0">
                  <children>
                    <Button fx:id="newProfileB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="newProfile" text="New Profile" />
                    <Button id="newProfileB" fx:id="cloneProfileB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="cloneProfile" text="Clone Profile" />
                    <Button id="newProfileB" fx:id="importProfileB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="importProfile" text="Import Profile" />
                    <Button id="newProfileB" fx:id="exportProfileB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="exportProfile" text="Export Profile" />
                    <Button id="newProfileB" fx:id="printPDFB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="pdfProfile" text="Print to PDF" />
                    <Button id="newProfileB" fx:id="deleteProfileB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="deleteProfile" text="Delete Profile" />
                  </children>
                </HBox>
              </children>
              <stylesheets>
                <URL value="@master.css" />
                <URL value="@profile.css" />
              </stylesheets>
            </AnchorPane>
            Edited by: 960799 on Jan 4, 2013 8:58 PM

            Edited by: 960799 on Jan 4, 2013 8:59 PM
            • 4. Re: CSS Image loading problem by dynamically loading from fxml file?
              866711
              The problem are your onAction handlers. If you point to a Java controller they need to start with #. e.g. #profileEventFired
              • 5. Re: CSS Image loading problem by dynamically loading from fxml file?
                963802
                That fixed the problem! Thank you very much!