Javafx doesn't display a nested component - java

To continue this post, I implemented part of the solution that was suggested.
I have my main panel and I want to drew on it a component which is a different class (steerwheel).
My main controller :
public class WindowController {
#FXML SteerWheel steerwheel;
... other componenets..
}
My new component :
public SteeringWheel() {
myLabel = new Label();
innerCircle = new Circle();
backgroundCircle = new Circle();
System.out.println("steerwheel created.");
}
.. other methods..
My mainwindow.fxml file :
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.*?>
<?import view.SteerWheel?>
<BorderPane xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/9.0.1" fx:controller="view.WindowController">
<center>
<SteerWheel fx:id="steerwheel" />
</center>
</BorderPane>
and my steerwheel.fxml file :
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.shape.Circle?>
<?import javafx.scene.text.Font?>
<AnchorPane xmlns="http://javafx.com/javafx"
xmlns:fx="http://javafx.com/fxml"
fx:controller="view.SteerWheel"
prefHeight="400.0" prefWidth="600.0">
<Label fx:id="mylabel" prefHeight="30.0" prefWidth="102.0" text="mytest" translateY="30" translateX="90">
<StackPane >
<Circle fx:id="innerCircle" fill="darkgray" radius="170" />
<Circle fx:id="backgroundCircle " fill="black" radius="80" />
</StackPane>
</AnchorPane>
My main code that loads the fxml files (in a different file from all mentioned) :
public class Main extends Application {
public static Stage primaryStage;
#Override
public void start(Stage primary_stage) {
this.primaryStage=primary_stage;
FXMLLoader fxl=new FXMLLoader();
try {
BorderPane root = fxl.load(getClass().getResource("mainwindow.fxml").openStream());
WindowController wc=fxl.getController();
Scene scene = new Scene(root,700,700);
primaryStage.setScene(scene);
primaryStage.show();
} catch (IOException e) {
e.printStackTrace();
}
I'm seeing the constructor`s output but to the console but the component isn't displayed on the window.
Update
I tried to add a call for the fxml file of the steerwheel in my Window.fxml :
<BorderPane xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/9.0.1" fx:controller="view.WindowController">
<center>
<VBox maxHeight="-Infinity" prefHeight="450.0" prefWidth="400.0" BorderPane.alignment="TOP_CENTER">
<children>
<fx:include source="steerwheel.fxml" fx:id="steerwheel" />
</children>
</VBox>
</center>
</BorderPane>
Now I'm getting the following error :
Caused by: java.lang.IllegalArgumentException: Can not set view.steerWheel field view.WindowController.steerWheel to javafx.scene.layout.AnchorPane

I found the following post that described the same issue I had :
Passing data from one controller to another in javafx. java.lang.IllegalArgumentException
#fabian also answered there how to solve the issue.
The solution I implemented :
My main fxml file :
<BorderPane xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/9.0.1" fx:controller="view.WindowController">
<center>
<VBox maxHeight="-Infinity" prefHeight="450.0" prefWidth="400.0" BorderPane.alignment="TOP_CENTER">
<children>
<fx:include fx:id="steerwheel" source="steerwheel.fxml" />
</children>
</VBox>
</center>
</BorderPane>
In the controler of the fxml file I added an AnchorPane object that named after the fx:id and I renamed the steerWheel obj to steerwheelController :
public class WindowController {
#FXML AnchorPane steerwheel;
#FXML steerWheel steerwheelController;
Afterwards, I had to use the setLocation method in my main in order to load the inner fxml file (otherwise I got an error..) :
FXMLLoader fxl=new FXMLLoader();
try {
fxl.setLocation(getClass().getResource("Window.fxml"));
BorderPane root = fxl.load();
WindowController wc=fxl.getController();
Hoping it will help someone :)

Related

View Injection in FXML

#Override
public void start(Stage stage) throws Exception {
BorderPane root = FXMLLoader.load(getClass().getClassLoader().getResource("mainView.fxml"));
When i run this it doesnt show the injected views
Im building a new application with JavaFX for the main page im using 3 views build by 3 fxml files
each view has its controller. for the main page i want to inject the three fxml files in a mainView.fxml via fx:include the mainView.fxml has also a controller how can i do that?
<?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.HBox?>
<?import javafx.scene.text.Font?>
<fx:root alignment="CENTER_LEFT" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="93.0" prefWidth="600.0" style="-fx-min-width: 800; -fx-min-height: 100; -fx-spacing: 30;" type="javafx.scene.layout.HBox" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1">
<children>
<Label fx:id="title" alignment="CENTER" prefHeight="91.0" prefWidth="179.0" style="-fx-label-padding: 20; -fx-line-spacing: 20;" text="News" textFill="#00a4f2">
<font>
<Font name="Arial Black" size="36.0" />
</font>
<opaqueInsets>
<Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
</opaqueInsets></Label>
<Button fx:id="refresh" alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" style="-fx-alignment: CENTER; -fx-background-color: #66a6ff;" text="Button" textAlignment="CENTER">
<opaqueInsets>
<Insets bottom="30.0" left="30.0" right="30.0" top="30.0" />
</opaqueInsets></Button>
<Button fx:id="stat" alignment="CENTER" mnemonicParsing="false" style="-fx-background-color: #feada6;" text="Button">
<opaqueInsets>
<Insets bottom="30.0" left="30.0" right="30.0" top="30.0" />
</opaqueInsets></Button>
</children>
</fx:root>
This is per example the topView.fxml
package ch.bfh.spacenews;
import java.io.IOException;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;
public class TopBarController extends HBox {
#FXML
public Label title;
#FXML
public Button refresh;
#FXML
public Button stat;
TopBarController(){
FXMLLoader load = new FXMLLoader(getClass().getClassLoader().getResource("topView.fxml"));
load.setRoot(this);
load.setController(this);
try {
System.out.println("TopBarController");
load.load();
}catch(IOException e) {
e.printStackTrace();
}
}
}
This is the corresponding controller of the topView.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.*?>
<BorderPane fx:controller="ch.bfh.spacenews.mainController" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1">
<top>
<fx:include fx:id="topBar" source="topView.fxml"/>
</top>
<center>
<fx:include fx:id="article" source="sample.fxml"/>
</center>
<right>
<fx:include fx:id="seacrh" source="searchView.fxml"/>
</right>
</BorderPane>
This is where i want to inject the topView.fxml
package ch.bfh.spacenews;
import javafx.fxml.FXML;
public class mainController {
#FXML
TopBarController topBarController;
#FXML
ArticleController articleController;
#FXML
SearchController searchController;
#FXML
public void initialize() {
}
}
And this is the Controller of the mainView.fxml where i want to inject the topView.fxml
In the FXML custom component pattern the controller classes also serve as the wrapper for the view, by subclassing an appropriate Node subclass. This means you can just instantiate them directly in the FXML via the FXMLLoader. For example, the <TopBarController> element instructs the FXMLLoader to instantiate the TopBarController by calling its no-argument constructor. That constructor, as per your code, loads topView.fxml, etc. There is no need to use <fx:include>, which is an instruction for the FXMLLoader to load another FXML file, since you already have code in your TopBarController to do that.
So your main view FXML file should look like:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.*?>
<?import ch.bfh.spacenews.TopBarController?>
<!-- other imports... -->
<BorderPane fx:controller="ch.bfh.spacenews.MainController" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1">
<top>
<TopBarController fx:id="topBar" />
</top>
<center>
<ArticleController fx:id="article" />
</center>
<right>
<SearchController fx:id="search" />
</right>
</BorderPane>
And the corresponding controller is
package ch.bfh.spacenews;
import javafx.fxml.FXML;
public class MainController {
#FXML
TopBarController topBar;
#FXML
ArticleController article;
#FXML
SearchController search;
#FXML
public void initialize() {
}
}
Note that it's really critical to follow standard naming conventions here. The FXMLLoader explicitly relies on the case of an element to determine if it's referring to a class name or a property name.
Main class : Launch.java
public class Launch extends Application {
#Override
public void start(Stage stage) throws Exception {
Controller.show(stage);
}
public static void main(String[] args) {
launch(args);
}
}
You can add view from controller :
public class Controller {
public BorderPane mainPane; // fx:id of your pane
public static Stage current;
public static void show(Stage stage) {
this.current = stage;
Scene scene = null;
BorderPane pane = null;
try {
scene = new Scene(FXMLLoader.load(getClass().getResource("mainView.fxml")));
pane = (BorderPane) scene.lookup("#mainPane");
// Add .fxml view to mainView
pane.setCenter(FXMLLoader.load(getClass().getResource("sample.fxml")));
pane.setTop(FXMLLoader.load(getClass().getResource("topView.fxml")));
pane.setRight(FXMLLoader.load(getClass().getResource("searchView.fxml")));
} catch (IOException e) {
e.printStackTrace();
}
stage.setTitle("MainView");
stage.setScene(scene);
stage.show();
}
}

JavaFX: Adding Application-Icon with fxml

I want to add an application icon to my program. I've tried to do that as following, but it haven't worked:
primaryStage.getIcons().add(new Image(Main.class.getResourceAsStream("lock.png")));
primaryStage.getIcons().add(new Image(Controller.class.getResourceAsStream("lock.png")));
final Parent root = FXMLLoader.load(getClass().getResource("passwordGenerator.fxml"));
or
primaryStage.getIcons().add(new Image("lock.png"));
Also I tried to do that without a FXML file and it worked.
How can I add an application Icon with a FXML file?
here the solution it works with me :
Main class :
public class JavaFXIcons extends Application {
#Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
Scene scene = new Scene(root);
stage.getIcons().add(new Image(JavaFXIcons.class.getResourceAsStream("stackoverflow.jpg"))) ;
stage.setScene(scene);
stage.show();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
FXML file:
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxicons.FXMLDocumentController">
<children>
<Button layoutX="126" layoutY="90" text="Click Me!" onAction="#handleButtonAction" fx:id="button" />
<Label layoutX="126" layoutY="120" minHeight="16" minWidth="69" fx:id="label" />
</children>
</AnchorPane>

JavaFX / FXML UI does not look like it should

I have a UI I have made using Netbeans and Scene builder using Java FX / FXML. I have never had a problem with it before but for this project for some reason in Scene building my UI would look one way, even the windows preview would look identical to it, but when running it in netbeans it would look messed up. In netbeans, all I am doing is loading and calling it. I have no idea on what the issue can be and nothing is helping on Google.
working screen shot on scene builder and editing and netbeans
http://imgur.com/laZYjck
compile and run
http://imgur.com/NOMVBZe
main.java
public class main
{
public static void main(String[] args)
{
View view = new View();
view.launch();
}
}
view.java
public class View extends Application
{
#FXML
private Button login;
#Override
public void start(Stage primaryStage)
{
Parent login_page = null;
try {
login_page = FXMLLoader.load(getClass().getResource("FXMLViewLogin.fxml"));
}
catch (IOException ex)
{
}
primaryStage.setTitle("Welcome!");
primaryStage.setScene(new Scene(login_page));
primaryStage.show();
}
#FXML
private void login(ActionEvent event)
{}
}
FXMLViewLogin.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="520.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="view.ViewControllerLogin">
<children>
<Button fx:id="button1" defaultButton="true" layoutX="74.0" layoutY="296.0" text="Sign Up" />
<Label layoutX="198.0" layoutY="153.0" text="Password" />
<Label layoutX="187.0" layoutY="35.0" text="User Name" />
<TextField fx:id="password" layoutX="74.0" layoutY="204.0" />
<TextField fx:id="username" layoutX="74.0" layoutY="80.0" />
<Button fx:id="button" layoutX="323.0" layoutY="296.0" onAction="#login" text="Log In" />
</children>
</Pane>

JavaFX create and use custom control with it's own functions

I have created a simple custom control as shown in picture:
when I click on "Click me" button the console shows me this message "The button was clicked!" by a function called doSomething, and this is the custom control's fxml file code:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<fx:root prefHeight="83.0" prefWidth="196.0" type="javafx.scene.layout.AnchorPane" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<TextField fx:id="textField" layoutY="2.0" prefHeight="25.0" prefWidth="196.0" />
<Button layoutX="72.0" layoutY="29.0" mnemonicParsing="false" onAction="#doSomething" text="Click me" />
</children>
</fx:root>
And this is the controller of this custom control:
package control;
import java.io.IOException;
import javafx.beans.property.StringProperty;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.control.TextField;
import javafx.scene.layout.AnchorPane;
public class Controller extends AnchorPane {
#FXML private TextField textField;
public Controller() {
FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("CustomControlView.fxml"));
fxmlLoader.setRoot(this);
fxmlLoader.setController(this);
try {
fxmlLoader.load();
} catch (IOException exception) {
throw new RuntimeException(exception);
}
}
public String getText() {
return textProperty().get();
}
public void setText(String value) {
textProperty().set(value);
}
public StringProperty textProperty() {
return textField.textProperty();
}
#FXML
protected void doSomething() {
System.out.println("The button was clicked!");
}
}
The control is working good and I can call it in another fxml file using "JavaFX scence builder" (as shown in picture) :
And this is the fxml file code:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<AnchorPane prefHeight="237.0" prefWidth="324.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<javafx.scene.layout.AnchorPane layoutX="64.0" layoutY="92.0" prefHeight="40.0" prefWidth="196.0">
<children>
<TextField fx:id="textField" layoutY="2.0" prefHeight="25.0" prefWidth="196.0" />
<Button layoutX="72.0" layoutY="29.0" mnemonicParsing="false" onAction="#doSomething" text="Click me" />
</children>
</javafx.scene.layout.AnchorPane>
<Label layoutX="75.0" layoutY="14.0" text="Trying the custom control:">
<font>
<Font size="15.0" />
</font>
</Label>
</children>
</AnchorPane>
But the problem is that I have to redefine the doSomething function of the custom control button !!!I mean when I added my custom conrol to another fxml file all the functions of this custom control should work without redefining it just like Swing.
Am I wrong ?
The problem is that the Scene Builder just copies the code of your custom control into the new control rather than linking it. To use your custom control you have to use the fx:include FXML tag.
So the FXML file should look something like:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<AnchorPane prefHeight="237.0" prefWidth="324.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<fx:include source="yourCustomControl.fxml" />
<Label layoutX="75.0" layoutY="14.0" text="Trying the custom control:">
<font>
<Font size="15.0" />
</font>
</Label>
</children>
</AnchorPane>
However, you have to do this manually. As far as I know, the Scene Builder is not capable of doing it.

How do i restart an application in JavaFx, built with FXML?

Say I have a window, with a button. And everytime that button is pressed I want the current window to be disposed and a new one to be shown.
In Swing, that was easy, but I can't find the syntax for it in JavaFx?
So in this case, with my example code, how do I do this?
public class Main extends Application {
Parent root;
Scene scene;
#Override
public void start(Stage primaryStage) throws Exception {
root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.sizeToScene();
primaryStage.setResizable(false);
primaryStage.show();
root.setOnMouseClicked((MouseEvent mouseEvent) -> {
if (mouseEvent.getButton().equals(MouseButton.PRIMARY)) {
if (mouseEvent.getClickCount() == 2) {
Stage stage = new Stage();
stage.setScene(primaryStage.getScene());
stage.show();
primaryStage.close();
}
}
});
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
Trying to create a new window: http://sv.tinypic.com/r/1jkq4w/8
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.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.text.*?>
<VBox prefHeight="430.0" prefWidth="640.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="blackjack.FXMLDocumentController">
<children>
<AnchorPane maxHeight="-1.0" maxWidth="-1.0" prefHeight="-1.0" prefWidth="-1.0" VBox.vgrow="ALWAYS">
<children>
<Label fx:id="labelPlayerTotal" layoutX="510.0" layoutY="335.0" prefHeight="15.0" prefWidth="121.0" text="Playertotal:" />
<Label fx:id="labelDealerTotal" layoutX="510.0" layoutY="359.0" prefHeight="15.0" prefWidth="112.0" text="Dealertotal:" />
<TextArea fx:id="dealerArea" layoutY="29.0" prefHeight="159.0" prefWidth="503.0" />
<TextArea fx:id="playerArea" layoutY="244.0" prefHeight="159.0" prefWidth="503.0" />
<Button fx:id="stayButton" layoutX="512.0" layoutY="173.0" mnemonicParsing="false" onAction="#drawCardForDealer" prefHeight="25.0" prefWidth="72.0" text="STAY" />
<Button fx:id="hitButton" layoutX="512.0" layoutY="130.0" mnemonicParsing="false" onAction="#drawCardForPlayer" prefHeight="25.0" prefWidth="72.0" text="HIT" />
<Label fx:id="labelWinner" layoutX="104.0" layoutY="208.0" prefHeight="15.0" prefWidth="296.0" />
<MenuBar fx:id="helpBar">
<menus>
<Menu mnemonicParsing="false" text="Help">
<items>
<MenuItem mnemonicParsing="false" onAction="#aboutApplication" text="About" />
</items>
</Menu>
</menus>
</MenuBar>
</children>
</AnchorPane>
</children>
</VBox>
You can just hide (i.e. dispose) the window by calling hide() or close() on it.
And you can just show a new window with exactly the same code you used before:
primaryStage.close();
Stage stage = new Stage();
root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
scene = new Scene(root);
stage.setScene(scene);
stage.sizeToScene();
stage.setResizable(false);
stage.show();
But this seems like way too much for what you want to achieve. Why not just replace the root of the existing scene, and use the existing stage?
try {
scene.setRoot(FXMLLoader.load(getClass().getResource("FXMLDocument.fxml")));
} catch (Exception exc) {
exc.printStackTrace();
throw new RuntimeException(exc);
}
Note though that (either way you do this) you have now replaced the root of the scene; the new root does not have the same mouse handler associated with it. If you use the second method, you can just put the handler on the scene (which doesn't change) instead. Or, perhaps better, is that you can define the listener in the FXML and controller:
<VBox prefHeight="430.0" prefWidth="640.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="blackjack.FXMLDocumentController"
fx:id="root"
onMouseClicked="reload">
<!-- ... -->
</VBox>
And the controller:
package blackjack ;
public class FXMLDocumentController {
// ...
#FXML
private VBox root ;
// ...
#FXML
private void reload() throws Exception {
// Really, it would be way better here to reset the whole UI to its initial
// state, instead of reloading it from scratch. This should work as a
// quick hack though.
Scene scene = root.getScene();
scene.setRoot(FXMLLoader.load(Main.class.getResource("FXMLDocument.fmxl")));
}
// ...
}

Categories