We Keep Coding

Image is clickable but invisible in javafx

I need to load and display some images at runtime in javafx, I managed to load one of them up, I create the ImageView passing that image as param but then the image doesn't show up. I discovered that the image is clickable (it recognizes on mouse events) but I can't display it
The controller
public class fx extends Application {
#FXML
// The reference of inputText will be injected by the FXML loader
private TextField inputUsername;
#FXML
private TextField inputUrl;
#FXML
private ComboBox inputConnectionType;
#FXML
private ComboBox inputColour;
#FXML
private Button submit;
#FXML
private ImageView imageView;
#FXML
private AnchorPane anchor;
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage stage) throws Exception {
Image image = new Image("/AD_weapons_IT_0211.png");
imageView = new ImageView(image);
Parent root = FXMLLoader.load(getClass().getResource("/fxml/form.fxml"));
Scene scene = new Scene(root);
stage.setWidth(415);
stage.setHeight(200);
stage.setScene(scene);
stage.sizeToScene();
stage.show();
}
public void submit()
{
System.out.println(inputUsername.getText()+"\n");
System.out.println(inputColour.getValue().toString()+"\n");
System.out.println(inputConnectionType.getValue().toString()+"\n");
System.out.println(inputUrl.getText()+"\n");
}
public void press()
{
System.out.println("CLICKED");
}
}
The fxml file
<?xml version="1.0" encoding="UTF-8"?>
<?language JavaScript?>
<?import javafx.scene.control.TitledPane?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.image.Image?>
<TitledPane animated="false" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" text="untitled" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.172-ea" fx:controller="provaProj.fx">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<ImageView fx:id = "imageView" fitHeight="150.0" fitWidth="200.0" layoutX="199.0" layoutY="112.0" onMousePressed="#press" pickOnBounds="true" preserveRatio="false" />
</children></AnchorPane>
</content>
</TitledPane>

