JavaFX自定义组件实例

2019-04-04

JavaFX自定义组件实例

可以参考我的另外一篇文章JavaFX自定义组件要点来看，这是一个实例。

文件结构

sample
--customcomponent
----CustomComponent.Java
----customcomponent.fxml
--Controller.java
--Main.java
--main.fxml

Main.fxml 主页面的布局

<?import javafx.scene.layout.BorderPane?>
<?import sample.processcontrol.ProcessControl?>
<BorderPane fx:controller="sample.Controller"
            xmlns:fx="http://javafx.com/fxml">
    <center>
      <CustomComponent message="Hello World!"/>
  </center>
</BorderPane>

Main.java 启动主类

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("main.fxml"));
        primaryStage.setTitle("");
        primaryStage.setScene(new Scene(root, 1600, 900));
        primaryStage.show();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

Controller.java 空的主控制器类

package sample;

public class Controller {
  
}

CustomComponent.fxml 自定义组件的布局

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

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

<fx:root type="javafx.scene.layout.GridPane"
         xmlns="http://javafx.com/javafx"
         xmlns:fx="http://javafx.com/fxml">
    <Label fx:id="message"/>
</fx:root>

CustomComponent.java 自定义组件的控制器类和Root类，实质上这两个职责可以分开，在构造函数中可以指定。

package sample.CustomComponent;

import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.control.Label;
import javafx.scene.layout.GridPane;

import java.io.IOException;

public class CustomComponent extends GridPane {

    @FXML
    Label message;

    public ProcessControl() throws IOException {
        FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("customcomponent.fxml"));
        fxmlLoader.setRoot(this);
        fxmlLoader.setController(this);
        fxmlLoader.load();
    }

    public void setMessage(String message){
        this.message.setText(message);
    }

    public String getMessage(){
        return this.message.getText();
    }
}

运行效果：

1554370256767

这个例子可以注意的是用了一个自定义Propmessage，通过定义getter setter实现。