javafx之CSS初探

javaFX 可以通過css來設計界面。javafx中的css只是w3c css2.1規範的一個擴展和子集，並不完全支持所有的css特性。

javafx中的css元素必須有-fx-前綴。

一、介紹

java8中新增了javafx.css開放了css相關api。

選擇器分類：

Type選擇器：通過Node的getTypeSelector可以獲取

id選擇器：通過設定id=屬性（注意這裏的id不是fx:id）

styleClass屬性： styleClass可以使用class選擇器

選擇器命名規範：如ToggleButton需要寫成：toggle-button

與w3c css語法的一些區別：

1.不支持@font‑face, @-keyword 等

2.不支持層次僞類選擇器

3.僞類:active,:focus等，在Nodes中變爲:pressed, :focused

4.超鏈接僞類:link,:visited變爲:visited

5.javafx中不支持逗號序列的值，如不能再-fx-font-family以逗號分隔同時指導fontsize等

6.javafx css使用HSB顏色模型代替HSL

7、javafx css不會對uri進行編碼

關於Inheritance繼承

舉例：

Scene scene = new Scene(new Group()); 
scene.getStylesheets().add(“test.css”); 
Rectangle rect = new Rectangle(100,100); 
rect.setLayoutX(50); 
rect.setLayoutY(50); 
rect.getStyleClass().add("my-rect"); 
((Group)scene.getRoot()).getChildren().add(rect);

.my-rect { -fx-fill: red; }

.my-rect {
    -fx-fill: yellow;
    -fx-stroke: green;
    -fx-stroke-width: 5;
    -fx-stroke-dash-array: 12 2 4 2;
    -fx-stroke-dash-offset: 6;
    -fx-stroke-line-cap: butt;
}

語法排錯：

WARNING: com.sun.javafx.css.parser.CSSParser declaration Expected '<percent>' while parsing '-fx-background-color' at ?[1,49]

<url>[line, position]

Types

inherit

boolean

string

number

integer

size

angle

point {x,y}

percentage %

