You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by kewldude <pa...@yahoo.com> on 2007/08/03 15:41:02 UTC

Scrollable Tree2

Has anyone here tried to implement a tree2 component that is scrollable?
Meaning lets say you have to display 100 nodes with 10 nodes per page (10
nodes are visible at any given time), then above the tree2 component you
have something like a scroller, so you can traverse the tree and display
each nodes(10 per each page) by clicking on the scroller? Feasible? 
-- 
View this message in context: http://www.nabble.com/Scrollable-Tree2-tf4212632.html#a11983598
Sent from the MyFaces - Users mailing list archive at Nabble.com.


Re: Scrollable Tree2

Posted by Andrew Robinson <an...@gmail.com>.
Oops, didn't paste all of the code in from my text editor. Here is more:

public class PagedTreeNode extends TreeNodeBase {
  private List<PagedTreeNode> children = new ArrayList<PagedTreeNode>();
  private List<PagedTreeNode> visibleChildren = new ArrayList<PagedTreeNode>();
  private int startAt = 0;
  private int pageSize = 20;

  private void initVisibleChildren() {
    visibleChildren.clear();
    int size = children.size();
    if (startAt >= size) {
      startAt = size - 1;
    }
    if (size <= pageSize) {
      visibleChildren.addAll(children);
    } else {
      if (startAt < 0) {
        // TODO: add page up node
      }
      int numChildren = Math.min(pageSize, size - startAt);
      visibleChildren.addAll(children.subList(startAt, numChildren));
      if (startAt + pageSize < size) {
        // TODO: add page down node
      }
    }
  }

  public void scrollUp() {
    startAt = Math.max(0, startAt - pageSize);
    initVisibleChildren();
  }
  public void scrollDown() {
    startAt = Math.min(children.size - 1, startAt + pageSize);
    initVisibleChildren();
  }
  public void addChildren(PagedTreeNode... nodes) {
    for (PagedTreeNode node : nodes) {
      children.add(node);
    }
    initVisibleChildren();
  }
  public void removeChildren(PagedTreeNode... nodes) {
    for (PagedTreeNode node : nodes) {
      children.remove(node);
    }
    initVisibleChildren();
  }
  public List<PagedTreeNode> getAllChildren() {
    return Collections.unmodifiableList(children);
  }
  @Override public List<PagedTreeNode> getChildren() {
    return visibleChildren;
  }
}



On 8/3/07, Andrew Robinson <an...@gmail.com> wrote:
> Yes it is feasible with tree2 and I have done it, but it is not very
> easy. The source is proprietary so I can't help you out, but you can
> do it.
>
> You have do dig into the tree2 code and understand it to really get it
> to work well as some of the functionality you have to use, you will
> not find it in the documentation. If you want AJAX, I would suggest
> using an AJAX'd tree and not the tree2 (tree2 is not very AJAX
> friendly for updating portions of the tree). Tree2 is fine if you
> don't mind re-rendering the entire tree though.
>
> What you can do:
>
> Write custom tree nodes. Replace the List of children with a custom
> list. You can have a static variable or a per-node variable for the
> maximum children you want to display. You want to have 2 children
> collections (either 2 physical or 1 physical, 1 virtual).
>
> Just like the UIData, you will want to store the "start at" index for
> the children.
>
> Then you need to create 1 or 2 fake children nodes. These will be your
> "page up" and "page down" nodes. If the "start at" is 0, you don't add
> the "page up", and if the start at is # of children + 1 + number of
> displayed nodes, then don't display the page down.
>
> Put in a node selection listener. If the user selects either a page up
> or page down node, simple increment or decrement the start at.
>
> Here is an extremely simple example (just to give you an idea, it is
> not complete at all). Also I just wrote this in the email, so sorry if
> functions are not correct:
>
> public class PagedTreeNode extends TreeNodeBase {
>   private List<PagedTreeNode> children = new ArrayList<PagedTreeNode>();
>   private List<PagedTreeNode> visibleChildren = new ArrayList<PagedTreeNode>();
>   private int startAt = 0;
>   private int pageSize = 20;
>
>   private void initVisibleChildren() {
>     visibleChildren.clear();
>     int size = children.size();
>     if (startAt >= size) {
>       startAt = size - 1;
>     }
>     if (size <= pageSize) {
>       visibleChildren.addAll(children);
>     } else {
>       if (startAt < 0) {
>         // TODO: add page up node
>       }
>       int numChildren = Math.min(pageSize, size - startAt);
>       visibleChildren.addAll(children.subList(startAt, numChildren));
>       if (startAt + pageSize < size) {
>         // TODO: add page down node
>       }
>     }
>   }
> }
>
> Then you just need to write the code to check to see if the node that
> is selected is a page up/down node an call the appropriate function on
> the parent node.
>
> -Andrew
>
>
> On 8/3/07, kewldude <pa...@yahoo.com> wrote:
> >
> > Has anyone here tried to implement a tree2 component that is scrollable?
> > Meaning lets say you have to display 100 nodes with 10 nodes per page (10
> > nodes are visible at any given time), then above the tree2 component you
> > have something like a scroller, so you can traverse the tree and display
> > each nodes(10 per each page) by clicking on the scroller? Feasible?
> > --
> > View this message in context: http://www.nabble.com/Scrollable-Tree2-tf4212632.html#a11983598
> > Sent from the MyFaces - Users mailing list archive at Nabble.com.
> >
> >
>

