Develop Reference

JavaFX - White overlay for UI elements in CSS

I'm tryin to follow the material design guide for my application's color scheme. At the moment, I'm at the part where it's explaining how the dark theme works.
This is my CSS:
#main-app {
-fx-background-color: #121212;
-fx-background-radius: 5px;
}
#top-bar {
-fx-background-color: bar-color;
-fx-background-radius: 5px 5px 0 0;
}
#bottom-bar {
-fx-background-color: bar-color;
-fx-background-radius: 0 0 5px 5px;
}
How can I do the 5% overlay, as seen in the image below, of my #main-app's background-color so I can then apply it to the top and bottom bars?

I give it another shot ;-)
CSS File:
#main-app {
-fx-background-radius: 5px;
-fx-background-color: #121212;
}
#top-bar {
-fx-background-radius: 5px 5px 0 0;
-fx-background-color: inherit;
}
#top-bar-overlay {
-fx-background-radius: 5px 5px 0 0;
-fx-background-color: rgba(255, 255, 255, 0.05);
}
#bottom-bar {
-fx-background-radius: 0 0 5px 5px;
-fx-background-color: inherit;
}
#bottom-bar-overlay {
-fx-background-radius: 0 0 5px 5px;
-fx-background-color: rgba(255, 255, 255, 0.5);
}
FXML File:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Spinner?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.text.Font?>
<AnchorPane stylesheets="#styling2.css" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.OverlayController">
<children>
<HBox alignment="CENTER_LEFT" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<Label text="Transparency Value for Top Bar Overlay:" />
<Spinner fx:id="topBarTransparencySpinner" />
<Label text="Transparency Value for Bottom Bar Overlay:" />
<Spinner fx:id="bottomBarTransparencySpinner" />
</children>
</HBox>
<GridPane id="main-app" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="27.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" />
</columnConstraints>
<rowConstraints>
<RowConstraints vgrow="SOMETIMES" />
<RowConstraints vgrow="SOMETIMES" />
</rowConstraints>
<children>
<AnchorPane id="top-bar">
<children>
<HBox id="top-bar" alignment="CENTER" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<Label text="Top Bar">
<font>
<Font size="36.0" />
</font>
<HBox.margin>
<Insets />
</HBox.margin>
</Label>
</children>
</HBox>
<Pane id="top-bar-overlay" fx:id="topBarOverlayPane" mouseTransparent="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
<AnchorPane GridPane.rowIndex="1">
<children>
<HBox id="bottom-bar" alignment="CENTER" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<Label text="Bottom Bar">
<font>
<Font size="36.0" />
</font>
</Label>
</children>
</HBox>
<Pane id="bottom-bar-overlay" fx:id="bottomBarOverlayPane" mouseTransparent="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
</children>
</GridPane>
</children>
</AnchorPane>
Controller Class:
package sample;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Spinner;
import javafx.scene.control.SpinnerValueFactory;
import javafx.scene.layout.Pane;
import java.net.URL;
import java.util.ResourceBundle;
public class OverlayController implements Initializable {
#FXML
Spinner<Double>
topBarTransparencySpinner,
bottomBarTransparencySpinner;
#FXML
private Pane
topBarOverlayPane,
bottomBarOverlayPane;
#Override
public void initialize(URL location, ResourceBundle resources) {
topBarTransparencySpinner.setValueFactory(new SpinnerValueFactory.DoubleSpinnerValueFactory(0, 1, 0.05, 0.01));
bottomBarTransparencySpinner.setValueFactory(new SpinnerValueFactory.DoubleSpinnerValueFactory(0, 1, 0.5, 0.01));
topBarTransparencySpinner.valueProperty().addListener((obs, oldV, newV) ->
topBarOverlayPane.setStyle(String.format("-fx-background-color: rgba(255, 255, 255, %s);", String.valueOf(newV).replace(",", "."))));
bottomBarTransparencySpinner.valueProperty().addListener((obs, oldV, newV) ->
bottomBarOverlayPane.setStyle(String.format("-fx-background-color: rgba(255, 255, 255, %s);", String.valueOf(newV).replace(",", "."))));
}
}
Preview:
Does this example help you for your project?

