The best article I found was: How to create multiple javafx controllers with different fxml files?
However im really confused on how this works. All examples just seem a bit too complex for the initial learning.
So here I have a simple helloWorld for testing purposes. As you can see in the xml, I have a container, menu and footer. However, I want all 3 of them to have seperate controllers and XML files which are then merged and shown as seen in the XML below after the class:
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class HelloWorld extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
FXMLLoader loader = new FXMLLoader();
Parent root = loader.setLocation(getClass().getResource("main.fxml"));
primaryStage.setScene(new Scene(root, 300, 250));
primaryStage.show();
MainController mainController = loader.getController();
}
}
XML
<?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.canvas.*?>
<HBox fx:id="container" id="container" fx:controller="core.GuiController" xmlns:fx="http://javafx.com/fxml">
<HBox fx:id="post" id="post">
<!-- Stuff -->
</HBox>
<HBox fx:id="friends" id="friends">
<!-- Stuff -->
</HBox>
<HBox fx:id="profile" id="profile">
<!-- Stuff -->
</HBox>
</HBox>
I could really benefit from a simple example. How can I keep them in seperate files and merge them while they each retain their own controllers?
You could follow this tutorial
public class MainApp extends Application {
private Stage primaryStage;
private BorderPane rootLayout;
#Override
public void start(Stage primaryStage) {
this.primaryStage = primaryStage;
this.primaryStage.setTitle("AddressApp");
initRootLayout();
showPersonOverview();
}
/**
* Initializes the root layout.
*/
public void initRootLayout() {
try {
// Load root layout from fxml file.
FXMLLoader loader = new FXMLLoader();
loader.setLocation(MainApp.class.getResource("view/RootLayout.fxml"));
rootLayout = (BorderPane) loader.load();
// Show the scene containing the root layout.
Scene scene = new Scene(rootLayout);
primaryStage.setScene(scene);
primaryStage.show();
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* Shows the person overview inside the root layout.
*/
public void showPersonOverview() {
try {
// Load person overview.
FXMLLoader loader = new FXMLLoader();
loader.setLocation(MainApp.class.getResource("view/PersonOverview.fxml"));
AnchorPane personOverview = (AnchorPane) loader.load();
// Set person overview into the center of root layout.
rootLayout.setCenter(personOverview);
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* Returns the main stage.
* #return
*/
public Stage getPrimaryStage() {
return primaryStage;
}
public static void main(String[] args) {
launch(args);
}
}
In this example You have two fxml files, RootLayout.fxml and PersonOverview.fxml.
You set the scene of your primarystage to (BorderPane)RootLayout.fxml then add PersonOverview.fxml to the BorderPane.
Related
I want to make it so that when a button is pressed, different windows are displayed, and for this I need conditions. I don't want to create many methods for each button
This code doesn't work:
#Override
public void buttonOnAction(ActionEvent event){
if(btnReaders.isPressed()){
btnReaders.setOnAction(new EventHandler<ActionEvent>() {
#Override public void handle(ActionEvent e) {
Parent parent = null;
try {
parent = FXMLLoader.load(getClass().getResource("readersMenu.fxml"));
} catch (IOException ex) {
ex.printStackTrace();
}
Scene scene = new Scene(parent);
Stage window = (Stage) ((Node)event.getSource()).getScene().getWindow();
window.setScene(scene);
window.show();
}
});
}
else if(btnDashboard.isPressed()){
btnDashboard.setOnAction(new EventHandler<ActionEvent>() {
#Override public void handle(ActionEvent e) {
Parent parent = null;
try {
parent = FXMLLoader.load(getClass().getResource("librarianMenu.fxml"));
} catch (IOException ex) {
ex.printStackTrace();
}
Scene scene = new Scene(parent);
Stage window = (Stage) ((Node)event.getSource()).getScene().getWindow();
window.setScene(scene);
window.show();
}
});
}
}
Here is an example of a parameterized event handler that will open the selected FXML in a new scene that will be set for the same stage containing the source node of the event.
When the event handler is created, the application stores, in the event handler, the name of the FXML resource to be loaded.
The event handler is assigned to a button action.
When the button is actioned, the event handler loads a new FXML into a new scene and attaches that scene to the window that the button is defined in.
Example App
For this example, FXML files should be in the same location as the package containing the SceneSelector application.
SceneSelector.java
import javafx.application.Application;
import javafx.event.*;
import javafx.fxml.FXMLLoader;
import javafx.geometry.Insets;
import javafx.scene.*;
import javafx.scene.control.Button;
import javafx.scene.layout.*;
import javafx.stage.Stage;
import java.io.IOException;
import java.util.Objects;
public class SceneSelector extends Application {
#Override
public void start(Stage stage) {
Button sceneAButton = new Button("Scene A");
sceneAButton.setOnAction(
new SceneChangeEventHandler(
"sceneA.fxml"
)
);
Button sceneBButton = new Button("Scene B");
sceneBButton.setOnAction(
new SceneChangeEventHandler(
"sceneB.fxml"
)
);
Pane layout = new HBox(10,
sceneAButton,
sceneBButton
);
layout.setPadding(new Insets(10));
layout.setPrefSize(200, 150);
stage.setScene(
new Scene(layout)
);
stage.show();
}
class SceneChangeEventHandler implements EventHandler<ActionEvent> {
private final String fxmlResourceName;
public SceneChangeEventHandler(String fxmlResourceName) {
this.fxmlResourceName = fxmlResourceName;
}
#Override
public void handle(ActionEvent event) {
try {
Stage stage = (Stage) ((Node) event.getSource())
.getScene()
.getWindow();
changeScene(stage, fxmlResourceName);
} catch (IOException e) {
e.printStackTrace();
}
}
}
private void changeScene(
Stage stage,
String fxmlResourceName
) throws IOException {
Parent parent = FXMLLoader.load(
Objects.requireNonNull(
getClass().getResource(
fxmlResourceName
)
)
);
Scene scene = new Scene(parent);
stage.setScene(scene);
stage.setTitle(fxmlResourceName);
stage.show();
}
public static void main(String[] args) {
launch();
}
}
sceneA.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.*?>
<StackPane xmlns="http://javafx.com/javafx"
xmlns:fx="http://javafx.com/fxml"
prefHeight="150.0" prefWidth="200.0" style="-fx-background-color: lemonchiffon;"/>
sceneB.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.*?>
<StackPane xmlns="http://javafx.com/javafx"
xmlns:fx="http://javafx.com/fxml"
prefHeight="150.0" prefWidth="200.0" style="-fx-background-color: azure;"/>
The application works fine up until I put a fx:controller attribute inside of a nested fxml file.
Main class:
#SpringBootApplication
public class MyApplication extends Application{
private Stage primaryStage;
private AnchorPane rootLayout;
public static void main(String[] args) {
SpringApplication.run(MyApplication.class, args);
launch(args);
}
#Override
public void start(Stage primaryStage) {
this.primaryStage = primaryStage;
this.primaryStage.setTitle("Survey Creator");
initRootLayout();
}
private void initRootLayout() {
try {
String pathToCss = "survey-generator/out/production/classes/css/Default.css";
FXMLLoader loader = new FXMLLoader();
loader.setLocation(MyApplication.class.getResource("/view/MainLayout.fxml"));
rootLayout = loader.load();
Scene scene = new Scene(rootLayout);
primaryStage.setScene(scene);
scene.getStylesheets().add(pathToCss);
primaryStage.setResizable(false);
primaryStage.show();
}
catch(Exception e){
throw new RuntimeException(e);
}
}
}
ClientController class:
import javafx.fxml.FXML;
import javafx.scene.control.ComboBox;
public class ClientController {
#FXML
private ComboBox<String> clientList;
#FXML
public void initialize(){
clientList = null;
}
public ClientController(ComboBox<String> clientList) {
this.clientList = clientList;
}
}
FXML:
<AnchorPane xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml" prefHeight="475.0" prefWidth="923.0"
fx:controller="com.surveycreator.controllers.MainController">
<children>
<fx:include source="MyText.fxml"/>
<VBox alignment="CENTER" layoutX="134.0" layoutY="48.0" prefHeight="100.0" prefWidth="668.0">
<children>
<fx:include source="ClientComboBox.fxml" fx:id="clientList"/>
//more stuff below
ClientCombo.fxml - works fine until I add "fx:controller="com.app.controllers.ClientController"
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.ComboBox?>
<ComboBox xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml" prefHeight="25.0" prefWidth="519.0"
promptText="Select Client"/>
After I add the above controller to ClientCombo.fxml I get the following error:
Caused by: java.lang.RuntimeException: javafx.fxml.LoadException:
/C:/Users/myusername/IdeaProjects/survey-generator/out/production/classes/view/ClientComboBox.fxml:7
/C:/Users/myusername/IdeaProjects/survey-generator/out/production/classes/view/MainLayout.fxml:18
at com.app.MyApplication.initRootLayout(MyApplication.java:45)
at com.app.MyApplication.start(MyApplication.java:28)
your not managing fxml context in spring, bootifying should delegate this to spring so try using this
#SpringBootApplication
public class AirQualityFxApplication extends Application {
private ConfigurableApplicationContext context;
private Parent rootNode;
#Override
public void init() throws Exception {
SpringApplicationBuilder builder = new SpringApplicationBuilder(AirQualityFxApplication.class);
context = builder.run(getParameters().getRaw().toArray(new String[0]));
FXMLLoader loader = new FXMLLoader(getClass().getResource("main.fxml"));
loader.setControllerFactory(context::getBean);
rootNode = loader.load();
}
#Override
public void start(Stage primaryStage) throws Exception {
Rectangle2D visualBounds = Screen.getPrimary().getVisualBounds();
double width = visualBounds.getWidth();
double height = visualBounds.getHeight();
primaryStage.setScene(new Scene(rootNode, width, height));
primaryStage.centerOnScreen();
primaryStage.show();
}
#Override
public void stop() throws Exception {
context.close();
}
}
I'm trying to resize a canvas in Javafx. I am using scene builder and fxml. So far, when the user clicks on the canvas the canvas turns black, and when I resize the screen and click on the canvas only the original size of the canvas turns black (canvas is not being resized). I'm not sure how to solve this. Any ideas or solutions would help alot.
Code:
Controller:
public class MainFXMLController implements Initializable
{
#FXML
private Canvas mainCanvas;
#FXML
public GraphicsContext gc;
public void initGraphics()
{
gc = mainCanvas.getGraphicsContext2D();
}
public void drawClicked(MouseEvent me)
{
gc.clearRect(0, 0, mainCanvas.getWidth(), mainCanvas.getHeight());
gc.setFill(Color.BLACK);
gc.fillRect(0, 0, mainCanvas.getWidth(), mainCanvas.getHeight());
System.out.println("Current mosue position: " + me.getX() + ":" + me.getY());
}
#Override
public void initialize(URL url, ResourceBundle rb)
{
initGraphics();
}
}
Fxml:
<AnchorPane id="AnchorPane" prefHeight="600.0" prefWidth="750.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="app.MainFXMLController">
<children>
<Canvas fx:id="mainCanvas" height="565.0" onMouseClicked="#drawClicked" width="750.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="35.0" />
Main Java file:
public class DrawFx extends Application
{
#Override
public void start(Stage stage) throws Exception
{
Parent root = FXMLLoader.load(getClass().getResource("MainFXML.fxml"));
Scene scene = new Scene(root);
stage.setTitle("DrawFx");
stage.getIcons().add(new Image("/icon/icon.png"));
stage.setScene(scene);
stage.show();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args)
{
launch(args);
}
}
First some Javadocs :)
A Canvas node is constructed with a width and height that specifies the size of the image into which the canvas drawing commands are rendered. All drawing operations are clipped to the bounds of that image.
So every time the user resize the window we need to change the width of the canvas and then we need to re-draw the canvas.
Lets start by adding a fx:id to the root layout.
<AnchorPane fx:id="anchorPane" prefHeight="600.0" prefWidth="750.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="app.MainFXMLController">
<children>
<Canvas fx:id="mainCanvas" height="565.0" onMouseClicked="#drawClicked" width="750.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="35.0"/>
</children>
</AnchorPane>
Next step is to add a change listener to the root layout which will set the new height and width to the canvas and then redraw it. We can do it inside the initialize() of the controller.
public class Controller implements Initializable {
#FXML
AnchorPane anchorPane;
#FXML
private Canvas mainCanvas;
#FXML
public GraphicsContext gc;
public void initGraphics() {
gc = mainCanvas.getGraphicsContext2D();
}
public void drawClicked() {
gc.clearRect(0, 0, mainCanvas.getWidth(), mainCanvas.getHeight());
gc.setFill(Color.BLACK);
gc.fillRect(0, 0, mainCanvas.getWidth(), mainCanvas.getHeight());
}
#Override
public void initialize(URL url, ResourceBundle rb) {
initGraphics();
anchorPane.prefWidthProperty().addListener((ov, oldValue, newValue) -> {
mainCanvas.setWidth(newValue.doubleValue());
drawClicked();
});
anchorPane.prefHeightProperty().addListener((ov, oldValue, newValue) -> {
mainCanvas.setHeight(newValue.doubleValue());
drawClicked();
});
}
}
I haven't created a new method for reDraw() since your drawClicked() wasn't doing anything. But, you can separate both the methods once it makes more sense.
The last thing is to bind to root layout's prefWidthProperty() and prefHeightProperty() to the scene's width and height respectively.
public class Main extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage stage) throws IOException {
AnchorPane root = FXMLLoader.load(getClass().getResource("MainFXML.fxml"));
Scene scene = new Scene(root);
stage.setTitle("DrawFx");
stage.setScene(scene);
stage.show();
root.prefWidthProperty().bind(scene.widthProperty());
root.prefHeightProperty().bind(scene.heightProperty());
}
}
If you want to resize canvas in fxml and presumably redraw its contents afterwards, the absolute minimum set is something like this:
test.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.canvas.Canvas?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.VBox?>
<VBox xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1"
fx:controller="test.TestController">
<children>
<Pane fx:id="pane" VBox.vgrow="ALWAYS">
<children>
<Canvas fx:id="canvas" height="${pane.height}" width="${pane.width}"
onWidthChange="#redraw" onHeightChange="#redraw" />
</children>
</Pane>
</children>
</VBox>
TestController.java
package test;
import javafx.fxml.FXML;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
public class TestController {
#FXML
private Canvas canvas;
#FXML
private void redraw() {
double w=canvas.getWidth();
double h=canvas.getHeight();
GraphicsContext gc=canvas.getGraphicsContext2D();
gc.clearRect(0, 0, w, h);
gc.beginPath();
gc.rect(10, 10, w-20, h-20);
gc.stroke();
}
}
Wrapping (it is not part of the functionality, just provided for completeness)
Test.java
package test;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class Test extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
FXMLLoader loader=new FXMLLoader(getClass().getResource("test.fxml"));
Parent root=loader.load();
primaryStage.setTitle("Test");
primaryStage.setScene(new Scene(root));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
the test package is there for allowing modular magic,
module-info.java
module cnvtest {
requires transitive javafx.graphics;
requires javafx.fxml;
opens test to javafx.fxml;
exports test;
}
and there are really no more files.
JavaFX has a method that is added to the controller:
public void initialize(URL url, ResourceBundle rb)
This seems to run before any of the controls are added to the scene, because when I add this to it:
#Override
public void initialize(URL url, ResourceBundle rb){
String treeItemCss = getClass().getResource("/media/css/TreeItem.css").getPath();
main.getScene().getStylesheets().add(treeItemCss);
}
The CSS:
.tree-cell{
-fx-indent: 100;
-fx-underline: true;
}
I get an error from this method: getStylesheets(). But if I move that to an OnAction and execute that action I get no errors.
So my question is, is there a method that runs after all the controls are added to the scene, or a good way to add css to items that are created from a user action, such as a button click?
The initialize() method runs at the end of the FXMLLoader's load() method. Since you don't get a reference to the root of the FXML until that completes, there's obviously no way you can add it to a scene until after then.
You can:
Add the css to the Scene in the application code. I.e. Somewhere you create an FXMLLoader, call load(), and add the result to the Scene. Just set the css file on the scene right there, or:
Add the css stylesheet to the root node instead of to the scene (assuming main is a Parent):
public void initialize() {
String treeItemCss = ... ;
main.getStylesheets().add(treeItemCss);
}
or:
Observe the Scene property and add the stylesheet when it changes to something not null:
public void initialize() {
String treeItemCss = ... ;
main.sceneProperty().addListener((obs, oldScene, newScene) -> {
if (newScene != null) {
newScene.getStylesheets().add(treeItemCss);
}
});
}
Update Here is a complete example to demonstrate the second option. Everything is in the "application" package:
Main.java:
package application;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage primaryStage) {
try {
BorderPane root = FXMLLoader.load(getClass().getResource("Main.fxml"));
Scene scene = new Scene(root,400,400);
primaryStage.setScene(scene);
primaryStage.show();
} 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.layout.BorderPane?>
<?import javafx.scene.control.TreeView?>
<?import javafx.scene.control.TreeItem?>
<BorderPane xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.MainController" fx:id="root">
<center>
<TreeView>
<root>
<TreeItem value="Root">
<children>
<TreeItem value="One"/>
<TreeItem value="Two"/>
<TreeItem value="Three"/>
</children>
</TreeItem>
</root>
</TreeView>
</center>
</BorderPane>
MainController.java:
package application;
import javafx.fxml.FXML;
import javafx.scene.layout.BorderPane;
public class MainController {
#FXML
private BorderPane root ;
public void initialize() {
root.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
}
}
application.css:
.tree-cell{
-fx-indent: 100;
-fx-underline: true;
}
Note that you can add the stylesheet directly in the FXML file with
<BorderPane xmlns:fx="..." fx:controller="..." stylesheets="#application.css">
and then omit it completely from the controller logic.
I'm trying to populate the value of a text field in Java FX.
I have the Main Class,the controller and the fxml.I have bind the fxml file with controller and the appropriate field in it. When i try to set its value, it fails.
Main.java
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
public class Main extends Application {
private Stage primaryStage;
private FlowPane rootLayout;
#Override
public void start(Stage primaryStage) {
try {
FXMLLoader loader = new FXMLLoader();
loader.setLocation(Main.class.getResource("test.fxml"));
rootLayout = (FlowPane) loader.load();
Scene scene = new Scene(rootLayout);
primaryStage.setScene(scene);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
testController.java
package application;
import javafx.fxml.FXML;
import javafx.scene.control.TextField;
public class testController {
#FXML
private TextField t1;
public testController() {
System.out.println("hi");
t1 = new TextField("j");
t1.setText("hi");
}
}
FXML file:
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.FlowPane?>
<FlowPane prefHeight="200.0" prefWidth="200.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.testController">
<children>
<TextField fx:id="t1" />
</children>
</FlowPane>
You are doing it in the wrong place! If you need to play around with your controls just before your fxml is loaded, you need to do it in the initialize(). For this your controller should implement the Initializable
So your controller becomes :
public class testController implements Initializable{
#FXML
private TextField t1;
public void initialize() {
System.out.println("hi");
//You should not re-initialize your textfield
//t1 = new TextField("j");
t1.setText("hi");
}
}