Posted on

image.png

css 盒子模型

image.png

image.png

  • 内容(content)
  • 边框(border): 产生内边距padding和外边距margin
  • margin 到边距是透明的

派生选择器

1.后代选择器（只有符合上下关系）
选中<li>标签下的<strong>标签

1
2
3
4
li strong {
    font-style: italic;
    font-weight: normal;
  }

2.子元素选择器
不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素
h1 > strong {color:red;}
只作用域第一个strong而不作用于第二个，因为第二个不是直接的子元素。

1
2
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

3.相邻元素选择器
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）(用一个结合符只能选择两个相邻兄弟中的第二个元素)
li + li {font-weight:bold;} item2. item3 被选中

1
2
3
4
5
6
7
8
9
10
<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>

一些难懂的css 特性

display

display 属性规定元素应该生成的框的类型,默认值：
inline
继承性： no
版本： CSS1
JavaScript 语法： object.style.display=”inline”

1
2
3
4
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）

Posted on | In

java css 与HTML css 语法类似

Selector 选择器：

  • # ID (选择某ID的node们)

    1
    2
    3
    #closeButton {
    -fx-text-fill: red;
    }

  • . className(选择定义某个class的node们)

    1
    2
    3
    .button {
    -fx-text-fill: blue;
    }
1
2
3
.button#closeButton {
-fx-text-fill: red;
}

选择ID既为closeButton又属于button类的node

  • 归组同样的样式
    1
    2
    3
    4
    5
    6
    .button {
    -fx-text-fill: blue;
    }
    .label {
    -fx-text-fill: blue;
    }

等价于：

1
2
3
.button, .label {
-fx-text-fill: blue;
}

后代选择器（选择某个类型的后代类型）

1
2
3
4
/*选则祖先为hbox类样式的.button样式节点*/
.hbox .button {
-fx-text-fill: blue;
}

子节点选择器（选择某个父类型的子类型）

1
2
3
.hbox > .button {
-fx-text-fill: blue;
}

状态选择器也称为伪类型选择器，它会匹配当前所处状态的node，比如匹配拥有focus的，鼠标的hover等等

1
2
3
.button:hover {
-fx-text-fill: red;
}

样式皮肤主题的区别(styles,skin,themes)

styles 控件级别
skin 应用级别
themes 操作系统级别

样式的取名

Property names in JavaFX styles start with -fx-. For example, the property name font-size in normal CSS
styles becomes -fx-font-size in JavaFX CSS style. JavaFX uses a convention to map the style property names
to the instance variables. It takes an instance variable; it inserts a hyphen between two words; if the instance variable
consists of multiple words, it converts the name to the lowercase and prefixes it with -fx-. For example, for an
instance variable named textAlignment, the style property name would be -fx-text-alignment

直接修改应用样式

1
Application.setUserAgentStylesheet(Application.STYLESHEET_CASPIAN);

setUserAgentStyleSheet方法可以直接替换应用的style.

内联写法与 样式表单的区别（difference between inline style and style sheet style)

设置css 样式的优先级

  1. Inline style (the highest priority) 内联写法

    1
    2
    3
    4
    5
    6
    7
    8
    node.setStyle("-fx.....");
    //不能重复的setStyle(styleProperty)，以最后一次setStyle为准
    //错误的写法
        node.setStyle("-fx-background-color: #9400D3");
        node.setStyle("-fx-background-insets: 5");
        node.setStyle("-fx-background-radius: 10");
    //正确的写法
        node.setStyle("-fx-background-color: #9400D3;-fx-background-insets: 5;-fx-background-radius: 0");

  2. Parent style sheets 父节点样式表单

  3. Scene style sheets 场景样式表单
  4. Values set in the code using JavaFX API(直接API调用: setFont())
  5. User agent style sheets (the lowest priority)

css 属性的继承

Java fx 对于css 属性有两种继承机制：

  1. 一种是继承属性类型 （通过类的继承关系继承）
  2. 一种是继承属性值
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    public class CSSInheritance extends Application {
    	public static void main(String[] args) {
    		Application.launch(args);
    	}

    	@Override
    	public void start(Stage stage) {
    		Button okBtn = new Button("OK");
    		Button cancelBtn = new Button("Cancel");

    		HBox root = new HBox(10); // 10px spacing
    		root.getChildren().addAll(okBtn, cancelBtn);

    		// Set styles for the OK button and its parent HBox
    		root.setStyle("-fx-cursor: hand;-fx-border-color: blue;-fx-border-width: 5px;");
    		okBtn.setStyle("-fx-border-color: red;-fx-border-width: inherit;");

    		Scene scene = new Scene(root);
    		stage.setScene(scene);
    		stage.setTitle("CSS Inheritance");
    		stage.show();
    	}
    }