If you main background is already black, I think you can use an rgba background-color on the blocks. So for a 5% white overlay rgba(255,255,255,0.05).
I'm not sure if this is what you looking for but I hope it can help you a bit.

I think that it is not possible with css only. Here is one example for a possible solution:
Controller Class:
package sample;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.Node;
import javafx.scene.layout.FlowPane;
import javafx.scene.layout.Pane;
import java.net.URL;
import java.util.ResourceBundle;
public class Controller implements Initializable {
#FXML
private FlowPane rootFlowPane;
#Override
public void initialize(URL location, ResourceBundle resources) {
for (int i = 0; i < rootFlowPane.getChildren().size(); i++) {
Node node = rootFlowPane.getChildren().get(i);
if (node instanceof Pane) {
Pane pane = (Pane) node;
String style = "-fx-background-color: rgba(255, 255, 255, %s); -fx-background-radius: 5; -fx-border-color: grey;";
if (i == 0)
pane.setStyle(String.format(style, "0"));
else if (i == 1)
pane.setStyle(String.format(style, "0.05"));
else if (i == 2)
pane.setStyle(String.format(style, "0.07"));
else if (i >= 100)
pane.setStyle(String.format(style, "1"));
else {
String transparency = String.format("%.2f", (i + 5) / 100.0).replace(",", ".");
pane.setStyle(String.format(style, transparency));
}
}
}
}
}
FXML File:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.FlowPane?>
<?import javafx.scene.layout.Pane?>
<FlowPane fx:id="rootFlowPane" hgap="20.0" prefHeight="460.0" prefWidth="460.0" style="-fx-background-color: #121212;" vgap="20.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
<children>
<Pane prefHeight="200.0" prefWidth="200.0" />
<Pane prefHeight="200.0" prefWidth="200.0" />
<Pane prefHeight="200.0" prefWidth="200.0" />
<Pane prefHeight="200.0" prefWidth="200.0" />
</children>
<padding>
<Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
</padding>
</FlowPane>
Preview:

How To Make Button Background Change OnClick

I am trying to solve an issue with a calculator project I am working on with javafx 11 and java11 using Scene Builder. I am trying to figure out a way to make the buttons on the calculator change color when typing the corresponding value from the keyboard. Is there a method, or onKeyPressed etc type solution to this issue?
I was able to make the button change colors when the a user clicks on it with a mouse (changes to green). This was accomplished in my css style sheet. I tried to add a method to my onKeyReleased method in my controller class, and could change the background that way, but could not determine a way to have the color change back in a timely manner without causing a lag on the UI. I want the UI to change colors similar to most calculators such as the standard windows calculator. This is where a user holds the key down and it changes color, and when releasing the key it changes back.
//main.java
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
Parent root =
FXMLLoader.load(getClass().getResource("calculator.fxml"));
primaryStage.getIcons().add(new Image("CALC.png"));
primaryStage.setTitle(" TS Calculator");
primaryStage.setScene(new Scene(root, 250, 375));
primaryStage.setResizable(true);
primaryStage.setMinHeight(375);
primaryStage.setMinWidth(250);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
/CSS
Button{
-fx-background-color: black;
-fx-text-align: center;
-fx-text-fill: white;
-fx-border-color: green;
-fx-font-size: 1em;
-fx-border-radius: 10 10 10 10;
-fx-background-radius: 10 10 10 10;
}
Button:pressed{
-fx-background-color: green;
}
TextField{
-fx-font-size: 1.5em;
}
//FXML (Only showing 1 button)
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<GridPane maxHeight="1.7976931348623157E308"
maxWidth="1.7976931348623157E308" minHeight="306.00" minWidth="204.0"
prefHeight="288.0" prefWidth="208.0" style="-fx-background-color:
DARKSLATEGREY; -fx-border-color: green;"
stylesheets="#styles.css" xmlns="http://javafx.com/javafx/11.0.1"
xmlns:fx="http://javafx.com/fxml/1"
fx:controller="com.trevorsmith.Controller"
onKeyReleased="#acceptKeyboardInput">
<AnchorPane prefHeight="200.0" prefWidth="200.0" GridPane.columnSpan="4"
GridPane.hgrow="ALWAYS" GridPane.vgrow="ALWAYS"
onKeyPressed="#acceptKeyboardInput">
<children>
<TextField fx:id="textFieldDisplay" editable="false"
alignment="CENTER_RIGHT" maxHeight="1.7976931348623157E308"
maxWidth="1.7976931348623157E308" prefWidth="196.0"
AnchorPane.bottomAnchor="2.0" AnchorPane.leftAnchor="2.0"
AnchorPane.rightAnchor="2.0" AnchorPane.topAnchor="2.0" />
</children>
</AnchorPane>
<AnchorPane maxHeight="1.7976931348623157E308"
maxWidth="1.7976931348623157E308" prefHeight="200.0" prefWidth="200.0"
GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.vgrow="ALWAYS">
<children>
<Button maxHeight="1.7976931348623157E308"
maxWidth="1.7976931348623157E308" text="0" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="2.0" AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0" />
</children>
I am unable to make the background color change on click, and when I release my key it change back.

