mvc教學 如何在JavaFX中理解和使用`<fx:root>`?



javafx設計 (1)

<fx:root>提供了使用FXML定義可重用組件的問題的解決方案。

例如,假設您想要定義一個簡單的自定義組件,該組件由HBox包含的TextFieldButton組成。 你需要這個由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);
    }
}

使用FXML定義沒有<fx:root>元素的自定義組件會出現問題,因為您需要FXML作為某種節點,然後是另一個節點實例來表示包裝它的類:

<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包裹一個包裹TextField和Button的HBox組成。 額外的冗餘HBox是因為需要一個節點用於FXML根節點而一個節點代表該組件。

<fx:root>提供了一種機制來創建Node作為組件(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
        }
    }
}

現在MyComponent的結構與原始的全Java版本相同, HBox包含TextFieldButton 。 如果沒有<fx:root>元素,則無法使用FXML執行此操作。

它說標籤fx:root已被添加到javafx 2.2中,但我不明白如何使用它,儘管有這個示例: http://docs.oracle.com/javafx/2/fxml_get_started/whats_new2.htmhttp://docs.oracle.com/javafx/2/fxml_get_started/whats_new2.htm

main.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.fxmlfx: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"/>

實際上,我找不到兩種代碼的任何區別。 我想念什麼嗎?