5

在使用 JavaFX 时，我正在努力处理一些 CSS 样式。

我想知道是否有任何方法可以调试 css？

类似于 firebug 或 chrome 中的内置工具，当您按下一个元素时，它会向您显示适用于它的 css 样式。

4

2 回答 2

6

Have a look on Scenic View to see does it meet your needs a bit at least.

于 2012-05-24T09:18:15.253 回答
6

除了按照 Uluk 的建议使用 ScenicView 之外，有时我也只是在显示舞台后将活动节点转储到控制台。节点的默认设置toString()列出了它们的 css id 和样式类。

// debugging routine to dump the scene graph.
public  static void dump(Node n) { dump(n, 0); }
private static void dump(Node n, int depth) {
  for (int i = 0; i < depth; i++) System.out.print("  ");
  System.out.println(n);
  if (n instanceof Parent) 
    for (Node c : ((Parent) n).getChildrenUnmodifiable()) 
      dump(c, depth + 1);
}

样本输出：

BorderPane@13c3750
  Text@2e3919[styleClass=lyric-text]
  Button[id=null, styleClass=button change-lyric]
    ButtonSkin[id=null, styleClass=button change-lyric]
      ImageView@13a4e73
      LabeledText@567aef[styleClass=text]

围绕 css 处理有一些未记录的内部 api，但没有公开。

公开此 api 的请求在这里：Java 中的 CSS 样式对象模型。您创建一个名为 StyleMap 的东西并将其附加到一个节点，这实际上创建了一个侦听器，该侦听器记录您添加 StyleMap后发生的节点的 css 处理更改。

public void addStyleMaps(Node node, int depth) {
  node.impl_setStyleMap(FXCollections.observableMap(new HashMap<WritableValue, List<Style>>()));
  if (node instanceof Parent) {
    for (Node child : ((Parent) node).getChildrenUnmodifiable()) {
      addStyleMaps(child, depth + 1);
    }
  }
}

如果将上面的转储例程修改为 =>

System.out.println(n + " " + node.impl_getStyleMap());

然后该例程还将打印出样式更改，因为样式映射已添加到节点。

请注意，上面的调用使用了一个 impl_ api，它已被弃用，它可能（并且可能会）在未来的 JavaFX 版本中发生变化，并且不会获得公共 api 的使用和测试支持。

我认为，尽管如此，在将机制实现到像 ScenicView 这样的图形工具中以交互地提供 Firebug 样式 css 信息之前，您不会发现它太有用。我不认为 ScenicView 是开源的，内部的 css 实现也没有公开记录，所以自己创建这样的工具可能很困难。

于 2012-05-24T09:31:58.803 回答