You'll want to register a couple of listeners on your Scene to listen to the pressed keys.
Once you have the key, you can use JavaFX's PseudoClass selectors to update the pressed style of each Button.
There could be a more streamlined way to do this, but this is my implementation. Here is a complete sample you can try out to see it in action.
Note that I did not implement the actual functionality of the calculator.
Final result/screenshot at the end.
Main.java:
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;
import java.io.IOException;
public class Main extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
try {
FXMLLoader loader = new FXMLLoader(getClass().getResource("MainLayout.fxml"));
Scene scene = new Scene(loader.load());
scene.getStylesheets().add("style.css");
primaryStage.setScene(scene);
primaryStage.setTitle("Calculator");
primaryStage.show();
} catch (IOException e) {
e.printStackTrace();
}
}
}
MainLayout.fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<VBox alignment="TOP_CENTER" spacing="10.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1"
fx:controller="UI.BaseApps.Calculator.MainController">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0"/>
</padding>
<children>
<TextField fx:id="txtDisplay" disable="true" alignment="CENTER_RIGHT" editable="false" minHeight="-Infinity"
prefHeight="50.0" text="0"/>
<GridPane hgap="10.0" vgap="10.0" VBox.vgrow="ALWAYS">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="-Infinity"/>
<ColumnConstraints hgrow="SOMETIMES" minWidth="-Infinity"/>
<ColumnConstraints hgrow="SOMETIMES" minWidth="-Infinity"/>
<ColumnConstraints hgrow="NEVER" minWidth="-Infinity"/>
<ColumnConstraints hgrow="SOMETIMES" minWidth="-Infinity"/>
<ColumnConstraints hgrow="SOMETIMES" minWidth="-Infinity"/>
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="-Infinity" vgrow="SOMETIMES"/>
<RowConstraints minHeight="-Infinity" vgrow="SOMETIMES"/>
<RowConstraints minHeight="-Infinity" vgrow="SOMETIMES"/>
<RowConstraints minHeight="-Infinity" vgrow="SOMETIMES"/>
</rowConstraints>
<children>
<Button fx:id="btn7" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308"
mnemonicParsing="false" prefHeight="50.0" prefWidth="50.0" text="7"/>
<Button fx:id="btn8" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308"
mnemonicParsing="false" prefHeight="50.0" prefWidth="50.0" text="8" GridPane.columnIndex="1"/>
<Button fx:id="btn9" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308"
mnemonicParsing="false" prefHeight="50.0" prefWidth="50.0" text="9" GridPane.columnIndex="2"/>
<Separator orientation="VERTICAL" prefHeight="200.0" GridPane.columnIndex="3" GridPane.rowSpan="4"/>
<Button fx:id="btnDivide" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308"
mnemonicParsing="false" prefHeight="50.0" prefWidth="50.0" text="÷" GridPane.columnIndex="4"/>
<Button fx:id="btnClear" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308"
mnemonicParsing="false" prefHeight="50.0" prefWidth="50.0" text="C" GridPane.columnIndex="5"/>
<Button fx:id="btn4" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308"
mnemonicParsing="false" prefHeight="50.0" prefWidth="50.0" text="4" GridPane.rowIndex="1"/>
<Button fx:id="btn5" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308"
mnemonicParsing="false" prefHeight="50.0" prefWidth="50.0" text="5" GridPane.columnIndex="1"
GridPane.rowIndex="1"/>
<Button fx:id="btn6" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308"
mnemonicParsing="false" prefHeight="50.0" prefWidth="50.0" text="6" GridPane.columnIndex="2"
GridPane.rowIndex="1"/>
<Button fx:id="btnMultiply" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308"
mnemonicParsing="false" prefHeight="50.0" prefWidth="50.0" text="x" GridPane.columnIndex="4"
GridPane.rowIndex="1"/>
<Button fx:id="btn1" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308"
mnemonicParsing="false" prefHeight="50.0" prefWidth="50.0" text="1" GridPane.rowIndex="2"/>
<Button fx:id="btn2" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308"
mnemonicParsing="false" prefHeight="50.0" prefWidth="50.0" text="2" GridPane.columnIndex="1"
GridPane.rowIndex="2"/>
<Button fx:id="btn3" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308"
mnemonicParsing="false" prefHeight="50.0" prefWidth="50.0" text="3" GridPane.columnIndex="2"
GridPane.rowIndex="2"/>
<Button fx:id="btn0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308"
mnemonicParsing="false" text="0" GridPane.columnSpan="2"
GridPane.rowIndex="3"/>
<Button fx:id="btnDecimal" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308"
mnemonicParsing="false" prefHeight="50.0" prefWidth="50.0" text="." GridPane.columnIndex="2"
GridPane.rowIndex="3"/>
<Button fx:id="btnSubtract" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308"
mnemonicParsing="false" prefHeight="50.0" prefWidth="50.0" text="-" GridPane.columnIndex="4"
GridPane.rowIndex="2"/>
<Button fx:id="btnAdd" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308"
mnemonicParsing="false" prefHeight="50.0" prefWidth="50.0" text="+" GridPane.columnIndex="4"
GridPane.rowIndex="3"/>
<Button fx:id="btnEquals" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308"
mnemonicParsing="false" prefHeight="50.0" prefWidth="50.0" text="="
GridPane.columnIndex="5" GridPane.rowIndex="2" GridPane.rowSpan="2"/>
<Button fx:id="btnBackspace" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308"
mnemonicParsing="false" prefHeight="50.0" prefWidth="50.0" text="←" GridPane.columnIndex="5"
GridPane.rowIndex="1"/>
</children>
</GridPane>
</children>
</VBox>
MainController.java:
import javafx.application.Platform;
import javafx.css.PseudoClass;
import javafx.fxml.FXML;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.input.KeyCode;
public class MainController {
// Here we'll define our PseudoClass needed to set the style for each pressed Button
private static final PseudoClass PRESSED = PseudoClass.getPseudoClass("pressed");
// Define FXML controls
#FXML
private TextField txtDisplay;
#FXML
private Button btn7, btn8, btn9;
#FXML
private Button btn4, btn5, btn6;
#FXML
private Button btn1, btn2, btn3;
#FXML
private Button btn0, btnDecimal;
#FXML
private Button btnMultiply, btnSubtract, btnAdd, btnDivide;
#FXML
private Button btnClear, btnEquals, btnBackspace;
#FXML
private void initialize() {
// We need access to the Scene to register our key listeners, so we need to wrap the code in a Platform.runLater(). If we try to do this without Platform.runLater(), we'll get a NullPointerException because txtDisplay hasn't been rendered yet.
Platform.runLater(() -> {
Scene scene = txtDisplay.getScene();
// Add a listener to capture any key that is pressed. We add this to the entire scene and we can then change the style of the corresponding button accordingly.
scene.setOnKeyPressed(event -> {
// We need to know which Button we're working with
Button button = getButton(event.getCode());
// Add our "pressed" style to the Button
if (button != null) button.pseudoClassStateChanged(PRESSED, true);
});
// Once the user releases the key, remove our custom style and trigger whatever onAction() code has been applied to the corresponding Button.
scene.setOnKeyReleased(event -> {
Button button = getButton(event.getCode());
if (button != null) {
button.pseudoClassStateChanged(PRESSED, false);
// Fire the button's onAction()
button.fire();
}
});
});
}
// Helper method to get the Button that corresponds to the pressed key. The Scene.setOnKeyPressed() listener provides the KeyCode for the pressed key. We can use that to determine which of our Buttons to trigger.
private Button getButton(KeyCode keyCode) {
switch (keyCode) {
case NUMPAD0: return btn0;
case NUMPAD1: return btn1;
case NUMPAD2: return btn2;
case NUMPAD3: return btn3;
case NUMPAD4: return btn4;
case NUMPAD5: return btn5;
case NUMPAD6: return btn6;
case NUMPAD7: return btn7;
case NUMPAD8: return btn8;
case NUMPAD9: return btn9;
case DECIMAL: return btnDecimal;
case DIVIDE: return btnDivide;
case ADD: return btnAdd;
case MULTIPLY: return btnMultiply;
case SUBTRACT: return btnSubtract;
case ENTER: return btnEquals;
case BACK_SPACE: return btnBackspace;
case ESCAPE: return btnClear;
}
return null;
}
}
style.css:
.text-field {
-fx-opacity: 1.0;
-fx-font-family: Consolas;
-fx-font-size: 200%;
}
.button {
-fx-font-family: Consolas;
-fx-font-size: 150%;
-fx-background-radius: 25px;
-fx-border-radius: 25px;
/* Remove focus highlighting */
-fx-focus-traversable: false;
}
.button:pressed {
-fx-background-color: lightgreen;
-fx-border-color: green;
}
And here is the result:

