JavaFX controller injection does not work - javafx

I have two fxml files. I connect them with an include statement:
The "main" fxmlfile looks like that:
<?import javafx.geometry.*?>
// ...
<BorderPane prefHeight="962" prefWidth="1280" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.MyMainController">
<center>
<SplitPane dividerPositions="0.63" BorderPane.alignment="CENTER">
<items>
<fx:include source="AnotherFile.fxml" />
// ...
</items>
</SplitPane>
</center>
<top>
// ...
</top>
</BorderPane>
And the second one (= "AnotherFile.fxml") like that:
<?import java.lang.*?>
// ...
<SplitPane dividerPositions="0.15" orientation="VERTICAL" prefHeight="400.0" prefWidth="500.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
<items>
// ...
<Label fx:id="oneOfMyLabels" text="myText" GridPane.columnIndex="2" GridPane.rowIndex="1" />
</items>
</SplitPane>
Now, I am using injections in the "main"-controller application.MyMainController:
#FXML
private Label oneOfMyLabels;
If I run the controller I get a java.lang.NullPointerException exception, respectively a java.lang.reflect.InvocationTargetException one. In debugging mode I found out, that the injected Label is null!
Now, my question:
Can't reach the MyMainController from the "main fxml file" the components of the included fxml file?? Do I have to use an own controller on each fxml file, if it is included or not?!
Thanks for your help!!

You need to have a different controller for each FXML file, and the fx:id-annotated elements of each file will be injected into the corresponding controller instance.
When you have included FXML files, you can inject the controller for the included file into the controller for the including file, by setting an fx:id attribute on the fx:include element:
"main" fxml file:
<?import javafx.geometry.*?>
// ...
<BorderPane prefHeight="962" prefWidth="1280" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.MyMainController">
<center>
<SplitPane dividerPositions="0.63" BorderPane.alignment="CENTER">
<items>
<fx:include fx:id="another" source="AnotherFile.fxml" />
// ...
</items>
</SplitPane>
</center>
<top>
// ...
</top>
</BorderPane>
and in the "main controller":
public class MyMainController {
#FXML
private AnotherController anotherController ;
// ...
}
(the rule being that the field name is the value of the fx:id attribute with "Controller" appended). Here AnotherController is the controller class for AnotherFile.fxml.
Now you can, for example, expose the data you need to access in the "included controller":
public class AnotherController {
#FXML
private Label oneOfMyLabels ;
public StringProperty textProperty() {
return oneOfMyLabels.textProperty();
}
public final String getText() {
return textProperty().get();
}
public final setText(String text) {
textProperty().set(text);
}
// ...
}
and then your main controller can do things like
anotherController.setText(...);
which will of course update the label. This preserves encapsulation, so that if you choose to use another control instead of a label, those changes do not have to propagate outside of the immediate controller.

Related

JavaFX: Original layout of GridPane altered after switching scenes using getChildren().setAll()

