We Keep Coding

JavaFX mouse events on a pane below another one in a StackPane

I am writing a JavaFX app. I use a StackPane with two children. The topmost has a transparent background. I want the another pane to capture mouse events.
How can I do this?
I tried to make the top child mouse-transparent, but that makes its children transparent to mouse events.
// sample/Main.java
package sample;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
public class Main extends Application {
public static final String appName = "Application name";
#Override
public void start(Stage primaryStage) throws Exception{
Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
primaryStage.initStyle(StageStyle.UNDECORATED);
root.getStylesheets().add("sample/sample.css");
primaryStage.setTitle("Hello World");
primaryStage.setScene(new Scene(root, 400, 300));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
// sample/Controller.java
package sample;
import javafx.application.Platform;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.AnchorPane;
public class Controller {
#FXML
private AnchorPane topbar;
#FXML
private Label lbAppName;
#FXML
private Button btnCloseApp;
#FXML
private Button button1;
#FXML
private Button button2;
#FXML
private void initialize() {
lbAppName.setText(Main.appName);
// this disables btnCloseApp
topbar.setMouseTransparent(true);
btnCloseApp.setOnAction(event -> {
Platform.exit();
});
button1.setOnAction(event -> {
System.out.println("Clicked button1");
});
button2.setOnAction(event -> {
System.out.println("Clicked button2");
});
}
}
<!-- sample/sample.fxml -->
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<StackPane fx:controller="sample.Controller"
xmlns:fx="http://javafx.com/fxml">
<HBox>
<VBox fx:id="sidebar">
<Button fx:id="button1" text="Button 1"/>
<Button fx:id="button2" text="Button 2"/>
</VBox>
<GridPane fx:id="form">
<Label text="Field 1" GridPane.rowIndex="0" GridPane.columnIndex="0"/>
<TextField fx:id="field1" GridPane.rowIndex="0" GridPane.columnIndex="1"/>
<Label text="Field 2" GridPane.rowIndex="1" GridPane.columnIndex="0"/>
<TextField fx:id="field2" GridPane.rowIndex="1" GridPane.columnIndex="1"/>
</GridPane>
</HBox>
<AnchorPane fx:id="topbar">
<Label fx:id="lbAppName" AnchorPane.topAnchor="8" AnchorPane.leftAnchor="8"/>
<Button fx:id="btnCloseApp" text="Close" AnchorPane.topAnchor="8" AnchorPane.rightAnchor="8"/>
</AnchorPane>
</StackPane>
/* sample/sample.css*/
.root {
-fx-border-color: #a8c;
}
#sidebar {
-fx-padding: 40 8 8 8;
-fx-spacing: 8;
-fx-background-color: #caf;
-fx-pref-width: 150;
}
#form {
-fx-padding: 40 8 8 8;
-fx-hgap: 8;
-fx-vgap: 4;
}

JavaFX Stage shows always empty scene

Using:
IntelliJ IDEA community ide.
Java JDK 9.0.1
Scene builder 9.0.1
I always get empty scene.
Here is the fxml file code:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.GridPane?>
<GridPane alignment="center" hgap="10" vgap="10" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/9.0.1" fx:controller="view.Controller">
<children>
<Button mnemonicParsing="false" text="Button" />
</children>
</GridPane>
Here is the main class code:
package view;
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{
Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
primaryStage.setTitle("Hello World");
primaryStage.setScene(new Scene(root, 600, 400));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}

JavaFX : How to keep the VBox background color persistent?