How to fix a visible position's jump of a stage in JavaFX when it starts?

I run a JavaFX program in IDEA on Ubuntu. The window, first, locates on the left-top of the screen, and then I see a jump of the window to a center. How can I handle this?
I've tried different methods of Stage, but it didn't help.
start method
#Override
public void start(Stage primaryStage) throws Exception{
Parent root = FXMLLoader.load(getClass().getResource("View/MainMenuView.fxml"));
primaryStage.setTitle("Flash Cards");
primaryStage.setScene(new Scene(root, 800, 600));
primaryStage.setResizable(false);
primaryStage.show();
}
MainMenuView.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.Cursor?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controllers.MainMenuController">
<children>
<Pane fx:id="mainMenu" prefHeight="600.0" prefWidth="800.0">
<children>
<Text layoutX="233.0" layoutY="116.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Flash Cards v1" textAlignment="CENTER" wrappingWidth="333.419921875">
<font>
<Font size="37.0" />
</font>
</Text>
<Button fx:id="trainingButton" layoutX="314.0" layoutY="225.0" mnemonicParsing="false" prefHeight="75.0" prefWidth="172.0" style="-fx-background-color: #fff; -fx-border-color: #000; -fx-border-width: 2;" text="Training">
<cursor>
<Cursor fx:constant="OPEN_HAND" />
</cursor>
</Button>
<Button fx:id="addNewWordButton" layoutX="314.0" layoutY="325.0" mnemonicParsing="false" prefHeight="75.0" prefWidth="172.0" style="-fx-background-color: #fff; -fx-border-color: #000; -fx-border-width: 2;" text="Add a new word">
<cursor>
<Cursor fx:constant="OPEN_HAND" />
</cursor>
</Button>
</children>
</Pane>
</children>
</AnchorPane>
I just want the window be in a center immediately when my program starts.

