Fxml-file integrate in processing?

Processing Coding Questions
1

Hi :slight_smile:

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

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

Thanks.
M.

2 Likes
2

A FMXL file? I don’t think so, but would a XML file work?

3

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

1 Like
4
6 Likes
5

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.

1 Like
6

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

1 Like
7

Thank you! I will try it immediately… :slight_smile:

1 Like
8

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?

1 Like
9

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.

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

1 Like
10

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

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
image681Ă—590 37.3 KB

…using this FXML file:

image
image1225Ă—622 30.1 KB

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.

3 Likes
11

Looks great!

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

1 Like
12

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

1 Like