I have this code, which launches a stage in FX:
public class ApplicationStart extends Application {
#Override
public void start(Stage stage) throws Exception {
FXMLLoader loader = new FXMLLoader(getClass().getResource("/frames/login.fxml"));
LoginController loginController = new LoginController();
loader.setController(loginController);
Parent root = loader.load();
stage.setTitle("Login");
stage.setScene(new Scene(root, 600, 400));
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
In the login.fxml file, the Pane has the width of 600, and height of 400. And in the code above, I set the width and height of the Scene accordingly.
<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/15.0.1" xmlns:fx="http://javafx.com/fxml/1">
But when I launch the application, the width and height are totally messed up, they are way bigger, like this. I tried to reduce the width and height in the code above, trying to debug what is happening, to something like Scene(root, 400, 200). Now it looked ok, but when I clicked on the "Register" button, which is the lower most button, the button doesn't respond, like if I would click outside the window (if I have intellij in the background, for example, and i click the button, the intellij window comes first, and the app window goes back). It's like the app window has some visible bounds, and some actual bounds. The visible bounds are something like width + 200 height + 200, and the actual logical bounds are the exact width and height I set. What can I do to solve this? Here's the entire fxml file.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.Pane?>
<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/15.0.1" xmlns:fx="http://javafx.com/fxml/1">
<children>
<TextField layoutX="357.0" layoutY="131.0" />
<PasswordField layoutX="357.0" layoutY="187.0" />
<Label layoutX="310.0" layoutY="136.0" text="Email:" />
<Label layoutX="285.0" layoutY="191.0" text="Password:" />
<Button layoutX="357.0" layoutY="260.0" mnemonicParsing="false" prefHeight="32.0" prefWidth="152.0" style="-fx-background-color: #25b2fd;" text="Log In" />
<ImageView fx:id="logoImageView" fitHeight="230.0" fitWidth="324.0" layoutX="14.0" layoutY="85.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="#../../../../images/logo.png" />
</image>
</ImageView>
<ImageView fx:id="lockImageView" fitHeight="51.0" fitWidth="53.0" layoutX="408.0" layoutY="60.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="#../../../../images/lock.png" />
</image>
</ImageView>
<Button layoutX="357.0" layoutY="307.0" mnemonicParsing="false" prefHeight="32.0" prefWidth="152.0" style="-fx-background-color: #25b2fd;" text="Register" />
</children>
</Pane>
And here's the LoginController class, but I doubt it will help, it doesn't have much in it other than initializing the images:
public class LoginController implements Initializable {
#FXML
private ImageView logoImageView = new ImageView();
#FXML
private ImageView lockImageView = new ImageView();
#Override
public void initialize(URL url, ResourceBundle resourceBundle) {
File logoFile = new File("images/logo.png");
Image logoImage = new Image(logoFile.toURI().toString());
logoImageView.setImage(logoImage);
File lockFile = new File("images/lock.png");
Image lockImage = new Image(lockFile.toURI().toString());
lockImageView.setImage(lockImage);
}
}
Related
Below I have the code to launch my JavaFX GUI for a project I am working on. However when I go to execute the classes, it gets stuck. All it prints is Starting MCPY GUI and just sits there any help?
Launcher class
public class MCPY {
public static void main(String args[]) {
System.out.println("Starting MCPY GUI...");
Main.main(args);
}
}
Main
package com.mcpy.gui;
import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage primaryStage) throws Exception{
FXMLLoader loader = new FXMLLoader(getClass().getResource("styles/Main.fxml"));
Parent root;
try {
root = loader.load();
} catch (IOException ioe) {
// log exception
return;
}
//init the connection to the controller class
MainController MainController = loader.getController();
MainController.setMain(this);
//load the scene
primaryStage.setTitle("Minecraft Launcher Python");
primaryStage.setScene(new Scene(root, 800, 500));
primaryStage.show();
};
public static void main(String[] args) {
launch(args);
}
Main.FXML
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.TitledPane?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.control.Button?>
<TitledPane animated="false" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" text="Minecraft Launcher Python Login Screen" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.mcpy.gui.MainController">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<ImageView fitHeight="135.0" fitWidth="119.0" layoutX="14.0" layoutY="14.0" pickOnBounds="true" preserveRatio="true">
<image>
</image>
</ImageView>
<Button id="play" layoutX="231.0" layoutY="176.0" mnemonicParsing="false" onAction="#playButtonActionEvent" text="Play" />
<Button id="login" layoutX="313.0" layoutY="176.0" mnemonicParsing="false" onAction="#loginButtonEvent" text="Login" />
<Button id="create_account" layoutX="77.0" layoutY="176.0" mnemonicParsing="false" onAction="#create_accountButtonEvent" text="Create Account" />
</children></AnchorPane>
</content>
</TitledPane>
MainController
package com.mcpy.gui;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import com.mcpy.gui.Play;
import com.mcpy.gui.Login;
import com.mcpy.gui.CreateAccount;
/* Logic for the main gui. DO NOT EDIT. */
public class MainController {
#SuppressWarnings("unused")
private Main main;
public void setMain(Main main) {
this.main = main;
}
#FXML
private static Button login;
#FXML
private static Button create_account;
#FXML
private static Button play;
#FXML
public void loginButtonEvent(ActionEvent lbe) {
String[] args = (null);
Login.main(args);
};
#FXML
public void create_accountButtonEvent(ActionEvent cabe) {
String[] args = (null);
CreateAccount.main(args);
};
#FXML
public void playButtonActionEvent(ActionEvent pbae) {
Play.play_mc();
}
}
All of the code is here. The Launcher (MCPY.java) the main gui and its respecitve controller and the stylesheet (Main.java, MainController.java and Main.FXML)
EDIT: I have applied the FXML changes suggested by #naimdjon, however upon clicking the button this error is produced: https://pastebin.com/8EV9wfnm
You have multiple namespace declaration in your xml and imports were missing. Change your fxml to this (removed image for testing), this shows a window:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.TitledPane?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.control.Button?>
<TitledPane fx:controller="com.mcpy.gui.MainController" animated="false"
maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity"
minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0"
text="Minecraft Launcher Python Login Screen"
xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<ImageView fitHeight="135.0" fitWidth="119.0" layoutX="14.0" layoutY="14.0" pickOnBounds="true" preserveRatio="true">
<image>
</image>
</ImageView>
<Button id="play" layoutX="231.0" layoutY="176.0" mnemonicParsing="false" text="Play" />
<Button id="login" layoutX="313.0" layoutY="176.0" mnemonicParsing="false" text="Login" />
<Button id="create_account" layoutX="77.0" layoutY="176.0" mnemonicParsing="false" text="Create Account" />
</children></AnchorPane>
</content>
</TitledPane>
UPDATE
Upon clicking on the button, you seem to be calling the launch() method. You can't call launch() method more than once in a Java FX application.
I'm writing a program which consists of two different scenes, each one is designed with an FXML file and each of them has its own controller. My initial scene works fine, and it appears in the center of the screen, but when I try to load the second scene from the controller of the first one, I get that it doesn't appears in the center of the screen like the other one does.
Can anyone please help me? It is freaking me out!
Here's some code:
#Override
public void start(Stage primaryStage) {
try {
//Create an FXMLLoader
FXMLLoader rootLoader = new FXMLLoader(getClass().getResource("MainScene.fxml"));
//Instantiate a new controller with parameter and sets it to the FXMLLoader
MainController mainController = new MainController(primaryStage);
rootLoader.setController(mainController);
//Sets the layout
Group root = rootLoader.load();
Scene startScene = new Scene(root);
//Sets the stage's scene
primaryStage.initStyle(StageStyle.TRANSPARENT);
primaryStage.setScene(startScene);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
This is from the Main.
public void initialize() {
FXMLLoader playSceneLoader = new FXMLLoader(getClass().getResource("PlayScene.fxml"));
try {
Group playSceneLayout = playSceneLoader.load();
playScene = new Scene(playSceneLayout, Screen.getPrimary().getBounds().getMaxX(), Screen.getPrimary().getBounds().getMaxY());
playScene.setFill(Color.TRANSPARENT);
} catch (IOException e) {
e.printStackTrace();
}
}
This is from the first controller which create the initial scene of the program.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.Group?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.text.Font?>
<Group xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1">
<children>
<GridPane prefHeight="300.0" prefWidth="500.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<AnchorPane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: #A47888#A47888;">
<children>
<Label fx:id="playLabel" layoutX="90.0" layoutY="129.0" onMouseClicked="#startLabelClicked" text="Play" textFill="#77354c">
<font>
<Font name="AvidOmnes Light" size="41.0" />
</font>
</Label>
</children>
</AnchorPane>
<AnchorPane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: #77354C#77354C;" GridPane.columnIndex="1">
<children>
<Label fx:id="titleLabel" layoutX="77.0" layoutY="129.0" text="Titolo" textFill="#a47888">
<font>
<Font name="AvidOmnes Light" size="40.0" />
</font>
</Label>
<Label fx:id="closeLabel" layoutX="232.0" layoutY="6.0" onMouseClicked="#closeRoot" text="X" textFill="#a47888" />
</children>
</AnchorPane>
</children>
</GridPane>
</children>
</Group>
This is the FXML file of the initial page.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.Group?>
<?import javafx.scene.shape.Circle?>
<Group xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.PlayController">
<children>
<Circle fx:id="startCircle" fill="DODGERBLUE" onMouseClicked="#startCircleClicked" radius="100.0" stroke="BLACK" strokeType="INSIDE" />
</children>
</Group>
And this is the second scene's one.
That's absolutely normal that you get only a slice of your Circle as you do not define center coordinate and then is by default located in the position (0, 0) of the Group.
In order to see it in top-left corner of your screen, you have to maximize your Stage as soon as you click on your Label.
Here is an example: (as you were stingy of information about your code I improvise, so the important modification is in the startLabelClicked)
public class MainController {
private Stage mainStage;
private Scene playScene;
public MainController(Stage pMainStage) {
mainStage = pMainStage;
}
#FXML
public void initialize() {
FXMLLoader playSceneLoader = new FXMLLoader(getClass().getResource("PlayScene.fxml"));
try {
Parent playSceneLayout = playSceneLoader.load();
playScene = new Scene(playSceneLayout, Screen.getPrimary().getBounds().getMaxX(), Screen.getPrimary().getBounds().getMaxY());
playScene.setFill(Color.TRANSPARENT);
} catch (IOException e) {
e.printStackTrace();
}
}
#FXML
private void startLabelClicked() {
mainStage.setScene(playScene);
// This line will help you to extend your stage, which contains your scene.
mainStage.setMaximized(true);
}
#FXML
private void closeRoot() {
System.out.println("Closing.");
Platform.exit();
}
}
Without adjusting the x and y properties of the circle, the center of the circle is positioned at the top left of the scene. Since javafx does not display anything outside of the scene, you're left with the bottom right quater of a circle.
To display a circle completely in a scene with in the top left corner of a scene, you should put the circle in a layout that does some layout. E.g. AnchorPane with topAnchor and leftAnchor properties set for the circle would work, but the simplest way of accomplishing the desired result is to use a StackPane with a top left alignment:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.shape.Circle?>
<StackPane alignment="TOP_LEFT" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.PlayController">
<children>
<Circle fx:id="startCircle" fill="DODGERBLUE" onMouseClicked="#startCircleClicked" radius="100.0" stroke="BLACK" strokeType="INSIDE" />
</children>
</StackPane>
Is it possible, to view the video which motion streams vie JavaFx Webview and WebEngine?
I have a code which shows me like every website i want, but when i try to open the stream from motion nothing happens
The app code:
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.*;
import javafx.stage.Stage;
public class Main extends Application {
public static void main(String[] args) {
launch();
}
#Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("WebView.fxml"));
Scene scene = new Scene(root, 600, 400);
primaryStage.setScene(scene);
primaryStage.show();
}
}
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.image.*?>
<?import javafx.scene.web.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<AnchorPane 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="WebViewController">
<children>
<WebView fx:id="webView" layoutX="100.0" layoutY="176.0" prefHeight="400.0" prefWidth="600.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
<ImageView fitHeight="150.0" fitWidth="200.0" layoutX="161.0" layoutY="27.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="#../../../Schreibtisch/test.png" />
</image>
</ImageView>
</children>
</AnchorPane>
I have the following FXML view:
VBox
ScrollPane
VBox buttonsContainer
Button (Adds a new button to buttonsContainer)
I want the ScrollPane to expand its height to match its child vbox's height, until it reaches a certain height [200px for example] then it stops expanding.
I've been playing around for the past 1 hour with the Min/Pref Viewport Height, and Min/Max/Pref Height properties to achieve this, but nothing worked out.
Is this this possible to do?
Edit: Here's a minimal, complete, and verifiable example :
MainView.fxml
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.layout.VBox?>
<VBox alignment="CENTER" prefHeight="0.0" prefWidth="200.0" spacing="5.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1" fx:controller="MainController">
<ScrollPane maxHeight="200.0" VBox.vgrow="ALWAYS">
<VBox fx:id="_buttonsContainer" />
</ScrollPane>
<Button fx:id="_btnAddButton" mnemonicParsing="false" text="Button" />
</VBox>
MainController.java
public class MainController implements Initializable{
#FXML private Button _btnAddButton;
#FXML private VBox _buttonsContainer;
#Override
public void initialize(URL location, ResourceBundle resources) {
_btnAddButton.setOnAction(e -> {
addButton();
});
}
private void addButton(){
_buttonsContainer.getChildren().add(new Button());
}
}
This seems to work:
<ScrollPane fx:id="scrollPane" maxHeight="200.0" minViewportHeight="0.0" minHeight="0.0">
<VBox fx:id="_buttonsContainer" />
</ScrollPane>
The scroll pane, and its viewport, seem to have some fixed positive minimum height by default.
ScrollPane.prefHeightProperty().bind(VBox.heightProperty());
then add ScrollPane.setMaxHeight(200); try this
When I start my application my transparent javafx.stage.Stage shows a half transparent image as expected. But after a second stage is loaded the first stage loses its transparency.
The weird thing is that if the second fxml file ("MainScreen.fxml") doesn't contains any components like buttons or text fields, the background stays transparent.
I'm using JavaFX with JavaSE-1.8 in eclipse neon.2 on macOS Sierra.
Main class
package customPackage.main;
import javafx.animation.FadeTransition;
import javafx.application.Application;
import javafx.application.Platform;
import javafx.geometry.Rectangle2D;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Screen;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
import javafx.util.Duration;
public class Main extends Application implements Runnable {
private Stage primaryStage;
private Stage stage;
private Controller launchController;
#Override
public void start(Stage primaryStage) {
this.primaryStage = primaryStage;
launchController = new Controller("LaunchScreen.fxml");
Scene launchScene = new Scene(launchController);
launchScene.setFill(Color.TRANSPARENT);
primaryStage.initStyle(StageStyle.TRANSPARENT);
primaryStage.setAlwaysOnTop(true);
primaryStage.setResizable(false);
primaryStage.setScene(launchScene);
primaryStage.show();
Thread thread = new Thread(this);
thread.start();
}
#Override
public void run() {
try {
Thread.sleep(3000);
// simulate work
} catch (InterruptedException e) {
e.printStackTrace();
}
Controller controller = new Controller("MainScreen.fxml");
Scene scene = new Scene(controller);
Platform.runLater(new Runnable() {
#Override
public void run() {
stage = new Stage();
stage.initStyle(StageStyle.UNDECORATED);
stage.setResizable(false);
stage.setScene(scene);
stage.show();
}
});
}
}
Controller class
package customPackage.main;
import java.io.IOException;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.control.ProgressBar;
import javafx.scene.layout.AnchorPane;
public class LaunchController extends AnchorPane {
#FXML
private ProgressBar bar;
public LaunchController(String filename) {
FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource(filename));
fxmlLoader.setRoot(this);
fxmlLoader.setController(this);
try {
fxmlLoader.load();
} catch (IOException e) {
e.printStackTrace();
}
}
}
FXML File ("LaunchScreen.fxml")
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<fx:root fx:id="pane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="326.0" prefWidth="883.0" type="AnchorPane" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<ImageView fitHeight="326.0" fitWidth="883.0" layoutX="7.0" layoutY="134.0" pickOnBounds="true" preserveRatio="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<image>
<Image url="#http://www.lunapic.com/editor/premade/transparent.gif" />
</image>
</ImageView>
</children>
<cursor>
<Cursor fx:constant="DEFAULT" />
</cursor>
</fx:root>
FXML File ("MainScreen.fxml")
<?xml version="1.0" encoding="UTF-8"?>
<?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<fx:root fx:id="pane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="720.0" prefWidth="1280.0" type="AnchorPane" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<ImageView fitHeight="720.0" fitWidth="1280.0" pickOnBounds="true" preserveRatio="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<image>
<Image url="#http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg" />
</image>
</ImageView>
<HBox spacing="100.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<children>
<Button fx:id="button1" mnemonicParsing="false" onAction="#button1Press" prefHeight="45.0" prefWidth="1000.0" text="Singleplayer" />
<Button fx:id="button2" mnemonicParsing="false" onAction="#button2Press" prefHeight="45.0" prefWidth="1000.0" text="Multiplayer" />
<Button fx:id="button3" mnemonicParsing="false" onAction="#button3Press" prefHeight="45.0" prefWidth="1000.0" text="Settings" />
<Button fx:id="button4" mnemonicParsing="false" onAction="#button4Press" prefHeight="45.0" prefWidth="1000.0" text="Quit" />
</children>
<padding>
<Insets bottom="30.0" left="100.0" right="100.0" top="20.0" />
</padding>
</HBox>
<Region fx:id="region" prefHeight="15.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</fx:root>
Solution (solved by James_D)
I added
.root {
-fx-background-color: transparent;
}
to the external style sheet and added stylesheets="#application.css" to the root node in the FXML file.
The default CSS style sheet for JavaFX, modena, applies a non-transparent color to the background of the root node. That's the color you're seeing when you display your main view.
The reason you don't see this in your first screen, or if you remove the buttons from the main screen, is that the default style sheet is only loaded the first time the Control class (or one of its subclasses) is instantiated. This is done to avoid the overhead of CSS processing for applications not needing it.
To fix, either add style="-fx-background-color: transparent;" to the root node in the FXML file, or add the rule
.root {
-fx-background-color: transparent ;
}
to the external style sheet.