This is a bug in JavaFX itself. A workaround for until it is fixed is to do this:
primaryStage.show();
primaryStage.centerOnScreen();
You need to call centerOnScreen() immediately after show() to prevent it from showing up in the corner.

GridPane with titled border

I'm trying to put a titled border around my GridPane and I'm having an issue with the border being on top title. Also I wonder which container will be the best for my problem. GridPane seems problematic here. Any easier way to do it?
Current result:
public void start(Stage primaryStage) {
try {
primaryStage.setTitle("GridPane");
BorderPane root = new BorderPane();
Scene scene = new Scene(root, 300, 210);
GridPane grd =new GridPane();
ColumnConstraints column1width = new ColumnConstraints(50);
ColumnConstraints column2width = new ColumnConstraints(70);
ColumnConstraints column3width = new ColumnConstraints(70);
RowConstraints row1Height = new RowConstraints(30);
grd.getColumnConstraints().addAll(column1width, column2width, column3width);
grd.getRowConstraints().add(row1Height);
Label source = new Label("Source");
Label report = new Label("Report");
TextField text1 = new TextField();
TextField text2 = new TextField("report.txt");
Button browse1 = new Button("Browse...");
Button browse2 = new Button("Browse...");
grd.setVgap(10);
grd.setHgap(10);
grd.setPadding(new Insets(10, 10, 10, 10));
text1.setPrefSize(80, 20);
text2.setPrefSize(80, 20);
browse1.setPrefSize(80, 20);
browse2.setPrefSize(80, 20);
Label textIO = new Label("Text IO zone");
textIO.getStyleClass().add("title");
textIO.setPadding(new Insets(-40, -20, 0, 0));
textIO.setPrefWidth(120);
grd.add(textIO, 0, 0);
grd.add(source, 0, 0);
grd.add(text1, 1, 0);
grd.add(browse1, 2, 0);
grd.add(report, 0, 1);
grd.add(text2, 1, 1);
grd.add(browse2, 2, 1);
grd.getStyleClass().add("border");
grd.prefHeightProperty().bind(root.heightProperty());
root.getStyleClass().add("color");
root.setLeft(grd);
scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.setMinHeight(250);
primaryStage.setMinWidth(410);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
And css styles.
/* JavaFX CSS - Leave this comment until you have at least create one rule which uses -fx-Property */
.title {
-fx-background-color: aliceblue;
-fx-translate-y: -5;
-fx-content-display: bottom;
}
.border {
-fx-border-insets: 5;
-fx-border-color: black;
}
.color{
-fx-background-color: aliceblue;
}

There was a question not too long ago about this, but I can't find it. The key is setting all the backgrounds to the same color.
<?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.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" style="-fx-background-color: white;" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
<children>
<StackPane layoutX="150.0" layoutY="115.0" prefHeight="200.0" prefWidth="300.0" style="-fx-border-color: black; -fx-background-color: white;">
<children>
<VBox prefHeight="200.0" prefWidth="100.0" spacing="10.0">
<children>
<HBox spacing="10.0">
<children>
<Label maxHeight="1.7976931348623157E308" text="Source" />
<TextField prefWidth="125.0" />
<Button mnemonicParsing="false" text="Browse.." />
</children>
</HBox>
<HBox spacing="10.0">
<children>
<Label maxHeight="1.7976931348623157E308" text="Report" />
<TextField maxWidth="125.0" />
<Button mnemonicParsing="false" text="Browse.." />
</children>
</HBox>
</children>
<StackPane.margin>
<Insets left="5.0" right="5.0" top="20.0" />
</StackPane.margin>
</VBox>
</children></StackPane>
<Label layoutX="164.0" layoutY="105.0" style="-fx-background-color: white;" text="Text IO Zone" />
</children>
</AnchorPane>

How can I consume a drop event on an fxml element? (javafx)

I have an fxml application started and I'm finding it very difficult to find relevant documentation. I want to drag a file onto my fxml application, specifically a tabpane, and get the location of the file. I am new to the fxml scene so please try your best to be simple.
fxmlcontroller
public class FXMLDocumentController implements Initializable {
#FXML protected void onDropEndEvent(ActionEvent event) {
System.out.println(event.toString());
}
#FXML protected void onDragEvent(ActionEvent event) {
System.out.println("stuff happened");
}
#Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
}
}
fxmldocument
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.chart.*?>
<?import javafx.scene.shape.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.text.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane id="AnchorPane" prefHeight="485.0" prefWidth="577.0" style="-fx-background-color: #c4c4c4; -fx-border-radius: 0px;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="craigencdec.FXMLDocumentController">
<children>
<Label fx:id="label" layoutX="126" layoutY="120" minHeight="16" minWidth="69" />
<Button layoutX="458.0" layoutY="13.0" mnemonicParsing="false" prefHeight="45.0" prefWidth="110.0" style="-fx-border-radius: 1 1 1 1; -fx-background-color: #4A4DFF; -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.2), 10, 0, 0, 0); -fx-background-radius: 0 0 0 0;" text="Do Stuff" textFill="WHITE">
<font>
<Font name="Ubuntu" size="19.0" />
</font>
<cursor>
<Cursor fx:constant="HAND" />
</cursor>
</Button>
<TextField layoutX="11.0" layoutY="13.0" prefHeight="45.0" prefWidth="441.0" promptText="Enter your key here" style="-fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.2), 10, 0, 0, 0); -fx-border-radius: 0 0 0 0; -fx-background-radius: 0 0 0 0;">
<cursor>
<Cursor fx:constant="HAND" />
</cursor>
<font>
<Font name="Ubuntu" size="19.0" />
</font>
</TextField>
<ProgressBar layoutX="332.0" layoutY="453.0" prefHeight="24.0" prefWidth="236.0" progress="0.06" style="-fx-background-radius: 0 0 0 0; -fx-border-radius: 0 0 0 0;">
<opaqueInsets>
<Insets />
</opaqueInsets>
</ProgressBar>
<TabPane layoutY="69.0" onDragDetected="#onDragEvent" onDragDropped="#onDropEndEvent" prefHeight="416.0" prefWidth="325.0" style="-fx-background-color: #FFFFFF;" tabClosingPolicy="UNAVAILABLE">
<tabs>
<Tab closable="false" text="Encode" />
<Tab closable="false" text="Decode" />
</tabs>
</TabPane>
<Label alignment="CENTER" layoutX="332.0" layoutY="70.0" prefHeight="33.0" prefWidth="236.0" style="-fx-border-radius: 3 3 3 3; -fx-background-color: #4A4DFF; -fx-background-radius: 0 0 0 0;" text="Status" textFill="WHITE">
<font>
<Font size="27.0" />
</font>
</Label>
<Circle fill="WHITE" layoutX="344.0" layoutY="120.0" radius="12.0" stroke="BLACK" strokeType="INSIDE" strokeWidth="0.0" />
<Label alignment="TOP_LEFT" layoutX="369.0" layoutY="110.0" prefHeight="75.0" prefWidth="200.0" text="drag a file into a tab to encode or decode it" textFill="WHITE" textOverrun="CLIP" wrapText="true" />
<LineChart layoutX="333.0" layoutY="199.0" prefHeight="243.0" prefWidth="236.0">
<xAxis>
<CategoryAxis side="BOTTOM" />
</xAxis>
<yAxis>
<NumberAxis prefHeight="258.0" prefWidth="24.0" side="LEFT" />
</yAxis>
</LineChart>
</children>
</AnchorPane>
craigencdec
package craigencdec;
import java.io.BufferedInputStream;
import java.io.FileInputStream;
import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
/**
*
* #author craig
*/
public class CraigEncDec extends Application {
#Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
Scene scene = new Scene(root);
stage.setTitle("Encoder/Decoder");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
private void getBits(String fileLoc){
StringBuilder sb = new StringBuilder();
try (BufferedInputStream is = new BufferedInputStream(new FileInputStream(""))) {
for (int b; (b = is.read()) != -1;) {
String s = "0000000" + Integer.toBinaryString(b);
s = s.substring(s.length() - 8);
sb.append(s).append(' ');
}
}catch(IOException e){
System.out.println("This is not a valid file");
}
System.out.println(sb);
}
}

If you are using scene builder, go to the code section and in the On Drag Dropped textfield put the name of the method in your controller that you want to handle drag events when something is dropped on this node
Then in your controller create the body of this function to be called when the drop happens
#FXML private void somethingDropped(Event event) {
System.out.println("something dropped!");
//TODO More useful code
}