文档章节

3花式窗体与JavaFX CSS

诺岚
 诺岚
发布于 2017/06/20 18:34
字数 1773
阅读 78
收藏 0

3花式窗体与JavaFX CSS

本教程是通过添加级联样式表(CSS)来使您的JavaFX应用程序看起来很有吸引力。您开发设计,创建.css文件并应用新样式。

在本教程中,您将使用一个使用默认样式进行标签,按钮和背景颜色的登录表单,并通过一些简单的CSS修改将其转换为风格化的应用程序,如图3-1所示。

 

图3-1有和没有CSS的登录表单

下面给出了图3-1的描述
“图3-1有和无CSS登录表”的说明
 

本入门教程中使用的工具是NetBeans IDE。开始之前,请确保您正在使用的NetBeans IDE版本支持JavaFX 2.有关详细信息,请参阅系统要求

 

创建项目

如果从一开始就遵循入门指南,那么您已经创建了本教程所需的登录项目。如果没有,请通过右键单击Login.zip下载登录项目并将其保存到文件系统。从zip文件中提取文件,然后在NetBeans IDE中打开项目。

 

创建CSS文件

您的第一个任务是创建一个新的CSS文件,并将其保存在与应用程序主类相同的目录中。之后,您必须使JavaFX应用程序了解新添加的级联样式表。

  1. 在NetBeans IDE Projects窗口中,展开Login项目节点,然后展开Source Packages目录节点。

  2. 右键单击“ 源软件包”目录下的登录文件夹,然后选择“ 新建”,然后选择“ 其他”。

  3. 在“新建文件”对话框中,选择“ 其他”,然后选择“ 级联样式表”,然后单击“ 下一步”。

  4. 输入文件名文本字段的登录,并确保文件夹文本字段值为src\login

  5. 单击完成。

  6. Login.java文件中,通过包含以下粗体显示的代码行,初始化类的style sheets变量Scene以指向级联样式表,以使其显示如示例3-1所示。

    示例3-1初始化样式表变量

    Example 3-1 Initialize the stylesheets Variable
    Scene scene = new Scene(grid, 300, 275);
    primaryStage.setScene(scene);
    scene.getStylesheets().add
     (Login.class.getResource("Login.css").toExternalForm());
    primaryStage.show();

    此代码查找src\loginNetBeans项目目录中的样式表。

 

添加背景图像

背景图像有助于使您的表单更具吸引力。在本教程中,您将添加一个亚麻样纹理的灰色背景。

首先,通过右键单击background.jpg下载背景图像并将其保存到文件系统。然后,将文件复制到src\login登录NetBeans项目中的文件夹中。

现在,将background-image属性的代码添加到CSS文件中。请记住,路径是相对于样式表。因此,在示例3-2的代码中,background.jpg映像与Login.css文件在同一目录中。

 

示例3-2背景图像

Example 3-2 Background Image

.root {
     -fx-background-image: url("background.jpg");
}

背景图像应用于.root样式,这意味着将其应用于Scene实例的根节点。样式定义由property(-fx-background-image)的名称和property()的值组成url(“background.jpg”)

图3-2显示了具有新灰色背景的登录表单。

 

图3-2灰亚麻背景

以下说明图3-2
“图3-2灰亚麻背景”
 

 

标签的样式

标签的下一个增强控制。您将使用.label样式类,这意味着样式将影响表单中的所有标签。代码在例3-3中

 

示例3-3字体大小,填充,重量和对标签的影响

Example 3-3 Font Size, Fill, Weight, and Effect on Labels

.label {
    -fx-font-size: 12px;
    -fx-font-weight: bold;
    -fx-text-fill: #333333;
    -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}

此示例增加字体大小和重量,并应用灰色阴影(#333333)。阴影的目的是增加深灰色文字和浅灰色背景之间的对比。有关drop shadow属性参数的详细信息,请参阅“ JavaFX CSS参考指南”中有关效果的部分。

增强型用户名和密码标签如图3-3所示。

 

图3-3带阴影的更大,更大的标签

以下说明图3-3
说明“图3-3带有阴影的更大,更大的标签”
 

 

风格文本

现在,可以对两个Text对象创建一些特殊效果:scenetitle包含文本Welcome,以及actiontarget当用户按下登录按钮时返回的文本。您可以将不同的样式Text应用于以不同方式使用的对象。

  1. Login.java文件中,删除以下代码行,定义当前为文本对象设置的内联样式:

    scenetitle.setFont(Font.font(“Tahoma”, FontWeight.NORMAL, 20));

    actiontarget.setFill(Color.FIREBRICK);

    通过内联样式切换到CSS,您可以将设计与内容分开。这种方法使设计人员更容易掌握风格,而无需修改内容。

  2. 使用setID()Node类的方法为每个文本节点创建一个ID :

    scenetitle.setId("welcome-text");

    actiontarget.setId("actiontarget");

  3. Login.css文件中,定义welcome-textactiontargetID 的样式属性。对于样式名称,请使用前面带有数字符号(#)的ID,如示例3-4所示。

    示例3-4文本效果

Example 3-4 Text Effect
#welcome-text {
   -fx-font-size: 32px;
   -fx-font-family: "Arial Black";
   -fx-fill: #818181;
   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
}
#actiontarget {
  -fx-fill: FIREBRICK;
  -fx-font-weight: bold;
  -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );  
}

