如何扩展使用FXML的自定义JavaFX组件

Question

package test;

import java.io.IOException;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;

public class SpecializedButton extends HBox
{
    @FXML private Button button;
    @FXML private Label label;

    public SpecializedButton() 
    {
        FXMLLoader loader = new FXMLLoader( getClass().getResource( "SpecializedButton.fxml" ) );

        loader.setRoot( this );
        loader.setController( this );

        try {
            loader.load();
        } catch ( IOException e ) {
            throw new RuntimeException( e );
        }
    }

    // specialized methods for this specialized button
    // ...
    public void doSomething() {
        button.setText( "Did something!" );
    }
}

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

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.control.Button?>

<fx:root type="HBox" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <AnchorPane HBox.hgrow="ALWAYS">
         <children>
            <Label fx:id="label" text="Click to do something: " AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
         </children>
      </AnchorPane>
      <AnchorPane HBox.hgrow="ALWAYS">
         <children>
            <Button fx:id="button" onAction="#doSomething" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
         </children>
      </AnchorPane>
   </children>
</fx:root>

package test;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class MyApp extends Application
{
    public static void main( String[] args )
    {
        launch( args );
    }

    public void start( Stage stage ) throws Exception
    {
        stage.setScene( new Scene( new SpecializedButton(), 300, 50 ) );
        stage.show();
    }
}

SpecializedButton FXML视图只创建一个HBox，其中有两个锚窗格，左右两侧分别有一个标签和按钮。单击按钮时，它调用SpecializedButton控制器类中的doSomething（）。

问题

通过这个设置，我使用FXML将视图与应用程序逻辑分开。

我会非常感谢你的真知灼见。提前道谢！

Answer 1

根据我的理解，您希望能够扩展现有组件，避免复制和粘贴新组件的整个标记。

您可以使用@defaultproperty注释为组件定义扩展点。看看E.X。javafx.scene.layout.pane:使用@defaultproperty（“children”）定义了一个observableList getChildren（）。这样，当您使用e.x一个hbox（扩展窗格）作为组件的根元素时，所有子组件都会添加到窗格定义的children属性中。

您可以以同样的方式在FXML中定义扩展点：

<fx:root type="HBox">
  <HBox>
    <Label fx:id="label" text="Click to do something: " />
    <HBox fx:id="extension"></HBox>
  </HBox>

  <HBox>
    <Button fx:id="button" onAction="#doSomething"/>
  </HBox>
</fx:root>

@DefaultProperty(value = "extension")
public class SpecializedButton extends HBox
{
    @FXML private HBox extension;

    public ObservableList<Node> getExtension() {
        return extension.getChildren();
    }
    // ... more component specific code
}

<fx:root type="SpecializedButton">
  <Label text="EXTENDED HALLO"/>
</fx:root>

和：

public class SuperSpecializedButton extends SpecializedButton
{
    // ... more component specific code
}

正如您所看到的，我只需要为超专门化组件定义fxml。

这段代码仅适用于JavaFX>=2.1。在此之前，超类的组件注入不能与FXMLLoader一起工作。