Scene Builder in JavaFX with FXML

Hi, I’m trying to create a form with SceneBulder I created a form with 2 buttons and a label, to see when I click on the 1st button it reads the content of the label, the second button does another action, I loaded the form with processing but when I click on the button it does not do any action, I don’t know Java very well, but I thought that once the form is created with SceneBulder and giving it the ID of the button it could be called?. Help?, Regards

Could you please describe how you did this. Thanks.

Alternative to Scene Builder for your consideration.

import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
import javafx.scene.text.Font;
import javafx.scene.text.FontPosture;
import javafx.scene.text.FontWeight;
import javafx.scene.paint.Color;

Pane pane;
Button btn1;
Button btn2;
Label instructionLabel;

void instructionLabel(int x, int y, int w, int h) {
  String instructionStr = "Programming is fun.";
  instructionLabel = new Label();
  Font font = Font.font("Menlo", FontWeight.BOLD, FontPosture.REGULAR, 15);
  instructionLabel.setFont(font);
  instructionLabel.setTextFill(Color.BLUE);
  instructionLabel.setLayoutX(x);
  instructionLabel.setLayoutY(y);
  instructionLabel.setPrefSize(w, h);
  instructionLabel.setText(instructionStr);
  pane.getChildren().add(instructionLabel);
}

void btn1(int x, int y, int w, int h) {
  btn1 = new Button("Get Label");
  btn1.setLayoutX(x);
  btn1.setLayoutY(y);
  btn1.setMaxSize(w, h);
  btn1.setOnAction(event -> {
    println(instructionLabel.getText());
  }
  );
  pane.getChildren().add(btn1);
}

void btn2(int x, int y, int w, int h) {
  btn2 = new Button("Button Two");
  btn2.setLayoutX(x);
  btn2.setLayoutY(y);
  btn2.setMaxSize(w, h);
  btn2.setOnAction(event -> {
    println("You hit btn2.");
  }
  );
  pane.getChildren().add(btn2);
}

void setup() {
  size(1, 1, FX2D);
  Stage stage = new Stage();
  stage.setTitle("Button Handler");
  pane = new Pane();
  instructionLabel(45, 10, 450, 30);
  btn1(30, 100, 100, 30);
  btn2(140, 100, 100, 30);
  Scene scene = new Scene(pane, 250, 200);
  stage.setScene(scene);
  stage.show();
}

void draw() {
}

Output:

Good morning, what I understood is that there is no program on processing to create the Forms, as I see only G4P Gui Bulder, but on these controls there are no elements like “Listview Grid etc” I do not understand why a nice program like processing does not have all the controls, since the most difficult part is that of the forms. Greetings

import processing.javafx.*;

import java.util.Map;
import java.nio.file.Paths;

import javafx.application.Platform;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.SceneAntialiasing;
import javafx.scene.canvas.Canvas;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;

import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.io.IOException;

import processing.javafx.PSurfaceFX;

 
public void setup() {
  size(1, 0, FX2D);
  strokeWeight(0);
 try {
    Stage stage = new Stage(); 
     FXMLLoader fxmlLoader = new FXMLLoader(getClass().getClassLoader().getResource("FRM1.fxml"));
 println(getClass().getClassLoader().getResource("FRM1.fxml"));
  //FXMLLoader fxmlLoader = new FXMLLoader(Paths.get("/Users/robyta/Documents/Processing/provajafax/code/FRM1.fxml").toUri().toURL()); // abs path to fxml file       
       //print(fxmlLoader);
        Scene scene = new Scene(fxmlLoader.load(), 620, 440);
          //print(scene);
        
        stage.setTitle("Invio S");
        stage.setScene(scene);
        stage.show();
   
 Button Btn1 = new Button();
 //Label Labe = new Label();    
println(Btn1);
 //  Tooltip tooltip = new Tooltip("This is a Pane");   
 //     Btn1.setTooltip(tooltip);
   
  
  println("EDT btn = " + javax.swing.SwingUtilities.isEventDispatchThread()); 
         
    } catch (IOException ex) {
        
          throw new RuntimeException(ex);
      }
    
}


public void draw() {
  background(125, 125, 98);
    
}

