rendering each child t:tree node in seperate column in panel grid

[Joshua Antony]

I have a tree component using tomahawk <t:tree>

Each child in the tree denotes a level in my application and I would like to display that inside different columns in Panel Grid or Data Table) it does not matter).

Say, the tree has a root node with 3 child nodes(immediate) , then there should be a total of 2 columns.

First column will have root node, and the next column will have 3 child nodes.

Similarly if the structure is as below
A -root node
B - child of A
C - child of B
D - child of C

then there should be 4 columns,
first column will have A,second B, third C and fourth D.

I tried to use binding in PanelGrid and then tried to add DefaultMutableTreeNode, but could not find a way of how to achieve this.

Any suggestion or link will be helpful.

Regards,
Joshua

[Darryl Nortje]

Howzit Joshua,

I just want to understand the problem a little before I start to look into this. So you want to display something in a dataTable or panel grid.

One thing you didn't mention in your desc above, is how many rows this should render as, ie:

Let's use your first example, tree has a root, with 3 children. I understand that you want to columns, but how many rows should that render over? 4, or 3, 1...

IE:
A
B
C
D

OR

A B
C
D

OR
A B, C, D

Also, tomahawks tree component renders a tree in the view. DataTable knows how to render a Collection and renders as an html table.

So to me, your bean would contain let's say a Collection items that hold a Collection of themselves. Something like this.

//MyBean
public class MyBean {
  private Collection<Person> familyTree;
  ...etc all getters and setters and the like
}
 
//Person
public class Person {
  private String name;
  private Collection<Person> children;
  ...etc all getters and setters and the like
}

so the problem comes in here is that there is no limit to how deep the children go, we could be trying to represent the family tree from the begining of time, or just from my grand father. So how would one represent this using a datatable?

<h ataTable value="#{myBean.familyTree}" var="elem"...etc>
<h utputText value="#{elem.name}"/>
<h ataTable value="#{elem.children}" var="child1" ...>
<h utputText value="#{child1.name}"/>
<h ataTable value="#{child1.children}" var="child2" ...>
..... etc etc, depending on how many levels you want.
</h ataTable
</h ataTable>

</h ataTable>

I don't know if this will work even, but am trying to express the idea. Can you see that you would basically have to hard the number of levels. If you're using dataTable. But on the udder hand, if you actually try to render this as a tree, it knows how to traverse the object graph, and will render correctly on the client side.

But I hear what you're saying, why can a table, not render a tree component., or why can a tree component not be rendered as a table, as opposed to a tree component rendering as "a-helluva-lot-of-tables,-with-a-helluva-lot-of-javascript-doing-funky-stuff-that-only-those-who-code-for-tomahawk-know-about" component.

It's almost like you want to use a recursive dataTable.

[Joshua Antony]

Hi Darryl ,

It does not matter which components we use for display.

I just need a look and feel which is described as below:

1. The component(does not matter if it is a PanelGrid or DataTable or any other component) should have 5 columns
2. Tree should be spread across these columns with root node in column 1 and each subsequent child node in next column. Also each child node should go in the next row. Hence in my first example, there should be 4 rows.

If I use a tree I am not able to get the column thing working(i.e I am not able to have a single node in a single column), hence I thought that may be we can integrate tree with panel grid or data table somehow.

Hopefully I am bit clear this time, Is there any component available for my requirements(1st and 2nd point) or do I have to write a custom component?

Regards,
Joshua

[Darryl Nortje]

Howzit Joshua,

Without recursion this is quite tough, or rather dirty. You mentioned you wanted 5 columns. So i assume your object graph will only ever go 5 levels deep. That said, you can hard code it in the following way. It doesn't look lekker, but at least it'll give you an idea of what to do. Maybe you can play with it a little to get what you want, try playing with panelGrid, and the columns attribute. To be honest I don't know what to do to make it look better. But here is an example of something that I think is at least close to what you are describing.

