javafx 8 order children in custom control

Question

I'm writing a custom control which displays an error icon and a message in a tooltip if the validation in a form fails. My version without the custom control looks like this:

<HBox>
    <TextField fx:id="name"></TextField>
    <Label fx:id="error" focusTraversable="false" visible="false">
        <graphic>
            <ImageView fitHeight="24.0" fitWidth="24.0" pickOnBounds="true" preserveRatio="true"/>
        </graphic>
        <tooltip>
            <Tooltip fx:id="errorTooltip"/>
        </tooltip>
    </Label>
</HBox>

The result is this:

My efforts to create a custom control lead to this:

<fx:root type="javafx.scene.layout.HBox" xmlns:fx="http://javafx.com/fxml">
    <children/>
    <Label fx:id="error" focusTraversable="false" visible="false">
        <graphic>
            <ImageView fitHeight="24.0" fitWidth="24.0" pickOnBounds="true" preserveRatio="true"/>
        </graphic>
        <tooltip>
            <Tooltip fx:id="errorToolTip"/>
        </tooltip>
    </Label>
</fx:root>

This is the code behind the fxml:

package control;

[imports omitted for brevity]

@DefaultProperty(value = "children")
public final class ValidatedControl extends HBox implements Initializable {

    @FXML
    private Label error;
    @FXML
    private Tooltip errorToolTip;
    private StringProperty errorToolTipProperty;

    public ValidatedControl() {
        final FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("ValidatedControl.fxml"));
        fxmlLoader.setRoot(this);
        fxmlLoader.setController(this);
        try {
            fxmlLoader.load();
        } catch (IOException exception) {
            throw new RuntimeException(exception);
        }
    }

    public void setErrorToolTip(final String errorToolTip) {
        this.getErrorToolTipProperty().setValue(errorToolTip);
    }

    public String getErrorToolTip() {
        return this.getErrorToolTipProperty().getValueSafe();
    }

    @Override
    public void initialize(final URL location, final ResourceBundle resources) {
        this.errorToolTip.textProperty().bind(this.getErrorToolTipProperty());
        this.error.visibleProperty().bind(this.getErrorToolTipProperty().isNotEmpty());
    }

    public StringProperty getErrorToolTipProperty() {
        if (this.errorToolTipProperty == null) {
            this.errorToolTipProperty = new SimpleStringProperty();
        }
        return this.errorToolTipProperty;
    }
}

I can use the control in fxml but the child component I add is always the last child which means the error icon is displayed to its left.

My control is used like this:

<ValidatedControl>
    <TextField>
    </TextField>
</ValidatedControl>

How do I get it to display the icon on the right side?

Answer 1

Now I do understand your problem. This might not fix your problem when you add your ValidatedControl in FXML, but when you do it programmatically try this:

ValidatedControl vc = new ValidatedControl();
TextField textField = new TextField();
vc.getChildren().add(textField);
textField.toBack();

Another way would be to go ItachiUchiha's way and add a Pane in your FXML as first child. But instead of overwriting the getChildren() method, write a new Method addNode(Node n) and add the node to the Pane.

forget about my first answer ;)