javaFX：为组件自定义CSS属性

概述

css属性是啥？就像background-color、font-size这样的，决定了组件样式特点和渲染效果的东西，就是css属性。

为啥要自己自定义css属性呢？

其实是在封装javaFX组件的时候使用了canvas，canvas的特性，像是颜色，背景画笔粗细什么的，都用得java控制，这样一来，如果其他地方更换了css，他们整体的配色和风格就会大变样，canvas绘制的效果就和其他位置“画风”不一致，非常别扭，如果canvas也能有这些属性，我们就可以根据css属性来决定该画成什么样子的，这就比较好了。

那么该怎么做呢

javafx组件的CSS属性是由CssMetaData，StyleableProperty这两个进行控制的，为了方便我们使用，javaFX提供了一个Factor接口，创建自定义的属性就要从这个factor入手了。其实通过factory入手非常简单，就像这样，很容易就能够增加一个新的css属性了:

javafx组件的CSS属性是由CssMetaData，StyleableProperty这两个进行控制的，为了方便我们使用，javaFX提供了一个Factor接口，创建自定义的属性就要从这个factor入手了。其实通过factory入手非常简单，就像这样，很容易就能够增加一个新的css属性了:

public class StyleableCanvas extends Canvas {
	
	private static final StyleablePropertyFactory<StyleableCanvas> factory =
                    new StyleablePropertyFactory<>(Canvas.getClassCssMetaData());
	
	private StyleableProperty<Color> background = 
                   factory.createStyleableColorProperty(this, 
                  "background", "-c-background-color");
	
	protected static final CssMetaData<StyleableCanvas, Color> BACKGROUND_META_DATA =
                 factory.createColorCssMetaData("-c-background-color", 
                 c -> c.background, Color.BLACK);
	
	@Override
        public List<CssMetaData<? extends Styleable, ?>> getCssMetaData() {
              return factory.getCssMetaData();
        }

	public static List<CssMetaData<? extends Styleable, ?>> getClassCssMetaData() {
		return factory.getCssMetaData();
	}
	
}

那么现在解释一下他的含义：

StyleablePropertyFactory是一个用来创建属性，以及属性的MetaData的工厂，属性用来存放组件具体的属性值，metaData可以看成是属性名称和控件属性值的对应关系的描述，getCssMetaData和getClassMetaData一般我们不会手动调用，一般来说是javafx解析和渲染时候会通过这个读取css样式，我们需要把自己的新属性加入这两个方法的返回值中，这样新的属性就能够被javafx正确解析到了。

至于这里属性的metadata是protected的原因，是因为我需要在同一个package访问他来读取这个自定义的属性，以此进行canvas的绘制，其实如果不需要在外面获取新属性的话，他完全可以是private的。

css的解析是需要一点时间的，如果想要打印到控制台上面，可以在监听事件中打印，因为setStyle之后属性并不会马上生效。

效果测试

以上设定了-c-background属性，他默认是黑的，我将他设为#FFF，然后在鼠标事件中进行读取：

canvas.setOnMouseMoved(e -> {
	System.out.println(StyleableCanvas.BACKGROUND_META_DATA
            .getStyleableProperty(canvas).getValue());
});

可见，新的属性以及生效。

PS：本文原创，最早是放在知乎的，CSDN一段时间没有来了。