How to traverse the entire scene graph hierarchy? - javafx

Question

I would like to write a method that will print the entire scene graph (including the names of the nodes and the css properties associated with the nodes) to the console. This would enable viewing the hierarchy of the scene graph and all the css attributes associated with each element. I tried to do this (see the scala code below) but my attempt failed.
The scene graph I'm testing this on contains a custom controller that I made following this tutorial. It is not printing any of the nested controls contained in the custom controller. The custom controller appears fine on the stage (and it functions properly) so I know all the required controls are part of the scene graph, but for some reason the example code does not recurse into the custom controller. It does print the name of the custom controller, but not the nested elements inside the controller.
object JavaFXUtils {
def printNodeHierarchy(node: Node): Unit = {
val builder = new StringBuilder()
traverse(0, node, builder)
println(builder)
}
private def traverse(depth: Int, node: Node, builder: StringBuilder) {
val tab = getTab(depth)
builder.append(tab)
startTag(node, builder)
middleTag(depth, node, builder)
node match {
case parent: Parent => builder.append(tab)
case _ =>
}
endTag(node, builder)
}
private def getTab(depth: Int): String = {
val builder = new StringBuilder("\n")
for(i <- 0 until depth) {
builder.append(" ")
}
builder.toString()
}
private def startTag(node: Node, builder: StringBuilder): Unit = {
def styles: String = {
val styleClasses = node.getStyleClass
if(styleClasses.isEmpty) {
""
} else {
val b = new StringBuilder(" styleClass=\"")
for(i <- 0 until styleClasses.size()) {
if(i > 0) {
b.append(" ")
}
b.append(".").append(styleClasses.get(i))
}
b.append("\"")
b.toString()
}
}
def id: String = {
val nodeId = node.getId
if(nodeId == null || nodeId.isEmpty) {
""
} else {
val b = new StringBuilder(" id=\"").append(nodeId).append("\"")
b.toString()
}
}
builder.append(s"<${node.getClass.getSimpleName}$id$styles>")
}
private def middleTag(depth: Int, node: Node, builder: StringBuilder): Unit = {
node match {
case parent: Parent =>
val children: ObservableList[Node] = parent.getChildrenUnmodifiable
for (i <- 0 until children.size()) {
traverse(depth + 1, children.get(i), builder)
}
case _ =>
}
}
private def endTag(node: Node, builder: StringBuilder) {
builder.append(s"</${node.getClass.getSimpleName}>")
}
}
What is the proper way to print the contents of the entire scene graph? The accepted answer can be written in either Java or Scala.
Update
Upon further review, I'm noticing that it does work properly for some of the custom controls, but not all of them. I have 3 custom controls. I'll demonstrate 2 of them. The custom controls are ClientLogo and MenuViewController. The previously listed traversal code properly shows the children of the ClientLogo, but does not show the children of the MenuViewController. (Maybe this is because the MenuViewController is a subclass of TitledPane?)
client_logo.fxml:
<?import javafx.scene.image.ImageView?>
<fx:root type="javafx.scene.layout.StackPane" xmlns:fx="http://javafx.com/fxml" id="clientLogo">
<ImageView fx:id="logo"/>
</fx:root>
ClientLogo.scala
class ClientLogo extends StackPane {
#FXML #BeanProperty var logo: ImageView = _
val logoFxml: URL = classOf[ClientLogo].getResource("/fxml/client_logo.fxml")
val loader: FXMLLoader = new FXMLLoader(logoFxml)
loader.setRoot(this)
loader.setController(this)
loader.load()
logo.setImage(Config.clientLogo)
logo.setPreserveRatio(false)
var logoWidth: Double = .0
def getLogoWidth = logoWidth
def setLogoWidth(logoWidth: Double) {
this.logoWidth = logoWidth
logo.setFitWidth(logoWidth)
}
var logoHeight: Double = .0
def getLogoHeight = logoHeight
def setLogoHeight(logoHeight: Double) {
this.logoHeight = logoHeight
logo.setFitHeight(logoHeight)
}
}
Usage of ClientLogo:
<ClientLogo MigPane.cc="id clientLogo, pos (50px) (-25px)"/>
menu.fxml:
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.shape.Line?>
<?import javafx.scene.control.Label?>
<fx:root type="javafx.scene.control.TitledPane" xmlns:fx="http://javafx.com/fxml" id="menu" collapsible="true" expanded="false">
<GridPane vgap="0" hgap="0">
<children>
<Line fx:id="line" styleClass="menu-line" startX="0" startY="1" endX="150" endY="1" GridPane.rowIndex="0" GridPane.columnIndex="0"/>
<Label fx:id="btnSettings" id="btn-settings" styleClass="btn-menu" text="%text.change.password" GridPane.rowIndex="1" GridPane.columnIndex="0"/>
<Label fx:id="btnAdmin" id="btn-admin" styleClass="btn-menu" text="%text.admin" GridPane.rowIndex="2" GridPane.columnIndex="0"/>
<Label fx:id="btnQuickTips" id="btn-quick-tips" styleClass="btn-menu" text="%text.quick.tips" GridPane.rowIndex="3" GridPane.columnIndex="0"/>
<Label fx:id="btnLogout" id="btn-logout" styleClass="btn-menu" text="%text.logout" GridPane.rowIndex="4" GridPane.columnIndex="0"/>
</children>
</GridPane>
</fx:root>
MenuViewController.scala:
class MenuViewController extends TitledPane with ViewController[UserInfo] with LogHelper with Resources {
private var menuWidth: Double = .0
#FXML #BeanProperty var line: Line = _
#FXML #BeanProperty var btnSettings: Label = _
#FXML #BeanProperty var btnAdmin: Label = _
#FXML #BeanProperty var btnQuickTips: Label = _
#FXML #BeanProperty var btnLogout: Label = _
val menuFxml: URL = classOf[MenuViewController].getResource("/fxml/menu.fxml")
val loader: FXMLLoader = new FXMLLoader(menuFxml)
loader.setRoot(this)
loader.setController(this)
loader.setResources(resources)
loader.load()
var userInfo: UserInfo = _
#FXML
private def initialize() {
def handle(message: Any): Unit = {
setExpanded(false)
uiController(message)
}
btnSettings.setOnMouseClicked(EventHandlerFactory.mouseEvent(e => handle(SettingsClicked)))
btnAdmin.setOnMouseClicked(EventHandlerFactory.mouseEvent(e => handle(AdminClicked)))
btnQuickTips.setOnMouseClicked(EventHandlerFactory.mouseEvent(e => handle(QuickTipsClicked)))
btnLogout.setOnMouseClicked(EventHandlerFactory.mouseEvent(e => handle(LogoutClicked)))
}
override def update(model: UserInfo) {
userInfo = model
setText(if (userInfo == null) "Menu" else userInfo.displayName)
}
def getMenuWidth: Double = {
return menuWidth
}
def setMenuWidth(menuWidth: Double) {
this.menuWidth = menuWidth
val spaceToRemove: Double = (menuWidth / 3)
line.setEndX(menuWidth - spaceToRemove)
line.setTranslateX(spaceToRemove / 2)
Array(btnSettings, btnAdmin, btnQuickTips, btnLogout).foreach(btn => {
btn.setMinWidth(menuWidth)
btn.setPrefWidth(menuWidth)
btn.setMaxWidth(menuWidth)
})
}
}
Usage of MenuViewController:
<MenuViewController MigPane.cc="id menu, pos (100% - 250px) (29)" menuWidth="200" fx:id="menu"/>
This is a sample of the output from printing the scene graph to the console:
<BorderPane styleClass=".root">
<StackPane>
<MigPane id="home" styleClass=".top-blue-bar-bottom-blue-curve">
<ClientLogo id="clientLogo">
<ImageView id="logo"></ImageView>
</ClientLogo>
...
<MenuViewController id="menu" styleClass=".titled-pane">
</MenuViewController>
</MigPane>
</StackPane>
</BorderPane>
As you can see, the child elements in the ClientLogo custom control are properly traversed, but the elements inside menu.fxml are missing. I would expect to see the substructure that is added to a TitledPane and the GridPane with its nested substructure listed in menu.fxml.

