Search code examples
javafxfxml

Add custom component to FXML scene builder in intelliJ

I want to add a custom component / custom components to the javafx scene builder in intelliJ. I'm currently using java 8.1. I heard that adding components to the scene builder is possible with java 10 because it has java 2.0. I have java 10 installed, but I don't know how to switch to that version of java. So if you know how to solve this problem, I'd love to hear it.

Thanks in advance,

Lenardjee

Edit: I see why this problem is simular to other posts, for the direct problem is directly adding the custom component to the scene builder. However, that problem has an underlying reason for existing, being the fact that I use the editor in intelliJ and that editor is for javafx 1.0 or so, and the function of adding custom components is supported by the editor for javafx 2.0, which is in java 10. Now the real problem is: how do I update the scene builder in intelliJ? I have java 10 already installed but my project is still using java 8.1 and I don't know how to change it. I hope this explains why my question is relevant and so not a duplicate. Thanks for reading this explanation that is longer than the initial question ;p

Solution

  • I want to be able to make a java class, extending Pane or so, then assign children and actions to it, such as a slidebar with a textfield next to it, showing the value. I know that in the scene builder app, that is possible by importing a jar file with the class and dependencies straight into the scene builder, but I don't know how to do that in the scene builder in intelliJ.

    There is no difference in how you use Scene Builder. You just add properties in user control (with getters and setters if the property is not read only). In this case, the properties will appear in the Scene Builder inspector, and you will be able to manipulate them either by them or by directly editing the FXML file.

    Here's an example (java 8, but this is irrelevant)

    mycontrol.fxml

    <fx:root type="javafx.scene.layout.HBox" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml">
    <Label fx:id="label"/>
    <Slider fx:id="slider" HBox.hgrow="ALWAYS"/>
</fx:root>

    public class MyControl extends HBox {

    @FXML
    private Label label;

    @FXML
    private Slider slider;

    private StringProperty labelName = new SimpleStringProperty();
    private DoubleProperty sliderPos = new SimpleDoubleProperty();

    public MyControl() {
        try {
            FXMLLoader l = new FXMLLoader(getClass().getResource("mycontrol.fxml"));
            l.setController(this);
            l.setRoot(this);
            l.load();
        }
        catch (IOException e) {
            e.printStackTrace();
        }
    }

    @FXML
    private void initialize() {
        slider.setMin(0.0);
        slider.setMax(100.0);

        label.textProperty().bindBidirectional(labelName);
        slider.valueProperty().bindBidirectional(sliderPos);
    }

    public String getLabelName() {
        return labelName.get();
    }

    public StringProperty labelNameProperty() {
        return labelName;
    }

    public void setLabelName(String labelName) {
        this.labelName.set(labelName);
    }

    public double getSliderPos() {
        return sliderPos.get();
    }

    public DoubleProperty sliderPosProperty() {
        return sliderPos;
    }

    public void setSliderPos(double sliderPos) {
        this.sliderPos.set(sliderPos);
    }
}

    And this is the scene in which this user control is used

    sample.fxml

    <AnchorPane xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.121" fx:controller="sample.Controller">
    <MyControl labelName="Test name" sliderPos="25.0" />
</AnchorPane>

    And this is the working view in IntelliJ