To summarize, I have various FXML files and various corresponding controllers, and to switch between them I am using the following code:
#FXML
public void openInputPane() throws IOException {
BorderPane inputMenu = FXMLLoader.load(getClass().getResource("inputSection/firstPage/inputEquationMenu.fxml"));
mainBorderPane.getChildren().setAll(inputMenu);
}
My main fxml file is a GridPane and the rest are BorderPanes, and this method of using .getChildren().setAll(anotherPane) works perfectly until I try to return to the main GridPane:
public void goToMainMenu() throws IOException {
URL url = new File("C:\\Users\\Luisa" +
"\\IdeaProjects\\IA\\src\\sample\\mainmenu.fxml").toURI().toURL();
GridPane mainMenu = FXMLLoader.load(url);
successMessageBorderPane.getChildren().setAll(mainMenu);
}
The above code does display the original main menu, but messes up the formatting, attached are pictures of the main menu when I first open the programme and the main menu after returning to it.
after returning to main
main at the start of the programme
My question is, what is messing up the formatting when I go back to the main page, and what do I have to do to fix it?
For more details I'm attaching the fxml file for the main GridPane and the last BorderPane (the one where a button is clicked to return to the main GridPane) and their respective controllers.
mainmenu.fxml
<?import javafx.scene.control.Button?> <?import javafx.scene.control.Label?> <?import javafx.scene.layout.GridPane?> <?import javafx.scene.text.Font?> <?import javafx.scene.layout.HBox?>
<GridPane fx:controller="sample.Controller" xmlns:fx="http://javafx.com/fxml"
stylesheets="#resources/styles.css" fx:id="mainBorderPane" prefHeight="400" prefWidth="500" vgap="20"
hgap="20" alignment="CENTER">
<HBox GridPane.columnIndex="0" GridPane.rowIndex="0">
<Label text="Physics Formula Storage">
<font>
<Font size="40"/>
</font>
</Label>
</HBox>
<HBox GridPane.rowIndex="1" spacing="35">
<Button text="Insert Equations" onAction="#openInputPane"/>
<Button text="Use Equations"/>
</HBox>
<HBox GridPane.rowIndex="2" spacing="20"
prefWidth="340">
<Label text="Input new equations along with their properties into the storage system" prefWidth="150"
style= "-fx-font-size: 14"/>
<Label text="Find and use equations already in the storage system" prefWidth="150" style= "-fx-font-size: 14"/>
</HBox>
</GridPane>
Controller
package sample;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import java.io.IOException;
public class Controller {
#FXML
GridPane mainBorderPane;
// switching to the input pane if the button is clicked
#FXML
public void openInputPane() throws IOException {
BorderPane inputMenu = FXMLLoader.load(getClass().getResource("inputSection/firstPage/inputEquationMenu.fxml"));
mainBorderPane.getChildren().setAll(inputMenu);
}
}
successMessageMenu.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.shape.Line?>
<?import javafx.scene.text.Font?>
<BorderPane xmlns="http://javafx.com/javafx"
xmlns:fx="http://javafx.com/fxml"
fx:controller="sample.inputSection.thirdPage.SuccessMessageController"
prefHeight="400.0" prefWidth="600.0" stylesheets="#../../resources/styles.css"
fx:id="successMessageBorderPane">
<padding>
<Insets top="30" right="50" bottom="30" left="50"/>
</padding>
<top>
<VBox prefHeight="50">
<Label alignment="BOTTOM_LEFT" text="Equation added successfully">
<font>
<Font size="17"/>
</font>
</Label>
<Line startX="50" startY="50" endX="550" endY="50"/>
</VBox>
</top>
<center>
<VBox prefHeight="300" alignment="CENTER">
<Label text="Equation has been added successfully" style="-fx-font-style: italic">
<font>
<Font size="40"/>
</font>
</Label>
</VBox>
</center>
<bottom>
<VBox alignment="BOTTOM_CENTER" prefHeight="50">
<Button text="Return to main menu" fx:id="mainMenuButton"
onAction="#goToMainMenu"/>
</VBox>
</bottom>
</BorderPane>
successMenuController
public class SuccessMessageController {
#FXML
Button mainMenuButton;
#FXML
BorderPane successMessageBorderPane;
public void goToMainMenu() throws IOException {
URL url = new File("C:\\Users\\Luisa" +
"\\IdeaProjects\\IA\\src\\sample\\mainmenu.fxml").toURI().toURL();
GridPane mainMenu = FXMLLoader.load(url);
successMessageBorderPane.getChildren().setAll(mainMenu);
}
}
(it is my first time asking a question, do tell me if I need to add anymore code, thank you!)

Placing a JavaFX custom control in a GridPane

I followed Oracle's Mastering FXML tutorial, specifically the tutorial for making a custom control, works fine as a standalone. But if I want to place this custom control in a GridPane, how can I place it with the GridPane's column and row attributes? Trying to place the custom control in the FXML file just gives me an error that the class is not a valid type.
My custom control FXML (view_navigation.fxml):
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<fx:root type="javafx.scene.layout.HBox" xmlns:fx="http://javafx.com/fxml">
<Button>
<graphic>
<ImageView>
<Image url="#/toolbarButtonGraphics/navigation/Back24.gif"/>
</ImageView>
</graphic>
</Button>
<Button text="Add Entry" />
<Button text="Change Entry" />
<Button text="View List" />
<Button>
<graphic>
<ImageView>
<Image url="#/toolbarButtonGraphics/navigation/Forward24.gif"/>
</ImageView>
</graphic>
</Button>
</fx:root>
Its associated class (ViewNavigationControl.java):
import java.io.IOException;
import javafx.fxml.FXMLLoader;
import javafx.scene.layout.HBox;
public class ViewNavigationControl extends HBox {
public ViewNavigationControl() {
FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("view_navigation.fxml"));
fxmlLoader.setRoot(this);
fxmlLoader.setController(this);
try {
fxmlLoader.load();
} catch (IOException exception) {
throw new RuntimeException(exception);
}
}
}
Placing it at the bottom of the parent view's GridPane, per the very last paragraph in the tutorial:
....
<HBox GridPane.columnIndex="0" GridPane.rowIndex="3" GridPane.columnSpan="2">
<ViewNavigationControl />
</HBox>
</GridPane>
I get javafx.fxml.LoadException: ViewNavigationControl is not a valid type.
THANKS for any help at all!

