I want to remove the red border when I focused my anchor pane. I have tried different things such as:
#rootPane {
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
}
or programmtically
rootPane.setStyle("-fx-focus-color: transparent;");
I have a login screen with following fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<AnchorPane fx:id="rootPane" prefHeight="500.0" prefWidth="350" stylesheets="#Login_neu.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.erp.ui.login.LoginController_new">
<children>
<AnchorPane fx:id="ap_title" minHeight="0.0" minWidth="0.0" prefHeight="148.0" prefWidth="350.0">
<children>
<Text id="welcome-text" layoutX="29.0" layoutY="56.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Warehouse MMM Solution" wrappingWidth="270.13671875" />
<Text id="welcome-text2" layoutX="181.0" layoutY="76.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Powered by SAP" wrappingWidth="166.13671875" />
</children>
</AnchorPane>
<AnchorPane fx:id="ap_login" layoutX="-4.0" layoutY="150.0" minHeight="0.0" minWidth="0.0" prefHeight="350.0" prefWidth="350.0">
<children>
<ProgressBar fx:id="progressbar" disable="true" layoutX="75.0" layoutY="312.0" maxHeight="3.0" minHeight="3.0" prefHeight="3.0" prefWidth="200.0" visible="false" />
<Button fx:id="btn_submit" layoutX="249.0" layoutY="268.0" onAction="#handleSubmitAction" text="Sign In" AnchorPane.rightAnchor="46.0">
<opaqueInsets>
<Insets right="20.0" />
</opaqueInsets>
</Button>
<Label fx:id="lbl_username" layoutX="100.0" layoutY="38.0" text="Username:" />
<Label fx:id="lbl_plant" layoutX="100.0" layoutY="178.0" text="Plant:" />
<Label fx:id="lbl_password" layoutX="100.0" layoutY="106.0" text="Password" />
<TextField fx:id="tf_username" layoutX="100.0" layoutY="61.0" />
<PasswordField fx:id="pf_password" layoutX="100.0" layoutY="133.0" text="182832" />
<ComboBox fx:id="cb_plants" disable="true" layoutX="100.0" layoutY="205.0" prefWidth="150.0" />
</children>
</AnchorPane>
</children>
</AnchorPane>
If I do this trick
#ap_login {
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
}
or
#rootPane {
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
}
only the button does take effect.
Css file looks like follow:
.root {
}
#welcome-text {
-fx-font-size: 20.0px;
-fx-fill: black;
-fx-font-weight: bold;
}
#welcome-text2 {
-fx-font-size: 14.0px;
-fx-fill: black;
-fx-font-weight: bold;
}
#ap_title {
-fx-background-color: #9dd34c;
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
}
#ap_login {
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
}
I solved the problem. The red border occured when I focussed the window, because when I changed my background I hooked in seetings unnoticley "Automatically pick an accent colour from my background". I didn't think anything of it. So, next time I'll know it for sure. Thanks anyway.
Related
I am tring to setup Slider tick font mannually through the following fxml code. All other parts in the fxml worked very well on my Mac except the Slider part, which fails to load the font correctly everytime. I have googled the issue, and only found out the suspected issue might come from subtructure of Slider called axis. But there is no example for how to mannuly change the axis properties in fxml.
enter image description here
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.control.RadioButton?>
<?import javafx.scene.control.ToggleGroup?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.ToggleButton?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.text.Text?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.collections.*?>
<?import java.lang.String?>
<?import javafx.scene.control.ChoiceBox?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.control.Spinner?>
<GridPane fx:controller="com.example.controls.HelloController"
xmlns:fx="http:/javafx.com/xml"
alignment="center"
hgap="10" vgap="10">
<Button GridPane.rowIndex="0" GridPane.columnIndex="0" text="Click Me">
<font>
<Font name="Times New Roman" size="12"/>
</font>
<graphic>
<ImageView>
<Image url="#/toolbarButtonGraphics/general/TipOfTheDay24.gif"/>
</ImageView>
</graphic>
</Button>
<Label GridPane.rowIndex="0" GridPane.columnIndex="1" text="This is a label"
textFill="blue" WrapText="true">
<font>
<Font name="Arial italic" size="12"/>
</font>
<graphic>
<ImageView>
<Image url="#/toolbarButtonGraphics/general/Information24.gif"/>
</ImageView>
</graphic>
</Label>
<fx:define>
<ToggleGroup fx:id="colorToggleGroup"/>
</fx:define>
<VBox GridPane.rowIndex="0" GridPane.columnIndex="2" style="-fx-font-family: 'PingFang SC'">
<RadioButton text="Red" toggleGroup="$colorToggleGroup"/>
<RadioButton text="Blue" toggleGroup="$colorToggleGroup" selected="true"/>
<RadioButton text="Green" toggleGroup="$colorToggleGroup"/>
</VBox>
<VBox GridPane.rowIndex="0" GridPane.columnIndex="3" style="-fx-font-family: 'PingFang SC'" spacing="2">
<CheckBox text="Dog" indeterminate="true"/>
<CheckBox text="Cat" indeterminate="true"/>
<CheckBox text="Bird" indeterminate="true"/>
</VBox>
<fx:define>
<ToggleGroup fx:id="buttonToggleGroup"/>
</fx:define>
<HBox GridPane.rowIndex="0" GridPane.columnIndex="4"
style="-fx-font-family: 'PingFang SC'; -fx-border-style: dashed" spacing="1"
alignment="center">
<ToggleButton text="Hello!" toggleGroup="$buttonToggleGroup"/>
<ToggleButton text="Goodbye!" toggleGroup="$buttonToggleGroup"/>
<ToggleButton text="Nice Day!" toggleGroup="$buttonToggleGroup"/>
</HBox>
<TextField GridPane.rowIndex="1" GridPane.columnIndex="0"
style="-fx-font-family: 'PingFang SC'"/>
<Label text="Regular TextField" GridPane.rowIndex="2" GridPane.columnIndex="0" style="-fx-font-family: 'PingFang SC'"/>
<PasswordField GridPane.rowIndex="1" GridPane.columnIndex="1"
style="-fx-font-family: 'PingFang SC'"/>
<Label text="Password Field" GridPane.rowIndex="2" GridPane.columnIndex="1" style="-fx-font-family: 'PingFang SC'"/>
<ComboBox GridPane.rowIndex="2" GridPane.columnIndex="2" GridPane.columnSpan="2"
style="-fx-border-style: dashed; -fx-font-family: 'PingFang SC'">
<items>
<FXCollections fx:factory="observableArrayList">
<String fx:value="This is the long Option 1"/>
<String fx:value="Option 2"/>
<String fx:value="Option 3"/>
<String fx:value="Option 4"/>
<String fx:value="Option 5"/>
</FXCollections>
</items>
<value>
<String fx:value="Option 2"/>
</value>
</ComboBox>
<ChoiceBox GridPane.rowIndex="2" GridPane.columnIndex="4" style="-fx-font-family: 'PingFang SC'">
<items>
<FXCollections fx:factory="observableArrayList">
<String fx:value="This is the long Option 1"/>
<String fx:value="Option 2"/>
<String fx:value="Option 3"/>
<String fx:value="Option 4"/>
<String fx:value="Option 5"/>
</FXCollections>
</items>
</ChoiceBox>
<Slider GridPane.rowIndex="3" GridPane.columnIndex="0"
showTickLabels="true" showTickMarks="true" GridPane.columnSpan="3"
minorTickCount="4"
snapToTicks="true"
style="-fx-font-family: 'PingFang SC'"/>
<Spinner GridPane.rowIndex="3" GridPane.columnIndex="4"
style="-fx-font-family: 'PingFang SC'"
min="0" max="20" initialValue="50">
</Spinner>
</GridPane>
Here is the HelloApplicaion.java file for running the test app.
package com.example.controls;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.text.Font;
import java.io.IOException;
import java.util.List;
public class HelloApplication extends Application {
#Override
public void start(Stage stage) throws IOException {
FXMLLoader fxmlLoader = new FXMLLoader(HelloApplication.class.getResource("hello-view.fxml"));
Scene scene = new Scene(fxmlLoader.load(), 800, 500);
stage.setTitle("Hello!");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch();
// printFont(Font.getFontNames());
}
public static void printFont(List<String> list) {
for(String item: list) {
System.out.println(item);
}
}
}
You must use CSS in a style sheet to style the tick labels of a slider.
Here the slider font is changed to make it larger than the default (12px instead of 8px) and use a monospaced font rather than the default system font.
The tick mark labels in the slider are part of an axis within the slider. The axis can be styled using the -fx-tick-label-font style properties, with appropriate extensions to the CSS attribute name for the thing you are trying to style (e.g. the size or font family). This is documented (to a greater or lesser extent) in the CSS reference guide, and also demonstrated in the modena.css file in the JavaFX controls jar that ships with your JavaFX installation.
Example FXML file.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Slider?>
<Slider
minorTickCount="4"
prefHeight="37.0"
prefWidth="157.0"
showTickLabels="true"
showTickMarks="true"
snapToTicks="true"
styleClass="custom-slider"
stylesheets="#slider.css"
xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1"/>
Example CSS file.
.custom-slider .axis {
-fx-tick-label-font-size: 12px;
-fx-tick-label-font-family: monospace;
}
I made an FXML in the Scenebuilder with a Tableview and Pagination.
But I am having trouble to get the pagination to work, especially the PageFactory.
I have following code:
FXML:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.ChoiceBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Pagination?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.text.Font?>
<AnchorPane fx:id="recordsOverview" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="accentor.overview.RecordsOverviewController">
<children>
<Pagination fx:id="paginator" onMouseClicked="#pageClicked" prefHeight="20.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="340.0" />
<HBox alignment="TOP_RIGHT" spacing="20.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="60.0">
<children>
<Label prefHeight="25.0" text="Search:" />
<TextField prefHeight="25.0" prefWidth="137.0" />
<Label prefHeight="25.0" text="Sort:" />
<ChoiceBox prefHeight="25.0" prefWidth="100.0" />
<ChoiceBox prefHeight="25.0" prefWidth="100.0" />
</children>
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</HBox>
<Label prefHeight="52.0" text="Records" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0">
<font>
<Font size="48.0" />
</font>
</Label>
<TableView fx:id="table" AnchorPane.bottomAnchor="50.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="100.0">
<columns>
<TableColumn fx:id="trackid" text="#" />
<TableColumn fx:id="title" text="Title" />
<TableColumn fx:id="length" text="Length" />
<TableColumn fx:id="album" text="Album" />
<TableColumn fx:id="artists" text="Artist(s)" />
</columns>
</TableView>
</children>
<padding>
<Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
</padding>
</AnchorPane>
Controller:
public void fillTable(int page) {
this.dataModel.setTracksPage(page);
this.table.setItems(FXCollections.observableArrayList(this.dataModel.getTracks().getData()));
this.paginator.setCurrentPageIndex(page);
}
#Override
public void showOverview() {
recordsOverview.setVisible(true);
}
#Override
public void setDataModel(DataModel dataModel) {
if (this.dataModel == null) {
this.dataModel = dataModel;
}
fillTable(1);
paginator.setPageCount(this.dataModel.getTracks().getTotalPages());
this.paginator.setPageFactory((Integer pageIndex) -> {
fillTable(pageIndex);
return null; // ???
}
);
}
I just want to fill the table with new data, but returning null gives me errors.
If I return something else like return new BorderPane(table), It doesn't work either, same error.
How can I solve this issue?
Your page factory needs to return the node that will be displayed as the "page". The Pagination will then manage that node and make it part of the scene graph under it. What you want to do is display the TableView in the pagination, so you should return it from the page factory.
You didn't post any of the stack traces from the errors you mention, but I'm guessing that what's happening is that when you return the table, you get an error because the TableView is already part of the scene graph, and nodes can't exist in two different places.
One solution is to omit the table entirely from the FXML, and just define it in the controller (set it up in the initialize() method, then return the reference to it from the page factory).
If you still want it defined in the FXML file, you can define elements in FXML which are not part of the scene graph by wrapping them in a <fx:define> block.
So your FXML would look something like this:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.ChoiceBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Pagination?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.text.Font?>
<AnchorPane fx:id="recordsOverview" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="accentor.overview.RecordsOverviewController">
<fx:define>
<TableView fx:id="table" AnchorPane.bottomAnchor="50.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="100.0">
<columns>
<TableColumn fx:id="trackid" text="#" />
<TableColumn fx:id="title" text="Title" />
<TableColumn fx:id="length" text="Length" />
<TableColumn fx:id="album" text="Album" />
<TableColumn fx:id="artists" text="Artist(s)" />
</columns>
</TableView>
</fx:define>
<children>
<Pagination fx:id="paginator" onMouseClicked="#pageClicked" prefHeight="20.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="340.0" />
<HBox alignment="TOP_RIGHT" spacing="20.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="60.0">
<children>
<Label prefHeight="25.0" text="Search:" />
<TextField prefHeight="25.0" prefWidth="137.0" />
<Label prefHeight="25.0" text="Sort:" />
<ChoiceBox prefHeight="25.0" prefWidth="100.0" />
<ChoiceBox prefHeight="25.0" prefWidth="100.0" />
</children>
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</HBox>
<Label prefHeight="52.0" text="Records" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0">
<font>
<Font size="48.0" />
</font>
</Label>
</children>
<padding>
<Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
</padding>
</AnchorPane>
and then you do
this.paginator.setPageFactory((Integer pageIndex) -> {
fillTable(pageIndex);
return table;
}
);
I am working on a chatbot project in java and for the GUI I am using JavaFX, and IDE eclipse oxygen and scene builder 8.4.1.
I am having a problem adding a background image to a text area. here is a screen shot of what I did and it just shows nothing(not even an error).
following is the fxml code generated by scene builder:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Region?>
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1">
<top>
<AnchorPane prefHeight="56.0" prefWidth="600.0" style="-fx-background-color: blue;" BorderPane.alignment="CENTER">
<children>
<ImageView fitHeight="51.0" fitWidth="79.0" layoutX="23.0" layoutY="20.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="#../../../Downloads/background.jpg" />
</image></ImageView>
<Label layoutX="118.0" layoutY="36.0" text="Ibot" />
</children>
</AnchorPane>
</top>
<center>
<TextArea editable="false" prefHeight="200.0" prefWidth="200.0" style="-fx-background-image: url("../../../Downloads/background.jpg"); -fx-background-repeat: stretch;" BorderPane.alignment="CENTER" />
</center>
<bottom>
<HBox BorderPane.alignment="CENTER">
<children>
<TextField prefHeight="25.0" prefWidth="476.0" promptText="Type in here" HBox.hgrow="ALWAYS">
<HBox.margin>
<Insets />
</HBox.margin>
</TextField>
<Region prefHeight="25.0" prefWidth="60.0" />
<Button mnemonicParsing="false" prefHeight="25.0" prefWidth="57.0" text="Send">
<HBox.margin>
<Insets />
</HBox.margin>
</Button>
</children>
<BorderPane.margin>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</BorderPane.margin>
<padding>
<Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
</padding>
</HBox>
</bottom>
</BorderPane>
It's probably not working because as specify in JavaFX CSS Reference Guide the TextArea is a association of two substructure: a ScrollPane and a Region. You have to change the style of those.
In CSS this should work:
#text-area-id .content{
-fx-background-image : url("the_path_to_your_image")
/* others properties */
}
Edit to answer comment:
For a button you just need to set the property -fx-background-image:
#your-button{
-fx-background-image : url("the_path_to_your_image")
}
i've a trouble with JavaFX and FXML.
I've a simple FXML file structured in this way:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.media.MediaView?>
<BorderPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="480.0" minWidth="720.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="mediaplayer.MediaPlayerControllerSplit">
<center>
<SplitPane dividerPositions="0.5" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" BorderPane.alignment="CENTER">
<items>
<AnchorPane fx:id="mediaPaneL" style="-fx-background-color: green;">
<children>
<MediaView fx:id="mediaViewL" />
</children>
</AnchorPane>
<AnchorPane fx:id="mediaPaneR" style="-fx-background-color: red;">
<children>
<MediaView fx:id="mediaViewR" />
</children>
</AnchorPane>
</items>
</SplitPane>
</center>
<bottom>
<ToolBar minHeight="-Infinity" minWidth="-Infinity" style="-fx-background-color: black;" BorderPane.alignment="BOTTOM_CENTER">
<items>
<Button mnemonicParsing="false" onAction="#openVideo" text="Openfile" />
<Button mnemonicParsing="false" onAction="#playVideo" text=">" />
<Button mnemonicParsing="false" onAction="#pauseVideo" text="||" />
<Button mnemonicParsing="false" onAction="#stopVideo" text="stop" />
<Button mnemonicParsing="false" text="<<<" />
<Button mnemonicParsing="false" text="<<" />
<Button mnemonicParsing="false" text=">>" />
<Button mnemonicParsing="false" text=">>>" />
<Button mnemonicParsing="false" onAction="#exitVideo" text="EXIT" />
</items>
</ToolBar>
</bottom>
</BorderPane>
The controller will load 2 videos and show them in the relative 2 AnchorPanes inside the SplitView, as shown in the following image:
ClickMe
The video exceeds from width bounds of the Parent AnchorPane, how can i set them properly?
Thanks all.
I've solved this with the following line of codes in the Controller class:
mediaViewL.fitWidthProperty().bind(mediaPaneL.widthProperty());
The left (same for the right one) mediaView width has been fitted to his first Parent width (AnchorPaneL / AnchorPaneR).
<AnchorPane id="AnchorPane" styleClass="mainFxmlClass" xmlns:fx="http://javafx.com/fxml" fx:controller="freshminds.DashBoardController">
<stylesheets>
<URL value="#dashboard.css"/>
</stylesheets>
<Button layoutX="40" layoutY="30" text="DASHBOARD" fx:id="btn_dashboard" />
<GridPane fx:id="dash_grid" layoutX="40" layoutY="300" alignment="center" hgap="10" vgap="10" xmlns:fx="http://javafx.com/fxml">
<padding><Insets top="25" right="25" bottom="10" left="25"/></padding>
<Button text="SERVICE PACKAGE" fx:id="btn_service" />
<Button text="BOOKING" fx:id="btn_booking" />
<Button text="INVOICE" fx:id="btn_invoice" />
<Button text="REPORTS" fx:id="btn_reports" />
<Button text="COUPONS" fx:id="btn_coupons" />
<Button text="SOCIAL MEDIA" fx:id="btn_social" />
</GridPane>
</AnchorPane>
I get an error in GridPane padding Insets on this line:
<padding><Insets top="25" right="25" bottom="10" left="25"/></padding>
If your error is class not found error, you can add this import statement at the beginning of your FXML file.
<?import javafx.geometry.Insets?>