将CSS应用于FXML中的堆栈图

时间：2018-10-10 14:48:00

标签： java css javafx fxml linechart

我正在尝试使用类似于this example的FXML实现一组堆积图。我经验不足，无法找到在FXML Controller中设置CSS的完整示例。自己尝试修改代码会导致java.lang.NullPointerException异常，“ loadStylesheetUnPrivileged”消息或两者同时发生，并且代码无法运行，或者在没有对CSS进行任何更改的情况下运行。 SceneBuilder可以显示透明的预览，但是在运行程序时不起作用。

FXML：

<AnchorPane fx:id="graphpane" 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="application.Graph1Controller">
<children>
  <StackPane fx:id="stackpane" prefHeight="150.0" prefWidth="200.0" AnchorPane.bottomAnchor="10.0" AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="10.0">
     <children>
        <LineChart fx:id="M1chart" legendVisible="false" prefHeight="388.0" prefWidth="573.0" style=".chart-plot-background{-fx-background-color: transparent;} .default-color0.chart-series-line{-fx-stroke: #006564;}" stylesheets="@..css/M1chart.css" title="Recent Lap Times">
          <xAxis>
            <NumberAxis fx:id="M1xAxis" forceZeroInRange="false" minorTickVisible="false" side="BOTTOM" tickLabelsVisible="false" tickMarkVisible="false" />
          </xAxis>
          <yAxis>
            <NumberAxis fx:id="M1yAxis" autoRanging="false" label="Laptime (s)" side="LEFT" upperBound="240.0" />
          </yAxis>
        </LineChart>
        <LineChart fx:id="M2chart" legendVisible="false" prefHeight="388.0" prefWidth="573.0" style=".chart-plot-background{-fx-background-color: transparent;} .default-color0.chart-series-line{-fx-stroke: #FFCE44;}" stylesheets="@..css/M2chart.css" title="Recent Lap Times">
           <xAxis>
              <NumberAxis fx:id="M2xAxis" forceZeroInRange="false" minorTickVisible="false" side="BOTTOM" tickLabelsVisible="false" tickMarkVisible="false" />
           </xAxis>
           <yAxis>
              <NumberAxis fx:id="M2yAxis" autoRanging="false" label="Laptime (s)" side="LEFT" upperBound="240.0" />
           </yAxis>
        </LineChart>
        <LineChart fx:id="L1chart" legendVisible="false" prefHeight="388.0" prefWidth="573.0" style=".chart-plot-background{-fx-background-color: transparent;} .default-color0.chart-series-line{-fx-stroke: #832C40;}" stylesheets="@..css/L1chart.css" title="Recent Lap Times">
           <xAxis>
              <NumberAxis fx:id="L1xAxis" forceZeroInRange="false" minorTickVisible="false" side="BOTTOM" tickLabelsVisible="false" tickMarkVisible="false" />
           </xAxis>
           <yAxis>
              <NumberAxis fx:id="L1yAxis" autoRanging="false" label="Laptime (s)" side="LEFT" upperBound="240.0" />
           </yAxis>
        </LineChart>
     </children>
  </StackPane>
</children>   
</AnchorPane>

我要加载3个CSS工作表，每个工作表都位于同一文件夹（css）中，该文件夹与Java源文件位于同一目录中，并且每个文件的结构均与此类似：

CSS：

.chart-plot-background{
-fx-background-color: transparent;
}

.default-color0.chart-series-line{
-fx-stroke: #832C40;
}

在主要课程中，我尝试遵循Roland's answer in this thread，但似乎不起作用。

主要：

public void start(Stage primaryStage) throws IOException {

//First FXML Controller code omitted

//Second FXML Controller code starts here
Stage stage2 = new Stage();
FXMLLoader loader2 = new FXMLLoader();
String fxmlDocPath2 = "(filepath)\\Graph1.fxml"; //actual filepath replaced with placeholder for this post
FileInputStream fxmlStream2 = new FileInputStream(fxmlDocPath2);
AnchorPane root2 = (AnchorPane) loader2.load(fxmlStream2);
Scene scene2 = new Scene(root2);
scene2.getStylesheets().add(getClass().getResource("css/M1chart.css").toExternalForm());
scene2.getStylesheets().add(getClass().getResource("css/M2chart.css").toExternalForm());
scene2.getStylesheets().add(getClass().getResource("css/L1chart.css").toExternalForm());
stage2.setScene(scene2);
stage2.setTitle("TEST");
stage2.setX(primaryStage.getX() + 550);
stage2.setY(primaryStage.getY());
stage2.show();
//Second FXML Controller code ends
}

运行此代码会给我以下错误：