uri url(http://example.com)

effect:

 javafx css支持DropShadow與InnerShadow

dropshadow( <blur-type> , <color> , <number> , <number> , <number> , <number> )

innershadow( <blur-type> , <color> , <number> , <number> , <number> , <number> )

<blur-type> = [ gaussian | one-pass-box | three-pass-box | two-pass-box ]

font

-fx-font-family: [serif/sans-serif/cursive/fantasy/monospace]

-fx-font-size

-fx-font-style: [normal| italic | oblique]

-fx-font-weight: [normal| bold| bolder| lighter| 100| ...|900]

-fx-font: [[ <font-style> || <font-weight> ]? <font-size> <font-family> ]

paint

<color> | <linear-gradient> | <radial-gradient> | <image-pattern>

<repeating-image-pattern>

Linear Gradients <linear-gradient>

linear-gradient( [ [from <point> to <point>] | [ to <side-or-corner>], ]? [ [ repeat | reflect ], ]? <color-stop>[, <color-stop>]+) 

t from top left to bottom right of the filled area with red at the top left corner and black at the bottom right.

linear-gradient(to bottom right, red, black)

  linear-gradient(from 0% 0% to 100% 100%, red 0%, black 100%)

create a 50px high bar at the top with a 3 color gradient with white underneath for the rest of the filled area.

linear-gradient(from 0px 0px to 0px 50px, gray, darkgray 50%, dimgray 99%, white)

Radial Gradient <radial-gradient>

radial-gradient([ focus-angle <angle>, ]? [ focus-distance <percentage>, ]? [ center <point>, ]? radius [ <length> | <percentage> ] [ [ repeat | reflect ], ]?<color-stop>[, <color-stop>]+)

radial-gradient(radius 100%, red, darkgray, black)

radial-gradient(focus-angle 45deg, focus-distance 20%, center 25% 25%, radius 50%, reflect, gray, darkgray 75%, dimgray)

Image Paint <image-pattern>

image-pattern(<string>, [<size>, <size>, <size>, <size>[, <boolean>]?]?)

<string> The URL of the image.
<size> The x origin of the anchor rectangle.
<size> The y origin of the anchor rectangle.
<size> The width of the anchor rectangle.
<size> The height of the anchor rectangle.
<boolean> The proportional flag which indicates whether start and end locations are proportional or absolute

image-pattern("images/Duke.png")

image-pattern("images/Duke.png", 20%, 20%, 80%, 80%)

image-pattern("images/Duke.png", 20%, 20%, 80%, 80%, true)

image-pattern("images/Duke.png", 20, 20, 80, 80, false)

image-pattern("images/Duke.png", 0, 0, imageWidth, imageHeight, false)

repeating-image-pattern("com/mycompany/myapp/images/Duke.png")

color

.button {
    -fx-background-color: red;
}

looked-up Colors:很有用的一個特性可以引用顏色值，舉例秒懂

.root { abc: #f00 }
.button { -fx-background-color: abc }

rgb colors:

.label { -fx-text-fill: #f00 } /* #rgb */

• .label { -fx-text-fill: #ff0000 } /* #rrggbb */
• .label { -fx-text-fill: rgb(255,0,0) }
• .label { -fx-text-fill: rgb(100%, 0%, 0%) }
• .label { -fx-text-fill: rgba(255,0,0,1) }

javafx一些類中的css屬性：

Stage

PopupWindow沒有可以被css styled的properties，但是PopupWindow可以有自己的scene，可以通過scene的root節點

root.popup來進行styled

Nodes

Node類：

-fx-blend-mode; -fx-cursor; -fx-effect; -fx-focus-tranversable; -fx-opacity; 

-fx-rotate; -fx-scale-x/y/z; -fx-translate-x/y/z

visibility:[ visible | hidden | collapse | inherit ]

僞類：disabled,focused,hover,pressed,show-mnemonic

Scene:

ImageView: -fx-image

Region:

沒一個Region包含：

1. background fills： -fx-background-color/radius/insets
2. background images : -fx-background-image/repeat/position/size
3. border strokes: -fx-border-color/syle/width/radius/insets
4. border images: -fx-border-image-source/repeat/slice/width/insets
5. contents:

  Region的形狀相關：-fx-shape; -fx-scale-shape

-fx-min-width, -fx-pref-width; -fx-max-width

FlowPane:

-fx-hgap; -fx-vgap;-fx-alignment;-fx-orientation

GridPane

-fx-hgap; -fx-vgap; -fx-alignment; -fx-grid-lines-visible

HBox

-fx-spacing; -fx-alignment;-fx-fill-height

Shape

-fx-fill; -fx-smooth; -fx-stroke; -fx-stroke-type; -fx-stroke-dash-array/offset; -fx-stroke-line-cap/join

-fx-stroke-miter-limit; -fx-stroke-width

Text

-fx-font; -fx-text-alignment; -fx-underline

Button

僞類：cancel , default,armed

Cell

僞類：empty,filled,selected

CheckBox

僞類：selected,determinate,indeterminate

CheckMenuItem: 僞類：selected

ComboBox:

僞類：editable,showing,armed

Control:

-fx-skin: -fx-focus-taversable

Hyperlink

-fx-cursor

僞類：visited

ListView:

-fx-orientation

僞類：horizentat,vertical

Menu:

僞類：showing

ProgressIndicator

-fx-indeterminate-segment-count

-fx-progress-color

-fx-spin-enabled

僞類：determinate,indeterminate

ProgressBar

-fx-indeterminate-bar-length/escape/flip/animation-time

ScrollBar

-fx-orientation; -fx-block-increment;-fx-unit-increment

僞類：vertical, horizental

TextInputControl

-fx-prompt-text-fill; -fx-highlight-fill; -fx-dislay-caret

補充

關於長度單位的補充：

Relative

• px: pixels, relative to the viewing device
• em: the 'font-size' of the relevant font
• ex: the 'x-height' of the relevant font

Absolute

• in: inches — 1 inch is equal to 2.54 centimeters.
• cm: centimeters
• mm: millimeters
• pt: points — the points used by CSS 2.1 are equal to 1/72nd of an inch.
• pc: picas — 1 pica is equal to 12 points.

關於角度的補充

• deg: angle in degrees - all other angle units are converted to degrees.
• rad: angle in radians
• grad: angle in gradians
• turn: angle in turns

關於常見顏色的補充：

	aliceblue = #f0f8ff		antiquewhite = #faebd7		aqua = #00ffff		aquamarine = #7fffd4
	azure = #f0ffff		beige = #f5f5dc		bisque = #ffe4c4		black = #000000
	blanchedalmond = #ffebcd		blue = #0000ff		blueviolet = #8a2be2		brown = #a52a2a
	burlywood = #deb887		cadetblue = #5f9ea0		chartreuse = #7fff00		chocolate = #d2691e
	coral = #ff7f50		cornflowerblue = #6495ed		cornsilk = #fff8dc		crimson = #dc143c
	cyan = #00ffff		darkblue = #00008b		darkcyan = #008b8b		darkgoldenrod = #b8860b
	darkgray = #a9a9a9		darkgreen = #006400		darkgrey = #a9a9a9		darkkhaki = #bdb76b
	darkmagenta = #8b008b		darkolivegreen = #556b2f		darkorange = #ff8c00		darkorchid = #9932cc
	darkred = #8b0000		darksalmon = #e9967a		darkseagreen = #8fbc8f		darkslateblue = #483d8b
	darkslategray = #2f4f4f		darkslategrey = #2f4f4f		darkturquoise = #00ced1		darkviolet = #9400d3
	deeppink = #ff1493		deepskyblue = #00bfff		dimgray = #696969		dimgrey = #696969
	dodgerblue = #1e90ff		firebrick = #b22222		floralwhite = #fffaf0		forestgreen = #228b22
	fuchsia = #ff00ff		gainsboro = #dcdcdc		ghostwhite = #f8f8ff		gold = #ffd700
	goldenrod = #daa520		gray = #808080		green = #008000		greenyellow = #adff2f
	grey = #808080		honeydew = #f0fff0		hotpink = #ff69b4		indianred = #cd5c5c
	indigo = #4b0082		ivory = #fffff0		khaki = #f0e68c		lavender = #e6e6fa
	lavenderblush = #fff0f5		lawngreen = #7cfc00		lemonchiffon = #fffacd		lightblue = #add8e6
	lightcoral = #f08080		lightcyan = #e0ffff		lightgoldenrodyellow = #fafad2		lightgray = #d3d3d3
	lightgreen = #90ee90		lightgrey = #d3d3d3		lightpink = #ffb6c1		lightsalmon = #ffa07a
	lightseagreen = #20b2aa		lightskyblue = #87cefa		lightslategray = #778899		lightslategrey = #778899
	lightsteelblue = #b0c4de		lightyellow = #ffffe0		lime = #00ff00		limegreen = #32cd32
	linen = #faf0e6		magenta = #ff00ff		maroon = #800000		mediumaquamarine = #66cdaa
	mediumblue = #0000cd		mediumorchid = #ba55d3		mediumpurple = #9370db		mediumseagreen = #3cb371
	mediumslateblue = #7b68ee		mediumspringgreen = #00fa9a		mediumturquoise = #48d1cc		mediumvioletred = #c71585
	midnightblue = #191970		mintcream = #f5fffa		mistyrose = #ffe4e1		moccasin = #ffe4b5
	navajowhite = #ffdead		navy = #000080		oldlace = #fdf5e6		olive = #808000
	olivedrab = #6b8e23		orange = #ffa500		orangered = #ff4500		orchid = #da70d6
	palegoldenrod = #eee8aa		palegreen = #98fb98		paleturquoise = #afeeee		palevioletred = #db7093
	papayawhip = #ffefd5		peachpuff = #ffdab9		peru = #cd853f		pink = #ffc0cb
	plum = #dda0dd		powderblue = #b0e0e6		purple = #800080		red = #ff0000
	rosybrown = #bc8f8f		royalblue = #4169e1		saddlebrown = #8b4513		salmon = #fa8072
	sandybrown = #f4a460		seagreen = #2e8b57		seashell = #fff5ee		sienna = #a0522d
	silver = #c0c0c0		skyblue = #87ceeb		slateblue = #6a5acd		slategray = #708090
	slategrey = #708090		snow = #fffafa		springgreen = #00ff7f		steelblue = #4682b4
	tan = #d2b48c		teal = #008080		thistle = #d8bfd8		tomato = #ff6347
	turquoise = #40e0d0		violet = #ee82ee		wheat = #f5deb3		white = #ffffff
	whitesmoke = #f5f5f5		yellow = #ffff00		yellowgreen = #9acd32		transparent = rgba(0,0,0,0)