相对于Swing来说,JavaFX在UI上改善了很多,不仅可以通过FXML来排版布局界面,同时也可以通过CSS样式表来美化UI。

其实在开发JavaFX应用的时候,可以将FXML看做是HTML,这样跟CSS结合起来就跟开发WEB应用差不多,只不过两者之间的语法有点差异。

1. JavaFX CSS语法

JavaFX CSS样式跟HTML中的CSS样式很大程度上是相似的,比如class选择器、组合选择符、伪元素等。

.root {
-fx-body-color : #F5F5F5;
-fx-outer-border : #cecece;
} VBox > .text-area.first {
-fx-border-radius: 4 4 0 0;
-fx-background-radius: 4 4 0 0;
} .arrow-button:pressed {
-fx-background-color: #e6e6e6;
-fx-border-color: #acacac;
-fx-effect: innershadow(gaussian, #adadad, 10, 0, 0, 3);
}

但有一点不同的是,JavaFX的CSS样式语法都是以“-fx-”作为前缀。

比如:

/* 在CSS中,样式是这样写的 */
min-height: 46;
max-height: 46;
font-size: 18;
/* 而在JavaFX中CSS必须这样写 */
-fx-min-height: 46;
-fx-max-height: 46;
-fx-font-size: 18;

其实,如果了解CSS,想要编写JavaFX的CSS难度并不是很大。

2. 用CSS美化控件

在没有经过CSS美化之前的JavaFX控件,其实跟Swing的控件差别不大,所以想要让控件更加美观还是要用CSS来修饰一下。

下面通过简单的样式,来美化一下之前的按钮:

<Button text="Go."
style="-fx-min-height: 30; -fx-min-width: 80;-fx-background-color: #337ab7;">
</Button>

效果图:

可以看到使用CSS美化过的按钮要比之前的按钮好看多了。

3. 使用CSS样式表美化控件

虽然在控件上加上CSS样式可以达到美化控件的效果,但是跟写CSS一样,这样的写CSS样式很不利于维护。

更好的方式的使用CSS文件统一维护样式,然后通过class选择器将样式绑定在控件上。

首先编程css样式

在AppUI.fxml相同的目录下创建AppUI.css,内容如下:

.go {
-fx-text-fill: white;
-fx-min-height: 30;
-fx-min-width: 80;
-fx-background-color: #337ab7;
}

修改FXML引入样式

这里单独为AppUI.fxml引入样式,所以这需要在BorderPane的stylesheets属性指定AppUI.css即可。

<BorderPane prefHeight="400.0" prefWidth="600.0"
stylesheets="@AppUI.css" xmlns="http://javafx.com/javafx/8.0.172-ea"
xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.itqn.gui.javafx.wx.ui.AppUI">
<center>
<VBox alignment="CENTER" spacing="10.0">
<Label fx:id="text"/>
<Button onAction="#click" text="Go." styleClass="go">
<!--
<styleClass>
<String fx:value="btn"/>
<String fx:value="btn-info"/>
</styleClass>
-->
</Button>
</VBox>
</center>
</BorderPane>

注意这里使用的是styleClass,而不是style,另外如果需要指定多个class样式的话,应该采用styleClass子元素,而不是styleClass属性。

修改maven pom.xml

跟之前一样,要让css编译到classpath下面,需要在maven pom.xml配置include。

<build>
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.fxml</include>
<include>**/*.css</include>
</includes>
</resource>
</resources>
</build>

4. 使用开源框架的CSS

在实际开发中,可以使用现有的开源框架来美化JavaFX应用,没有自己从零开始编写自己的样式。

这里推荐两个JavaFX CSS开源框架:

  1. bootstrapfx (MIT协议)
  2. jbootx (没有声明开源协议)

bootstrapfx 目前最新的版本是0.2.4,使用它非常方便,只需要在maven引入依赖,然后在场景中添加对应的样式表即可。

首先引入maven依赖

修改maven pom.xml 加入如下依赖

<dependency>
<groupId>org.kordamp.bootstrapfx</groupId>
<artifactId>bootstrapfx-core</artifactId>
<version>0.2.4</version>
</dependency>

然后在场景(scene)中引入样式表

这里跟上面使用样式表的方式有点不同,在scene引入样式表后,所有scene里面的容器和控件都能使用。

而单独为fxml引入样式表,仅能在当前fxml中使用。

stage.setScene(scene);
stage.getScene().getStylesheets().add("org/kordamp/bootstrapfx/bootstrapfx.css");
stage.show();

在fxml中使用bootstrapfx样式

<Button text="Go.">
<styleClass>
<String fx:value="btn"/>
<String fx:value="btn-success"/>
</styleClass>
</Button>

效果图:

另外:jbootx的使用方式也是一样的,当然也可以不引入依赖,直接将样式表放在resources目录,然后直接添加到场景中。

jbootx的使用示例这里就不展开了,下面展示一下jbootx的效果图。

效果图1:

效果图2:

=========================================================

源码可关注公众号 “HiIT青年” 发送 “javafx-css” 获取。



关注公众号,阅读更多文章。

JavaFX让UI更美观-CSS样式的更多相关文章

  1. 小谢第8问:ui框架的css样式如何更改

    目前有三种方法, 1.使用scss,增加样式覆盖,但是此种方法要求css的className需要与框架内的元素相一致,因此修改时候需要特别注意,一个父级的不同就可能修改失败 2.deep穿透,这种方法 ...

  2. Toolkit 大更新:UI 更美观,用起来更方便!

    前言 前段时间有小伙伴在群里聊天,说到 Toolkit 下载量到 4.9k 了.就突然想起来,很久没有更新这个插件. PS:我是用它申请了 License,一般时候使用 Json 格式化功能. 趁着周 ...

  3. jquery实现静态柱形图(写死的数据,只为系统首页UI更美观)

    这段时间比较空闲,便阅读公司做好的项目的源代码,学习学习同事的开发思路. 在项目中使用图表可以很好地提高人机交互的友好度,开发的时候看到项目的首页有两个很小的柱形图,很漂亮,便找到对应的代码看了看,发 ...

  4. 【JavaFx教程】第四部分:CSS 样式

    第4部分主题 CSS样式表 添加应用程序图标 CSS样式表 在JavaFX中,你能使用层叠样式表修饰你的用户接口.这非常好!自定义Java应用界面从来不是件简单的事情. 在本教程中,我们将创建一个*D ...

  5. 久未更 ~ 五之 —— 引入外部CSS样式表 小节

    > > > > > 久未更 系列一:在html中引入外部css样式表 //引入外部css样式表 //<lilnk>要放在<head>标签的第一行, ...

  6. Web前端开发最佳实践(8):还没有给CSS样式排序?其实你可以更专业一些

    前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...

  7. [css]【转载】CSS样式分离之再分离

    原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E6%A0%B7%E5%BC%8F%E5%88%86%E7%A6%BB%E4%B9%8B%E5 ...

  8. CSS样式的面向对象思想(一)

    今天来谈一谈CSS样式的面向对象写法.顾名思义,面向对象是高级语言具备的特性,主要是为了程序高可复用,解决模块之间的耦合关系,那么像CSS这样的脚本语言是否也可以使用面向对象的思想,来提高代码的可维护 ...

  9. ReactNative学习之css样式使用

    前言: 前面学习了html,今天学习一下css的基本使用,看下html与css之间是如何结合来编写前端网页的. CSS 是什么? CSS 是 Cascading Style Sheets(级联样式表) ...

随机推荐

  1. 理解与使用Javascript中的回调函数 -2

    在javascript中回调函数非常重要,它们几乎无处不在.像其他更加传统的编程语言都有回调函数概念,但是非常奇怪的是,完完整整谈论回调函数的在线教程比较少,倒是有一堆关于call()和apply() ...

  2. Layui的省市区三级联动

    PHP: /** * 通过接口获取省市区 * @param string $name * @return json */ public function getDataTree($name = '') ...

  3. CD题解(药水的选择)

    这道题显然是一个01背包加上记录路径的题目,要说这道题的原型就是N多年前的CD 本题主要考的就是对01背包的基础板子加上稍微一点点的码力,就可以A掉这个题了 废话不多说,上代码: #include&l ...

  4. 简单的JdbcUtil 类

    import java.sql.*; /** JDBC工具类 */ public class JdbcUtil { /** * 获取数据库连接对象并返回 * * @return Connection对 ...

  5. 【Flutter 实战】动画核心

    老孟导读:动画系统是任何一个UI框架的核心功能,也是开发者学习一个UI框架的重中之重,同时也是比较难掌握的一部分,下面我们就一层一层的揭开 Flutter 动画的面纱. 任何程序的动画原理都是一样的, ...

  6. 关于C++命名空间namespace的理解与使用介绍

    0X00 前言 所谓namespace,是指标识符的各种可见范围.C++标准程序库中的所有标识符都被定义于一个名为std的namespace中. 0x01 与C语言区别 <iostream> ...

  7. Django---进阶1

    目录 静态文件配置 request对象方法初识 pycharm链接数据库(MySQL) django链接数据库(MySQL) Django ORM 字段的增删改查 数据的增删改查 今日作业 静态文件配 ...

  8. 介绍下 npm 模块安装机制,为什么输入 npm install 就可以自动安装对应的模块?

    1. npm 模块安装机制: 发出npm install命令 查询node_modules目录之中是否已经存在指定模块 若存在,不再重新安装 若不存在 npm 向 registry 查询模块压缩包的网 ...

  9. 将ipynb文件转换为markdown

    jupyter nbconvert --to markdown "3.11-matplotlib 基础.ipynb"

  10. java 之 实例方法和类方法

    类方法:使用static修饰(静态方法),属于整个类的,不是属于某个实例的,只能处理static域或调用static方法: 实例方法:属于对象的方法,由对象来调用. 判断类方法,类方法的前面有stat ...