I have an issue since I do how know, how to add new components to fx:root container child.
This is what I have at the moment.
Root element called PopupContainer
<fx:root type="StackPane" alignment="CENTER" xmlns:fx="http://javafx.com/fxml"
styleClass="popup">
<VBox alignment="CENTER">
<HBox alignment="CENTER">
<VBox fx:id="content" alignment="CENTER" spacing="5" styleClass="whiteBackground, blackborder"
fillWidth="false" StackPane.alignment="CENTER">
<!-- this is where I would like to add components -->
</VBox>
</HBox>
</VBox>
</fx:root>
I have controller for it as well.
Now, I would like to use it like this in some other fxml:
<PopupContainer xmlns="http://javafx.com/javafx"
xmlns:fx="http://javafx.com/fxml"
fx:controller="com.example.bank.editbank.EditBankPresenter"
styleClass="popup"
fx:id="container">
<!-- those components should go to VBOX up there -->
<ViewTitle label="%editBankUC"/>
<Button fx:id="someButton" text="Click me"/>
</PopupContainer>
Of course, when I add components they go directly under StackPane since it is root of the layout. I tried to override getChildren() method to return VBox children but I got children cycle detected. I do not want to add them programatically since it is more then 300 such cases in application but I can add new tag (instead of for example something else). Thanks!
Answering my own question because I think someone else would like to know this too.
So, as I already had before, this is PopupContainer.fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.HBox?>
<?import javafx.geometry.Insets?>
<fx:root type="StackPane" alignment="CENTER" xmlns:fx="http://javafx.com/fxml"
styleClass="popup">
<VBox fx:id="child1" alignment="CENTER">
<HBox alignment="CENTER">
<VBox fx:id="content" alignment="CENTER" spacing="5" styleClass="whiteBackground, blackborder"
fillWidth="false" StackPane.alignment="CENTER">
<padding>
<Insets topRightBottomLeft="10.0" />
</padding>
</VBox>
</HBox>
</VBox>
</fx:root>
And controller PopupContainer.java:
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Node;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import java.io.IOException;
public class PopupContainer extends StackPane {
//refference to VBox from layout
#FXML private VBox content;
public PopupContainer() {
FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("PopupContainer.fxml"));
fxmlLoader.setRoot(this);
fxmlLoader.setController(this);
try {
fxmlLoader.load();
} catch (IOException exception) {
throw new RuntimeException(exception);
}
}
//note this getter, this is the key that allow you to add childred to child of this component
public ObservableList<Node> getItems() {
return content.getChildren();
}
}
And at the end usage goes like this:
<PopupContainer xmlns="http://javafx.com/javafx"
xmlns:fx="http://javafx.com/fxml"
fx:controller="com.example.bank.editbank.EditBankPresenter"
styleClass="popup"
fx:id="container"
>
<!-- this is what was acceptable to do in question so instead of children I am using items (setter in PopupContainer.java) -->
<items>
<ViewTitle label="%editBankUC"/>
<HBox VBox.vgrow="ALWAYS">
<Pane minWidth="20"/>
<VBox alignment="CENTER" spacing="5">
<HorizontalTextInput fx:id="name" label="%nameUC" alignment="CENTER_RIGHT" />
<HorizontalTextInput fx:id="bic" label="%bicUC" alignment="CENTER_RIGHT" />
<AddressInput fx:id="address" />
<HorizontalCheckboxInput fx:id="active" label="%activeUC" />
</VBox>
<Pane minWidth="20"/>
</HBox>
<HBox alignment="CENTER" spacing="5">
<JFXButton fx:id="close" onAction="#closeView" text="%closeUC" />
<JFXButton fx:id="edit" onAction="#editClicked" />
<padding>
<Insets top="10.0" bottom="10.0" />
</padding>
</HBox>
</items>
</PopupContainer>
I hope it is clear, how to add it. I did not find nothing familiar to this elsewhere but looking at the source of BorderPane can give you a hint how to do it. Cheers
Related
I have a simple JavaFX application, a BorderLayout with an AnchorPane and inside two panes, one contains a HBox and a VBox with a TextArea and a ListView. I would like them to increase in width, as I increase the window size. I have tried Vgrow/Hgrow = 'ALWAYS' and Max Width/Max Height = 'MAX_VALUE' on the the controls but nothing works.- (I use Scene Builder to create the fxml)
The FXML is the following:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.VBox?>
<BorderPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1">
<center>
<AnchorPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="200.0" BorderPane.alignment="CENTER">
<children>
<Pane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="200.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0" />
<Pane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="200.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="200.0">
<children>
<HBox maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="200.0">
<children>
<VBox maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="200.0" HBox.hgrow="ALWAYS">
<children>
<TextArea maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="200.0" VBox.vgrow="ALWAYS" />
<ListView maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="200.0" VBox.vgrow="ALWAYS" />
</children>
</VBox>
</children>
</HBox>
</children>
</Pane>
</children>
</AnchorPane>
</center>
</BorderPane>
My java application class (HelloApplication):
package com.example.demo;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;
import java.io.IOException;
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());
stage.setTitle("Hello!");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch();
}
}
UPDATE: I removed the unnecessary AnchorPane and other Panes, kept only a VBox and placed it in another BorderLayout, take a look, now seems perfect :)
Don't hard-code sizes, and don't use layout panes such as Pane and AnchorPane that rely on hard-coded sizes except in very rare circumstances.
(You may sometimes need to set the max size to Double.MAX_VALUE to allow a control to grow beyond its preferred size, but even that is not necessary in this example, as far as I can tell.)
Your FXML has an empty Pane and at least two redundant wrapper containers which only wrap one node (the other Pane and the AnchorPane). Remove all of these and the hard-coded values and it will work:
<?import javafx.scene.control.ListView?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.layout.*?>
<BorderPane xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1">
<center>
<HBox>
<children>
<VBox HBox.hgrow="ALWAYS">
<children>
<TextArea VBox.vgrow="ALWAYS" />
<ListView VBox.vgrow="ALWAYS" />
</children>
</VBox>
</children>
</HBox>
</center>
</BorderPane>
Depending on your real use-case, you may not need the HBox either:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.layout.*?>
<BorderPane xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1">
<center>
<VBox>
<children>
<TextArea VBox.vgrow="ALWAYS" />
<ListView VBox.vgrow="ALWAYS" />
</children>
</VBox>
</center>
</BorderPane>
I have a few UI elements that I want stacked vertically, in the center of the panel, all aligned on the left edge of the center. I've tried to do this with a VBox, and it was working until I added an item that had text that was too long; it always truncates the text with ellipsis's and I can't get it to wrap the text down to the next line. I set the wrapText param to true on the Checkbox, but it doesn't seem to respect it. I've tried setting perfWidth and maxWidth on the checkbox and the vbox it is inside of but nothing seems to work. Can anyone tell me what I am doing wrong?
Screenshot:
textwrap.fxml
<?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.ToggleGroup?>
<VBox xmlns:fx="http://javafx.com/fxml" maxWidth="100"
prefHeight="200" prefWidth="300" alignment="BASELINE_CENTER" spacing="30">
<VBox alignment="CENTER" maxWidth="100" prefWidth="100">
<VBox spacing="10" style=" -fx-border-color:black; -fx-border-width: 1; -fx-border-style: solid;" alignment="BASELINE_LEFT"
>
<padding>
<Insets top="0" right="0" bottom="10" left="5"/>
</padding>
<RadioButton text="Option 1">
<toggleGroup>
<ToggleGroup fx:id="group"/>
</toggleGroup>
<selected>true</selected>
</RadioButton>
<RadioButton text="Option 2">
<toggleGroup>
<fx:reference source="group"/>
</toggleGroup>
</RadioButton>
</VBox>
<CheckBox text="My Long Textbox Text" selected="true" wrapText="true">
</CheckBox>
</VBox>
</VBox>
TextWrap.java
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class TextWrap extends Application
{
#Override
public void start(Stage stage) throws Exception
{
Parent root = FXMLLoader.load(getClass().getResource("textwrap.fxml"));
Scene scene = new Scene(root, 300, 275);
stage.setTitle("Text Wrap");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args)
{
launch();
}
}
EDIT - as #jewelsea pointed out below, the issues was BASELINE_CENTER in the root VBox; changing that to center removed the truncation issue. This had the unintended side effect of making the outside around the radio boxes extend farther than I liked:
by adding
<maxWidth><Control fx:constant="USE_PREF_SIZE" /></maxWidth>
to the inner VBOX I was able to correct this:
I also found out, that if for some reason I was wed to BASELINE_CENTER, I could still fix the issue with the checkbox text by adding
<minWidth><Control fx:constant="USE_PREF_SIZE" /></minWidth>
to the checkbox to get the same effect.
This is what I came up with, try it and see if it is what you want.
You may need to change some things to reach your final desired layout, but hopefully this addresses your immediate wrapping issue.
I think the BASELINE_CENTER alignment on the outer VBox was confusing things, but I changed a couple of other things, so it may have been something else.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.RadioButton?>
<?import javafx.scene.control.ToggleGroup?>
<?import javafx.scene.layout.VBox?>
<VBox alignment="CENTER" prefHeight="200.0" prefWidth="300.0" xmlns="http://javafx.com/javafx/17"
xmlns:fx="http://javafx.com/fxml/1">
<children>
<VBox maxWidth="100.0" prefWidth="100.0">
<VBox alignment="BASELINE_LEFT" spacing="10"
style=" -fx-border-color:black; -fx-border-width: 1; -fx-border-style: solid;">
<padding>
<Insets bottom="10" left="5" right="0" top="0"/>
</padding>
<RadioButton text="Option 1">
<toggleGroup>
<ToggleGroup fx:id="group"/>
</toggleGroup>
<selected>true</selected>
</RadioButton>
<RadioButton text="Option 2">
<toggleGroup>
<fx:reference source="group"/>
</toggleGroup>
</RadioButton>
</VBox>
<CheckBox selected="true" text="My Long Textbox Text" wrapText="true">
</CheckBox>
</VBox>
</children>
</VBox>
I'm working on a desktop application using javaFX, I'm using scene builder version 11 to create my interface that contains TextFields and ChoiceBox, my inputs are supposed to be set in Arabic. The problem is when I retrieve the text from the TextFiled or the ChoiceBox and print it in the console it shows characters like that "بننلنلن" and it also generates a problem to store the inputs in database, this is the SQLException:
java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near 'بننلنلن,نبلنبنلب,2021-06-30,أمر جزائي,تم التبليغ
When I tried another project without scene builder I got the Arabic outputs correctly, could scene bulider be the problem's origin?
here is my fxml file:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ChoiceBox?>
<?import javafx.scene.control.DatePicker?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<AnchorPane id="AnchorIns" prefHeight="529.0" prefWidth="523.0" stylesheets="#newinsc.css" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="newInsc.NewInscController">
<children>
<VBox fx:id="boxContainer" layoutX="139.0" layoutY="99.0" prefHeight="273.0" prefWidth="245.0">
<children>
<HBox alignment="CENTER_RIGHT" prefHeight="42.0" prefWidth="245.0">
<children>
<TextField fx:id="firstNameTxtField" alignment="CENTER_RIGHT" />
<Label alignment="CENTER_RIGHT" contentDisplay="RIGHT" prefHeight="17.0" prefWidth="71.0" stylesheets="#newinsc.css" text="الاسم" />
</children>
</HBox>
<HBox alignment="CENTER_RIGHT" prefHeight="42.0" prefWidth="245.0">
<children>
<TextField fx:id="lastNameTxtField" alignment="CENTER_RIGHT" />
<Label prefHeight="17.0" prefWidth="71.0" text="اللقب" />
</children>
</HBox>
<HBox alignment="CENTER_RIGHT" prefHeight="42.0" prefWidth="245.0">
<children>
<ChoiceBox fx:id="docTypeChoice" prefWidth="150.0" />
<Label prefHeight="17.0" prefWidth="71.0" text="نوع التبليغ" />
</children>
</HBox>
<HBox alignment="CENTER_RIGHT" prefHeight="42.0" prefWidth="245.0">
<children>
<DatePicker fx:id="dateField" prefHeight="25.0" prefWidth="149.0" />
<Label prefHeight="17.0" prefWidth="71.0" text="التاريخ" />
</children>
</HBox>
<HBox alignment="CENTER_RIGHT" prefHeight="42.0" prefWidth="245.0">
<children>
<ChoiceBox fx:id="tablighCase" prefWidth="150.0" />
<Label prefHeight="17.0" prefWidth="71.0" text="حالة التبليغ" />
</children>
</HBox>
<HBox alignment="CENTER" onMouseClicked="#cancelBtnClicked" prefHeight="46.0" prefWidth="245.0">
<children>
<Button fx:id="cancleBtn" mnemonicParsing="false" onMouseClicked="#cancelBtnClicked" text="الغاء">
<HBox.margin>
<Insets right="16.0" />
</HBox.margin>
</Button>
<Button fx:id="saveInscBtn" mnemonicParsing="false" onMouseClicked="#registerBtnClicked" text="تسجيل" />
</children>
</HBox>
</children>
</VBox>
</children>
</AnchorPane>
and this here is my controller file:
package newInsc;
import DB.dbConnection;
import java.net.URL;
import java.sql.Connection;
import java.sql.SQLException;
import java.sql.Statement;
import java.time.LocalDate;
import java.util.ResourceBundle;
import java.util.logging.Level;
import java.util.logging.Logger;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ChoiceBox;
import javafx.scene.control.DatePicker;
import javafx.scene.control.TextField;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
/**
* FXML Controller class
*
* #author asus
*/
public class NewInscController implements Initializable {
#FXML
private ChoiceBox<String> docTypeChoice;
#FXML
private ChoiceBox<String> tablighCase;
#FXML
private DatePicker dateField;
#FXML
private Button saveInscBtn;
#FXML
private TextField firstNameTxtField;
#FXML
private TextField lastNameTxtField;
#FXML
private Button cancleBtn;
private Connection c;
private Statement s;
#FXML
private VBox boxContainer;
#Override
public void initialize(URL url, ResourceBundle rb) {
docTypeChoice.getItems().add("أمر جزائي");
docTypeChoice.getItems().add("حكم جزائي" );
docTypeChoice.getItems().add("تكليف بالحضور" );
docTypeChoice.getItems().add("قرار جزائي" );
tablighCase.getItems().add("تم التبليغ");
tablighCase.getItems().add("ترك اشعار");
tablighCase.getItems().add("عدم التمكن من التبليغ");
}
#FXML
private void cancelBtnClicked(MouseEvent event) {
Stage s = (Stage) cancleBtn.getScene().getWindow();
}
#FXML
private void registerBtnClicked(MouseEvent event) {
try {
String query;
String fname = firstNameTxtField.getText();
String lname = lastNameTxtField.getText();
LocalDate date = dateField.getValue();
String docType = docTypeChoice.getValue();
String state = tablighCase.getValue();
query = "insert into infotable values " + fname + "," + lname + "," + date+ ","+ docType+"," +state ;
dbConnection dbc = new dbConnection();
s = dbc.createConnection().createStatement();
s.execute(query);
s.close();
} catch (SQLException ex) {
Logger.getLogger(NewInscController.class.getName()).log(Level.SEVERE, null, ex);
}
}
}
I could find a solution, before I run the program I first compile it with F9 key then I run it with a key combination SHIFT + F6
I am creating a basic game launcher in JavaFX with SceneBuilder. Since SceneBuilder works in FXML, my launcher layout is in FXML. I have a method in my main class that I want to call on a button click. I read that you could use
#methodName
In the button's
onAction
property, but this does not work.
My main Java class:
#FXML
private void launchGame(ActionEvent e) {
System.out.println("Launching...");
}
#Override
public void start(Stage primaryStage) throws IOException {
Parent root = FXMLLoader.load(Main.class.getResource("launcher.fxml"));
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.setTitle("First Week Login");
primaryStage.setResizable(false);
primaryStage.sizeToScene();
primaryStage.show();
}
My FXML file:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.text.Text?>
<?import javafx.scene.web.WebView?>
<AnchorPane xmlns:fx="http://javafx.com/fxml/1"
xmlns="http://javafx.com/javafx/8.0.102">
<children>
<BorderPane prefHeight="493.0" prefWidth="664.0" styleClass="background"
stylesheets="#launcher.css">
<bottom>
<HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0"
BorderPane.alignment="CENTER">
<children>
<Button alignment="CENTER" mnemonicParsing="false"
text="Launch Game" onAction="#launchGame" />
</children>
</HBox>
</bottom>
<top>
<HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0"
BorderPane.alignment="CENTER">
<children>
<Text strokeType="OUTSIDE" strokeWidth="0.0"
styleClass="title" text="First Week" />
</children>
</HBox>
</top>
<center>
<WebView prefHeight="200.0" prefWidth="200.0"
BorderPane.alignment="CENTER" />
</center>
</BorderPane>
</children>
</AnchorPane>
You need to create a separate Controller class and specify it in top AnchorPane tag with fx:controller="packageName.Classname"
Like this:
<AnchorPane xmlns:fx="http://javafx.com/fxml/1"
xmlns="http://javafx.com/javafx/8.0.102"
fx:controller="com.packageName.Controller">
The called method should be inside the specified Controller class.
com.packageName is just an example, you should use the name of the package where you put the Controller class or no package name if it's not in any package.
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.