忘川之上,桑梓之下。
一半时光,一半是影。

Material Design的JavaFX美化类库:JFoenix

Shigure前段时间在做课程设计时苦于Swing的界面实在是太简陋了,就误打误撞的入了JavaFX的深坑,最近在GitHub上发现了一个开源的基于Material Design设计的界面美化Library项目,这赏心悦目的UI真的是救我于水火之中,不过这东西虽然有官方文档和Demo,但是JavaFX现在使用率实在太低,网上有关的教程不是很多,再加上我也是JavaFX的初学者,在YouTube上怼着一个印度人的教程看了几天,总算是弄懂了JavaFX和JFoenix基本使用方法。

Shigure决定在这里写几篇教程,把JFoenix的各种控件的类于相关的方法以及CSS代码部分向各位介绍一下,希望可以使大家少走弯路。

 

一.环境及依赖

 

 

二.准备

1.安装JDK,JavaFX Scene Builder及IDE

首先安装jdk 1.8或者1.9版本(推荐下载1.8)及JavaFX Scene Builder,这两个上面有相关链接,可自行下载并安装,另外我这里使用的IDE是IDEA,如果你用的是eclipse也是可以的,不过具体操作肯定会有所差异,只能请各位自行解决了。

 

2.下载JFoenix及AwesomeJavaFX

AwesomeJavaFX是GitHub上面一位大佬魔改的适配于JavaFX的Font Awesome图标包,可以搭配JFoenix使用显示在提示上或者label上等一些地方,如果不需要的话可以不下载。

打开上面JFoenix的链接,进入到JFoenix的GitHub项目页面并下载你jdk对应的版本:


打开上面AwesomeJavaFX的链接,进入到AwesomeJavaFX的GitHub项目页面,找到项目右上角的Clone or download,选择Download ZIP进行下载:


 

三.创建项目

1.创建JavaFX项目

打开IDEA,然后选择Create New Project,在新建项目界面的左侧选择Java FX,然后点击next,填写项目名称后继续点击finish完成项目创建。这个过程中稍微记住一下填写项目名哪里的项目路径,下面会用到它。


项目创建完成后,在IDEA左侧的导航栏中可以看到项目的中现在有一个名为sample的包,其中有三个文件,分别为: Controller.javasample.fxmlMain.java。这些是IDE创建的示例程序,我就在此基础上编写代码,如果是实际开发的话,这些东西可以删掉然后创建自己需要的fxml文件和其相应的controller


2.导入jar包

首先在IDEA的左侧导航栏那里右键点击src文件夹,然后创建一个名为lib的package,然后解压缩之前的下载的AwesomeJavaFX,将其中名为fontawesomefx-commons-8.15.jarfontawesomefx-fontawesome-4.7.0-5.jar这两个文件拖到lib包中,然后同样的操作把下载得到的jfoenix-8.0.4.jar也拖进lib包中。接着在IDEA的菜单栏依次选择File -> Project Structure在弹出的选项框中左边选择Library,然后点击下面的加号,选择java,在弹出框中找到该项目路径下的lib文件夹中的三个jar包,此时该文件会出现在选项框中,然后点击右下的OK即可。


右键点击sample.fxml,在右键菜单中选择Open in SceneBuilder


在打开的SceneBuilder的左上角,会有一个齿轮图标,点击一下,在弹出框中选择Import JAR/FXML File,然后选择项目lib文件夹下的那三个jar包即可,导入完成后左侧会出现Custom栏,JFoenix的所有控件都会出现在这里了。可以随意拖动控件到中间的面板中,然后再菜单栏的Preview->Show Preview In Window可以预览效果。


 

3.测试

SceneBuilder界面的左上部分是各种控件,左下部分是当前pane使用的布局和控件,中间是当前pane,右边是控件的各种选项。首先我们在左下角把GridPane点右键选择delete把它删掉,然后拖一个AnchorPane进去,然后再往里面拖一个JFXButton按钮。在右边可以设置按钮的大小,字体和显示内容,关于其他控件以及CSS具体使用方法会在以后篇幅里讲到。


按control+s保存,然后回到IDEA中,点击右上角的绿色三角,即可运行程序。

未经允许不得转载:枯木 » Material Design的JavaFX美化类库:JFoenix

评论 抢沙发