Could you also post the source code for FRM1.fxml? I think that you are also going to need a controller. Most of what you’ve done looks correct but I can’t run your code without the Scene Builder file. Did you set the action for the button in Scene Builder? This technique is an alternate way of creating a JavaFX app. Personally I like the programmatic approach better, but your question will force us to try and get the fxml approach figured out. I have been able to get the interface and show all the controls but still haven’t figured out how to hook up the buttons so I will be learning along with you. Don’t give up; we should be able to figure it out. I’m surprised that you tried to use draw(); I thought it was non-functional in JavaFX. Does it really change the background color? If you will select all of your source code and place it between 2 sets of 3 graeve characters (```) it will format your code and make it more readable.

1 Like

While we’re waiting to figure out fxml event handling, please see if you’re able to run this ‘hello world’ example by Jenkov:

//https://jenkov.com/tutorials/javafx/fxml.html

import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import java.net.MalformedURLException;
import java.io.File;
import java.net.URL;
import java.net.URI;
import java.net.URISyntaxException;
import java.net.*;

URL url;
VBox vbox;

void setup() {
  size(1,2,FX2D);
  vbox = new VBox();
  FXMLLoader loader = new FXMLLoader();
  File file = new File(sketchPath() + "/hw.xml");
  URI uri = file.toURI();
  try {
    url = uri.toURL();
  } catch(MalformedURLException e) {
    println(e);
  }
  println(url);

 loader.setLocation(url);
 
  try {
    vbox = loader.load();
  } catch(IOException e) {
    println(e);
  }
  Scene scene = new Scene(vbox,300,100);
  Stage stage = new Stage();
  stage.setScene(scene);
  stage.show();
}

XML code:(called hw.xml and placed in sketch folder)

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.Label?>

<VBox>
    <children>
        <Label text="Hello world FXML"/>
    </children>
</VBox>

Output:

1 Like

Thanks for your reply, what I was asking is that from a form.fxml inserting Buttons and Text etc etc… and then I click and it triggers an event, is it possible?

please post the content of form.fxml : open it with an text editor and copy paste the content here please

  • I changed the title of the thread to
    Scene Builder Java
1 Like

Sure it’s possible. Just as soon as you or I figure out how to add a controller to Scene Builder. Processing doesn’t use package somethingOrOther and apparently that’s what it’s looking for, ie com.xxxx.yyyy.myController. As soon as I try to add a controller with no prefix it throws an exception and no longer loads the .xml file (so the window is blank).

Please see if you are able to run the following source code. It adds a controller to the Processing source code and sets it on the loader before loading form.fxml. Do not try to set the controller in Scene Builder, but you will need to set onAction for your button. In order to get the text from the label in the controller make certain that fx:id=“label”, otherwise it won’t work.

import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.stage.Stage;
import java.net.MalformedURLException;
import java.io.File;
import java.net.URL;
import java.net.URI;
import java.net.URISyntaxException;
import javafx.fxml.LoadException;
import java.net.*;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;

URL url;
Pane pane;
FXMLLoader loader;

class MyController { 
  @FXML
    public Button btn1;
    
   @FXML
    public Button btn2;
   @FXML
    public Label label;

    public MyController() {         
    }
  @FXML
    public void initialize() {
      println(label);
    }
  @FXML  
  void btn1Action() {
    println("Btn1 hit.");
    // make sure fx:id="label"
    String labelStr = label.getText();
    println(labelStr);
  }  
}

void setup() {
  size(1,2,FX2D);
  pane = new Pane();
  loader = new FXMLLoader();

  File file = new File(sketchPath() + "/form.fxml");
  URI uri = file.toURI();
  try {
    url = uri.toURL();
  } catch(MalformedURLException e) {
    println(e);
  }
  println("url =",url);
  MyController myController = new MyController();
  // setController _before loading
  loader.setController(myController);
  loader.setLocation(url); 
  try {
    pane = loader.load();
  } catch(IOException e) {
    println("load exception =",e);
  }
  Scene scene = new Scene(pane,550,300);
  Stage stage = new Stage();
  stage.setScene(scene);
  stage.show();
}

form.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.Pane?>

<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="346.0" prefWidth="544.0" xmlns="http://javafx.com/javafx/19" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Label id="label" fx:id="label" layoutX="252.0" layoutY="84.0" text="JavaFX" />
      <Button id="btn1" layoutX="156.0" layoutY="188.0" mnemonicParsing="false" onAction="#btn1Action" text="Btn1" />
      <Button id="btn2" fx:id="btn2" layoutX="369.0" layoutY="188.0" mnemonicParsing="false" text="Btn2" />
   </children>
</Pane>

Thanks, I’ll do some tests now. Best regards

1 Like

Scene Builder (an application) is used to create a user interface for a javafx app with two buttons and a label. It generates a .fxml file which is subsequently loaded by Processing source code with the aid of a controller class. This is an alternate technique to the programmatic approach for creation of a javafx app which requires entering all the code manually (shown in first post).