null/..css/M1chart.css
null/..css/M2chart.css
null/..css/L1chart.css
Oct 10, 2018 10:45:22 PM com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged
WARNING: Resource "..css/M1chart.css" not found.
Oct 10, 2018 10:45:22 PM com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged
WARNING: Resource "..css/M2chart.css" not found.
Oct 10, 2018 10:45:22 PM com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged
WARNING: Resource "..css/L1chart.css" not found.
Exception in Application start method
java.lang.reflect.InvocationTargetException
    at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
    at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
    at java.base/java.lang.reflect.Method.invoke(Unknown Source)
    at javafx.graphics/com.sun.javafx.application.LauncherImpl.launchApplicationWithArgs(Unknown Source)
    at javafx.graphics/com.sun.javafx.application.LauncherImpl.launchApplication(Unknown Source)
    at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
    at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
    at java.base/java.lang.reflect.Method.invoke(Unknown Source)
    at java.base/sun.launcher.LauncherHelper$FXHelper.main(Unknown Source)
Caused by: java.lang.RuntimeException: Exception in Application start method
    at javafx.graphics/com.sun.javafx.application.LauncherImpl.launchApplication1(Unknown Source)
    at javafx.graphics/com.sun.javafx.application.LauncherImpl.lambda$launchApplication$2(Unknown Source)
    at java.base/java.lang.Thread.run(Unknown Source)
Caused by: java.lang.NullPointerException
    at application.Core.start(Core.java:71)
    at javafx.graphics/com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$9(Unknown Source)
    at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runAndWait$11(Unknown Source)
    at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runLater$9(Unknown Source)
    at java.base/java.security.AccessController.doPrivileged(Native Method)
    at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runLater$10(Unknown Source)
    at javafx.graphics/com.sun.glass.ui.InvokeLaterDispatcher$Future.run(Unknown Source)
    at javafx.graphics/com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
    at javafx.graphics/com.sun.glass.ui.win.WinApplication.lambda$runLoop$3(Unknown Source)
    ... 1 more
Exception running application application.Core

我不确定我错过了什么导致css路径上出现null并导致代码失败，有人可以帮忙吗？

1 个答案:

答案 0 :(得分：0)

  

我要加载3个CSS工作表，每个工作表都位于同一文件夹（css）中，该文件夹与Java源文件位于同一目录中

您应该将css / fxml文件移动到一个单独的资源文件夹中-如果某些构建工具与资源文件位于同一文件夹中，则甚至不会将您的资源复制到输出目录中。

让我们说您的项目结构是这样的：

YourApplicationRoot
 |--res   //resource root
 |  |-fxml
 |  | |-Main.fxml
 |  |-css
 |    |-styles.css
 |--src   //source root
    |-application
      |-Core.java //main class is here

首先，不要在FXML（style="some rules here"）中使用内联样式-很难维护。

接下来，您实际上不需要3个单独的CSS文件，您可以将所有CSS样式放入一个文件（styles.css）中，并使用自定义样式类将它们分开：

/* These styles will only be applied to a chart with class `m1chart` */ 
.m1chart .chart-plot-background{
  -fx-background-color: transparent;
}
.m1chart .default-color0.chart-series-line{
  -fx-stroke: red;
}

/* These styles will only be applied to a chart with class `m2chart` */
.m2chart .chart-plot-background{
  -fx-background-color: transparent;
}
.m2chart .default-color0.chart-series-line{
  -fx-stroke: blue;
}

/* These styles will only be applied to a chart with class `l1chart` */
.l1chart .chart-plot-background{
  -fx-background-color: transparent;
}
.l1chart .default-color0.chart-series-line{
  -fx-stroke: green;
}

现在，您有两种将CSS应用于应用程序的方法-从fxml和从代码开始：

要应用styles.css中的fxml，只需将stylesheets属性添加到根节点，并将styleClass属性添加到您要设置样式的每个LineChart： 

/* Main.fxml, irrelevant parts are omitted */
<AnchorPane stylesheets="@../css/styles.css">
   ...
   <LineChart styleClass="m1chart">
      ...
   </LineChart>
   <LineChart styleClass="m2chart">
      ...
   </LineChart>
   <LineChart styleClass="l1chart">
      ...
   </LineChart> 
   ...   
</AnchorPane>

请不要忘记从style个节点中删除stylesheets和LineChart属性。

要直接从代码中应用styles.css（请注意，如果您使用此方法，则css样式将不会在SceneBuilder中显示）：

//in Core.java start() method
yourScene.getStylesheets().add(getClass().getResource("/css/styles.css").toExternalForm());

//in your fxml controller
M1chart.getStyleClass().add("m1chart");
M2chart.getStyleClass().add("m2chart");
L1chart.getStyleClass().add("l1chart");
相关问题
最新问题