javaFX :: popup window launches, but controller doesn't...?

I am writing an app where I need the same custom popup window to appear when different buttons are clicked. Right now the popup is just a simple "Are You Sure? OK/Cancel" window, but later it will expand to include more customized features... so I can't use the quickie Dialog built-ins.
Here's the weird thing. When Button X is pushed, the popUp (defined in FXML) launches just fine, but my controller class doesn't seem to be running. I didn't think that you could do that. What I can't figure out is why the controller isn't running. I would have thought the app would crash if the controller wasn't working.
Here' the code a button will call to launch the popup:
private void popUpLaunch(Button caller){
Stage popUpStage = new Stage();
Parent root;
try {
root = FXMLLoader.load(getClass().getResource("popUp1.fxml"));
popUpStage.setScene(new Scene(root));
popUpStage.initModality(Modality.APPLICATION_MODAL); // popup
popUpStage.initOwner(caller.getScene().getWindow());
popUpStage.showAndWait();
} catch (IOException e) {
e.printStackTrace();
}
}
All of that works great. Here's the complete FXML, /src/sl/view/popUp1.fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="130.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sl.view.PopUp1Controller">
<children>
<Text fx:id="popUpMessageText" layoutX="14.0" layoutY="14.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Message Goes Here" textAlignment="CENTER" wrappingWidth="577.6708984375" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<font>
<Font size="38.0" />
</font>
</Text>
<Button fx:id="btnPopUpOK" layoutX="126.0" layoutY="68.0" mnemonicParsing="false" prefHeight="31.0" prefWidth="157.0" text="OK" />
<Button fx:id="btnPopUpCancel" layoutX="286.0" layoutY="68.0" mnemonicParsing="false" prefHeight="31.0" prefWidth="169.0" text="Cancel" />
</children>
</AnchorPane>
The window loads just fine. And finally, here's the complete controller, /src/sl/view/PopUp1Controller.java:
package sl.view;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class PopUp1Controller {
#FXML Text popUpMessageText;
#FXML Button btnPopUpOK;
#FXML Button btnPopUpCancel;
Stage stage;
public void start(Stage stage) throws Exception{
System.out.println("Popup controller launched!"); // never reach this... so the controller is not launching???
this.stage = stage;
popUpMessageText.setText("Interesting message here!");
btnPopUpOK.setOnAction(event -> {
System.out.println("You cliced OK...");
});
btnPopUpCancel.setOnAction(event -> {
System.out.println("You cliced Cancel");
stage.close();
});
}
}
Some thoughts...
I used SceneBuilder to generate the FXML. When I assigned the Controller Class for that AnchorPane, I picked "sl.view.PopUp1Controller" from the drop-down menu. So I'm pretty sure that's right.
Also: I've looked through the other "JavaFX Popup" posts, but I don't see one that specifically addresses my issue. A lot of post are like the below post which are basically, "Why not use these other popup options rather than re-invent the wheel?" e.g.:
JavaFX 2 custom popup pane
In my case, I do want to reinvent the wheel, because I need my popups to carry more-then-usual functionality, they will not be simple dialog boxes.
If you want code in a controller to execute when the controller is initialized, put it in the initialize() method (see the documentation):
public class PopUp1Controller {
#FXML Text popUpMessageText;
#FXML Button btnPopUpOK;
#FXML Button btnPopUpCancel;
public void initialize() {
System.out.println("Popup controller launched!"); // never reach this... so the controller is not launching???
popUpMessageText.setText("Interesting message here!");
btnPopUpOK.setOnAction(event -> {
System.out.println("You cliced OK...");
});
btnPopUpCancel.setOnAction(event -> {
System.out.println("You cliced Cancel");
btnPopupCancel.getScene().getWindow().hide();
});
}
}

JavaFX Custom Control revisited