<blockquote>code:

---

<pre name="code" class="core">
package datatableTree;

import java.util.ArrayList;
import java.util.Collection;
import java.util.Iterator;


public class DataTableTreeBean {

private Collection<Person> familyTree;

public DataTableTreeBean() {
System.out.println("Instantiating DataTableTreeBean now...");
//setup some dummy data here...
familyTree = new ArrayList<Person>();

Person grandDaddy = new Person("Oupa George");
Person daddy = new Person("Father Paul");
Person brother = new Person("Brother bob");
Person sister = new Person("Sister Mary");
Person me = new Person("Me myself I");
Person son = new Person("Little Darryl");
Person daughter = new Person("Sarrie vannie Kaap");
Person grandSon = new Person("Toddler Tim");
Person grandDaughter = new Person("Baby Jane");

grandDaddy.addChild(daddy);
daddy.addChild(brother);
daddy.addChild(sister);
daddy.addChild(me);
me.addChild(son);
me.addChild(daughter);
son.addChild(grandSon);
son.addChild(grandDaughter);

familyTree.add(grandDaddy);

System.out.println("Family populated - going to display values.");
displayFamTree(familyTree, "");

}

public Collection<Person> getFamilyTree() {
System.out.println("About to return family Tree.");
return familyTree;
}

public void setFamilyTree(Collection<Person> familyTree) {
this.familyTree = familyTree;
}

private void displayFamTree(Collection<Person> famTree, String indent) {
for (Iterator it = famTree.iterator(); it.hasNext();) {
Person p = (Person) it.next();
System.out.println(indent + " " + p.getName());
if (p.getChildren() != null && p.getChildren().size() > 0) {
indent += "-";
displayFamTree(p.getChildren(), indent);
}
}
}

}
</pre>

---

</blockquote>

<blockquote>code:

---

<pre name="code" class="core">
package datatableTree;

import java.util.ArrayList;
import java.util.Collection;


public class Person {

private String name;
private Collection<Person> children;

public Person(String name) {
this.name = name;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public Collection<Person> getChildren() {
return children;
}

public void setChildren(Collection<Person> children) {
this.children = children;
}

public void addChild(Person child) {
if (children == null) {
children = new ArrayList<Person>();
}
children.add(child);
}
}

</pre>

---

</blockquote>

<blockquote>code:

---

<pre name="code" class="core">
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>File browser</title>
</head>

<body>
<f:view>

<h:form id="mainform">

<h:dataTable id="familyTree" value="#{datatableBean.familyTree}" var="grandParent">
<h:column>
<h:outputText value="#{grandParent.name}"/>
</h:column>
<h:column>
<h:dataTable id="levelTwoFamTree" value="#{grandParent.children}" var="parent">
<h:column>
<h:outputText value="#{parent.name}"/>
</h:column>
<h:column>
<h:dataTable id="levelThreeFamTree" value="#{parent.children}" var="me">
<h:column>
<h:outputText value="#{me.name}"/>
</h:column>
<h:column>
<h:dataTable id="levelFourFamTree" value="#{me.children}" var="children">
<h:column>
<h:outputText value="#{children.name}"/>
</h:column>
<h:column>
<h:dataTable id="levelFiveFamTree" value="#{children.children}" var="grandChild">
<h:column>
<h:outputText value="#{grandChild.name}"/>
</h:column>
</h:dataTable>
</h:column>
</h:dataTable>
</h:column>
</h:dataTable>
</h:column>
</h:dataTable>
</h:column>
</h:dataTable>


</h:form>
</f:view>
</body>
</html>
</pre>

---

</blockquote>

Hope this helps.

cheers
Darryl

[Joshua Antony]

Thanks Darryl for your valuable inputs.

Regards,
Joshua

[Cristopher Abad]

What do you think is better F-35 jsf or F-22 raptor? What do you think is better F-35 jsf or F-22 raptor as a pilot i want to know what you think.


tampa seo