I've asked this question before but I couldn't offer a preferably a Minimal, Complete, and Verifiable example. So I made another sample which is correctly working and completely minimal. By the way, I want to change the color of a menu box which I click one of those, and it would be remain persistent whenever I click another item such as a button. Here's a sample below and please help me..again..
FXMLDocumentController.java
package javafxapplication1;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.beans.binding.Bindings;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.geometry.Insets;
import javafx.scene.Node;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
/**
*
* #author James
*/
public class FXMLDocumentController implements Initializable {
#FXML
private VBox menuVBox1 = new VBox();
#FXML
private VBox menuVBox2 = new VBox();
#FXML
private VBox menuVBox3 = new VBox();
#FXML
private VBox parentMenuVBox = new VBox(menuVBox1, menuVBox2, menuVBox3);
private final Background focusBackground = new Background(new BackgroundFill(Color.web("#000000"), CornerRadii.EMPTY, Insets.EMPTY));
private final Background unfocusBackground = new Background(new BackgroundFill(Color.web("#F4F4F4"), CornerRadii.EMPTY, Insets.EMPTY));
private void setMenuBoxColor (VBox menu) {
VBox menuVBox = menu;
menuVBox.requestFocus();
for (Node child : parentMenuVBox.getChildren()) {
VBox vb = (VBox) child;
vb.backgroundProperty().bind(Bindings
.when(vb.focusedProperty())
.then(focusBackground)
.otherwise(unfocusBackground)
);
}
}
#FXML
private void handleSelectMenus(MouseEvent event) {
//Change the color of clicked VBox
setMenuBoxColor((VBox)event.getSource());
System.out.println("Menu clicked");
}
#Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
}
}
FXMLDocument.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="132.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxapplication1.FXMLDocumentController">
<left>
<VBox fx:id="parentMenuVBox" prefHeight="200.0" prefWidth="100.0" spacing="10.0" BorderPane.alignment="CENTER">
<children>
<VBox fx:id="menuVBox1" onMouseClicked="#handleSelectMenus" prefHeight="200.0" prefWidth="100.0" style="-fx-border-color: #000000;">
<children>
<Label text="MENU1" />
</children>
</VBox>
<VBox fx:id="menuVBox2" layoutX="10.0" layoutY="10.0" onMouseClicked="#handleSelectMenus" prefHeight="200.0" prefWidth="100.0" style="-fx-border-color: #000000;">
<children>
<Label text="MENU2" />
</children>
</VBox>
<VBox fx:id="menuVBox3" layoutX="10.0" layoutY="160.0" onMouseClicked="#handleSelectMenus" prefHeight="200.0" prefWidth="100.0" style="-fx-border-color: #000000;">
<children>
<Label text="MENU3" />
</children>
</VBox>
</children>
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
</VBox>
</left>
<bottom>
<HBox prefHeight="100.0" prefWidth="200.0" BorderPane.alignment="CENTER">
<children>
<Button mnemonicParsing="false" text="Next" />
</children>
</HBox>
</bottom>
</BorderPane>
javaFXApplication1.java
package javafxapplication1;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
/**
*
* #author James
*/
public class JavaFXApplication1 extends Application {
#Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}

First set the unfocusBackground for all child vboxes, and then set focusBackground for only selected one.
public class FXMLDocumentController implements Initializable
{
#FXML
private VBox parentMenuVBox;
private final Background focusBackground = new Background( new BackgroundFill( Color.web( "#000000" ), CornerRadii.EMPTY, Insets.EMPTY ) );
private final Background unfocusBackground = new Background( new BackgroundFill( Color.web( "#F4F4F4" ), CornerRadii.EMPTY, Insets.EMPTY ) );
#FXML
private void handleSelectMenus( MouseEvent event )
{
// Set unfocusBackground for all child vboxes
for ( Node child : parentMenuVBox.getChildren() )
{
VBox vb = ( VBox ) child;
vb.setBackground( unfocusBackground );
}
// and set focusBackground for only selected one
VBox selected = ( VBox ) event.getSource();
selected.setBackground( focusBackground );
System.out.println( "Menu clicked" );
}
#Override
public void initialize( URL url, ResourceBundle rb )
{
}
}
I changed only the fxml controller from the code in the question.

JavaFX deployment - images get lost

I finished a small private project in JavaFX with e(fx)clipse. Now I would like to export it as a runnable jar file. Everything works fine, except the fact that the pane and button background images get lost. The paths to these images were defined in a seperate CSS file. Other definitions from this file are implemented well, only the images are missing.
Any idea what could be the reason for this? Or is there even a better way to publish a finished java project?

This seems to be a common problem. I struggled with it myself. Take a look at how I reference the css and the image in the css.
Here's a solution that works in the development environment, in Scene Builder and in a packaged JAR.
The folder structure:
Main.java:
package application;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage primaryStage) {
try {
FXMLLoader loader = new FXMLLoader(Main.class.getResource("view/RootLayout.fxml"));
AnchorPane rootLayout = (AnchorPane) loader.load();
Scene scene = new Scene(rootLayout, 400, 400);
scene.getStylesheets().add(getClass().getResource("css/application.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
RootLayout.fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<AnchorPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.view.RootLayoutController">
<children>
<Pane layoutX="0.0" layoutY="0.0" prefHeight="200.0" prefWidth="200.0">
<children>
<Button fx:id="sunButton" layoutX="74.0" layoutY="88.0" mnemonicParsing="false" onAction="#handleSunButtonClick" styleClass="sun-button" stylesheets="#../css/toolbar.css" text="Button" />
</children>
</Pane>
</children>
</AnchorPane>
RootLayoutController.java:
package application.view;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
public class RootLayoutController {
#FXML
Button sunButton;
#FXML
public void handleSunButtonClick() {
System.out.println( "Button clicked");
}
}
toolbar.css:
.sun-button {
-fx-graphic: url('./icons/sun.png');
}
application.css:
.root {
-fx-background-color:lightgray;
}
sun.png:
This works in both the development environment and when you package the JAR (choose "Extract required libraries into generated JAR" in Eclipse).
Screenshot (just a button with an icon loaded via css)

How do you add nodes to an object that is not the main parent (javafx)?

I could not find anything on the topic anywhere i looked. I would like to add a rectangle to my AnchorPane (anchorPaneOne) that is inside my ScrollPane (scrollPane) but whatever i see to do i keep getting errors.
Here is my code:
Main Class:
package application;
import javafx.application.Application;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.AnchorPane;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class Main extends Application {
#FXML
ScrollPane scrollPane;
#FXML
AnchorPane main;
#FXML
AnchorPane anchorPaneOne;
public void start(Stage primaryStage) {
try {
Parent root = FXMLLoader.load(getClass().getResource("/fxml/Main.fxml"));
Scene scene = new Scene(root,600,400);
primaryStage.setScene(scene);
primaryStage.setTitle("Stack Overflow Example");
primaryStage.show();
Rectangle r = new Rectangle();
//It will not let me do anchorPaneOne.getChildren().add(r);
} catch(Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
Main.fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<AnchorPane fx:id="main" 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">
<children>
<ScrollPane fx:id="scrollPane" prefHeight="400.0" prefWidth="600.0">
<content>
<AnchorPane fx:id="anchorPaneOne" minHeight="0.0" minWidth="0.0" prefHeight="800.0" prefWidth="585.0" />
</content>
</ScrollPane>
</children>
</AnchorPane>
Any assistance would be appreciated.
Thanks

The loader needs to know where to inject the instances to - without the field anchorPaneOne can't be instantiated and remains null. That's done by the controller property which must be set before actually loading the ui:
// create a loader
FXMLLoader loader = new FXMLLoader(getClass().getResource(resource));
// set this instance as its controller
loader.setController(this);
// load the ui
Parent root = loader.load();
Scene scene = new Scene(root, 600, 400);
primaryStage.setScene(scene);
primaryStage.setTitle("Stack Overflow Example");
primaryStage.show();
Rectangle r = new Rectangle(100, 100);
// now the field is instantiated and can be accessed without NPE
anchorPaneOne.getChildren().add(r);