javafx - Adding a custom component to SceneBuilder 2.0

Question

I have the need to have a selection listener and select method on a pane to be able to monitor and present a highlight when a node is clicked on.

I did the following:

public class PaneWithSelectionListener extends Pane {

    private ObjectProperty<Annotation> selectedAnnotation = new SimpleObjectProperty<>();

    public PaneWithSelectionListener() { 
        super();
        selectedAnnotation.addListener((obs, oldAnno, newAnno) -> {
            if (oldAnno != null) {
                oldAnno.setStyle("");
            }
            if (newAnno != null) {
                newAnno.setStyle("-fx-border-color: blue;-fx-border-insets: 5;-fx-border-width: 1;-fx-border-style: dashed;");
            }
        });

        setOnMouseClicked(e->selectAnnotation(null));
    }

    public void selectAnnotation(Annotation ann){
        selectedAnnotation.set(ann);
    }
}

And this works great - however I am not able to work with SceneBuilder anymore since my FXML references this PaneWithSelectionListener rather than Pane. I am not sure how to get my custom pane into SceneBuilder. I have looked at other questions and they are all a combination of FXML and Controllers - where this is just a Pane.

Does anyone know of a way to do this, or perhaps swap the Pane for a PaneWithSelectionListener at initialization time?

Thanks

Answer 1

If the issue is just to make your custom class available in SceneBuilder, you can do so with the following steps:

1. Bundle your custom class (and any supporting classes, such as Annotation) as a jar file
2. In SceneBuilder, activate the drop-down button next to "Library" in the top of the left pane:
3. Choose "Import JAR/FXML File..."
4. Select the Jar file created from step 1
5. Make sure the class you need access to in SceneBuilder (PaneWithSelectionListener) is checked
6. Press "Import Component"
7. PaneWithSelectionListener will now appear in SceneBuilder under "Custom" in the left pane:

You'll notice the drop-down in SceneBuilder has a "Custom Library Folder" option, from which you can open the folder where the jar files are stored. For a quick option, you can just copy jar files to this folder and (after a short delay), the contained classes will appear in the "Custom" list.