![Upload Paste_Image.png failed. Please try again.]

css 属性值类型

  • inherit : fx-xxx: inherit(继承父节点的样式)
  • boolean(true or false) : -fx-display-caret: false
  • string : -fx-skin:”com.xxx.xxxSkin”
  • number : -fx-opacity:0.60
  • angle : -fx-rotate:45deg
  • point : 用 x,y 表示横纵坐标
  • color-stop: 颜色梯度
  • URI ：.image-view {-fx-image: url(“http://jdojo.com/myimage.png");} 描述资源位置
  • effect ： 阴影效果， 使用dropshadow和innershadow两个css 函数,参数
    .drop-shadow-1 {-fx-effect: dropshadow(gaussian, gray, 10, 0.6, 10, 10);}
  • font type: 
    1
    2
    3
    4
    5
    6
    7
    //散开的写法
    .my-font-style {
    -fx-font-family: "serif";
    -fx-font-size: 20px;
    -fx-font-style: normal;
    -fx-font-weight: bolder;
    }

一句式写法

1
2
3
.my-font-style {
-fx-font: italic bolder 20px "serif";
}

  • paint
    A paint type value specifies a color.(定制你的动态颜色）
    1
    2
    3
    4
    .my-style {
    -fx-fill: linear-gradient(from 0% 0% to 100% 0%, black 0%, red 100%);
    -fx-background-color: radial-gradient(radius 100%, black, red);
    }

对于固定的颜色，你可以用
Using named colors(已命名定义好的颜色）

1
2
3
.my-style {
-fx-background-color: red;
}

Using looked-up colors
在根节点中定义，然后在子节点中向上查找所得：

1
2
3
4
5
6
.root {
my-color: black;
}
.my-style {
-fx-fill: my-color;
}

Using the rgb() and rgba() functions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 使用rgb或者rgba*/
.my-style-1 {
-fx-fill: rgb(0, 0, 255);
}
.my-style-2 {
-fx-fill: rgba(0, 0, 255, 0.5);
}
/*16进制 */
.my-style-3 {
-fx-fill: #0000ff;
}
/* 8 进制*/
.my-style-4 {
-fx-fill: #0bc;
}

Using the hsb() or hsba() function

1
2
3
4
5
6
.my-style-1 {
-fx-fill: hsb(200, 70%, 40%);
}
.my-style-2 {
-fx-fill: hsba(200, 70%, 40%, 0.30);
}

Using color functions: derive() and ladder()

1
2
3
4
5
6
.root {
my-base-text-color: red;
}
.my-style {
-fx-text-fill: ladder(my-base-text-color, white 29%, black 30%);
}

ladder函数依赖于my-base-text-color的光亮程度,低于29%为红色，反之为黑色。

背景色的几个属性

-fx-background-color: 背景颜色
-fx-background-insets: 背景内边框距离外边框距离
-fx-background-radius: 背景边框矩形四个角半径

边界的几个属性

-fx-border-color : 边框颜色
-fx-border-width ： 边框厚度
-fx-border-radius ： 边框圆角半径
-fx-border-insets ： 边框距离边界距离（layoutbounds)
-fx-border-style: 边框线样式，比如点线：-fx-border-style: dotted

Posted on | In

Binding在fx的使用

Binding的概念

soldPrice = listPrice - discounts + taxes
通过这个表达式，如果你知道listPrice, discounts, taxes, 你是不是很快能计算出soldPrice? 这就是一个binding的关系,反之如果你知道了一个soldPrice,你能推算出其他3项吗？答案是no. 这里为我们揭示了binding中存在方向的概念，是单向 or 双向。

NumberBinding

  1. 利用property对象返回一个NumberBinding对象,当它的值没有被计算出来，它是invalid:
    1
    2
    3
    4
    5
    6
    7
    //NumberBinding
    IntegerProperty digit1 = new SimpleIntegerProperty(1);
    IntegerProperty digit2 = new SimpleIntegerProperty(2);
    NumberBinding numberBinding = digit1.add(digit2);
    System.out.println("sum.isValid(): " + sum.isValid());
    System.out.println(sum.getValue());
    System.out.println("sum.isValid(): " + sum.isValid());

Paste_Image.png

2.或者它依赖的propery更新的时候，它也会失效

1
2
digit1.set(3);
System.out.println("sum.isValid(): " + sum.isValid());

Paste_Image.png

Binding in String

  1. 直接使用property
    1
    2
    3
    4
    5
    6
    //StringBinding
    StringProperty str1 = new SimpleStringProperty("11");
    StringProperty str2 = new SimpleStringProperty("22");
    StringProperty str3 = new SimpleStringProperty("33");
    str3.bind(str1.concat(str2));
    System.out.println(str3.get());

2.使用StringExpression

1
2
3
4
StringProperty str1 = new SimpleStringProperty("11");
StringProperty str2 = new SimpleStringProperty("22");
StringExpression desc = str1.concat(str2);
System.out.println(desc .get());

3.使用String binding

1
2
3
4
5
6
7
8
9
10
11
12
13
StringProperty str1 = new SimpleStringProperty("11");
StringProperty str2 = new SimpleStringProperty("22");
StringBinding strBinding = new StringBinding() {
	              {
	              bind(str1.concat(str2));
		      }
			@Override
			protected String computeValue() {
				return str1.concat(str2).get();
			}};
System.out.println("StringBinding: + " + strBinding.getValue());
str2.set("22");
System.out.println("StringBinding: + " + strBinding.getValue());

Binding of boolean

通过property之间的逻辑方法比较构造。

1
2
3
4
5
6
7
8
9
Book b1 = new Book("J1", 90, "1234567890");
Book b2 = new Book("J2", 80, "0123456789");
ObjectProperty<Book> book1 = new SimpleObjectProperty<>(b1);
ObjectProperty<Book> book2 = new SimpleObjectProperty<>(b2);
// Create a binding that computes if book1 and book2 are equal
BooleanBinding isEqual = book1.isEqualTo(book2);
System.out.println(isEqual.get());// false
book2.set(b1);
System.out.println(isEqual.get());// true

1
2
3
4
5
6
7
8
9
IntegerProperty x = new SimpleIntegerProperty(1);
IntegerProperty y = new SimpleIntegerProperty(2);
IntegerProperty z = new SimpleIntegerProperty(3);
// Create a boolean expression for x > y && y <> z
BooleanExpression condition = x.greaterThan(y).and(y.isNotEqualTo(z));
System.out.println(condition.get());// false
// Make the condition true by setting x to 3
x.set(3);
System.out.println(condition.get());// true

单向绑定以及双向绑定

单向绑定实例 (C = A X B)

单向绑定只受绑定对象的影响，Binding对象（或这属性）自身的变化不影响绑定对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public class BoundProperty {
	public static void main(String[] args) {
		IntegerProperty x = new SimpleIntegerProperty(10);
		IntegerProperty y = new SimpleIntegerProperty(20);
		IntegerProperty z = new SimpleIntegerProperty(60);
		z.bind(x.add(y));
		System.out.println("After binding z: Bound = " + z.isBound() + ", z = "
				+ z.get());
		// Change x and y
		x.set(15);
		y.set(19);
		System.out.println("After changing x and y: Bound = " + z.isBound()
				+ ", z = " + z.get());
		// Unbind z
		z.unbind();
		// Will not affect the value of z as it is not bound to x and y anymore
		x.set(100);
		y.set(200);
		System.out.println("After unbinding z: Bound = " + z.isBound()
				+ ", z = " + z.get());
	}
}

Paste_Image.png

###双向绑定
双向绑定，改变任何一方，都会触发另一方的改变，给予这种前提（X=Y), 两边必须是同一类型。

一个简单的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
public class BidirectionalBinding {
	public static void main(String[] args) {
		IntegerProperty x = new SimpleIntegerProperty(1);
		IntegerProperty y = new SimpleIntegerProperty(2);
		IntegerProperty z = new SimpleIntegerProperty(3);

		System.out.println("Before binding:");
		System.out.println("x=" + x.get() + ", y=" + y.get() + ", z=" + z.get());

		x.bindBidirectional(y);
		System.out.println("After binding-1:");
		System.out.println("x=" + x.get() + ", y=" + y.get() + ", z=" + z.get());

		x.bindBidirectional(z);
		System.out.println("After binding-2:");
		System.out.println("x=" + x.get() + ", y=" + y.get() + ", z=" + z.get());

		System.out.println("After changing z:");
		z.set(19);
		System.out.println("x=" + x.get() + ", y=" + y.get() + ", z=" + z.get());

		// Remove bindings
		x.unbindBidirectional(y);
		x.unbindBidirectional(z);
		System.out.println("After unbinding and changing them separately:");
		x.set(100);
		y.set(200);
		z.set(300);
		System.out.println("x=" + x.get() + ", y=" + y.get() + ", z=" + z.get());
	}
}
``` 

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2053209-2c30201f85a812b6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

### 流式API
流式 API 是Java fx 在Binding提供的福利 API. 通过这些API，可以向DSL 一样描述 依赖关系。
```java
public class FluentAPITest {

	public static void main(String[] args) {
		
		//String property
		StringProperty s1 = new SimpleStringProperty("XX");
		StringProperty s2 = new SimpleStringProperty("qq");
		StringExpression s3 = s1.concat(s2);
		System.out.println(s3.get());
		
		//Number property
		IntegerProperty i1 = new SimpleIntegerProperty(4);
		IntegerProperty i2 = new SimpleIntegerProperty(2);
		IntegerProperty i3 = new SimpleIntegerProperty(2);
		IntegerBinding ib = (IntegerBinding) i1.add(i2).subtract(i2).multiply(i2).divide(i3);
		System.out.println(ib.get());
		
		//Boolean Property
		BooleanProperty b1 = new SimpleBooleanProperty(false);
		BooleanProperty b2 = new SimpleBooleanProperty(true);
		BooleanBinding b3 = b1.isEqualTo(b2).isNotEqualTo(b2).not().not();
		System.out.println(b3.get());
	}
}

Paste_Image.png

三元 API 操作

new When(condition).then(value1).otherwise(value2)
condition对象必须实现了ObservableBooleanValue接口

1
2
3
4
5
6
7
8
9
public class TernaryTest {
	public static void main(String[] args) {
		IntegerProperty num = new SimpleIntegerProperty(10);
		StringBinding desc = new When(num.divide(2).multiply(2).isEqualTo(num)).then("even").otherwise("odd");
		System.out.println(num.get() + " is " + desc.get());
		num.set(19);
		System.out.println(num.get() + " is " + desc.get());
	}
}

Paste_Image.png

Binding Utility Class

Bingdings 类中包含之前提及全部流式API(诸如add,sustract,multiply,divide,concat,eqaul 等等).如果你不喜欢用流式API的写法，也可以用通过调用Bindings的方法的来满足你创建所需的binding.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public class BindingsClassTest {
	public static void main(String[] args) {
		DoubleProperty radius = new SimpleDoubleProperty(7.0);
		DoubleProperty area = new SimpleDoubleProperty(0.0);

		// Bind area to an expression that computes the area of the circle
		area.bind(Bindings.multiply(Bindings.multiply(radius, radius), Math.PI));
		// Create a string expression to describe the circle
		StringExpression desc = Bindings.format(Locale.US, "Radius = %.2f, Area = %.2f", radius, area);
		System.out.println(desc.get());

		// Change the radius
		radius.set(14.0);
		System.out.println(desc.getValue());
	}
}

Paste_Image.png

与UI 之间的binding

讲了这么多，如果你看过java fx 源码， 你猜到java fx 是如何实现UI 与 Model 的 data binding 吗？
其实java fx ui 类 的所有属性 基本上是 实现了property接口的对象。
比如 textField的textProperty,再比如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
public class ChoicBindingExample extends Application {
  ObservableList cursors = FXCollections.observableArrayList(
  Cursor.DEFAULT,
  Cursor.CROSSHAIR,
  Cursor.WAIT,
  Cursor.TEXT,
  Cursor.HAND,
  Cursor.MOVE,
  Cursor.N_RESIZE,
  Cursor.NE_RESIZE,
  Cursor.E_RESIZE,
  Cursor.SE_RESIZE,
  Cursor.S_RESIZE,
  Cursor.SW_RESIZE,
  Cursor.W_RESIZE,
  Cursor.NW_RESIZE,
  Cursor.NONE
); 
@Override
public void start(Stage stage) {
  ChoiceBox choiceBoxRef = ChoiceBoxBuilder.create()
  .items(cursors)
  .build();
VBox box = new VBox();
box.getChildren().add(choiceBoxRef);
final Scene scene = new Scene(box,300, 250);
scene.setFill(null);
stage.setScene(scene);
stage.show();
scene.cursorProperty().bind(choiceBoxRef.getSelectionModel().selectedItemProperty());
}
public static void main(String[] args) {
launch(args);
}
}