欢迎文字的大小增加到32分,字体更改为Arial Black。文字填充颜色设置为深灰色(#818181),并应用内阴影效果,产生压花效果。您可以通过将文本填充颜色更改为背景的较暗版本来将内部阴影应用于任何颜色。有关内阴影属性参数的详细信息,请参阅“ JavaFX CSS参考指南”中有关效果的部分。

风格定义actiontarget类似于您之前看过的。

图3-4显示了两个Text对象的字体变化和阴影效果。

 

图3-4带阴影效果的文本

以下说明图3-4
“图3-4带阴影效果的文字”说明
 

 

按钮的风格

下一步是对按钮进行风格调整,使用户将鼠标悬停在其上时更改样式。此更改将给用户指示按钮是交互式的,标准设计实践。

首先,通过添加示例3-5中的代码,为按钮的初始状态创建样式。此代码使用.button样式类选择器,以便如果您稍后在表单中添加按钮,则新按钮也将使用此样式。

 

示例3-5按钮阴影

Example 3-5 Drop Shadow for Button

.button {
    -fx-text-fill: white;
    -fx-font-family: "Arial Narrow";
    -fx-font-weight: bold;
    -fx-background-color: linear-gradient(#61a2b1, #2A5058);
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}

现在,当用户将鼠标悬停在按钮上时,会创建一个稍微不同的外观。你可以用悬浮伪类来实现。伪类包括类的选择器和由冒号(:)分隔的状态的名称,如示例3-6所示。

 

示例3-6按钮悬停样式

Example 3-6 Button Hover Style

.button:hover {
    -fx-background-color: linear-gradient(#2A5058, #61a2b1);
}

图3-5显示了具有新的蓝灰色背景和白色粗体文本的按钮的初始和悬停状态。

 

图3-5初始和悬停按钮状态

以下说明图3-5
“图3-5初始和悬停按钮状态”的说明
 

最终应用程序如图3-6所示。

 

图3-6最终风格化应用程序

图3-6的说明如下
“图3-6最终风格化应用程序”的说明

© 著作权归作者所有

诺岚
粉丝 1
博文 109
码字总数 193210
作品 0
广州
程序员
私信 提问
JavaFX 架构与框架 (译)

原文地址:http://download.oracle.com/javafx/2.0/architecture/jfxpub-architecture.htm JavaFX 2.0平台是基于Java技术的富客户端平台。它使应用程序开发者更加容易的开发和部署跨平台的富...

Jeky
2011/10/09
0
26
Java 8新特性探究(十三)JavaFX 8新特性以及开发2048游戏

JavaFX主要致力于富客户端开发,以弥补swing的缺陷,主要提供图形库与media库,支持audio,video,graphics,animation,3D等,同时采用现代化的css方式支持界面设计。同时又采用XUI方式以XML方式...

OSC闲人
2014/10/19
0
28
JavaFX 11 发布,与 JDK 拆分后的首个正式大版

JavaFX 11 发布了,JavaFX 是一个强大的图形和多媒体处理工具包集合,它允许开发者来设计、创建、测试、调试和部署富客户端程序,并且和 Java 一样跨平台。由于 JavaFX 库被写成了 Java API...

h4cd
2018/09/20
5K
29
認識JavaFX

作者:蔡學鏞 注意:本文章內容是依據alpha版技術做描述,讀者閱讀時可能已經和實際現況有所差異。 雖 然Ajax方興未艾,但RIA(Rich Internet/Interface Application)也已經揭開序幕,同樣是...

红薯
2009/02/12
838
2
通过CSS来给JavaFX程序换肤

Skinning JavaFX Applications with CSS You can create a custom look, also called a skin, for your JavaFX application with cascading style sheets (CSS). CSS contain style definiti......

一号男嘉宾
2012/05/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

《伟大的博弈》读后感作文4100字

《伟大的博弈》读后感作文4100字: 五一小长假,作为工厂员工,没能跟上大家放假的步伐,窝家里两天没出门,逼着自己看完《伟大的博弈》,感触颇多。似乎不能消化,先记录第一遍作为幼稚的见...

原创小博客
昨天
0
0
单点登录-基于Redis+MySQL实现单点登录(SSO)

1. 为什么要用单独登录? 主要便于公司内部多系统统一认证授权管理,一次登录可访问多个跨域系统,也同时更加方便统一管理用户登录(员工离职需要拿掉登录权限、统计所有用户对系统的登录请求...

秋日芒草
昨天
2
0
827. Making A Large Island

思想: 将所有连通的 1 分成一个组,分配编号,然后使用BFS统计1的个数,得到这个组的面积。 遍历格子里所有为 0 的元素,检查四个方向的1所在的组并加上这个组面积。于是得到当前元素为 0 ...

reter
昨天
1
0
亿万pv的混合云规划实施

基础服务: keepalive,lvs,nginx,dns,ntp,redis集群,yum仓库,web资源 网络高可用 防火墙冗余,交换机堆叠 专线互联 物理机虚拟化 VMware vcenter/ Proxmox...

以谁为师
昨天
4
0
聊聊dubbo的LRUCache

序 本文主要研究一下dubbo的LRUCache LRUCache dubbo-2.7.2/dubbo-common/src/main/java/org/apache/dubbo/common/utils/LRUCache.java public class LRUCache<K, V> extends LinkedHashMap<......

go4it
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部