# Scene Builder in JavaFX with FXML

**URL:** <https://discourse.processing.org/t/scene-builder-in-javafx-with-fxml/45319>\
**Category:** Libraries\
**Created:** [November 11, 2024, 2:52pm UTC](https://discourse.processing.org/t/scene-builder-in-javafx-with-fxml/45319 "2024-11-11T14:52:24Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![roberto64](https://avatars.discourse-cdn.com/v4/letter/r/90ced4/32.png) [@roberto64](https://discourse.processing.org/u/roberto64)\
**Post date:** [November 11, 2024, 2:52pm UTC](https://discourse.processing.org/t/scene-builder-in-javafx-with-fxml/45319/1 "2024-11-11T14:52:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [November 11, 2024, 5:38pm UTC](https://discourse.processing.org/t/scene-builder-in-javafx-with-fxml/45319/2 "2024-11-11T17:38:24Z")

</div>

> [@roberto64](#):
>
> I loaded the form with processing

Could you please describe how you did this. Thanks.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [November 11, 2024, 7:33pm UTC](https://discourse.processing.org/t/scene-builder-in-javafx-with-fxml/45319/3 "2024-11-11T19:33:27Z")

</div>

Alternative to Scene Builder for your consideration.

```auto
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:**

 ![jfx](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/3/7329e9f59aad19f1408b9c3eedce7d216a539353.png)

---

<div class="post-metadata">

**Author:** ![roberto64](https://avatars.discourse-cdn.com/v4/letter/r/90ced4/32.png) [@roberto64](https://discourse.processing.org/u/roberto64)\
**Post date:** [November 12, 2024, 9:32am UTC](https://discourse.processing.org/t/scene-builder-in-javafx-with-fxml/45319/4 "2024-11-12T09:32:37Z")

</div>

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

```processing
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);
    
}

```

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [November 12, 2024, 12:25pm UTC](https://discourse.processing.org/t/scene-builder-in-javafx-with-fxml/45319/5 "2024-11-12T12:25:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [November 12, 2024, 2:31pm UTC](https://discourse.processing.org/t/scene-builder-in-javafx-with-fxml/45319/6 "2024-11-12T14:31:40Z")

</div>

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

```auto
//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)**

```auto
<?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:

 ![xml](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/5/956b7c7632314bda0f08c20b2678943bc5556b30.png)

---

<div class="post-metadata">

**Author:** ![roberto64](https://avatars.discourse-cdn.com/v4/letter/r/90ced4/32.png) [@roberto64](https://discourse.processing.org/u/roberto64)\
**Post date:** [November 12, 2024, 5:28pm UTC](https://discourse.processing.org/t/scene-builder-in-javafx-with-fxml/45319/7 "2024-11-12T17:28:38Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 12, 2024, 5:35pm UTC](https://discourse.processing.org/t/scene-builder-in-javafx-with-fxml/45319/8 "2024-11-12T17:35:57Z")

</div>

> [@roberto64](#):
>
> what I was asking is that from a form.fxml

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

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [November 12, 2024, 5:47pm UTC](https://discourse.processing.org/t/scene-builder-in-javafx-with-fxml/45319/9 "2024-11-12T17:47:33Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [November 13, 2024, 3:03am UTC](https://discourse.processing.org/t/scene-builder-in-javafx-with-fxml/45319/10 "2024-11-13T03:03:53Z")

</div>

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.

```auto
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**

```auto
<?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>

```

---

<div class="post-metadata">

**Author:** ![roberto64](https://avatars.discourse-cdn.com/v4/letter/r/90ced4/32.png) [@roberto64](https://discourse.processing.org/u/roberto64)\
**Post date:** [November 13, 2024, 11:29am UTC](https://discourse.processing.org/t/scene-builder-in-javafx-with-fxml/45319/11 "2024-11-13T11:29:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [November 19, 2024, 7:11am UTC](https://discourse.processing.org/t/scene-builder-in-javafx-with-fxml/45319/13 "2024-11-19T07:11:00Z")

</div>

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).