JavaFX文档(12)掌握FXML——4使用FXML来创建自定义控件

声明：如需转载，请注明出处:http://blog.csdn.net/originer

原文地址：http://docs.oracle.com/javase/8/javafx/fxml-tutorial/custom_control.htm

在本教程中，你将会创建一个由文本框和按钮组成的自定义控件。如下图：

在开始之前，你需要确保自己的IDE支持JavaFX8。另外你需要对FXML工程的基本结构（.java,.fxml和Controller文件）已经了解了。

创建工程

在IDE中创建CustomControlExample工程，创建CustomControlExample.java,CustomControl.java、custom_control.fxml文件。

创建基本的用户界面

定义一个简单的自定义控件，其中包括一个TextField和一个Button实例。根容器是一个javafx.scene.layout.VBox类。

1. 编辑custom_control.fxml文件

2.将代码改成如下所示：

<?import javafx.scene.*?><?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<fx:root type="javafx.scene.layout.VBox" xmlns:fx="http://javafx.com/fxml"> 
    <TextField fx:id="textField"/>
    <Button text="Click Me" onAction="#doSomething"/>
</fx:root>

创建一个控制器

在本例中CustomControl类继承了VBox类（由<fx:root>元素所定义的类型），并且在其构造方法中设置其自身既是root、也是FXML的Controller。当文档被加载时，CustomControl实例将会由文档内容所填充而成。

将CustomControl类的代码改成如下所示：

package customcontrolexample;

import java.io.IOException;

import javafx.beans.property.StringProperty;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;

public class CustomControl extends VBox {
    @FXML private TextField textField;

    public CustomControl() {
        FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource(
"custom_control.fxml"));
        fxmlLoader.setRoot(this);
        fxmlLoader.setController(this);

        try {
            fxmlLoader.load();
        } catch (IOException exception) {
            throw new RuntimeException(exception);
        }
    }

    public String getText() {
        return textProperty().get();
    }

    public void setText(String value) {
        textProperty().set(value);
    }

    public StringProperty textProperty() {
        return textField.textProperty();
    }

    @FXML
    protected void doSomething() {
        System.out.println("The button was clicked!");
    }
}

加载FXML源文件、定义Stage和Scene

CustomControlExample.java文件包括了main入口，其中定义了stage和scene，并且加载FXML源文件。此类通过CustomControl类来加载FXML源文件。

将CustomControlExample类代码修改为：

package customcontrolexample;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class CustomControlExample extends Application{

	@Override
	public void start(Stage stage) throws Exception {
		CustomControl customControl = new CustomControl();
		customControl.setText("Hello!");
		stage.setScene(new Scene(customControl));
		stage.setTitle("Custom Control");
		stage.setWidth(300);
		stage.setHeight(200);
		stage.show();
	}
	public static void main(String[] args) {
		launch(args);
	}

}

运行界面如下：

控件创建完毕后，可以在代码或FXML中像使用标准控件一样来使用它，样例如下：

代码样例：

HBox hbox = new HBox();
CustomControl customControl = new CustomControl();
customControl.setText("Hello World!");
hbox.getChildren().add(customControl);

FXML样例：

<HBox>
    <CustomControl text="Hello World!"/>
</HBox>

可以下载 CustomControlExample.zip来查看完整的源码。