找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1857|回复: 0

[教程] 通过CSS来给JavaFX程序换肤

[复制链接]
发表于 2013-4-11 13:01:51 | 显示全部楼层 |阅读模式 来自 中国–北京–北京
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 definitions that control the look of user interface elements. Using CSS in JavaFX applications is similar to using CSS in HTML. JavaFX CSS are based on the W3C CSS version 2.1 specification (available at http://www.w3.org/TR/CSS21/) with some additions from current work on version 3 of the specification and some extensions that support specific JavaFX features.
Skinning your UI with JavaFX CSS enables you to change the UI shown in Figure 1 to the UI shown in Figure 2 just by changing the style sheet used.
Figure 1 Style 1

Description of "Figure 1 Style 1"


Figure 2 Style 2

Description of "Figure 2 Style 2"


Default Style Sheet
The default style sheet for JavaFX applications is caspian.css, which is found in the JavaFX runtime JAR file, jfxrt.jar. This style sheet defines styles for the root node and the UI controls. To view this file, go to the \rt\lib directory under the directory in which the JavaFX SDK is installed. Use the following command to extract the style sheet from the JAR file:
jar -xf jfxrt.jar com/sun/javafx/scene/control/skin/caspian/caspian.css
Figure 3 shows what the sample UI looks like with the default style sheet.
Figure 3 Default Style

Description of "Figure 3 Default Style"



Creating Style Sheets
You can create one or more of your own style sheets to override the default styles and to add your own styles. Typically style sheets that you create have an extension of .css and are located in the same directory as the main class for your JavaFX application.
The style sheet controlStyle1.css provides the skinning shown in Figure 1. The style sheetcontrolStyle2.css provides the skinning shown in Figure 2.
Style sheets are applied to Scene objects as shown in Example 1, where path is the directory structure that reflects the location of your style sheet, and stylesheet is the name of your style sheet. For example, the path and name of the style sheet for Figure 2 is uicontrolcss/controlStyle2.css.
Example 1 Adding a Style Sheet
Scene scene = new Scene(new Group(), 500, 400);scene.getStylesheets().add("path/stylesheet.css");

Defining Styles
A style definition consists of the name of the style, also called the selector, and a series of rules that set the properties for the style. Rules for a definition are enclosed in braces ({}).Example 2 shows the definition for a style named .custom-button.
Example 2 Sample Style Definition
.custom-button {    -fx-font: 16px "Serif";    -fx-padding: 10;    -fx-background-color: #CCFF99;}

Note:
The size of a font can be specified in either points (pt) or pixels (px). A resolution of 96 dots per inch (dpi) is assumed, so 1px = 0.75pt.



Selectors
Several types of styles can be defined. Each type of style has its own convention for selectors.
Style classes correspond to class names. By convention, style class names that consist of more than one word use a hyphen (-) between words. Style class selectors are preceded by a dot (.).
Examples of class selectors:
.button.check-box.scroll-bar
You can also define styles that are associated with a node through the node's ID. The ID is set using the node's setId() method. The style name is the ID preceded by a hash symbol (#). For example, a node with the ID my-button is skinned with the style #my-button.
Examples of ID style selectors:
#my-button#shaded-hbox
Compound selectors are also possible. Some classes include elements that can have their own style definition, which are called descendant classes. For example, many UI controls have a descendant class for the label. These definitions are identified by the selector for the class and the selector for the descendant class separated by a space.
Examples of selectors for descendant classes:
.check-box .label.check-box .box.radio-button .dot
Pseudo-classes enable you to customize states of a node, such as when a node has focus. These definitions are identified by the selector for the class and the name for the state separated by a colon (:).
Examples of selectors for pseudo-classes:
.radio-button:focused.radio-button:hover.scroll-bar:vertical
Rules and Properties
The rules for a style definition assign values to properties associated with the class. Rule property names correspond to the names of the properties for a class. The convention for property names with multiple words is to separate the words with a hyphen (-). Property names for styles in JavaFX style sheets are preceded by -fx-. Property names and values are separated by a colon (:). Rules are terminated with a semicolon (;).
Examples of rules:
-fx-background-color: #333333;-fx-text-fill: white;-fx-alignment: CENTER;
The .root style class is applied to the root node of the Scene instance. Because all nodes in the scene graph are a descendant of the root node, styles in the .root style class can be applied to any node.
The .root style class includes properties that can be used by other styles to provide consistency in a UI. For example, the property -fx-focused-base is defined in the .root style. This property is used by styles for other UI controls as the color for the control when it has focus. The following definition shows how this property is used in the style for the classCheckBox:
.check-box:focused {    -fx-color: -fx-focused-base;}

Skinning the Scene
You can quickly change the look of your UI just by customizing the .root style class. Both of the sample style sheets set the font size and family, the base color from which other colors are derived, and the background color of the scene. Example 3 shows the .root style fromcontrolStyle2.css.




发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-12-23 08:27 , Processed in 0.042089 second(s), 9 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表