A JSF PhaseListener to Print the Component Tree (Example)

Have you ever wondered what the exact makeup of the server side JSF UI component tree in your page?

I was wondering the exact same thing, so I wrote a simple PhaseListener, that dumps the component tree to standard out.

The algorithm is a simple recursive printout of the entire component tree..

Here's the code:

package componentstuff;

import java.util.ArrayList;
import java.util.List;

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.event.PhaseEvent;
import javax.faces.event.PhaseId;
import javax.faces.event.PhaseListener;

public class PrintComponentTree implements PhaseListener {
  public PrintComponentTree() {
  }

  public int indent = 0;
  public static final int INDENTSIZE = 2;

  public void beforePhase(PhaseEvent PhaseEvent) {
  }

  public void afterPhase(PhaseEvent PhaseEvent) {
    System.out.println("");
    System.out.println("(Rendering Component Tree)");
    printComponentTree(FacesContext.getCurrentInstance().getViewRoot());
  }

  public PhaseId getPhaseId() {
    return PhaseId.RENDER_RESPONSE;    
  }
  
  public void printComponentTree(UIComponent comp){
    printComponentInfo(comp);
    
    List complist = (ArrayList)comp.getChildren();
    if (complist.size()>0)
      indent++;
    for   (int i = 0; i < complist.size(); i++) {
      UIComponent uicom = (UIComponent) complist.get(i);
      printComponentTree(uicom);
      if (i+1 == complist.size())
        indent--;
    }
    
  }

  public void printComponentInfo(UIComponent comp){
  
   if (comp.getId() == null){
     System.out.println("UIViewRoot" + " " + "(" + comp.getClass().getName() + ")");
   } else {
       printIndent();
       System.out.println("|");
       printIndent();
       System.out.println(comp.getId() + " " + "(" + comp.getClass().getName() + ")");
     }  
  }
 
  public void printIndent(){
    for (int i=0; i

Also, don't forget to register it in your faces-config..
  
    componentstuff.PrintComponentTree
  


Here's what the output looks like for a simple Faces page:
06/03/03 17:26:39 (Rendering Component Tree)
06/03/03 17:26:39 UIViewRoot (javax.faces.component.UIViewRoot)
06/03/03 17:26:39   |
06/03/03 17:26:39   form1 (javax.faces.component.html.HtmlForm)
06/03/03 17:26:39     |
06/03/03 17:26:39     panelGrid1 (javax.faces.component.html.HtmlPanelGrid)
06/03/03 17:26:39       |
06/03/03 17:26:39       outputLabel1 (javax.faces.component.html.HtmlOutputLabel)
06/03/03 17:26:39       |
06/03/03 17:26:39       inputText1 (javax.faces.component.html.HtmlInputText)
06/03/03 17:26:39       |
06/03/03 17:26:39       outputLabel2 (javax.faces.component.html.HtmlOutputLabel)
06/03/03 17:26:39       |
06/03/03 17:26:39       inputSecret1 (javax.faces.component.html.HtmlInputSecret)
06/03/03 17:26:39       |
06/03/03 17:26:39       commandButton1 (javax.faces.component.html.HtmlCommandButton)



Feel free to tweak the code however you like!