JavaFX+Jfoenix 学习笔记（一）--环境搭建及多款Hello World演示

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_26486347/article/details/96377846

1、环境搭建

以下为Maven开发环境搭建，如果不用Maven自行下载Jar包（jfoenix-8.0.8.jar和fontawesomefx-8.9.jar）即可，其他操作不变。

1.1、环境要求：

JDK至少1.8.x，建议用1.8的最新稳定版（我用的是1.8.0_171）。

1.2、创建Maven项目

这个不会的话，百度一下，这里不多说了。

1.3、在pom.xml中引入依赖JAR包

1.3.1、jfoenix-8.0.8.jar（我们的二号主角，提供更好看的组件）

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

1.3.2、fontawesomefx-8.9.jar（我们的特约嘉宾，提供好看的字体图标）

<dependency>
    <groupId>de.jensd</groupId>
    <artifactId>fontawesomefx</artifactId>
    <version>8.9</version>
</dependency>

pom.xml一览

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>zkh.javafx</groupId>
  <artifactId>learn</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>jar</packaging>

  <name>javafx</name>
  <url>http://maven.apache.org</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  </properties>

  <dependencies>
	<dependency>
	    <groupId>com.jfoenix</groupId>
	    <artifactId>jfoenix</artifactId>
	    <version>8.0.8</version>
	</dependency>
	<!-- 字体图标 -->
	<dependency>
        <groupId>de.jensd</groupId>
        <artifactId>fontawesomefx</artifactId>
        <version>8.9</version>
    </dependency>
	 	
	<dependency>
	    <groupId>com.alibaba</groupId>
	    <artifactId>fastjson</artifactId>
	    <version>1.2.58</version>
	</dependency>

    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
  </dependencies>
</project>

有了这两个Jar包基本基本就够用了，有了上面这几部三步基本环境就算搭建完毕，但我们最好再做一些其他事情，以方便接下来的开发工作

1.4、资源文件存放位置

右键项目新建资源文件夹resources，并创建css（存放我们自定义的样式文件）、img（存放图片）子文件夹，具体如下图所示：

1. app.css：存放我们自定义样式的核心文件
2. icon.ico：打包为exe时的图标（128*128）
3. icon.png：软件界面左上角的图标（大约600*590）
4. sysicon.png：系统托盘图标（大约14*16）

1.5、Java代码结构如下图：

1. learn：该文件夹将存放我们的功能代码
2. util：存放工具类
3. Constants.java：这是我们的常量类
4. App.java：我们的JavaFX程序的入口类（关键类，用于存放启动程序的main等）

1.6、整体项目结构如下图：

至此，环境搭建结束！

2、Hello World

并不仅仅是演示Hello World那么简单，也会将一些界面样式的用法

2.1、最简单的Hello World

package zkh.javafx.learn.helloworld;

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.stage.Stage;

/**
 * Hello World
 */
// 继承javafx.application.Application是JavaFX的开始
public class Helloworld1 extends Application {
	
	/**
	 * Stage：就是你能看到的整个软件界面（窗口）
	 * Scene：就是除了窗口最上面有最大、最小化及关闭按钮那一行及窗口边框外其它的区域（场景）
	 * 场景（Scene）是一个窗口（Stage）必不可少的
	 */
	@Override
	public void start(Stage stage) throws Exception {
		// 创建一个标签，用于存放我们的Hello World文本，并设置让它在父容器中居中
		Label label = new Label("Hello"); label.setAlignment(Pos.CENTER);
		/**
		 * 三步曲
		 */
		// 1、初始化一个场景
		Scene scene = new Scene(label, 400, 300);
		// 2、将场景放入窗口
		stage.setScene(scene);
		// 3、打开窗口
		stage.show();
	}
	
	public static void main( String[] args ){
		// 启动软件
		Application.launch(args);
    }
    
}

效果图：

是不是很简陋，简直不能太寒酸。。。

2.2、升级版的Hello World

添加标题、图标、背景、调整字体大小及颜色等等

package zkh.javafx.learn.helloworld;

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.paint.Color;
import javafx.scene.paint.Paint;
import javafx.scene.text.Font;
import javafx.stage.Stage;
import zkh.javafx.util.Constants;

/**
 * Hello World
 */
// 继承javafx.application.Application是JavaFX的开始
public class Helloworld2 extends Application {
	
