在 JavaFX 中进行 Material Design :第一章

by

我曾经一直思考,如何在 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 的链接,并找到这里。

开始

进行中

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

小成果

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

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

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

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

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

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

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

你成功了。

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

再折腾

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

再运行试试?

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

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

enjoy!

你学到了什么

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

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


Tweet this
Top


创建一个 issue 以申请评论
Create an issue to apply for commentary


协议/License

本作品 在 JavaFX 中进行 Material Design :第一章 采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可,基于 http://ice1000.org/2016/06/25/MDOnDesktop/ 上的作品创作。
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.
知识共享许可协议