Why does Scene Builder constantly create new instances of Nodes?

Question

Hi,
I thought I had a simple idea for creating a control that would let me get some of the behavior of a card pane.  This is the entire control:
import javafx.beans.property.BooleanProperty;
import javafx.beans.property.SimpleBooleanProperty;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.layout.StackPane;
public class Card extends StackPane {
    private final BooleanProperty active = new SimpleBooleanProperty();
    public final BooleanProperty activeProperty() {return active;}
    public final boolean isActive() {return active.get();}
    public final void setActive(boolean active) {this.active.set(active);}
        visibleProperty().bind(active);
        managedProperty().bind(active);
        active.addListener(new ChangeListener<Boolean>() {
            @Override
            public void changed(ObservableValue<? extends Boolean> observable,
                                Boolean old,
                                Boolean active) {
                System.out.println(toString() + " active changed to: " + active);
                if(active) {
                    Parent parent = getParent();
                    if(parent != null) {
                        System.out.println("Parent is: " + parent.toString());
                        parent.getChildrenUnmodifiable().forEach(Card.this::deactivateIfCard);
                    else {
                        System.out.println("Parent is null.");
    private void deactivateIfCard(Node node) {
        if(node != this && node instanceof Card) {
            Card card = (Card) node;
            card.setActive(false);
The idea is pretty simple; extend StackPane, add an active property, bind the visible and managed properties of the pane to the active property, and, whenever the active property is changed to true, iterate sibling nodes de-activating any siblings that are also of the type Card.
However, this doesn't work with Scene Builder.  While trying to debug, I created an ExtStackPane:
import javafx.collections.ListChangeListener;
import javafx.scene.Node;
import javafx.scene.layout.StackPane;
public class ExtStackPane extends StackPane {
        getChildren().addListener((ListChangeListener<Node>) c -> {
            System.out.println("ExtStackPane children change: " + c.toString());
All this does is log list change events.  However, I was very surprised by the output when working in Scene Builder.  I added both controls to Scene Builder and did the following:
0) Added an ExtStackPane
1) Added a Card to the ExtStackPane
2) Added another Card to the ExtStackPane
3) Added a Label to the first Card
4) Added a Label to the second Card
5) Changed the text of the first Label to Hello
6) Changed the text of the second Label to World
7) Set the first Card to active
8) Set the second Card to active
I get the following output:
1)
ExtStackPane children change: { [Card@5b9067b3] added at 0 }
2)
ExtStackPane children change: { [Card@6b6328bd] added at 0 }
ExtStackPane children change: { [Card@6aca8cc5] added at 1 }
3)
ExtStackPane children change: { [Card@3b7bc340] added at 0 }
ExtStackPane children change: { [Card@1879819e] added at 1 }
4)
ExtStackPane children change: { [Card@60ffed67] added at 0 }
ExtStackPane children change: { [Card@64955a14] added at 1 }
5)
ExtStackPane children change: { [Card@5dc96bc4] added at 0 }
ExtStackPane children change: { [Card@40667c26] added at 1 }
6)
ExtStackPane children change: { [Card@164770fa] added at 0 }
ExtStackPane children change: { [Card@7decebbf] added at 1 }
7)
Card$1@f4f4850 active changed to: true
Parent is null.
ExtStackPane children change: { [Card@27442c8b] added at 0 }
ExtStackPane children change: { [Card@643d810e] added at 1 }
8)
Card$1@4877c67b active changed to: true
Parent is null.
ExtStackPane children change: { [Card@7e8a473e] added at 0 }
Card$1@2b4497c1 active changed to: true
Parent is null.
ExtStackPane children change: { [Card@5df6c8cc] added at 1 }
This is what things look like in Scene Builder:
Does Scene Builder recreate the entire hierarchy every time I make a small change?  Here's an application that does the same as the manual steps I performed in Scene Builder:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.stage.Stage;
public class CardApplication extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        ExtStackPane stackPane = new ExtStackPane();
        // 1
        Card card1 = new Card();
        stackPane.getChildren().add(card1);
        // 2
        Card card2 = new Card();
        stackPane.getChildren().add(card2);
        // 3
        Label label1 = new Label();
        card1.getChildren().add(label1);
        // 4
        Label label2 = new Label();
        card2.getChildren().add(label2);
        // 5
        label1.setText("Hello");
        // 6
        label2.setText("World");
        primaryStage.setScene(new Scene(stackPane));
        primaryStage.setTitle("Card Application");
        primaryStage.setWidth(600);
        primaryStage.setHeight(400);
        primaryStage.show();
        // 7
        card1.setActive(true);
        // 8
        card2.setActive(true);
The output when running the above is:
1)
ExtStackPane children change: { [Card@6dfaa767] added at 0 }
2)
ExtStackPane children change: { [Card@6aa2c411] added at 1 }
7)
Card$1@1abf7511 active changed to: true
Parent is: ExtStackPane@41993867[styleClass=root]
8)
Card$1@5733cd2 active changed to: true
Parent is: ExtStackPane@41993867[styleClass=root]
Card$1@1abf7511 active changed to: false
The behavior is obviously a lot different than when I'm working with the control in Scene Builder.  Can anyone explain to me what Scene Builder is doing to change the behavior of my Card control so much?  Does my Card control break some rule(s) I'm not aware of?

Answer 1

I think you're confused about what SceneBuilder is doing.
SceneBuilder is a design tool, used by the programmer (not the end user) to generate part of the code that is used to execute the application. (Specifically, it generates the FXML code that is parsed by the FXMLLoader to create and configure objects that are typically part of the scene graph.)
While you are using SceneBuilder to create the code, it generates a mock-up of what the UI will look like, if the generated FXML were to be loaded and displayed. This mock-up is not supposed to be an identical view of what the end user will see, but an aid to you, as the programmer, to generate the code you want.
So, for your Accordion/TitledPane example, in the mock-up that SceneBuilder displays, the *selected* titled pane is always displayed expanded. This enables you to drag and drop items into it, and to configure it in other ways. If you uncheck the "expanded" checkbox in the properties pane, then it remains expanded in the mock-up so that you can continue to configure it. However, this property is not ignored: the state of those checkboxes is respected in the FXML file that is generated. So when you hit "save" in SceneBuilder, the generated fxml will contain TitledPane element with expanded="true" if the check box is checked, and expanded="false" if the check box is unchecked. (SceneBuilder will of course also enforce the rule that only one TitledPane in an Accordion can be expanded.)
Similarly, for your custom control, you should be able to set it up so SceneBuilder displays the "active" property in the check box. If you uncheck that property, so active=false, that will be respected in the fxml and when you execute the application, active will be set to false, and so by your binding, visible will be set to false and the component won't display. But the mock-up in SceneBuilder will (of course) still display your component, because it would be extremely difficult for you to configure a component that didn't appear in the programming tool.
In fact, there's no real reason for SceneBuilder to create any objects that you are configuring at all. It could just try to figure out what they look like and render a depiction of them on a canvas, for example. That's probably much (much) more difficult than instantiating them and the authors of SceneBuilder apparently chose to write SceneBuilder in a way that re-instantiated the controls many times. But that has absolutely nothing to do with what happens when you execute the application and it makes no sense at all to compare the two.