I have run the Mastering FXML example, How to create custom components in JavaFX 2.0 using FXML and tried various other solutions from this site, but I still haven't found a simple enough example showing how to set up a custom control that is NOT the only part of the GUI. Since the question is still popping up it seems we need a simpler example for some of us..
I'm trying to create a simple control consisting of a vertical SplitPane with a Button in the top section and a label in the lower section. Then I want to place instances of this SplitPane-control in multiple tabs in a TabPane.
Either the control won't show up, or I get stuck in various errors, depending on which example I try to follow. So, I'll backtrack a bit and will just simply ask: How do I separate out the SplitPane to be the custom control here?
Here is the FXML document:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.layout.AnchorPane?>
<TabPane prefHeight="256.0" prefWidth="477.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1" fx:controller="customcontroltest.FXMLDocumentController">
<tabs>
<Tab>
<content>
<SplitPane dividerPositions="0.5" orientation="VERTICAL" prefHeight="114.0" prefWidth="160.0">
<items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children>
<Button fx:id="button" onAction="#handleButtonAction" text="Click Me!" />
</children>
</AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children>
<Label fx:id="label" minHeight="16" minWidth="69" />
</children>
</AnchorPane>
</items>
</SplitPane>
</content>
</Tab>
</tabs>
</TabPane>
And the controller class:
package customcontroltest;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
public class FXMLDocumentController implements Initializable
{
#FXML
private Label label;
#FXML
private void handleButtonAction(ActionEvent event)
{
label.setText("Hello World!");
}
#Override
public void initialize(URL url, ResourceBundle rb)
{
// TODO
}
}
And the main test class:
package customcontroltest;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class CustomControlTest 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();
}
public static void main(String[] args)
{
launch(args);
}
}
I made a new FXML file and cut/pasted the whole SplitPane tag and all its contents into it. I replaced the SplitPane tag in the FXML document with <packageName.ControlClassName />. Then I made the controller class to extend SplitPane. I've tried specifying the controller in the FXML tag and/or in the controller class, but never got it right.
Would someone with the right knowledge be willing to take a few minutes to just show a working example of this? I'm guessing more people would find such an example very useful.
So, the SplitPane should be the new custom control, and you can then by default load it into the first tab in the TabPane. Then I will write code to add more instances into subsequent tabs.
Thank you so very much in advance.
UPDATE:
I have broken out the SplitPane into its own FXML and controller class.
Here is the FXML (CustomSplitPane.fxml):
<fx:root type="javafx.scene.control.SplitPane" dividerPositions="0.5" orientation="VERTICAL" prefHeight="114.0" prefWidth="160.0" xmlns:fx="http://javafx.com/fxml/1" fx:controller="customcontroltest.CustomSplitPaneController">
<items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children>
<Button fx:id="button" onAction="#handleButtonAction" text="Click Me!" />
</children>
</AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children>
<Label fx:id="label" minHeight="16" minWidth="69" />
</children>
</AnchorPane>
</items>
</fx:root>
And the controller class (CustomSplitPaneController.java):
package customcontroltest;
public class CustomSplitPaneController extends AnchorPane
{
#FXML
private Label label;
private SplitPane mySplitPane;
public CustomSplitPaneController()
{
FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("CustomSplitPane.fxml"));
try
{
fxmlLoader.load();
} catch (IOException exception)
{
throw new RuntimeException(exception);
}
}
#FXML
private void handleButtonAction(ActionEvent event)
{
label.setText("Hello World!");
}
}
And the original main FXML now looks like this:
<TabPane prefHeight="256.0" prefWidth="477.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1" fx:controller="customcontroltest.FXMLDocumentController">
<tabs>
<Tab>
<content>
<customcontroltest.CustomSplitPaneController />
</content>
</Tab>
</tabs>
</TabPane>
The fxmlLoader.load() in the CustomSplitPaneController seems to be causing a java.lang.StackOverflowError.
Maybe it's more evident now to someone here what I'm missing?
Thanks again.
The fx:controller attribute in an FXML file is an instruction for the FXML loader to create an instance of the specified class and use it as the controller for the UI hierarchy defined by the FXML.
In the attempt to create a custom split pane that you posted, what happens when you create an instance of CustomSplitPaneController is:
You create an FXMLLoader in the constructor of CustomSplitPaneController, which loads CustomSplitPane.fxml
CustomSplitPane.fxml has a fx:controller attribute specifying CustomSplitPaneController as the controller class, so it creates a new instance of CustomSplitPaneController (by calling its constructor, of course)
The constructor of CustomSplitPaneController creates an FXMLLoader which loads CustomSplitPane.fxml
and so on.
So very quickly, you get a stack overflow exception.
Control classes in JavaFX encapsulate both the view and the controller. In the standard JavaFX control classes the view is represented by a Skin class, and the controller by a Behavior class. The control class itself extends Node (or a subclass: Region) and when you instantiate it, it instantiates both the skin and the behavior. The skin defines the layout and appearance of the control, and the behavior maps various input actions to actual code that modifies the properties of the control itself.
In the pattern you are trying to replicate, shown here and here, this is slightly modified. In this version, the "view" is defined by an FXML file, and the controller (the behavior) is implemented directly in the control class itself (there is no separate behavior class).
To make this work, you have to use FXML slightly differently to usual. First, when you use your custom control, you are going to instantiate the control class directly (without any knowledge of the FXML that defines its layout). So if you are using this in java, you would do new CustomSplitPane(), and if you are using it in FXML you would do <CustomSplitPane>. Either way, you invoke the constructor of your custom control (which I'm calling CustomSplitPane).
To use CustomSplitPane in the UI hierarchy, it must of course be a Node subclass. If you want it to be a kind of SplitPane, you would make it extend SplitPane:
public class CustomSplitPane extends SplitPane {
// ...
}
Now, in the constructor of CustomSplitPane, you need to load the FXML file that defines the layout, but you need it to lay out the current object. (In the usual usage of an FXML file, the FXMLLoader creates a new node for the root of the hierarchy, of the type specified, and the load() method returns it. You want the FXMLLoader to use the existing object as the root of the hierarchy.) To do this, you use the <fx:root> element as the root element of the FXML file, and you tell the FXMLLoader to use this as the root:
loader.setRoot(this);
Additionally, since the handler methods are defined in the current object, you also want the controller to be the current object:
loader.setController(this);
Since you are specifying an existing object as the controller, you must not have a fx:controller attribute in the FXML file.
So you end up with:
package customcontroltest;
public class CustomSplitPane extends SplitPane {
#FXML
private Label label;
public CustomSplitPaneController() {
FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("CustomSplitPane.fxml"));
fxmlLoader.setRoot(this);
fxmlLoader.setController(this);
try {
fxmlLoader.load();
} catch (IOException exception) {
throw new RuntimeException(exception);
}
}
#FXML
private void handleButtonAction(ActionEvent event)
label.setText("Hello World!");
}
}
and the FXML file:
<fx:root type="javafx.scene.control.SplitPane" dividerPositions="0.5" orientation="VERTICAL" prefHeight="114.0" prefWidth="160.0" xmlns:fx="http://javafx.com/fxml/1" >
<items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children>
<Button fx:id="button" onAction="#handleButtonAction" text="Click Me!" />
</children>
</AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children>
<Label fx:id="label" minHeight="16" minWidth="69" />
</children>
</AnchorPane>
</items>
</fx:root>
And now you can use this in another FXML file as you need:
<TabPane prefHeight="256.0" prefWidth="477.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1" fx:controller="customcontroltest.FXMLDocumentController">
<tabs>
<Tab>
<content>
<customcontroltest.CustomSplitPane />
</content>
</Tab>
</tabs>
</TabPane>
Your custom control class should extends one of the Parent class, for example Region or Pane. If you are too lazy to do layout stuff, just extend an advanced pane like GridPane.
Then your custom control class should load an FXML containing the SplitPane and its children. The controller for the FXML can be simply this custom control class, or you can still separate it out to its personal controller class. The SplitPane node should be added as a child of the custom control class; this means that your custom control (which is a Parent type), has to handle some layout logic. At this point, your custom control is complete.
This control is ready to be used in FXML. However, if you want to use it in Scene Builder, you need to package it into a JAR file, and add it to Scene Builder. Note that in order for Scene Builder to work, your custom control class MUST have a parameterless constructor defined.
I'm not entirely sure if this is what you're looking for, but JavaFX controls are based on the Model, View, Controller (MVC) pattern.
Model
Where the Model class is where the any information is stored for your system. For example, if you had a textField, you'd store what value the text field is holding in the model class. I always think of it as a miniature database for my control.
View
The View class is visually what your control looks like. Defining the size, shape, color, etc. A note on "color", this is where you'd set the default color of your control. (this could also be done using FXML, but I personally would rather use java code). The model is often passed to the View constructor as an argument for binding using bean properties. (For java, not sure how you'd do it for FXML)
Controller
The controller class is where manipulation can occur. If I click a button, or change something in my textField, what does the controller do or how does it manipulate the model. The Model and View are both passed as argument to the controller. This gives the controller a reference to the model and the view which allows the controller to manipulate each as designed. Other outside classes can interact with your controller class and your controller class acts on the model and view.
With that said, without any additional information, it looks like everything you're doing is just combining existing controls into something pre-defined for reuse. It may be worth looking into defining a class that extends SplitPane, and a constructor that already adds your button and label to where you want them. Your new class could then be treated like a SplitPane as well as have your action for your button built in.
A really good break down of this is in the book,
Apress JavaFX 8 Introduction By Example Chapter 6
OK, so here is the working solution all laid out, file by file. Hopefully this is useful to someone else too.
CustomControlTest.java
package customcontroltest;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class CustomControlTest 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();
}
public static void main(String[] args)
{
launch(args);
}
}
FXMLDocument.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.layout.AnchorPane?>
<TabPane prefHeight="256.0" prefWidth="477.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1" fx:controller="customcontroltest.FXMLDocumentController">
<tabs>
<Tab>
<content>
<customcontroltest.CustomSplitPaneController />
</content>
</Tab>
</tabs>
</TabPane>
FXMLDocumentController.java
package customcontroltest;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.Initializable;
public class FXMLDocumentController implements Initializable
{
#Override
public void initialize(URL url, ResourceBundle rb)
{
// TODO
}
}
CustomSplitPane.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<fx:root type="javafx.scene.control.SplitPane" dividerPositions="0.5" orientation="VERTICAL" prefHeight="114.0" prefWidth="160.0" xmlns:fx="http://javafx.com/fxml/1" >
<items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children>
<Button fx:id="button" onAction="#handleButtonAction" text="Click Me!" />
</children>
</AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children>
<Label fx:id="label" minHeight="16" minWidth="69" />
</children>
</AnchorPane>
</items>
</fx:root>
The NetBeans IDE will give an error on #handleButtonAction, saying "Controller is not defined on root component", but it won't actually give compilation errors. (This is where I was tricked into not even trying to compile when I saw that highlighted error!)
CustomSplitPaneController.java
package customcontroltest;
import java.io.IOException;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.control.Label;
import javafx.scene.control.SplitPane;
public class CustomSplitPaneController extends SplitPane
{
#FXML
private Label label;
public CustomSplitPaneController()
{
FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("CustomSplitPane.fxml"));
fxmlLoader.setRoot(this);
fxmlLoader.setController(this);
try
{
fxmlLoader.load();
} catch (IOException exception)
{
throw new RuntimeException(exception);
}
}
#FXML
private void handleButtonAction(ActionEvent event)
{
label.setText("Hello World!");
}
}

