javafx的css语法_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属性了:

public class StyleableCanvas extends Canvas {

private static final StyleablePropertyFactory factory =

new StyleablePropertyFactory<>(Canvas.getClassCssMetaData());

private StyleableProperty background =

factory.createStyleableColorProperty(this,

"background", "-c-background-color");

protected static final CssMetaData BACKGROUND_META_DATA =

factory.createColorCssMetaData("-c-background-color",

c -> c.background, Color.BLACK);

@Override

public List> getCssMetaData() {

return factory.getCssMetaData();

}

public static List> 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());

});

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