# Fxml-file integrate in processing?

**URL:** <https://discourse.processing.org/t/fxml-file-integrate-in-processing/18325>\
**Category:** Coding Questions\
**Created:** [March 2, 2020, 9:11pm UTC](https://discourse.processing.org/t/fxml-file-integrate-in-processing/18325 "2020-03-02T21:11:54Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![em\_sha](https://avatars.discourse-cdn.com/v4/letter/e/9fc348/32.png) [@em\_sha](https://discourse.processing.org/u/em_sha)\
**Post date:** [March 2, 2020, 9:11pm UTC](https://discourse.processing.org/t/fxml-file-integrate-in-processing/18325/1 "2020-03-02T21:11:54Z")

</div>

Hi 🙂

Is there a possibility to integrate a fxml-file in processing?

If there is one, could somebody give me an example?

Thanks.  
M.

---

<div class="post-metadata">

**Author:** ![anon94203042](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@anon94203042](https://discourse.processing.org/u/anon94203042)\
**Post date:** [March 2, 2020, 10:50pm UTC](https://discourse.processing.org/t/fxml-file-integrate-in-processing/18325/2 "2020-03-02T22:50:54Z")

</div>

A FMXL file? I don’t think so, but would a [XML file](https://processing.org/reference/XML.html) work?

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [March 3, 2020, 10:03am UTC](https://discourse.processing.org/t/fxml-file-integrate-in-processing/18325/3 "2020-03-03T10:03:50Z")

</div>

As in place a Processing sketch inside a JavaFX UI? Or a JavaFX UI inside a sketch? Or something else?

---

<div class="post-metadata">

**Author:** ![micycle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micycle/32/201_2.png) [@micycle](https://discourse.processing.org/u/micycle)\
**Post date:** [March 3, 2020, 11:10am UTC](https://discourse.processing.org/t/fxml-file-integrate-in-processing/18325/4 "2020-03-03T11:10:04Z")

</div>

> **[micycle1/ProcessingFX](https://github.com/micycle1/ProcessingFX)**
>
> A basic project showing how a Processing sketch and a FXML JavaFX stage may be integrated. - micycle1/ProcessingFX

---

<div class="post-metadata">

**Author:** ![em\_sha](https://avatars.discourse-cdn.com/v4/letter/e/9fc348/32.png) [@em\_sha](https://discourse.processing.org/u/em_sha)\
**Post date:** [March 4, 2020, 7:28am UTC](https://discourse.processing.org/t/fxml-file-integrate-in-processing/18325/5 "2020-03-04T07:28:11Z")

</div>

It’s a fxml-file. I’m preparing material for pupils and a colleague uses scene builder and has created a fxml-file for the GUI.  
He has integrated the file in BlueJ. But I want to use Processing with my pupils.

---

<div class="post-metadata">

**Author:** ![em\_sha](https://avatars.discourse-cdn.com/v4/letter/e/9fc348/32.png) [@em\_sha](https://discourse.processing.org/u/em_sha)\
**Post date:** [March 4, 2020, 7:29am UTC](https://discourse.processing.org/t/fxml-file-integrate-in-processing/18325/6 "2020-03-04T07:29:27Z")

</div>

> [@neilcsmith](#):
>
> As in place a Processing sketch inside a JavaFX UI? Or a JavaFX UI inside a sketch?

I want to integrate a JavaFX UI inside a sketch, if this is possible. 😉

---

<div class="post-metadata">

**Author:** ![em\_sha](https://avatars.discourse-cdn.com/v4/letter/e/9fc348/32.png) [@em\_sha](https://discourse.processing.org/u/em_sha)\
**Post date:** [March 4, 2020, 7:36am UTC](https://discourse.processing.org/t/fxml-file-integrate-in-processing/18325/7 "2020-03-04T07:36:46Z")

</div>

> [@micycle](#):
>
> A basic project showing how a Processing sketch and a FXML JavaFX stage may be integrated. - micycle1/ProcessingFX

Thank you! I will try it immediately… 🙂

---

<div class="post-metadata">

**Author:** ![em\_sha](https://avatars.discourse-cdn.com/v4/letter/e/9fc348/32.png) [@em\_sha](https://discourse.processing.org/u/em_sha)\
**Post date:** [March 4, 2020, 8:34am UTC](https://discourse.processing.org/t/fxml-file-integrate-in-processing/18325/8 "2020-03-04T08:34:18Z")

</div>

It’s embarrassing but I’m unable to start your project in Processing, micycle.  
Don’t I need a pde-file? There are only java-files, which I can open in Processing but then I don’t know what to do.  
Sorry, but until now I only used Processing with the main pde…

I’m a step further now. I’ve started Processing with an empty pde and your java-files. Now I get “Lambda expressions are allowed only at source level 1.8 or above”. How can I fix that?

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [March 4, 2020, 9:50am UTC](https://discourse.processing.org/t/fxml-file-integrate-in-processing/18325/9 "2020-03-04T09:50:48Z")

</div>

It’s using Processing as a library rather than with PDE (which quite frankly is the better way to use it!), but does like it’s using a fork of the JavaFX renderers which might be problematic.

> [@em\_sha](#):
>
> I want to integrate a JavaFX UI inside a sketch, if this is possible.

Unlikely given how the JavaFX renderer works. Putting it inside a JavaFX layout might be feasible, using a JavaFX layout inside it not.

---

<div class="post-metadata">

**Author:** ![micycle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micycle/32/201_2.png) [@micycle](https://discourse.processing.org/u/micycle)\
**Post date:** [March 4, 2020, 11:50am UTC](https://discourse.processing.org/t/fxml-file-integrate-in-processing/18325/10 "2020-03-04T11:50:05Z")

</div>

Use this PDE code instead then – it’s something I’ve just cooked up.

We can load a new scene from an FXML file and replace the the default scene Processing makes with this new one (during runtime).

```auto
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 processing.javafx.PSurfaceFX;

public void setup() {
  size(800, 800, FX2D);
  strokeWeight(3);
}

protected PSurface initSurface() {
  surface = (PSurfaceFX) super.initSurface();
  final Canvas canvas = (Canvas) surface.getNative();
  final Scene oldScene = canvas.getScene();
  final Stage stage = (Stage) oldScene.getWindow();

  try {
    FXMLLoader loader = new FXMLLoader(Paths.get("C:\\path--to--fxml\\stage.fxml").toUri().toURL()); // abs path to fxml file
    final Parent sceneFromFXML = loader.load();
    final Map<String, Object> namespace = loader.getNamespace();

    final Scene newScene = new Scene(sceneFromFXML, stage.getWidth(), stage.getHeight(), false, 
      SceneAntialiasing.BALANCED);
    final AnchorPane pane = (AnchorPane) namespace.get("anchorPane"); // get element by fx:id

    pane.getChildren().add(canvas); // processing to stackPane
    canvas.widthProperty().bind(pane.widthProperty()); // bind canvas dimensions to pane
    canvas.heightProperty().bind(pane.heightProperty()); // bind canvas dimensions to pane

    Platform.runLater(new Runnable() {
      @Override
        public void run() {
        stage.setScene(newScene);
      }
    }
    );
  } 
  catch (IOException e) {
    e.printStackTrace();
  }
  return surface;
}

public void draw() {
  background(125, 125, 98);
  ellipse(200, 200, 200, 200);
  line(0, 0, width, height);
  line(width, 0, 0, height);
}

```

**Result**

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0c9f84af0bf0ff57ab093f460b2e9f4f6071d73f.png)

…using this FXML file:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6b37463fbfb6991e40d63e8f5906b9ca03b61772.png)

I’d usually load FXML with this code:  
`FXMLLoader loader = new FXMLLoader(getClass().getClassLoader().getResource("stage.fxml"));`  
but doesn’t work with when using the PDE.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [March 6, 2020, 7:34pm UTC](https://discourse.processing.org/t/fxml-file-integrate-in-processing/18325/11 "2020-03-06T19:34:25Z")

</div>

Looks great!

@micycle I suggested on your repo that this standalone sketch example also be packaged with the library…

---

<div class="post-metadata">

**Author:** ![em\_sha](https://avatars.discourse-cdn.com/v4/letter/e/9fc348/32.png) [@em\_sha](https://discourse.processing.org/u/em_sha)\
**Post date:** [March 7, 2020, 5:43pm UTC](https://discourse.processing.org/t/fxml-file-integrate-in-processing/18325/12 "2020-03-07T17:43:08Z")

</div>

micycle, you made my day!  
With this version I can work.  
Thank you very much!  
M. 🙂