FXML referencing CSS variables

I have google'd around a bit without an answer. In FXML I know how to reference a css, a style, etc using the styleClass and style tags. I'd like to know if it is possible to reference a single css variable adhoc.
For instance, if I want to set the padding of a pane is it possible to achieve the following, or something similar:
example.css
/* ---------- Constants ---------- */
*{
margin_small: 1.0em;
margin_large: 2.0em;
}
example fxml
<padding>
<Insets bottom="margin_small" left="margin_small" right="margin_small" top="margin_large" />
</padding>
The alternative would be to make a css style for every combination of these, or to reference them with the style tag. I'd prefer to avoid both of those options.
Is this possible ?
I couldn't get to the solution I actually wanted, I would've hoped to be able to include a file (fxml, css, values, etc) and reference directly. The best I could do is to create a POJO with a property for each constant, then defining an instance of the POJO in fxml.
The problem with this is each fxml will be creating a new instance of a class, which is a little wasteful seeing as the constants are static in nature.
The following is what I did:
FXMLConstants.java
// Class instance containing global variables to be referenced in fxml files. This is to allow us to use constants similarly to how Android's xml structure does
public class FXMLConstants
{
private static final DoubleProperty marginSmall = new SimpleDoubleProperty(10);
private static final DoubleProperty marginMedium = new SimpleDoubleProperty(15);
private static final DoubleProperty marginLarge = new SimpleDoubleProperty(25);
public Double getMarginSmall()
{
return marginSmall.getValue();
}
public Double getMarginMedium()
{
return marginMedium.getValue();
}
public Double getMarginLarge()
{
return marginLarge.getValue();
}
}
Example.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import com.example.FXMLConstants?>
<GridPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<fx:define>
<FXMLConstants fx:id="fxmlConsts" />
</fx:define>
<padding>
<Insets bottom="$fxmlConsts.marginMedium" left="$fxmlConsts.marginLarge" right="$fxmlConsts.marginLarge" top="$fxmlConsts.marginMedium" />
</padding>
<children>
<Label text="Test" GridPane.columnIndex="0" GridPane.rowIndex="0" />
</children>
</GridPane>

Resources