Skinning: binding via ID stops working when using a ScrollPane

[oova]

Hi,

I took the sample code for skinning a form using an FXML file from
https://github.com/dooApp/FXForm2/blob/master/samples/src/main/java/com/dooapp/fxform/samples/FXMLSkin.java

Everything worked as expected, the bean properties were shown in the form.
Then I wrapped the AnchorPane's children in a ScrollPane like this:

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2">
  <children>
    <ScrollPane>
      <content>
        <Label id="firstName-form-label" layoutX="272.0" layoutY="14.0" text="Label" />
        <TextField id="firstName-form-editor" layoutX="199.0" layoutY="36.0" prefWidth="200.0" />
        <Label id="lastName-form-label" layoutX="14.0" layoutY="184.0" text="Label" />
        <TextArea id="lastName-form-editor" layoutX="79.0" layoutY="115.0" prefWidth="200.0" wrapText="true" />
        <Label id="age-form-label" layoutX="334.0" layoutY="326.0" text="Label" />
        <TextField id="age-form-editor" layoutX="362.0" layoutY="342.0" prefWidth="200.0" />
      </content>
    </ScrollPane>
  </children>
</AnchorPane>

This resulted in an empty form being shown. There seemed to be no bindings between bean properties and GUI components.

Did I make a mistake or is ScrollPane not supported at the moment?

Keep up the great work!
oova

[amischler]

This is an issue with your FXML. The content of your ScrollPane is a list of nodes where it should contains a single content node. You might want to use a container there, which will then contain your form elements like in the example below.

Note : I recommend you to use the SceneBuilder to check or build your FXML interface !

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <ScrollPane layoutX="188.0" layoutY="94.0" prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <content>
            <VBox prefHeight="200.0" prefWidth="100.0">
               <children>
                  <Label text="Label" />
                  <Label text="Label" />
               </children>
            </VBox>
         </content>
      </ScrollPane>
   </children>
</AnchorPane>

[oova]

Sorry, I pasted the wrong FXML code. Here's the correct version:

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity"
            prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml/1"
            xmlns="http://javafx.com/javafx/2.2">
    <children>
        <ScrollPane>
            <content>
                <VBox>
                    <children>
                        <Label id="firstName-form-label" layoutX="272.0" layoutY="14.0" text="Label"/>
                        <TextField id="firstName-form-editor" layoutX="199.0" layoutY="36.0" prefWidth="200.0"/>
                        <Label id="lastName-form-label" layoutX="14.0" layoutY="184.0" text="Label"/>
                        <TextArea id="lastName-form-editor" layoutX="79.0" layoutY="115.0" prefWidth="200.0"
                                  wrapText="true"/>
                        <Label id="age-form-label" layoutX="334.0" layoutY="326.0" text="Label"/>
                        <TextField id="age-form-editor" layoutX="362.0" layoutY="342.0" prefWidth="200.0"/>
                    </children>
                </VBox>
            </content>
        </ScrollPane>
    </children>
</AnchorPane>

It works if you comment out the ScrollPane node, but it stops working if the ScrollPane is included.

[amischler]

The issue is still related to your FXML which is invalid. Please check with the Scene Builder as suggested, you will see that it's not able to load it.

Once our FXML is valid, the form bindings should work correctly, there is nothing specific to do to handle the ScrollPane.

[oova]

Sorry again for posting an invalid FXML file. The issue does not seem to be related to my lack of copy and paste talents, though.

Here is my full (and valid) ScrollPaneForm.fxml file:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.TextArea?>
<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity"
            prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.172">
    <children>
        <ScrollPane>
            <content>
                <VBox>
                    <children>
                        <Label id="firstName-form-label" layoutX="272.0" layoutY="14.0" text="Label"/>
                        <TextField id="firstName-form-editor" layoutX="199.0" layoutY="36.0" prefWidth="200.0"/>
                        <Label id="lastName-form-label" layoutX="14.0" layoutY="184.0" text="Label"/>
                        <TextArea id="lastName-form-editor" layoutX="79.0" layoutY="115.0" prefWidth="200.0"
                                  wrapText="true"/>
                        <Label id="age-form-label" layoutX="334.0" layoutY="326.0" text="Label"/>
                        <TextField id="age-form-editor" layoutX="362.0" layoutY="342.0" prefWidth="200.0"/>
                    </children>
                </VBox>
            </content>
        </ScrollPane>
    </children>
