java - 将 CSS 应用于 FXML 中的堆叠图表

标签 java css javafx fxml linechart

我正在尝试在 FXML 中实现一组类似于 this example 的堆叠图表.我相当缺乏经验，无法找到在 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;
}

在主要类(class)中，我尝试遵循 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

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

最佳答案

There are 3 CSS sheets I want to load, each of which is in the same folder (css), the folder placed in the same directory as the Java source files

您应该将您的 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 和从代码:

要应用 fxml 中的 styles.css，只需将 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>

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

直接从代码应用 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");

关于java - 将 CSS 应用于 FXML 中的堆叠图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52742941/

上一篇：jquery - 将 jquery 用于网格模板区域

下一篇：CSS - 根据大小更改背景定位

相关文章：

java - 无法让屏幕显示设置选项

css - 如何将 CSS 类移动到另一个下面？

java - 在JavaFX中让Window向下滚动

java - 如何以编程方式将 Android TextView 对齐到另一个 TextView 的右侧

java - 用鼠标发送加速器来执行文本选择

java - 带有嵌入式 H2 : Database may be already in use: "Locked by another process" 的 Tomcat WebApp

css - 将标签放在动态图像按钮的底部

html - 不同大小的 Twitter Bootstrap 响应图像不成比例地调整大小

java - NetBeans 平台 : How to disable specific options dialog categories?

JavaFX:将 MapView 添加到 VBox

©2024 IT工具网  联系我们