You should have 2 Classes and 1 fxml file for an FXML-Application:
Main Class:
public class TestApplication extends Application {
#Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("FXMLTest.fxml"));
stage.setTitle("Application");
Scene scene = new Scene(root);
stage.setWidth(415);
stage.setHeight(200);
stage.setScene(scene);
stage.sizeToScene();
stage.show();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
your fxml-File
and a Controller-Class:
public class Controller {
#FXML
// The reference of inputText will be injected by the FXML loader
private TextField inputUsername;
#FXML
private TextField inputUrl;
#FXML
private ComboBox inputConnectionType;
#FXML
private ComboBox inputColour;
#FXML
private Button submit;
#FXML
private ImageView imageView;
#FXML
private AnchorPane anchor;
public void submit()
{
System.out.println(inputUsername.getText()+"\n");
System.out.println(inputColour.getValue().toString()+"\n");
System.out.println(inputConnectionType.getValue().toString()+"\n");
System.out.println(inputUrl.getText()+"\n");
}
#FXML
public void press()
{
System.out.println("CLICKED");
Image img = new Image("yourURL");
imageView.setImage(img);
}
}
and you can then change your image in the Controller-Class..something like I made in the press method.

JavaFXML + Scenebuilder: LineChart is not showing values

I've got a RootStage with some MenuItems and want to set the center of my Rootstage to an AnchorPane with a LineChart in the middle.
The chart got a CategoryAxis on the x-Axis and a NumberAxis on the y-Axis.
But now if I call the Controller for the Scene with the LineChart on it, I can see the LineChart but it has no values. Or at least doesn't show them.
Why is the LineChart not getting filled?
Or why doesn't it show the values?
MainController.class
public class MainController extends Application {
private Stage primaryStage;
private BorderPane rootLayout;
#FXML
private MenuBar menuBar;
#FXML
private Menu menuAnsicht, menuOptionen;
#FXML
private MenuItem menuItemTag, menuItemWoche, menuItemAbout, menuItemCloseWindow;
#Override
public void init() {
}
#Override
public void start(Stage primaryStage) {
this.primaryStage = primaryStage;
initRootLayout();
}
private void initRootLayout() {
try {
FXMLLoader loader = new FXMLLoader();
loader.setLocation(getClass().getResource("/de/mgo/temperaturstatistics/view/RootLayout.fxml"));
rootLayout = (BorderPane) loader.load();
Scene scene = new Scene(rootLayout);
primaryStage.setScene(scene);
primaryStage.show();
} catch (Exception e) {
logger.debug("ERROR: " + e.getMessage());
e.printStackTrace();
}
}
#FXML
public void handleTagItem(ActionEvent event) {
try {
BorderPane nowLayout = (BorderPane) menuBar.getScene().getRoot();
FXMLLoader loader = new FXMLLoader();
loader.setLocation(getClass().getResource("/de/mgo/temperaturstatistics/view/DailyScene.fxml"));
nowLayout.setCenter(loader.load());
} catch (Exception e) {
logger.debug("ERROR: " + e.getMessage());
e.printStackTrace();
}
}
DailySceneController.class
public class DailySceneController extends Application {
#FXML
private Label titleDaily;
#FXML
private LineChart<String, Number> dailyChart;
#FXML
private CategoryAxis xDaily;
#FXML
private NumberAxis yDaily;
public int count = 0;
public DailySceneController() {
count++;
System.out.println(count);
}
#Override
public void init() {
this.setChartDaily();
}
#Override
public void start(Stage primaryStage) {
}
public void setChartDaily() {
LocalDate localDate = LocalDate.now().minusDays(0);
List<Temperaturen> listeNodemcu_JHL = MainController.getListeNodemcu_JHL();
this.xDaily.setAutoRanging(false);
this.yDaily.setAutoRanging(false);
this.dailyChart.setAnimated(false);
XYChart.Series<String, Number> seriesJHL = new XYChart.Series<String, Number>();
seriesJHL.setName("Nodemcu_JHL");
seriesJHL.getData().add(new XYChart.Data<String, Number>("Test", 15));
this.dailyChart.getData().add(seriesJHL);
}
}
DailyScene.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?package de.mgo.temperaturstatistics.controller.Controller?>
<?import javafx.scene.chart.CategoryAxis?>
<?import javafx.scene.chart.LineChart?>
<?import javafx.scene.chart.NumberAxis?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.text.Font?>
<BorderPane xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="de.mgo.temperaturstatistics.view.DailySceneController">
<top>
<Label fx:id="titleDaily" text="Temperatur-Statistik Tagesansicht" BorderPane.alignment="CENTER">
<font>
<Font name="System Bold" size="18.0" />
</font>
</Label>
</top>
<center>
<LineChart fx:id="dailyChart" prefHeight="300.0" prefWidth="500.0" BorderPane.alignment="CENTER">
<xAxis>
<CategoryAxis fx:id="xDaily" animated="false" label="Uhrzeit" side="BOTTOM" />
</xAxis>
<yAxis>
<NumberAxis fx:id="yDaily" animated="false" autoRanging="false" label="Temperatur" lowerBound="10.0" side="LEFT" tickLabelGap="1.0" tickUnit="1.0" upperBound="30.0" />
</yAxis>
</LineChart>
</center>
</BorderPane>

You're extending Application with your controller class an expect it's lifecycle methods to be invoked for it. This is bad practice and also does not result in the invocation of the lifecycle methods.
If you want a method to be invoked, use Initializable.initialize or simply a parameterless initialize method:
#FXML
private void initialize() {
this.setChartDaily();
}

Merge multiple FXML and have one controller for each file

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.

JavaFX resize canvas in fxml

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.

How to pass a Variable through JavaFX Application to the Controller? [duplicate]

This question already has answers here:
Passing Parameters JavaFX FXML
(10 answers)
Closed 4 years ago.
I'd like to ask if it is possible to pass a Variable through a JavaFX Class what extends Application to my JavaFx Controller? I am very new to JavaFx and only may need a little kick.
The goal is to pass a Id from MyClass to MyController.
My Application class:
public class MyClass extends Application {
private String myVariable="Anything";
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage stage) throws Exception {
URL location = getClass().getResource("MyGui.fxml");
FXMLLoader fxmlLoader = new FXMLLoader();
fxmlLoader.setLocation(location);
fxmlLoader.setBuilderFactory(new JavaFXBuilderFactory());
Parent root = FXMLLoader.load(location);
Scene scene = new Scene(root);
stage.setTitle(title);
stage.setScene(scene);
stage.show();
}
}
My Controller:
public class Controller extends Group implements Binding {
public void initialize(Map<String, Object> namespace, URL location, Resources resources) {
// HERE I'D LIKE TO GET MY VARIABLE LIKE
System.out.println(myVariable);
}
#Override
public List<Handler> getHandlerChain() {
return null;
}
#Override
public void setHandlerChain(List<Handler> chain) {
}
#Override
public String getBindingID() {
return null;
}
}

First you will have to add the setter and getter in the MyClass (as the var is private) and change it to static:
private static String myVariable;
public String getMyVariable() {
return myVariable;
}
public void setMyVariable(String myVariable) {
this.myVariable = myVariable;
}
Then, as the MyClass is static can do:
System.out.println(MyClass.getMyVariable());
Working example:
MyClass.java
import java.net.URL;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.fxml.JavaFXBuilderFactory;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class MyClass extends Application {
private static String myVariable;
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage stage) throws Exception {
setMyVariable("Anything");
URL location = getClass().getResource("MyGui.fxml");
FXMLLoader fxmlLoader = new FXMLLoader();
fxmlLoader.setLocation(location);
fxmlLoader.setBuilderFactory(new JavaFXBuilderFactory());
Parent root = FXMLLoader.load(location);
Scene scene = new Scene(root);
stage.setTitle("Hello Word");
stage.setScene(scene);
stage.show();
}
public static String getMyVariable() {
return myVariable;
}
public static void setMyVariable(String myVariable) {
MyClass.myVariable = myVariable;
}
}
MyController.java
import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
public class MyController implements Initializable{
#FXML Label labelVar;
#Override
public void initialize(URL arg0, ResourceBundle arg1) {
labelVar.setText(labelVar.getText() + MyClass.getMyVariable());
}
}
MyGui.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="110.0" prefWidth="305.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="MyController">
<children>
<Label fx:id="labelVar" layoutX="24.0" layoutY="32.0" prefHeight="17.0" prefWidth="129.0" text="MyVariable = " />
</children>
</Pane>