Component to iterate and render a nested tree-like

问题:

Given the class definition below:

public class Comment {

    String username;
    String comment;
    List<Comment> replies;

    // ...
}

Is it possible to use construct a JSF page which renders data contained in a Comment instance in a tree like structure as follows?

Comments
UserOne said
blah blah
----
    UserThree replied
    blah blah blah
    ----
    UserThree replied
    blah blah blah
----
UserTwo said
blah blah
----
UserOne said
blah blah

回答1:

If the nesting is only one level deep, or has a fixed amount of maximum depth, then you could just nest JSF repeater components like <ui:repeat> or <h:dataTable> in each other the usual way.

<ul>
    <ui:repeat value="#{bean.comments}" var="comment">
        <li>#{comment.username} #{comment.comment}
            <ul>
                <ui:repeat value="#{comment.replies}" var="reply">
                    <li>#{reply.username} #{reply.comment}</li>
                </ui:repeat>
            </ul>
        </li>
    </ui:repeat>
</ul>

But if the nesting level is "unlimited", then you need a JSF component instead which can render a tree hierarchy. This is not available in standard JSF component set. You'd need to look at 3rd party component libraries like PrimeFaces <p:tree>, or RichFaces <rich:tree>, or OmniFaces <o:tree>. The OmniFaces one allows you to have full control over the tree markup, while for the others you'd possibly need to fiddle with some good CSS to get it to look like as you want.

<o:tree value="#{bean.comments}" var="comment">
    <o:treeNode>
        <ul>
            <o:treeNodeItem>
                <li>#{comment.username} #{comment.comment}
                    <o:treeInsertChildren />
                </li>
            </o:treeNodeItem>
        </ul>
    </o:treeNode>
</o:tree>

I'd for clarity only rename String comment property to message or text orso.

If you're already on JSF 2.x, then consider a <my:comments comment="#{bean.comments}"> composite component like below.

<cc:interface componentType="commentsComposite">
    <cc:attribute name="comment" type="com.example.Comment" required="true" />
</cc:interface>
<cc:implementation>
    <c:if test="#{not empty cc.comment.replies}">
        <ul>
            <c:forEach items="#{cc.comment.replies}" var="comment" varStatus="loop">
                <li>
                    #{comment.username} #{comment.comment}
                    <my:comments comment="#{cc.parent.comment.replies[loop.index]}" />
                </li>
            </c:forEach>
        </ul>
    </c:if>
</cc:implementation>

@FacesComponent("commentsComposite")
public class CommentsComposite extends UINamingContainer {

    private Comment comment;

    @Override
    public void setValueExpression(String name, ValueExpression expression) {
        if ("comment".equals(name)) {
            setComment((Comment) expression.getValue(getFacesContext().getELContext()));
        }
        else {
            super.setValueExpression(name, expression);
        }
    }

    public Comment getComment() {
        return comment;
    }

    public void setComment(Comment comment) {
        this.comment = comment;
    }

}

See also the blog on the subject, recursive tree of composite components.

回答2:

You could create a new class that wraps Comment. It would have a comment plus a depth attribute.

public CommentWithDepth {
   private Comment comment;
   private int depth;

   public CommentWithDepth(Comment comment, int depth) {
      this.comment = comment;
      this.depth = depth;
   }

   public Comment getComment() {
      return comment;
   }
   public int getDepth() {
      return depth;
   }
}

Then you create a List of CommentWithDepth, with all the comments in the right order, and the attribute depth is the depth of the comment tree (0 for base level, 1 for childs of the base leve, 2 for the next one, etc.).

Now you can use a ui:repeat to render this list, using the depth property to determine the indentation.