Integrate HTML/CSS into JavaFX's FXML and CSS

Question

Short Version:

My HTML/CSS on CodePen produces a simple button that rotates and grows on hover. I want it integrated into my JavaFX GUI that's using SceneBuilder which interacts with the FXML file. The GUI has buttons numbered 1-4 which I want styled like the one on CodePen. I'm not sure how to get HTML/CSS into the proper place(s).

Details:

My JavaFX GUI which consists of 3 files. Main.java, sample.fxml, and Controller.java. I've been using SceneBuilder to create the GUI shown below. SceneBuilder therefore has written code into the sample.fxml file. The CodePen code however is pure CSS and HTML so I'm unsure how to integrate these into my JavaFX files. This CodePen button has simple code found here.

I've consulted the JavaFX docs which gave me code like

 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);

I've changed it to a circle but this code is in my Main.java file and doesn't seem to address the FXML at all. I've seen JavaFX CSS written like

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

But this doesn't seem to work with transform, scale, etc. How do I integrate the CSS and HTML into the FXML so that its consistent with SceneBuilder? I simply want 4 of my CodePen buttons to replace buttons 1-4 on my current GUI.

Here is more info, thanks so much guys/gals

GUI:

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>

Marcel Marcel · Accepted Answer · 2015-10-26T08:37:36

Theres no way to integrate HTML/CSS into JavaFX.

What you can do the create the hove effect is to create the Animations in your Code.

Create a new Class extending Button:

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();
    });

}

}

In your FXML add this:

 <?import your.package.HoverButton?>

and replace all Buttons with HoverButton.

If you want to controlle the effect via CSS take a look at this. https://wiki.openjdk.java.net/display/OpenJFX/CSS+API+to+support+custom+UI+Controls

Integrate HTML/CSS into JavaFX's FXML and CSS

1 Answers