在 JavaFX 中进行 Material Design :第一章

2016/06/25 Java

我曾经一直思考,如何在 JavaFX 桌面开发中进行 Material Design。作为一个懒惰的程序员,当时我是希望能找到一些既成的轮子来做这些事情。在经历了接近 4 个小时的苦苦搜寻之后,我终于找到了一个非常优秀的开源项目——JFoenix。

简直是,众里寻他千百度,蓦然回首,那开源项目却在, GitHub 角落处。

说实话虽然这货既有官网又有文档,我作为一个 JavaFX 初学者折腾这玩意的时候还是非常辛苦的,文档和 Demo 说实话真的是一团糟,非常典型的那种开源项目。最终我也搞定了,功夫不负有心人。

于是就在这里写一篇教程,希望大家少走弯路。这是上篇,接下来可能还会有一篇进阶内容。敬请期待冰封放暑假。

现在就让我们开心地在 JavaFX 中使用 Material Design 控件吧!

依赖

考虑到部分同学不知道啥是 GitHub ,我就把 JFoenix 的链接贴出来了。剩下几个就自己找咯~

准备

  1. 首先,安装 JDK、JavaFX Scene Builder,两者均可在 Oracle 官网找到下载链接。
  2. 如果你还没有非常熟悉的 Java IDE ,那么请下载安装 IntelliJ IDEA ,这个过程我已经在另一篇博客中说明。
  3. 下载 JFoenix 的 jar 包。

出于一位朋友的反馈,再加上我自己之前的失误,我又去 Oracle 那纯 HTML 般的官网逛了一圈,把 JavaFX Scene Builder2.0 的下载链接找了过来。

下载提示:打开上文中 JFeonix 的链接,并找到这里。

开始

  • 打开自家神器 IntelliJ IDEA(你也可以使用你自己平时用的 IDE),创建一个 JavaFX 项目。萌萌哒 IDEA 已经为我们创建好了必须的代码咯。内容应该有:一个 Controller.java ,一个 sample.fxml ,一个 Main.java。记住这个 sample.java ,咱们待会还要用。

  • 打开 JavaFX Scene Builder ,按下快捷键Ctrl+O并打开你刚刚在 IDEA 中创建工程文件的地方,找到 src 目录,并打开,选择刚刚你已经看到了的、IDEA 自动生成的 Sample.fxml ,并打开它。

  • 另外看到这个小可爱了吗?点击它,选择弹出的菜单中的 import JAR/FXML file… 这个选项,接下来找到你之前下载的 jfeonix.jar ,双击打开。由于我无法截得完整的弹出菜单的图片,就只有委屈读者自行解决了。

  • 这里提一句,有可能 IDEA 会在为你自动创建项目时在这个 fxml 里面加入一些控件,于是我们这种初学者当然是要把它们删掉的了,比如冰封在创建项目的时候,就看到了这个叫做 GridPane 的东西。处理办法:点击这个东西,然后按键盘上的 Delete 键。然后它就没有了。

进行中

  • 从左边的控件列表中选择 container 中的 AnchorPane ,拖拽到中间的灰色界面处。你会看到一个白色的大框框出现在中间。 这个白色的大框框就是我们的 GUI 界面了。它现在还是空的,让我们给它添加一些东西。下面以一个简单的、Material Design 的按钮为例子。

  • 再选择 Custom 中的 JFXButton ,拖拽到那个白色大框框里面。你现在可以看到,在这个白色的大框框里面有一个按钮。你现在把按钮拖进去,就相当于在我们的 GUI 界面里面添加了这个控件。这里要注意一个问题,一定要把这个按钮拖得靠近左上角一点,先别管为啥,你就只管拖就行。

是不是一股中国高中教材里的 Visual basic 的感觉。没错,这个非常类似 VB ,不过基于 Java 让它拥有更大的能量。

  • Ctrl+S 保存。现在我们转移到 IntelliJ IDEA。Scene Builder 先别忙关掉,留着我们待会还要用。

小成果

  • Ctrl+Shift+Alt+S,打开项目设置(Project Structure),选择这个绿色的”+“符号。

然后弹出一个窗口,让你选择添加的文件的路径。还记得刚才把 jfoenix.jar 放在哪了吗?找到它,然后一路 OK 下去。冰封的路径和你们的不一样,请根据自己的情况进行选择!

添加完成了吗?那么下一步。

  • 找到之前 IDEA 自动生成的 Main.java ,这是一个带有 Main 方法的类。我们找到这个类。

可以看到, Main.java 在文件树中的图标有一点点不同——它是一个蓝色的”C“,旁边还有一个绿色三角形。这表明这个类是可以直接运行的。

  • 把你的视线移到右上角,看到那个绿色的小箭头了吗?点击这个小箭头。这个小箭头是”运行“的意思。

这时 IDEA 会开始进入一个加载的过程,这个过程实际上就是编译整个工程。等它编译完毕,你就能看到一个弹出的窗口了。这个窗口就是你刚才在 Scene Builder 里面弄出来的窗口。 可是这时候你会产生疑问了,我刚刚拖的按钮呢!?

别急,我已经料到了。(不要打我)这时重新打开你的 Scene Builder。

  • 按照下图中”step 1“ -> ”step 2“ -> ”step 3“的顺序依次点击,也就是分别点击那个 JFXButton、右上角的 Properties、以及点击 Properties 之后出现的菜单中的”Text“选项、随便输入一段文字,如果你同意图中的话的话,就和我写一样的文字吧。输入完了之后回车一下。

  • 按照上面的步骤重新运行。

在这个窗口中间就是你刚刚添加的按钮,那个叫 JFXButtom 的按钮。点击它,看到熟悉的 Android 5.0 的浮动效果了吗?

(话说这个截图截得好辛苦,每次都错过)

你成功了。

以此类推,你可以拖拽更多的控件到这个窗口中,然后再运行试试到底发生了什么。

再折腾

  • 接下来我们修改一下代码中的这一部分。这是原来的样子,我们修改一下这几个值:

比如我,我把它们改成了这样:

再运行试试?

  • 多改几次,你发现规律了吗?(注意看窗口标题栏和窗口大小)这个非常重要。你以后就知道,这几行代码是什么意思了。

这是冰封的结果,可以看到,窗口变大了好多,变成了代码里设置的 600 x 800 ,标题栏也变成了。。。。呃,文字好羞耻。。

在以后的博客中,冰封会讲到更多关于设置属性、父子控件、、业务逻辑绑定、CSS 等本来该在这篇讲的内容。

enjoy!

你学到了什么

  1. jfoenix 的使用与下载
  2. JavaFX Scene Builder 的安装与使用
  3. 如何进行 JavaFX 项目构建
  4. 如何运行一个 IDEA 项目
  5. Main.java 中部分参数的含义

P.S. 写这段博客的时候在上学的路上,写完发现地铁坐过站了。。我的内心几乎是崩溃的。


本文没有打开评论。
You can't leave comments in this post.


Search

    Post Directory



    如果觉得这篇文章给您带来了收获或者说它值得您这么做,您可以选择对我进行捐助。
    下面是微信支付哟