	/**
	 * Stage：就是你能看到的整个软件界面（窗口）
	 * Scene：就是除了窗口最上面有最大、最小化及关闭按钮那一行及窗口边框外其它的区域（场景）
	 * 场景（Scene）是一个窗口（Stage）必不可少的
	 */
	@Override
	public void start(Stage stage) throws Exception {
		// 创建一个标签，用于存放我们的Hello World文本，并设置让它在父容器中居中
		Label label = new Label("Hello"); label.setAlignment(Pos.CENTER);
		// 设置字体大小、颜色（当然我们也可以用css来设置，先这样写）
		label.setFont(Font.font(30)); // 或者顺带设置字体 label.setFont(new Font("Arial", 30));
        label.setTextFill(Color.web("#FFFFFF"));
        label.setBackground(new Background(new BackgroundFill(Paint.valueOf("black"), null, null)));
        // 设置设置图标
		label.setGraphic(new ImageView(new Image(Constants.IMG + "java.png", 50, 50, false, false)));
		/**
		 * 三步曲
		 */
		// 1、初始化一个场景
		Scene scene = new Scene(label, 400, 300);
		// 2、将场景放入窗口
		stage.setScene(scene);
		// 3、打开窗口
		stage.show();
	}
	
	public static void main( String[] args ){
		// 启动软件
		Application.launch(args);
    }
    
}

效果图：

这样比之前好一点了，但这用Java代码写样式也太不人道了吧，好那接下来咱就用css来实现一下

2.3、升级版的Hello World--使用css

package zkh.javafx.learn.helloworld;

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.stage.Stage;
import zkh.javafx.util.Constants;

/**
 * Hello World
 */
// 继承javafx.application.Application是JavaFX的开始
public class Helloworld3 extends Application {
	
	/**
	 * Stage：就是你能看到的整个软件界面（窗口）
	 * Scene：就是除了窗口最上面有最大、最小化及关闭按钮那一行及窗口边框外其它的区域（场景）
	 * 场景（Scene）是一个窗口（Stage）必不可少的
	 */
	@Override
	public void start(Stage stage) throws Exception {
		// 创建一个标签，用于存放我们的Hello World文本，并设置让它在父容器中居中
		Label label = new Label("Hello"); label.setAlignment(Pos.CENTER);
		// 用css写样式
        label.setStyle("-fx-font-size:30;-fx-text-fill:#FFFFFF;-fx-background-color:black");
        // 设置设置图标
		label.setGraphic(new ImageView(new Image(Constants.IMG + "java.png", 50, 50, false, false)));
		/**
		 * 三步曲
		 */
		// 1、初始化一个场景
		Scene scene = new Scene(label, 400, 300);
		// 2、将场景放入窗口
		stage.setScene(scene);
		// 3、打开窗口
		stage.show();
	}
	
	public static void main( String[] args ){
		// 启动软件
		Application.launch(args);
    }
    
}

效果图跟2.2一致，如下图：

那既然能写css，能不能干脆独立写个css文件，用class来写样式呢，当然可以。

2.4、升级版的Hello World--引用css文件，并使用class

1. 首先创建css文件app.css（这个在上面创建过了），并编写css样式，具体看css文件代码
2. 然后在场景（Scene）中引入（scene.getStylesheets().add((Constants.CSS + "app.css").replace("\\", "/"));），具体看代码
3. 最后在组件Label中使用，用法（label.getStyleClass().add("hello-world_4");）,具体看代码

package zkh.javafx.learn.helloworld;

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.stage.Stage;
import zkh.javafx.util.Constants;

/**
 * Hello World
 */
// 继承javafx.application.Application是JavaFX的开始
public class Helloworld4 extends Application {
	
	/**
	 * Stage：就是你能看到的整个软件界面（窗口）
	 * Scene：就是除了窗口最上面有最大、最小化及关闭按钮那一行及窗口边框外其它的区域（场景）
	 * 场景（Scene）是一个窗口（Stage）必不可少的
	 */
	@Override
	public void start(Stage stage) throws Exception {
		// 创建一个标签，用于存放我们的Hello World文本，并设置让它在父容器中居中
		Label label = new Label("Hello"); label.setAlignment(Pos.CENTER);
		// 用css写样式
        label.getStyleClass().add("hello-world_4");
        // 设置设置图标
		label.setGraphic(new ImageView(new Image(Constants.IMG + "java.png", 50, 50, false, false)));
		/**
		 * 三步曲
		 */
		// 1、初始化一个场景
		Scene scene = new Scene(label, 400, 300);
		// 样式文件最好在Scene中引入，这样其他子组件就都可以使用了（哲理注意替换斜杠\,不能会报错找不到路径）
		scene.getStylesheets().add((Constants.CSS + "app.css").replace("\\", "/"));
		// 2、将场景放入窗口
		stage.setScene(scene);
		// 3、打开窗口
		stage.show();
	}
	
	public static void main( String[] args ){
		// 启动软件
		Application.launch(args);
    }
    
}

CSS样式文件代码如图：

.hello-world_4{
	-fx-font-size:30;
	-fx-text-fill:#FFFFFF;
	-fx-background-color:black;
}

效果图跟2.2一致，如下图：

3、源代码（不推荐，文章基本都有了）

JavaFX+Jfoenix 学习笔记（一）--环境搭建及多款Hello World演示源码

好了，有什么不懂看注释，我要相信我的注释！