概述
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());
});
可见,新的属性以及生效。