往年打算踏出畛域之外，做一点桌面开发，在几个桌面开发之间抉择了一下，最终还是抉择了JavaFx，起因这个也是用Java做的，不必再学习一门语言。JavaFx还有一个游戏引擎，打算前面写一点游戏玩玩。那么JDK版本的抉择呢，抉择了JDK 11，很大的起因在于JDK 带有 Jlink能够对JDK进行裁剪，让最终生成的平台包尽可能的小。
javaFx 有个非常不错的文档: https://fxdocs.github.io/docs...
本篇教程基本上根据这个文档。浏览本系列教程的前提是有JavaSE的根底，maven熟练掌握。
前言
在我迈入大学的时候，我没想到第一门编程语言进去的是一个黑窗口，这让我非常失落，这让我一点能源都没有，甚至让我一度非常失落。前面我买了本C语言游戏开发，感觉蛮有意思的，然而投入精力不多，我过后的次要精力还是用在数学上。前面开了Java课程，我其实也没那么有兴致，翻到教科书前面发现有桌面开发，于是兴奋起来，然而发现Java Swing比拟丑:
于是放弃了学习的想法。然而偶然间发现了Java出了JavaFx，看了看界面发现长的不错，是个“标致的小姑娘”，再加上有个游戏引擎，我打算开发写点游戏玩玩，就打算简略学习一下。
javaFx 是啥？
JavaFX 是一个开源的下一代客户端利用平台，实用于基于Java构建的桌面、挪动端和嵌入式零碎。 --- javaFx官网
所以JavaFx是一个利用平台，咱们能够借助JavaFx来构建图形化利用。
从Hello World开始
JDK 11 的装置这里不再赘述，除此之外还须要一个maven archetype，第一个例子咱们先跟着做。上面是装置JavaFx archetype 的脚本:
git clone https://github.com/openjfx/javafx-maven-archetypes.gitcd javafx-maven-archetypesmvn clean install# 坐标如下GroupId = org.openjfxArtifactId = javafx-archetype-simple略微解释一下，JDK 11 进行了模块化，rt这个包引入不到。
就会呈现一个窗口:
这个maven 模板产生的java Fx 的依赖版本是 13 ，我将其改为了11。上面来解释一下这个代码：
public class App extends Application { @Override public void start(Stage stage) { var javaVersion = SystemInfo.javaVersion(); var javafxVersion = SystemInfo.javafxVersion(); var label = new Label("Hello, JavaFX " + javafxVersion + ", running on Java " + javaVersion + "."); var scene = new Scene(new StackPane(label), 640, 480); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(); }public class SystemInfo { // 获取以后Java的版本 public static String javaVersion() { return System.getProperty("java.version"); } // 获取以后javaFx的版本 public static String javafxVersion() { return System.getProperty("javafx.version"); }}进去的图形的数据结构如下所示:
Stage 有舞台的意思, 能够了解为JavaFx对以后操作系统窗口的包装，Scene则有场景的意思，所以讨巧一点的了解是，javaFx的设计者将桌面开发了解为戏剧的上演，戏剧须要有舞台，而戏剧则有不同的场景，不同的场景有不同的安排，在下面的“hello world”这个小戏剧中，咱们下面只摆了StackPane，StackPane上放了Label。下面是一种比较简单的数据结构图，更为通用的如下：
间接或者间接依附于Scene的元素，统称为Scene Graph，这里将这个词译为场景图，其实看到Graph，我想到的是数据结构外面的图，感觉这个翻译不适合，然而又找不出太好的译名，就权且用这个译名吧。JavaFx中任意一个窗口都能够示意为下面的数据结构，在任意给定工夫，一个Stage都能够有一个Scene附加到它。
JavaFx中场景图中的所有元素都是Node对象。Node有三种类型: 跟、分支、叶。根结点时惟一没有父结点的结点，看到这里有同学可能会问，Scene不是Node的父结点吗？ 从数据结构上看是，然而Scene自身并不是Node对象，咱们能够将Scene了解为大地。分支结点和叶子结点的区别在于叶子结点没有子结点。在场景图中，父结点的许多属性由子结点共享，
变换-Transformations
在JavaFx中变换分为三种: 平移、缩放、旋转。咱们将以上面的例子来演示这三种变换:
public class TransformApp extends Application { private Parent createContent(){ // 矩形设置长宽高 Rectangle box = new Rectangle(100,50, Color.BLUE); transform(box); return new Pane(box); } private void transform(Rectangle box) { // 在这里写变换的代码,上面只展现这个办法 } @Override public void start(Stage primaryStage) throws Exception { primaryStage.setScene(new Scene(createContent(),300,300,Color.GRAY)); primaryStage.show(); } public static void main(String[] args) { launch(args); }}在windows 上运行此程序进去的效果图如下：
Translate 挪动
在JavaFx中，结点能够有三维变换(X、Y或Z)和二维变换(X、Y)，然而咱们的示例应用程序是2D的，所以咱们将只思考X和Y轴。 在JavaFx和计算机图形学中，translate示意挪动。上面的程序将下面的矩形在X轴上平移100像素，在Y轴上平移200像素。
代码如下:
private void transform(Rectangle box) { // 在这里写变换的代码,上面只展现这个办法 box.setTranslateX(100); box.setTranslateY(200);}Scale 缩放
咱们能够应用缩放来使得结点变大或者变小，默认状况下，结点在每个轴上的缩放值为1。咱们将下面的矩形缩放1.5倍:
private void transform(Rectangle box) { // 在这里写变换的代码,上面只展现这个办法 box.setScaleX(1.5); box.setScaleY(1.5);}效果图:
Rotate 旋转
代码:
private void transform(Rectangle box) { // 先平移再旋转,比拟显著 box.setTranslateX(100); box.setTranslateY(200); // 旋转30度 box.setRotate(30);}成果:
事件处理 - Event Handling
事件告诉，从字面意思了解就行，就是结点上呈现了某事件，来告诉监听的人。举一个例子，咱们登录零碎输出完用户名、明码，点击登录就有对应的监听将你输出的信息发送到服务端。事件通常是事件零碎的原语。一般来说，一个事件零碎有以下三个职责:
- 触发事件
- 告诉监听该事件的监听方
- 处理事件
事件告诉有javaFx平台主动实现，咱们就只思考触发事件、监听事件以及如何解决他们就好了。
public class EventApp extends Application { @Override public void start(Stage primaryStage) throws Exception { // 发明一个按钮 Button button = new Button("监听点击事件"); // 监听按钮点击事件,点击按钮输入helloworld button.setOnAction(o->{ System.out.println("hello world"); }); // Pane pane = new Pane(button); primaryStage.setScene(new Scene(pane,300,200)); primaryStage.show(); }}键鼠事件是最常见的，每个Node都有封装好的办法来监听解决这些事件。
写在最初
目前来说JavaFx的参考资料绝对有点少，我在学习中也是一波三折，官网的开发者文档着实有点不敌对，所幸在搜索引擎上以JavaFx 瞎搜，搜到了不错的参考资料:https://fxdocs.github.io/docs...。然而这篇文档感觉还是不够面向初学者，好在是串了一条主线，本文是基于这篇文章，再加上了本人的了解的。