JFoenix是一个开源的 JavaFX 的 MD设计 的 java 库，它使用 java 组件实现了 Google Material Design。

官网: http://www.jfoenix.com

GitHub: https://github.com/sshahine/JFoenix

搭建开发环境

JavaFX开发环境可以参考快速入门中的 1. 普通的JavaFX项目构建、开发和打包 或者 2. Maven 构建、开发和打包 JavaFX 项目, 这里我选择Maven方式。

搭建好JavaFX环境后，导入JFoenix包。

<dependency>
    <groupId>com.jfoenix</groupId>
    <artifactId>jfoenix</artifactId>
    <version>8.0.10</version>
</dependency>

代码编写

我就在 2. Maven 构建、开发和打包 JavaFX 项目 的基础上编写代码了, 之前的代码如下。

package com.learn;

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;

public class LearnMain02 extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
    	//创建一个BorderPane布局
			BorderPane rootPane = new BorderPane();

			//创建一个Label标签，将其添加到布局的中心
			Label label = new Label("Hello World!!!");
			rootPane.setCenter(label);

			// 创建一个800*640大小的Scene，关联其布局
			Scene scene = new Scene(rootPane, 800, 640);

			// 设置Stage的Scene、标题，然后显示
			primaryStage.setScene(scene);
			primaryStage.setTitle("JavaFX Maven 学习示例");
			primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

其运行效果：

将创建 label 的部分换成一个 FlowPanel , 之后往 FlowPanel 上添加两个按钮，一个 JFoenix 的按钮，一个JavaFX 原样的按钮，代码如下：

package com.learn;

import com.jfoenix.controls.JFXButton;
import com.jfoenix.controls.JFXRippler;

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.FlowPane;

public class LearnMain02 extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
    	//创建一个BorderPane布局
		BorderPane rootPane = new BorderPane();

		String style = "-jfx-button-type: FLAT;"
				+ "-fx-background-color:#5164ae;"
				+ "-fx-text-fill:fff;";
		FlowPane fp = new FlowPane();
		fp.setStyle("-fx-hgap:20;-fx-vgap:50");
		rootPane.setCenter(fp);
		
		JFXButton jfxButton = new JFXButton("JFoenix 按钮");
		jfxButton.setStyle(style);
		fp.getChildren().add(jfxButton);
		
		Button button = new Button("JavaFX 普通按钮");
		button.setStyle(style);
		fp.getChildren().add(button);

		// 创建一个800*640大小的Scene，关联其布局
		Scene scene = new Scene(rootPane, 800, 640);

		// 设置Stage的Scene、标题，然后显示
		primaryStage.setScene(scene);
		primaryStage.setTitle("JavaFX Maven 学习示例");
		primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

运行效果如下，点击JFoenix 的按钮时，会有点击效果，而 JavaFX 原样的按钮却没有效果。

具体使用可以参考官网和GitHub。