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

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

1. JavaFX CSS语法

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

  1. .root {
  2. -fx-body-color : #F5F5F5;
  3. -fx-outer-border : #cecece;
  4. }
  5. VBox > .text-area.first {
  6. -fx-border-radius: 4 4 0 0;
  7. -fx-background-radius: 4 4 0 0;
  8. }
  9. .arrow-button:pressed {
  10. -fx-background-color: #e6e6e6;
  11. -fx-border-color: #acacac;
  12. -fx-effect: innershadow(gaussian, #adadad, 10, 0, 0, 3);
  13. }

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

比如:

  1. /* 在CSS中,样式是这样写的 */
  2. min-height: 46;
  3. max-height: 46;
  4. font-size: 18;
  5. /* 而在JavaFX中CSS必须这样写 */
  6. -fx-min-height: 46;
  7. -fx-max-height: 46;
  8. -fx-font-size: 18;

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

2. 用CSS美化控件

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

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

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

效果图:

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

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

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

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

首先编程css样式

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

  1. .go {
  2. -fx-text-fill: white;
  3. -fx-min-height: 30;
  4. -fx-min-width: 80;
  5. -fx-background-color: #337ab7;
  6. }

修改FXML引入样式

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

  1. <BorderPane prefHeight="400.0" prefWidth="600.0"
  2. stylesheets="@AppUI.css" xmlns="http://javafx.com/javafx/8.0.172-ea"
  3. xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.itqn.gui.javafx.wx.ui.AppUI">
  4. <center>
  5. <VBox alignment="CENTER" spacing="10.0">
  6. <Label fx:id="text"/>
  7. <Button onAction="#click" text="Go." styleClass="go">
  8. <!--
  9. <styleClass>
  10. <String fx:value="btn"/>
  11. <String fx:value="btn-info"/>
  12. </styleClass>
  13. -->
  14. </Button>
  15. </VBox>
  16. </center>
  17. </BorderPane>

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

修改maven pom.xml

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

  1. <build>
  2. <resources>
  3. <resource>
  4. <directory>src/main/java</directory>
  5. <includes>
  6. <include>**/*.fxml</include>
  7. <include>**/*.css</include>
  8. </includes>
  9. </resource>
  10. </resources>
  11. </build>

4. 使用开源框架的CSS

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

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

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

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

首先引入maven依赖

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

  1. <dependency>
  2. <groupId>org.kordamp.bootstrapfx</groupId>
  3. <artifactId>bootstrapfx-core</artifactId>
  4. <version>0.2.4</version>
  5. </dependency>

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

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

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

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

在fxml中使用bootstrapfx样式

  1. <Button text="Go.">
  2. <styleClass>
  3. <String fx:value="btn"/>
  4. <String fx:value="btn-success"/>
  5. </styleClass>
  6. </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. Python-使用tkinter实现的Django服务进程管理工具

    import tkinter import subprocess import os import time import re import sys from tkinter import Labe ...

  2. rhel7 rpmbuild 制作二进制程序安装包(.rpm) 简单示例

    下载rpm-build: # yum install rpm-build 如果上述方式无法安装(没配置网络源,虚拟机下是安装媒介源) 可以用下列方式下载后再安装(实践结果可能版本问题引起的缺少太多的* ...

  3. 【error fixed】E: Package 'oracle-java8-installer' has no installation candidate

    问题:安装oracle-java8-installer按照如下指南失败: How To Install Java with Apt-Get on Ubuntu 16.04[https://www.di ...

  4. java面试知识迷你版

    java基础JUC.AQSJVM类加载过程mybatisSpringspringboot设计模式数据库redis网络问题认证授权Nginxlinux其他lombok消息队列ES缓存分库分表设计高并发系 ...

  5. mmdetection源码剖析(1)--NMS

    mmdetection源码剖析(1)--NMS 熟悉目标检测的应该都清楚NMS是什么算法,但是如果我们要与C++和cuda结合直接写成Pytorch的操作你们清楚怎么写吗?最近在看mmdetectio ...

  6. 每日一题 - 剑指 Offer 54. 二叉搜索树的第k大节点

    题目信息 时间: 2019-07-04 题目链接:Leetcode tag:二叉搜索树 中序遍历 递归 难易程度:中等 题目描述: 给定一棵二叉搜索树,请找出其中第k大的节点. 示例1: 输入: ro ...

  7. 浏览器的回流与重绘 (Reflow & Repaint)

    写在前面 在讨论回流与重绘之前,我们要知道: 浏览器使用流式布局模型 (Flow Based Layout). 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了 ...

  8. 多线程01-CAS (CompareAndSwap)

    1.基本概念 原子性是不可中断的最小操作:在Java中,一般通过加锁或者自旋CAS方式来确保原子操作: 而CAS(compareAnd swap)作为Java中常用的保证原子性的手段,JDK1.5之后 ...

  9. 武汉百得思维Java面试总结

    武汉百得思维Java面试总结 在一个愉快的下午,我们并不十分愉快地参加了宣讲会.那是国庆的前两天,大家正在为放假的愉悦所兴奋也在为找工作而紧张. 在听过一阵胡吹乱侃之后,大家都昏昏欲睡,于是终于迎来了 ...

  10. 用matplotlib绘制图片示例(新)

    test /*! * * Twitter Bootstrap * */ /*! * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 201 ...