将 HTML/CSS 集成到 JavaFX 的 FXML 和 CSS

Question

• 短版：

我在 CodePen 上的 HTML/CSS 生成了一个简单的按钮，该按钮可以在悬停时旋转和增长。我希望它集成到使用与 FXML 文件交互的 SceneBuilder 的 JavaFX GUI 中。 GUI 有编号为 1-4 的按钮，我希望它们的样式类似于 CodePen 上的按钮。我不确定如何将 HTML/CSS 放到正确的位置。

• 详情：

我的 JavaFX GUI 包含 3 个文件。 Main.java、sample.fxml 和 Controller.java。我一直在使用 SceneBuilder 创建如下所示的 GUI。因此，SceneBuilder 已将代码写入 sample.fxml 文件。然而，CodePen 代码是纯 CSS 和 HTML，所以我不确定如何将它们集成到我的 JavaFX 文件中。这个 CodePen 按钮有简单的代码found here.

我查阅了 JavaFX 文档，它给了我类似的代码

 Rectangle rect = new Rectangle (100, 40, 100, 100);
            rect.setArcHeight(100);
            rect.setArcWidth(100);
            rect.setFill(Color.BLUE);

            RotateTransition rt = new RotateTransition(Duration.millis(400), rect);
            rt.setByAngle(360);
            rt.setAutoReverse(true);

我已将其更改为一个圆圈，但此代码在我的 Main.java 文件中，似乎根本没有解决 FXML。我见过 JavaFX CSS 写成这样的

-fx-background-color: #7cafc2;
-fx-text-fill: #FFFFFF;
-fx-background-radius: 4;

但这似乎不适用于变换、缩放等。如何将 CSS 和 HTML 集成到 FXML 中以使其与 SceneBuilder 一致？我只想要 4 个 CodePen 按钮来替换当前 GUI 上的按钮 1-4。

这里有更多信息，非常感谢伙计们/女孩们

界面：

Main.java

import ...

public class Main extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception{

        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        primaryStage.setTitle("Form Demo");
        primaryStage.setScene(new Scene(root, 420, 475));
        primaryStage.show();
    }

}

sample.fxml

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

<VBox xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">

<BorderPane VBox.vgrow="ALWAYS" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <top>
      <VBox>
         <children>
            <HBox spacing="10.0" VBox.vgrow="ALWAYS">
               <children>
                     <Label fx:id="fileLabel1" prefHeight="33.0" prefWidth="100.0" text="NAS Form:" textOverrun="WORD_ELLIPSIS">
                        <font>
                           <Font name="System Bold" size="17.0" />
                        </font>
                        <padding>
                           <Insets top="7.0" />
                        </padding>
                     </Label>
                     <Label fx:id="fileLabel" alignment="CENTER" contentDisplay="CENTER" prefHeight="33.0" prefWidth="209.0" text="No file selected" HBox.hgrow="ALWAYS">
                        <padding>
                           <Insets top="7.0" />
                        </padding>
                        <font>
                           <Font size="17.0" />
                        </font></Label>
                     <Region nodeOrientation="RIGHT_TO_LEFT" prefHeight="31.0" prefWidth="10.0" HBox.hgrow="ALWAYS" />
                  <Button mnemonicParsing="false" onAction="#Browse" prefHeight="31.0" prefWidth="90.0" text="Browse " HBox.hgrow="ALWAYS" />
               </children>
               <VBox.margin>
                  <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
               </VBox.margin>
            </HBox>
               <Separator prefWidth="200.0" />
            <Region prefHeight="30.0" prefWidth="200.0" />
            <HBox VBox.vgrow="ALWAYS">
               <children>
                  <Region prefHeight="200.0" prefWidth="100.0" HBox.hgrow="ALWAYS" />
                  <Button mnemonicParsing="false" onAction="#FieldData" text="Field Data" HBox.hgrow="ALWAYS" />
                     <Region prefHeight="200.0" prefWidth="100.0" HBox.hgrow="ALWAYS" />
                  <Button mnemonicParsing="false" onAction="#CompData" text="Comp Data" HBox.hgrow="ALWAYS" />
                     <Region prefHeight="200.0" prefWidth="100.0" />
               </children>
            </HBox>
            <HBox VBox.vgrow="ALWAYS">
               <children>
                     <Region prefHeight="200.0" prefWidth="19.0" HBox.hgrow="ALWAYS" />
                  <Button mnemonicParsing="false" onAction="#Photos" text="Photos" HBox.hgrow="ALWAYS" />
                  <Region prefHeight="200.0" prefWidth="35.0" HBox.hgrow="ALWAYS" />
                  <Button mnemonicParsing="false" onAction="#Sketch" text="Sketch" HBox.hgrow="ALWAYS">
                     <HBox.margin>
                        <Insets />
                     </HBox.margin>
                  </Button>
                     <Region prefHeight="200.0" prefWidth="125.0" />
               </children>
            </HBox>
         </children>
      </VBox>
   </top>
</BorderPane>
</VBox>

Answer 1

没有办法将 HTML/CSS 集成到 JavaFX 中。

你可以做的是在你的代码中创建动画。

创建一个新的类扩展按钮：

public class HoverButton extends Button {

private ScaleTransition scale;
private RotateTransition rotate;
private ParallelTransition transition;

public HoverButton () {
    super();

    createAnimations();
    addEvents();
}

private void createAnimations() {
    scale = new ScaleTransition(Duration.seconds(0.2), this);
    rotate = new RotateTransition(Duration.seconds(0.2), this);

    transition = new ParallelTransition(scale, rotate);
}

private void addEvents() {
    setOnMouseEntered((e) -> {
        transition.stop();
        scale.setToX(1.195);
        scale.setToY(1.195);
        rotate.setToAngle(360);
        transition.play();
    });
    setOnMouseExited((e) -> {
        transition.stop();
        scale.setToX(1);
        scale.setToY(1);
        rotate.setToAngle(0);
        transition.play();
    });

}

}

在您的 FXML 中添加：

 <?import your.package.HoverButton?>

并用 HoverButton 替换所有按钮。

如果您想通过 CSS 控制效果，请查看此。 https://wiki.openjdk.java.net/display/OpenJFX/CSS+API+to+support+custom+UI+Controls