Re: Scrollable Tree2

Posted by Andrew Robinson <an...@gmail.com>.
Yes it is feasible with tree2 and I have done it, but it is not very
easy. The source is proprietary so I can't help you out, but you can
do it.

You have do dig into the tree2 code and understand it to really get it
to work well as some of the functionality you have to use, you will
not find it in the documentation. If you want AJAX, I would suggest
using an AJAX'd tree and not the tree2 (tree2 is not very AJAX
friendly for updating portions of the tree). Tree2 is fine if you
don't mind re-rendering the entire tree though.

What you can do:

Write custom tree nodes. Replace the List of children with a custom
list. You can have a static variable or a per-node variable for the
maximum children you want to display. You want to have 2 children
collections (either 2 physical or 1 physical, 1 virtual).

Just like the UIData, you will want to store the "start at" index for
the children.

Then you need to create 1 or 2 fake children nodes. These will be your
"page up" and "page down" nodes. If the "start at" is 0, you don't add
the "page up", and if the start at is # of children + 1 + number of
displayed nodes, then don't display the page down.

Put in a node selection listener. If the user selects either a page up
or page down node, simple increment or decrement the start at.

Here is an extremely simple example (just to give you an idea, it is
not complete at all). Also I just wrote this in the email, so sorry if
functions are not correct:

public class PagedTreeNode extends TreeNodeBase {
  private List<PagedTreeNode> children = new ArrayList<PagedTreeNode>();
  private List<PagedTreeNode> visibleChildren = new ArrayList<PagedTreeNode>();
  private int startAt = 0;
  private int pageSize = 20;

  private void initVisibleChildren() {
    visibleChildren.clear();
    int size = children.size();
    if (startAt >= size) {
      startAt = size - 1;
    }
    if (size <= pageSize) {
      visibleChildren.addAll(children);
    } else {
      if (startAt < 0) {
        // TODO: add page up node
      }
      int numChildren = Math.min(pageSize, size - startAt);
      visibleChildren.addAll(children.subList(startAt, numChildren));
      if (startAt + pageSize < size) {
        // TODO: add page down node
      }
    }
  }
}

Then you just need to write the code to check to see if the node that
is selected is a page up/down node an call the appropriate function on
the parent node.

-Andrew


On 8/3/07, kewldude <pa...@yahoo.com> wrote:
>
> Has anyone here tried to implement a tree2 component that is scrollable?
> Meaning lets say you have to display 100 nodes with 10 nodes per page (10
> nodes are visible at any given time), then above the tree2 component you
> have something like a scroller, so you can traverse the tree and display
> each nodes(10 per each page) by clicking on the scroller? Feasible?
> --
> View this message in context: http://www.nabble.com/Scrollable-Tree2-tf4212632.html#a11983598
> Sent from the MyFaces - Users mailing list archive at Nabble.com.
>
>