Integrate machining sketch (PApplet) with javaFX GUI (from GUI Builder 2.0)

I've been experimenting with PApplet integration with JavaFX GUI developed in GUI Builder (2.0). By creating a SwingNode and adding its own sketch instance to it, it will not be able to update its frame once it has been drawn.

I have minimal experience with JavaFX and, based on Swing, I have no idea how to access the components I have placed in the GUI builder outside of the FXMLDocumentController class . I assume the sketch will need to be initialized from the JFXP class , but I don't know how to access the contents of the SwingNode. Ideally, I would like to be able to use the Scene Composer [2.0] to create a GUI rather than to create non-visually components.

Any help would be greatly appreciated!

FXML controller:

import java.util.Random;
import java.util.ResourceBundle;
import javafx.embed.swing.SwingNode;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javax.swing.JPanel;
import processing.core.*;

public class FXMLDocumentController implements Initializable {

    mySketch p = new mySketch();
    public Label label;
    public SwingNode sn;

    private void handleButtonAction(ActionEvent event) {
        System.out.println("You clicked me!");
        label.setText("Hello World!");


    public void initialize(URL url, ResourceBundle rb) {

        JPanel panel = new JPanel();



    static class mySketch extends PApplet {

        int x, y;

        public void setup() {
            size(500, 200);
            x = 0;
            y = 0;

        public void draw() {
            x = x + randInt(0, 5);
            y = y + randInt(0, 5);
            ellipse(mouseX, mouseY, 5, 5);

        public void mouseMoved() {


    public static int randInt(int min, int max) {

    // NOTE: Usually this should be a field rather than a method
        // variable so that it is not re-seeded every call.
        Random rand = new Random();

    // nextInt is normally exclusive of the top value,
        // so add 1 to make it inclusive
        int randomNum = rand.nextInt((max - min) + 1) + min;

        return randomNum;




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

<?import javafx.embed.swing.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" prefHeight="200.0" prefWidth="320.0" xmlns="" xmlns:fx="" fx:controller="papplettest.FXMLDocumentController">
      <SwingNode fx:id="sn" layoutX="160.0" layoutY="100.0" />


main class:

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

 * @author hugodarwood
public class JFXP extends Application {

    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));

        Scene scene = new Scene(root);


     * @param args the command line arguments
    public static void main(String[] args) {



UPDATE: After a lot of research (and developing too many applications in Swing) I have come to the conclusion that it is not possible to integrate PApplet with the JAVAFX GUI. The best course of action is to either stick to Swing (perhaps like from Processing 3.0) or learn graphical programming with JAVAFX.

Hope is not lost! there is a very dirty workaround for this. Just write your sketch with processing.js, insert it into your HTML canvas, and then add the JAVAFX WebView component to your project, setting your HTML canvas as the WebEngine target. This way you can continue to use your existing machining sketches with the user-friendly JAVAFX interface!


source to share

All Articles