</AnchorPane>

And here is the Java code for showing the form:

import java.net.URL;

import com.dooapp.fxform.FXForm;
import com.dooapp.fxform.annotation.Accessor;
import com.dooapp.fxform.annotation.FormFactory;
import com.dooapp.fxform.view.factory.impl.TextAreaFactory;
import com.dooapp.fxform.view.skin.FXMLSkin;

import javafx.application.Application;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

public class ScrollPaneForm extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        Pane root = new Pane();
        FXForm<User> form = new FXForm<>();
        User user = new User();

        URL fxmlUrl = this.getClass().getResource("ScrollPaneForm.fxml");
        form.setSkin(new FXMLSkin(form, fxmlUrl));

        form.setSource(user);
        root.getChildren().add(form);

        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    @Accessor(value = Accessor.AccessType.FIELD)
    public class User {

        public StringProperty firstName = new SimpleStringProperty("Jon");

        @FormFactory(TextAreaFactory.class) //The field will use a TextArea instead of the default TextField
        public StringProperty lastName = new SimpleStringProperty("Smith");

        public IntegerProperty age = new SimpleIntegerProperty(10);

    }
}

When I launch this application, the bindings do not work, i.e., I do not see any values in the text fields or the text area.

When I use the following FXML which does not wrap the VBox in a ScrollPane, everything works as expected:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.VBox?>
<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity"
            prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.172">
    <children>
        <!--<ScrollPane>-->
        <!--<content>-->
        <VBox>
            <children>
                <Label id="firstName-form-label" layoutX="272.0" layoutY="14.0" text="Label"/>
                <TextField id="firstName-form-editor" layoutX="199.0" layoutY="36.0" prefWidth="200.0"/>
                <Label id="lastName-form-label" layoutX="14.0" layoutY="184.0" text="Label"/>
                <TextArea id="lastName-form-editor" layoutX="79.0" layoutY="115.0" prefWidth="200.0"
                          wrapText="true"/>
                <Label id="age-form-label" layoutX="334.0" layoutY="326.0" text="Label"/>
                <TextField id="age-form-editor" layoutX="362.0" layoutY="342.0" prefWidth="200.0"/>
            </children>
        </VBox>
        <!--</content>-->
        <!--</ScrollPane>-->
    </children>
</AnchorPane>

I hope you can reproduce my problem now.

Thank you for your support.

[oova]

The issue I'm seeing seems to be caused by JavaFX's behaviour when performing a lookup on a scene graph that contains a ScrollPane or TitledPane. This is explained in more detail in this SO question.

In my case, the lookup is performed in the private FXFormNode lookupNode(Element element, String suffix) method in FXForm's NodeSkin class. This lookup returns null if my FXML includes the ScrollPane.

The solution recommended on SO is to wrap the code performing the lookup in a Platform.runLater call. I might give this a try.

@amischler Do you see any other potential solutions which might work with the existing FXForm code?

[oova]

A workaround for the sample application above is to set the source on the form after calling primaryStage.show(). At this point, the CSS has been applied such that the lookup finds the scroll pane content nodes .

[amischler]

Interesting, thank you for investigating on this.

According to this other conversation on SO, it looks like looking up nodes throught their ids is rather not recommended, since we can not predict when an id will be attributed to the node.

As a fix, I pushed a commit that allow to lookup nodes in the FXMLSkin through the FXMLLoader namespace (as suggested in the conversation) if the id lookup fails. This way we can retrieve the nodes throught their fx:id. This seems a bit more robust than the id lookup since we are not dependent of the rendering/css. I will update the documentation according to this.

[amischler]

Deployed in 8.3.0-SNAPSHOT

[amischler]

Documentation updated

[oova]

Thanks a lot! I tested your change with my application successfully. The bindings work if I follow the naming convention for the fx:id properties you used in your example.

Do we still need the id properties when we are using FXML? In your issue170.fxml, it looks like one has to follow two naming conventions: one for the id properties and another one for the fx:id properties. This might be a source of confusion.

[oova]

One more thing: when I use an FXMLSkin and provide my custom controller class, I would like to add nodes to the FXML scene graph dynamically in the controller. These nodes need to be bound to model properties as well, but since they are not known to the FXML namespace, the lookup will fail.

I could use a NodeSkin instead of an FXMLSkin but the NodeSkin class uses the old lookup method which fails to recognise children of ScrollPane if CSS has not been applied.

What to do in this case?