2012-05-24 31 views
5

estoy luchando con un poco de estilo CSS cuando se trabaja con JavaFX ..JavaFX 2 de depuración css

me pregunto si hay alguna forma de depurar el css?

algo así como firebug o la herramienta incorporada en chrome que le muestra cuando presiona sobre un elemento qué estilos CSS le son aplicables.

Respuesta

4

Echa un vistazo a Scenic View para ver si cumple al menos con tus necesidades.

+1

esta es una herramienta muy buena! no lo sabía - gracias, pero lamentablemente la herramienta no muestra qué propiedades de CSS están asignadas a los nodos – bennyl

+1

JavaFX tiene el único archivo CSS incorporado caspian.css. Todos los selectores están definidos allí y anulando estos selectores son suficientes para la mayoría de los casos de uso (los cambios más profundos se realizan a través de máscaras). Así que usar por ejemplo el soporte de CSS de Scene Builder para aplicar estilos a un nodo, y ver qué propiedades de CSS se asignan y cambiarlas inmediatamente de forma apropiada usando el creador/visor de CSS de Netbeans proporcionará algo que está pidiendo. Consulte el tutorial de Scene Builder. –

+0

caspian.css es una gran fuente, aunque todavía puede ser bueno tener algo como Firebug para la depuración de css ... pero supongo que no debería ser codicioso :) – bennyl

3

Además de utilizar ScenicView como Uluk sugirió, a veces también simplemente vuelco los nodos activos a la consola después de mostrar un escenario. Este valor predeterminado toString() para los nodos enumera sus identificadores CSS y clases de estilo.

// 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); 
} 

Salida de ejemplo:

[email protected] 
    [email protected][styleClass=lyric-text] 
    Button[id=null, styleClass=button change-lyric] 
    ButtonSkin[id=null, styleClass=button change-lyric] 
     [email protected] 
     [email protected][styleClass=text] 

Hay una cierta API interna indocumentado alrededor de procesamiento de CSS, pero nada público.

Una solicitud para hacer esta API pública está aquí: CSS Style Object Model in Java. Usted crea una cosa llamada un Mapa de Estilos y lo asocia a un nodo, que en efecto crea un oyente que registra los cambios de procesamiento css para el nodo que ocurre después de ha agregado el Mapa de Estilos.

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); 
    } 
    } 
} 

Si modifica la rutina volcado anterior a =>

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

continuación, la rutina va a imprimir también cambios en el estilo ya que los stylemaps se añadieron a los nodos.

Tenga en cuenta que la llamada anterior utiliza una impl_ api que está en desuso que puede (y probablemente cambiará) en futuras versiones de JavaFX y no habrá recibido el soporte de uso y prueba de la API pública.

Creo que, para esto, no lo encontrará demasiado útil hasta que el mecanismo se implemente en una herramienta gráfica como ScenicView para proporcionar de forma interactiva información css del estilo Firebug. No creo que ScenicView sea de código abierto y la implementación interna de CSS no está documentada públicamente, por lo que puede ser difícil crear una herramienta de este tipo.

+0

hago eso también, pero que no muestra información sobre qué propiedades CSS asignadas para cada nodo y de qué archivo/selector provienen esas propiedades – bennyl

+0

Respuesta actualizada para analizar la obtención de información css más detallada utilizando api de implementación en desuso. – jewelsea