Answer 1

Suggested Tool
ScenicView is a 3rd party tool for introspecting on the SceneGraph. It is highly recommended that you use ScenicView rather than developing your own debugging tools to dump the Scene Graph.
Dump Utility
Here is a very simple little routine to dump the scene graph to System.out, invoke it via DebugUtil.dump(stage.getScene().getRoot()):
import javafx.scene.Node;
import javafx.scene.Parent;
public class DebugUtil {
/** 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);
}
}
}
}
The simple routine above will usually dump all of the style class info because the default toString() on node outputs styleclass data.
An additional enhancement would be to check if the node being printed is also an instance of Labeled or Text, then also print the text string associated with the node in those cases.
Caveat
For some control types, some of the nodes which are created for the control are instantiated by the control's skin which can be defined in CSS and the skin sometimes creates its child nodes lazily.
What you need to do to see those nodes is ensure a css layout pass has been run on the scene graph by running your dump after one of the following events:
stage.show() has been called for an initial scene.
After a pulse occurs for a modified scene.
use AnimationTimer for this to count a pulse.
After you have manually forced a layout pass.
taking a synchronous snapshot of the scene will force a layout pass, though I think there may be some other APIs that I can't remember the name of which allow you to force the layout pass without a snapshot.
Check that you have done one of these things before you run your dump.
Example of using an AnimationTimer
// Modify scene.
// . . .
// Start a timer which delays the scene dump call.
AnimationTimer timer = new AnimationTimer() {
#Override
public void handle(long now) {
// Take action on receiving a pulse.
dump(stage.getScene().getRoot());
// Stop monitoring pulses.
// You can stop immediately like this sample.
stop();
// OR you could count a specified number pulses before stopping.
}
};
timer.start();

Answer 2

Based on #jewelsea's excellent answer , heres a version in Jython. It traverses a bit deeper by using a special case handler for controls that dont respond well to the findchildren method. It should be straight forward enough to translate into generic java, just use the python code as pseudocode!
from javafx.scene import Parent
from javafx.scene import control
class SceneGraph(object):
def parse(self,n,depth=0):
print " "*depth,n
if isinstance(n,control.Tab):
for i in n.getContent().getChildrenUnmodifiable():
self.parse(i,depth+1)
elif isinstance(n,control.TabPane):
for i in n.getTabs():
self.parse(i,depth+1)
elif isinstance(n,Parent):
for i in n.getChildrenUnmodifiable():
self.parse(i,depth+1)
elif isinstance(n,control.Accordion):
for i in n.getPanes():
self.parse(i,depth+1)
Special handlers might be needed for other controls, and the code could perhaps be improved by a closer examination of the class heirachy.
I'm not entirely sure how best to handle third party control packs, at this stage.