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

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

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

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

JavaFX文档(12)掌握FXML——4使用FXML来创建自定义控件_第1张图片

在开始之前,你需要确保自己的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.将代码改成如下所示:





 
    
    

创建一个控制器

在本例中CustomControl类继承了VBox类(由元素所定义的类型),并且在其构造方法中设置其自身既是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);
	}

}

运行界面如下:

JavaFX文档(12)掌握FXML——4使用FXML来创建自定义控件_第2张图片

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

代码样例:

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


FXML样例:


    

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

你可能感兴趣的:(JavaFX)