【JavaFx教程】第四部分:CSS 样式
第4部分主题
- CSS样式表
- 添加应用程序图标
CSS样式表
在JavaFX中,你能使用层叠样式表修饰你的用户接口。这非常好!自定义Java应用界面从来不是件简单的事情。
在本教程中,我们将创建一个*DarkTheme*主题,灵感来自于Windows 8 Metro设计。按钮的CSS来至于Pedro Duque Vieia的博客Java中JMetro-Windows 8 Metro控件。
熟悉CSS
如果你希望修饰你的JavaFX应用,通常你应该对CSS有一个基本的了解。一个好的起点是CSS教程.
关于CSS更多JavaFX指定信息:
- 使用CSS换肤JavaFX应用 - Oracle教程
- JavaFX CSS参考 - 官方
缺省的JavaFX CSS
在JavaFX 8中缺省的CSS风格源码是一个称为modena.css
文件。该CSS文件可以在JavaFX jar文件jfxrt.jar
中找到,它位于Java目录/jdk1.8.x/jre/lib/ext/jfxrt.jar
。
解压jfxrt.jar
,你应该能在com/sun/javafx/scene/control/skin/modena/
目录下找到modena.css
。
缺省的样式表总是应用到JavaFX应用上。通过添加自定义样式表,你能覆盖modena.css
中缺省的样式。
提示:查看缺省的CSS文件能够让你模板你需要覆盖掉那些样式。
添加CSS样式表
添加下面的CSS文件DarkTheme.css
到view
包中。
DarkTheme.css
.background {
-fx-background-color: #1d1d1d;
} .label {
-fx-font-size: 11pt;
-fx-font-family: "Segoe UI Semibold";
-fx-text-fill: white;
-fx-opacity: 0.6;
} .label-bright {
-fx-font-size: 11pt;
-fx-font-family: "Segoe UI Semibold";
-fx-text-fill: white;
-fx-opacity: 1;
} .label-header {
-fx-font-size: 32pt;
-fx-font-family: "Segoe UI Light";
-fx-text-fill: white;
-fx-opacity: 1;
} .table-view {
-fx-base: #1d1d1d;
-fx-control-inner-background: #1d1d1d;
-fx-background-color: #1d1d1d;
-fx-table-cell-border-color: transparent;
-fx-table-header-border-color: transparent;
-fx-padding: 5;
} .table-view .column-header-background {
-fx-background-color: transparent;
} .table-view .column-header, .table-view .filler {
-fx-size: 35;
-fx-border-width: 0 0 1 0;
-fx-background-color: transparent;
-fx-border-color:
transparent
transparent
derive(-fx-base, 80%)
transparent;
-fx-border-insets: 0 10 1 0;
} .table-view .column-header .label {
-fx-font-size: 20pt;
-fx-font-family: "Segoe UI Light";
-fx-text-fill: white;
-fx-alignment: center-left;
-fx-opacity: 1;
} .table-view:focused .table-row-cell:filled:focused:selected {
-fx-background-color: -fx-focus-color;
} .split-pane:horizontal > .split-pane-divider {
-fx-border-color: transparent #1d1d1d transparent #1d1d1d;
-fx-background-color: transparent, derive(#1d1d1d,20%);
} .split-pane {
-fx-padding: 1 0 0 0;
} .menu-bar {
-fx-background-color: derive(#1d1d1d,20%);
} .context-menu {
-fx-background-color: derive(#1d1d1d,50%);
} .menu-bar .label {
-fx-font-size: 14pt;
-fx-font-family: "Segoe UI Light";
-fx-text-fill: white;
-fx-opacity: 0.9;
} .menu .left-container {
-fx-background-color: black;
} .text-field {
-fx-font-size: 12pt;
-fx-font-family: "Segoe UI Semibold";
} /*
* Metro style Push Button
* Author: Pedro Duque Vieira
* http://pixelduke.wordpress.com/2012/10/23/jmetro-windows-8-controls-on-java/
*/
.button {
-fx-padding: 5 22 5 22;
-fx-border-color: #e2e2e2;
-fx-border-width: 2;
-fx-background-radius: 0;
-fx-background-color: #1d1d1d;
-fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
-fx-font-size: 11pt;
-fx-text-fill: #d8d8d8;
-fx-background-insets: 0 0 0 0, 0, 1, 2;
} .button:hover {
-fx-background-color: #3a3a3a;
} .button:pressed, .button:default:hover:pressed {
-fx-background-color: white;
-fx-text-fill: #1d1d1d;
} .button:focused {
-fx-border-color: white, white;
-fx-border-width: 1, 1;
-fx-border-style: solid, segments(1, 1);
-fx-border-radius: 0, 0;
-fx-border-insets: 1 1 1 1, 0;
} .button:disabled, .button:default:disabled {
-fx-opacity: 0.4;
-fx-background-color: #1d1d1d;
-fx-text-fill: white;
} .button:default {
-fx-background-color: -fx-focus-color;
-fx-text-fill: #ffffff;
} .button:default:hover {
-fx-background-color: derive(-fx-focus-color,30%);
}
现在我们需要把CSS添加到我们的场景中。我们能在Java代码中编程完成,但是我们将使用SceneBuilder来添加它到fxml文件中。
添加CSS到RootLayout.fxml
在Scene Builder中打开
RootLayout.fxml
在*Hierarchy*视图中选择根节点
BorderPane
。在*Properties*组中添加DarkTheme.css
作为样式表。
添加CSS到PersonEditDialog.fxml
在Scene Builder中打开
PersonEditDialog.fxml
。选择根节点AnchorPane
,并且在*Properties*组中选择DarkTheme.css
作为样式表。背景仍然是白色的,因此添加样式类
background
到根节点AnchorPane
。
- 选择OK按钮,在*Properties*视图中选择*Default Button*单选框。这将修改它的颜色,当用户*输入*关键词时,使用它作为缺省的按钮。
添加CSS到PersonOverview.fxml
在Scene Builder中打开文件
PersonOverview.fxml
。在*Hierarchy*组中选择根节点AnchorPane
。在*Properties*下面添加DarkTheme.css
文件作为样式表。你现在应该已经看到一些修改,表和按钮是黑色的。来自
modena.css
中所有类样式.table-view
和.button
应用到表和按钮。因为我们已经在自定义CSS中重定义(因此覆盖掉)一些样式。新的样式自动应用。你可能需要调整按钮的大小,以便显示所有的文本。
选择
SplitPane
中右边的AnchorPane
。进入到*Properties*组,并且选择
background
作为样式表。背景现在应该变为黑色。
使用不同样式的标签
现在,在左边的所有的标签都有相同的大小。这里已经有一些样式定义在CSS文件中,称为.label-header
和.label-bright
。我们将使用更多样式的标签Label。
选择*Person Detail*标签,添加
label-header
作为样式类。给右边一列的每个Label(显示人员详情的那列)添加CSS样式类
label-bright
。
添加应用图标
现在,在标题栏和任务栏中,我们的应用只有一个缺省图标:
使用自定义图标看起来更好了。
图标文件
获取图标的一个可能地方是Icon Finder。我下载了一个地址本的图标.
通常在你的AddressApp项目中创建一个目录称为resources,在它中子目录称为images。把你选择的图标放入到images目录中。现在,你的目录结构应该看上去如下所示:
设置图标到场景
为了给你场景设置图标,添加下面一行到MainApp.jar
的start(…)
方法中。
MainApp.java
this.primaryStage.getIcons().add(new Image("file:resources/images/address_book_32.png"));
现在,整个start(…)
方法看上去应该是这样的。:
public void start(Stage primaryStage) {
this.primaryStage = primaryStage;
this.primaryStage.setTitle("AddressApp"); // Set the application icon.
this.primaryStage.getIcons().add(new Image("file:resources/images/address_book_32.png")); initRootLayout(); showPersonOverview();
}
当然,你也应该添加图标到人员编辑对话框的Stage中。
下一步
在本教程的第5部分将为我们数据添加XML存储。
--------------------- 本文来自 jobbible 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/moshenglv/article/details/82877676?utm_source=copy
【JavaFx教程】第四部分:CSS 样式的更多相关文章
- 四种CSS样式的引入方式
准备 1.首先准备一个html文件:test.html,不建议使用记事本创建文件,建议使用Notepad++来创建并编辑文件,注意编码格式为:以UTF-8无BOM格式编码,否则会出现中文乱码,内容如下 ...
- JavaFX让UI更美观-CSS样式
相对于Swing来说,JavaFX在UI上改善了很多,不仅可以通过FXML来排版布局界面,同时也可以通过CSS样式表来美化UI. 其实在开发JavaFX应用的时候,可以将FXML看做是HTML,这样跟 ...
- 常用的四种CSS样式表格
1. 单像素边框CSS表格 这是一个很常用的表格样式. [html] <style type="text/css"> table.gridtable { font-fa ...
- 【JS新手教程】JS修改css样式的几种方法
本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...
- UI自动化(四)css样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 进击的Python【第十三章】:Web前端基础之HTML与CSS样式
进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...
- css样式高级技巧-选择器
用<div>元素为网页 在编写样式表时,我们经常要用div元素来包装内容: <div> <p>Here are two paragraphs of content& ...
- HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)
一.回顾内容 前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
- Web前端开发基础 第四课(认识CSS样式)
CSS代码语法 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素( ...
随机推荐
- Deque(队列)
目录 Deque 概述 特点 常用方法 双向队列操作 ArrayDeque Deque 概述 一个线性 collection,支持在两端插入和移除元素.名称 deque 是"double e ...
- Android必学之AsyncTask
AsyncTask,即异步任务,是Android给我们提供的一个处理异步任务的类.通过此类,可以实现UI线程和后台线程进行通讯,后台线程执行异步任务,并把结果返回给UI线程. .为什么需要使用异步任务 ...
- OSX10.12搭建IPv6本地环境测试APP
前记 最近刚换了工作,生活终于又安定下来了,又可以更博了 正文 最近公司在上线APP(整体全是用JS去写的,就用了我原生的一个控制器),然后APP就去上线,就被苹果巴巴给拒了.通过阅读苹果回复的邮件, ...
- Consul集群搭建
一.集群搭建 准备三台机器 需要开启的端口,8300, 8301, 8500, 8600 机器1: 172.16.106.201 ./consul agent -server -bootstrap-e ...
- WebSocket集成XMPP网页即时通讯1:Java Web Project服务端/客户端Jetty9开发初探
Web 应用的信息交互过程通常是客户端通过浏览器发出一个请求,服务器端接收和审核完请求后进行处理并返回结果给客户端,然后客户端浏览器将信息呈现出来,这种机制对于信息变化不是特别频繁的应用尚能相安无事, ...
- oracle 用户权限相关
--查看数据库下的所有用户: select username from dba_users; --查看当前连接数据库的用户角色 SELECT * FROM USER_ROLE_PRIVS; -- 创建 ...
- IIS:IIS 8.5下设置404错误页
IIS版本:IIS 8.5 问题描述 搭建一个测试网站,总共就2个页面(index.php和404.php),默认首页为:index.php 当访问index.php和404.php的时候,IIS服务 ...
- ASP.NET Core 1.0 中使用 Log 日志配置
https://github.com/aspnet/Logging https://docs.asp.net/en/latest/fundamentals/logging.html ASP.NET C ...
- SVM(支持向量机)简介与基础理解
SVM(支持向量机)主要用于分类问题,主要的应用场景有字符识别.面部识别.行人检测.文本分类等领域.原文地址:https://zhuanlan.zhihu.com/p/21932911?refer=b ...
- 高可用Hadoop平台-答疑篇
1.概述 这篇博客不涉及到具体的编码,只是解答最近一些朋友心中的疑惑.最近,一些朋友和网友纷纷私密我,我总结了一下,疑问大致包含以下几点: 我学 Hadoop 后能从事什么岗位? 在遇到问题,我该如何 ...