如何在JavaFX中理解和使用``？

Question

<?import javafx.scene.layout.GridPane?>
<GridPane fx:controller="sample.Controller"
          xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10">
    <fx:include fx:id="editorPane" source="editor.fxml"/>
</GridPane>

<?import javafx.scene.control.TextArea?>
<TextArea fx:id="editor" prefWidth="500" prefHeight="400" 
   fx:controller="sample.EditorController"
   xmlns:fx="http://javafx.com/fxml"/>

editor.fxml，使用fx:root:

<fx:root type="javafx.scene.control.TextArea"
     fx:id="editor" prefWidth="500" prefHeight="400"
     fx:controller="sample.EditorController"
     xmlns:fx="http://javafx.com/fxml"/>

实际上，我找不到这两种代码有什么不同。我错过什么了吗？

Answer 1

为使用FXML定义可重用组件提供了解决方案。

例如，假设您想定义一个简单的自定义组件，该组件由TextField和Button包含在Hbox中。您需要用node的子类来表示，这样就可以编写如下代码

VBox vbox = new VBox();
vbox.getChildren().add(new MyComponent());

问题是您需要一个Java类，它是node的子类，以及FXML。在纯Java中（没有FXML)，您可以使用：

public class MyComponent extends HBox {
    private TextField textField ;
    private Button button ;

    public MyComponent() {
        textField = new TextField();
        button = new Button();
        this.getChildren().addAll(textField, button);
    }
}

<HBox>
<TextField fx:id="textField"/>
<Button fx:id="button" />
</HBox>

public class MyComponent extends HBox {
    @FXML
    private TextField textField ;
    @FXML
    private Button button ;
    public MyComponent() {
        try {
            FXMLLoader loader = new FXMLLoader(getClass().getResource("MyComponent.fxml"));
            loader.setController(this);
            HBox hbox = loader.load();
            this.getChildren().add(hbox);
        } catch (IOException exc) {
            // handle exception
        }
    }
}

这将导致MyComponent包含一个HBox包装，一个HBox包装TextField和Button。额外的、冗余的HBox是需要一个节点作为FXML根和一个节点来表示组件的结果。

提供了一种机制，用于将节点创建为组件（Java类），然后指示FXML文件使用该节点作为根：

<fx:root type="javafx.scene.layout.HBox">
<TextField fx:id="textField" />
<Button fx:id="button" />
</fx:root>

和

public class MyComponent extends HBox {
    @FXML 
    private TextField textField ;
    @FXML
    private Button button ;
    public MyComponent() {
        try {
            FXMLLoader loader = new FXMLLoader(getClass().getResource("MyComponent.fxml"));
            loader.setController(this);
            loader.setRoot(this);
            loader.load();
        } catch (IOException exc) {
            // handle exception
        }
    }
}