JavaFX实现UI美观效果代码实例

相对于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>

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

  • bootstrapfx (MIT协议)
  • 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:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2020-07-30

JavaFX实现石头剪刀布小游戏

用JavaFX写一个石头剪刀布的小游戏,供大家参考,具体内容如下 课程上布置的作业,其实java很少用来写这种程序的 - GUI界面部分 - 石头剪刀布的逻辑部分 书上教的是JavaFX,其实还有很多方法,书上说AWT和Swing基本上淘汰了,但事实上- 代码 MyJavaFX.java package cn.homework; import javafx.application.Application; import javafx.event.ActionEvent; import javaf

javafx tableview鼠标触发更新属性详解

本文实例为大家分享了javafx tableview鼠标触发更新属性,供大家参考,具体内容如下 public class HoverCell extends TableCell<Person, String> { public HoverCell(StringProperty hoverProperty) { setOnMouseEntered(e -> hoverProperty.set(getItem())); setOnMouseExited(e -> hoverProper

JavaFX 监听窗口关闭事件实例详解

1.写在前面 在JavaFX的程序开发的时候,在使用多线程的时候,默认情况下在程序退出的时候,新开的线程依然在后台运行. 在这种情况下,可以监听窗口关闭事件,在里面关闭子线程. 2.具体实现的样例 package sample; import javafx.application.Application; import javafx.beans.value.ChangeListener; import javafx.beans.value.ObservableValue; import java

Javafx实现国际象棋游戏

本文实例为大家分享了Javafx实现国际象棋游戏的具体代码,供大家参考,具体内容如下 基本规则 棋子马设计"日"的移动方式 兵设计只能向前直走,每次只能走一格.但走第一步时,可以走一格或两格的移动方式 请为后设计横.直.斜都可以走,步数不受限制,但不能越子的移动方式. 车只能横向或者竖向行走 国王是在以自己为中心的九宫格内行走 骑士只能走对角线 项目目录结构 UML类图关系 以骑士为例 实现基本功能 吃子 不能越子 游戏结束提示 基本移动策略 背景音乐 效果 控制器 PressedAc

JavaFX桌面应用未响应问题解决方案

日常使用软件的过程中,偶尔会遇到软件突然卡住,再点击几次就变成"未响应"的情况. 在JavaFX应用中同样也会出现这种情况,在开发过程中应该尽量避免这种情况的出现. 1. "未响应"重现 应用程序出现"未响应"这种情况往往是因为在UI线程中处理一些耗时的业务,当UI线程在处理耗时的业务时,UI就会卡住. 下面通过一个示例(获取Google页面title信息)来演示一下"未响应"这种情况. 这里使用 jsoup 来抓取Googl

详解JavaFX桌面应用开发-Group(容器组)

1:Group的功能 Group可以管理一组节点 Group可以对管理的节点进行增删改查的操作 Group可以管理节点的属性 1.2:看看JDKSE1.9的API Group类有下列可以调用的方法 2:Group的使用 代码如下: package application; import javafx.application.Application; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.

javafx实现五子棋游戏

需求描述 一个五子棋游戏,能实现双方黑白对决,当一方获胜时给出提示信息,利用GUI界面实现 项目结构如下图 一.实体 FiveChess类 提供五子棋实体包含的所有信息 判断游戏是否结束 play方法改变chess[][]棋盘中的数据 package entity; import javafx.scene.control.Alert; public class FiveChess{ public double getWidth() { return width; } public void se

JavaFX Application应用实例

下面代码演示的是JavaFX进程命令行参数的实例.大家可以参阅一下. import java.util.List; import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.effect.SepiaTone; import javafx.scene.image.Imag

Zend Framework教程之Application用法实例详解

本文实例讲述了Zend Framework教程之Application用法.分享给大家供大家参考,具体如下: Zend_Application是Zend Framework的核心组件.Zend_Application为Zend Framework应用程序提供基本功能,是程序的入口点.它的主要功能有两个:装载配置PHP环境(包括自动加载),并引导应用程序. 通常情况下,通过配置选项配置Zend_Application构造器,但也可以完全使用自定义方法配置.以下是两个使用用例. Zend_Appli

基于socket和javaFX简单文件传输工具

本文实例介绍了基于socket和javaFX简单文件传输工具,分享给大家供大家参考,具体内容如下 package application; import java.io.File; import org.james.component.ButtonBox; import org.james.component.FileReceiverGrid; import org.james.component.FileSenderGrid; import javafx.application.Applica

Javafx简单实现【我的电脑资源管理器】效果

本文实例讲述了Javafx简单实现[我的电脑资源管理器]效果.分享给大家供大家参考.具体如下: 1. java代码: package ttt; import java.io.File; import javafx.application.Application; import javafx.beans.value.ChangeListener; import javafx.beans.value.ObservableValue; import javafx.collections.FXColle

jsp中使用javabean实例介绍

test.jsp中的代码如下所示 复制代码 代码如下: <%@ page language = "java" import="test.SimpleBean;" %> <html><head><title>JSP中使用 Java Bean的测试</title></head><body><jsp:useBean id="test" class="te

初步了解javafx

JavaFX 介绍 一提到Java的图形界面库,我们通常听到的都是Swing,或者更老一点的AWT,包括很多书上面介绍的也都是这两种.很多学校.培训班教学的也是这两种技术.但是其实这两种技术都已经过时很长时间了.Swing虽然学起来也不算很难,但是用它来写界面其实也很不好写.因为它的界面和代码没有做到分离,所以在编写的时候,代码中肯定充斥着大量坐标,修改极其不易.这方面做的比较好的就是微软的WPF,只能说谁用谁知道. 当然,虽然编写客户端图形程序是Java的弱项,但是Java并没有放弃这方面的努