JavaFX中如何理解和使用`<fx:root>`? [英] How to understand and use `<fx:root>` , in JavaFX?

问题描述

它说标签 fx:root 已添加到 javafx 2.2，但我不明白如何使用它，尽管使用此示例:http://docs.oracle.com/javafx/2/fxml_get_started/whats_new2.htm

It says tag fx:root has been added to javafx 2.2, but I don't understand how to use it, although with this sample: http://docs.oracle.com/javafx/2/fxml_get_started/whats_new2.htm

ma​​in.xml

<?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>

editor.fxml 没有 fx:root:

<?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"/>

其实我看不出这两种代码有什么区别.我有什么想念的吗?

Actually, I can't find any difference for the two kinds of code. Do I miss anything?

推荐答案

为使用 FXML 定义可重用组件的问题提供了解决方案.

<fx:root> provides a solution to the issue of defining a reusable component with FXML.

举个例子，假设您想定义一个简单的自定义组件，该组件由包含在 HBox 中的 TextField 和 Button 组成.你需要用Node的子类来表示它，这样你就可以写出像

As an example, imagine you want to define a simple custom component consisting of a TextField and Button contained in an HBox. You need this to be represented by a subclass of Node, so you can write code like

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

问题是您需要一个 Java 类，它是 Node 的子类，以及 FXML.在纯 Java(无 FXML)中，您可以使用:

The issue is you need a Java class which is a subclass of Node, as well as the FXML. In pure Java (no FXML), you could do this with:

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

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

使用 FXML 定义没有 元素的自定义组件会出现问题，因为您需要 FXML 是某种节点，然后是另一个节点实例来表示类包装它:

Using FXML to define the custom component without the <fx:root> element presents a problem, because you need the FXML to be some kind of node, and then another node instance to represent the class wrapping it:

<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 根和一个节点来表示组件.

This results in MyComponent consisting of an HBox wrapping an HBox wrapping the TextField and Button. The additional, redundant HBox is a result of needing one Node for the FXML root and one Node to represent the component.

提供了一种机制来创建 Node 作为组件(Java 类)，然后指示 FXML 文件使用该节点作为其根:

<fx:root> gives a mechanism to create the Node as the component (the Java class) and then to instruct the FXML file to use that node as its root:

<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
        }
    }
}

现在 MyComponent 具有与原始全 Java 版本相同的结构，一个 HBox 包含一个 TextField 和一个 Button.如果没有 元素，您将无法使用 FXML 执行此操作.

Now MyComponent has the same structure as the original all-Java version, an HBox containing a TextField and a Button. You can't do this using FXML without the <fx:root> element.

这篇关于JavaFX中如何理解和使用`<fx:root>`?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！