JSF Tree vs Tomahawk Tree

223 views
Skip to first unread message

Gan...@j4fry.org

unread,
Feb 3, 2009, 3:05:18 AM2/3/09
to j4fry
This thread was moved from our old sourceforge forum:

JSF Tree vs Tomahawk Tree
By: Malini Puli (mpuli) - 2008-06-02 15:54
Hello,

Thank you for the JSFExamples project posted and also the source
code.
Firstly, I cannot connect to your CVS repository as per the
instructions in your cookbook. Please help.

Per the description given in the j4fry page -
http://www.j4fry.org/JSFExamples/faces/non-facelets/index.jsp, the
JSFTree is much more flexible than TomahawkTree.
I am trying to achieve something akin to the JSFTree. I get list of a
Filing Objects, each Filing object will have its own list of schedule
objects.
So the display should be
+ Filing ID Company Name Plan Name Year
|__ Form A
|__ Schedule X
|__ Schedule Z


When u click on + next to the Filing ID it should display the list of
all the schedules, the tree view.

Neither the Filing object list size nor the schedule object list size
is known. Can you give me pointers as to what can be done to achieve
this solution please.
Should i make changes in faces-config.xml file etc..

Also do you carry good documentation for your JSFExample project? It
would help immensely.

thanks,
Malini



RE: JSF Tree vs Tomahawk Tree
By: ganesh (ganeshpuriProject Admin) - 2008-06-02 19:22
Dear Manili,
I've rechecked the CVS instructions for the repository and I
didn't find any problems. What is the exact error message you get when
trying to connect? Here's a link to a demo application I recently
added to an article in a german magazine. Dokumentation is german,
just put the "Lego" folder in a fresh tomcats webapps folder, use JDK
>= 1.5 and try http://localhost:8080/Lego/index.jsp:

http://it-republik.de/zonen/magazine/ausgaben/psfile/source_file/51/jung_LegoO4821be5ba61fc.zip

Your requirements can be met easily with the JSFTree. Do you
want to toggle the tree nodes on client-side with Javascript (requires
prior creation of the complete tree model in memory) or do you want to
toggle on server-side (requires only a list of your filing id's in
memory)?

Please post the code of a filing object and the code of a
schedule object. I will show you how to out your tree together.
Regards,
Ganesh

RE: JSF Tree vs Tomahawk Tree
By: Malini Puli (mpuli) - 2008-06-03 15:04

Thanks for the response Ganesh(does it mean "The Indian Elephant
Lord" or is it a German Name).

I cannot connect to CVS - it times out. Let me try in a
different network.
In the Lego zip file, i dont see any data retrieval from DB. I
got the documentation translated from German to English - thaks to
translate.google.com :)

My Filing Object is..
public class Filing{

String companyName;
String id;
String planName;
String year;
List scheduleList = null;

}
For using Tomahawk Tree - i try doing this , doesnt work very
well

TreeNode topTree = new TreeNodeBase("topTree", "Test", false); //
Need help here//////
//Not sure how I take a list object with nested lists within -
List of Filings with list of schedules within.
//and display it WITHOUT having a top level single element with
+ in it, like the "assets" element as shown in the JSF example -
http://www.j4fry.org/JSFExamples/faces/facelets/index.xhtml;jsessionid=6587A503CFAC4742A159E2555CF530E9

TreeNode parentTreeData = null;
List filingLst = (List) getFilingList(); //This list is from DB
Iterator iter = filingLst.iterator();
while(iter.hasNext())
{
Filing filing = new Filing();
filing = (Filing)iter.next();

parentTreeData = new TreeNodeBase("filingId", filing.getFilingId
(), false);

for(int i =0; i < filing.getScheduleList().size(); i++)
{
Schedule schedule = (Schedule)filing.getScheduleList().get(i);
//declare leaf=true because it has no children
TreeNodeBase childNode = new TreeNodeBase("listOfFilings",
(String)schedule.getName(), true);
parentTreeData.getChildren().add(childNode);
}
topTree.getChildren().add(parentTreeData);

}

In the .xhtml I am not sure how to invoke the tag <t:tree2>
within a <h:datatable>

Also if you can help me with the jsf tree code that would be
awesome.
Ganesh, any helpful documentation that you would recommend?

thanks a bunch.
Ma li ni



RE: JSF Tree vs Tomahawk Tree
By: ganesh (ganeshpuriProject Admin) - 2008-06-04 16:51
Hi Malini,

Your internet connection might need proxy configuration.
Please check the proxy configuration of your browser and set it in
Eclipse - Window - Preferences - General - Network Connections.

Here's a german article with many explanations about
JSFTree I published recently: http://www.j4fry.org/resources/Lego.doc.
If you manage to translate it automatically it would be great if you
sent me the result, so I can publish it on our website.

The JSFExamples (as well as the Lego example, which is
basically the same) don't retrieve their data from a database. It's
all statically configured in faces-config files. Use a h:commandButton
that triggers an action to retrieve your data and store it in a
java.util.List property of a managed bean.

Your code for the tree2 will not display much, because
information like company name, plan name and year get lost when
instantiating TreeNodeBase. If you want to use tree2 you will need to
derive Filing and Schedule from TreeNodeBase. You managed bean will
hold a reference to the List of Filing that is referenced by the
tree2. The type property (from TreeNodeBase) of each Filing node
should be set to "filing" and the type property of each schedule to
"schedule". Create two facets named "filing" and "schedule" that
contains panelGrids with all the columns you want to display (like
h:panelGrid columns="3" -- h:outputText value="#{item.companyName}" -
h:outputText value="#{item.planName}" - h:outputText value="#
{item.year}" -- /h:panelGrid, supposed the var fo your tree2 is named
"item"). With tree2 you don't use an additional h:datatable.

The great things about JSFTree are the advanced styling
possibilities and the undependency of the model. You could have a
managed bean that holds the filing list just the way it comes from
your database. The code of your JSF page would look similar to this
(you didn't post class Schedule, I'm assuming properties x, y and z):

h:datatable value="#{myBean.filings}" var="filing"
h:column
h:panelGrid
h:outputText value="#{filing.id}"
h:outputText value="#{filing.companyName}"
h:outputText value="#{filing.planName}"
h:outputText value="#{filing.year}"
/h:panelGrid
h:dataTable value=#{filing.scheduleList} var="schedule"
h:column
h:panelGrid
h:outputText value="#{schedule.x}"
h:outputText value="#{schedule.y}"
h:outputText value="#{schedule.z}"
/h:panelGrid
/h:column
/h:dataTable
/h:column
/h:dataTable

Season to taste with CSS styles and ready you are! This
will display all of your data, but it will not yet toggle your nodes.
Implement this part and tell me if it works, I will help you to add
toggle functionality. Please decide whether you want to toggle the
nodes client-side (in the browser with Javascript) or server-side. The
decision primarily depends on the amount of data you need to render.

For both types (tree2 and JSFTree) you will need getters
and setters for the properties of class Filing and Schedule.

Regards, Ganesh

RE: JSF Tree vs Tomahawk Tree
By: Malini Puli (mpuli) - 2008-06-05 15:34
Thank you for the detailed explanation. I have issues with my
network and hence haven't tested the jsftree example you gave.

We will be toggling at the client-side. While you explain the
client-side toggle using JSF-Tree could you also give me small
examples of the changes needed for server-side toggling. Would you
need AJAX for that?

About Tomahawk tree, if both Filing and Schedule object extend
TreeNodeBase, can i achieve the view and have it rendered like this?
+ Filing ID Company Name Plan Name Year
|__ Form A
|__ Schedule X
|__ Schedule Z
Is this doable for each Filing Object in the list?? Just making
sure - coz i thought you said NO.

You asked me to forward the translated Lego.doc document. I will
send you in a seperate email.Cant attach here.
But i used the website - http://translate.google.com, selected
the languages(German >> English), cut&paste the german content.:)
Pretty simple, although, there are some words it doesn't
translate.

thanks,
Malini

RE: JSF Tree vs Tomahawk Tree
By: Malini Puli (mpuli) - 2008-06-05 20:51
Ganesh,

1)Do I need Tomcat6.0 to run the Legos application. I have
Tomcat5.5 and i get a jspId exception when i try to run.
2)In any tree display we need to be aware of how deep the tree
is right.. 2 level down, 3 level down etc be it jsftree or tomahawk?
3)I tried out the example you gave for jsftree... with
<h:datatable><h:panelGrid><h:column> ...

as you described in your previous posting. But i get the same
results repeated.
Like this is my dummy data for now.
//Start adding dummy data to Filing object
Schedule sch = new Schedule("Form 5500", "type1", "123");
Schedule sch2 = new Schedule ("Schedule B", "type2", "232");
Schedule sch3 = new Schedule("Schedule C", "type3", "454");

Filing fyLing = new Filing();
fyLing.setFilingId("112AAG");
fyLing.setSponsorSigSignedName("Company Name");
fyLing.setEin("16-245667");
fyLing.setPn("My Retirement");
fyLing.setPlanYearBeginDt(new Date());

fyLing.setScheduleList(new ArrayList<Schedule>());
fyLing.getScheduleList().add(sch);
fyLing.getScheduleList().add(sch2);
fyLing.getScheduleList().add(sch3);
this.filingList.add(fyLing);

Schedule sch21 = new Schedule("Short Form", "type1", "123");
Schedule sch22 = new Schedule ("Schedule B", "type2", "232");
Schedule sch23 = new Schedule("Schedule H", "type3", "454");
fyLing = new Filing();
fyLing.setFilingId("11Filing Id");
fyLing.setSponsorSigSignedName("ABC Company");
fyLing.setEin("11-222227");
fyLing.setPn("My Test");
fyLing.setPlanYearBeginDt(new Date());
fyLing.setScheduleList(new ArrayList<Schedule>());
fyLing.getScheduleList().add(sch21);
fyLing.getScheduleList().add(sch22);
fyLing.getScheduleList().add(sch23);
this.filingList.add(fyLing);

So the filingList contains 2 Filing objects. Each Filing object
has a list of 3 schedules in each. So on using the jsftree, i got 6
rows (2 x 3 ??)

This is my code in the view
<h:dataTable value="#{myBean.filingList}" var="filing"
bgcolor="#F1F1F1" border="1"
cellpadding="1" cellspacing="3" first="0" width="100%" >
<h:column>
<h:panelGrid columns="6" cellspacing="2" border="1" >
<h:outputText value="#{filing.filingId}" />
<h:outputText value="#{filing.sponsorSigSignedName}"/>
<h:outputText value="#{filing.ein}"/>
<h:outputText value="#{filing.pn}"/>
<h:outputText value="#{filing.ein}"/>
<h:outputText value="#{filing.planYearBeginDt}" />
</h:panelGrid>
<h:dataTable value="#{filing.scheduleList}" var="schedule"
bgcolor="#F1F1F1"
cellpadding="1" cellspacing="3" first="0" rows="4" width="100%"
>
<h:column>
<h:panelGrid columns="1" >
<h:outputText value="#{schedule.scheduleName}"/>
</h:panelGrid>
</h:column>
</h:dataTable>
</h:column>
</h:dataTable>

any idea why...

4)In the facelets/jsftree.xhtml file in JSFExamples project is
the toggling happening at the server-side?

thanks for all the help Ganesh.
Malini.

RE: JSF Tree vs Tomahawk Tree
By: ganesh (ganeshpuriProject Admin) - 2008-06-07 06:04
Yes, Lego needs Tomcat 6.0. You can adjust it to run with
Tomcat 5.0 by adding myfaces-api-1.1.5.jar and myfaces-impl-1.1.5.jar
and removing jsf-iml.jar and jsf-api.jar from WEB-INF/lib - JSF 1.2
does not work with Tomcat 5.5. With myfaces 1.1.5 you will need to add
this to your web.xml (before the faces servlet):

<listener>
<listener-class>
org.apache.myfaces.webapp.StartupServletContextListener
</listener-class>
</listener>

I will come back on you later regarding the tree
problems.

Greetz,
Ganesh

RE: JSF Tree vs Tomahawk Tree
By: ganesh (ganeshpuriProject Admin) - 2008-06-09 19:47
Hi Malini,

Here are some more answers to your other questions:

q2: With Tomahawk tree you define a representation for
each node type by coding a facet. You don't need to be aware of the
depth of your tree. With JSFTree you need to be aware of the depth
because you define a representation for each level of the tree.

q3: Getting 6 rows with the given example is correct -
which result did you expect?

q4: jsftree toggles on server-side and jsftreeextensions
toggles on client-side.

Here's your jsp code with extensions for client-side
toggling:

<h:dataTable value="#{filingBean.filingList}" var="filing"
bgcolor="#F1F1F1">
<h:column>
<fry:panel>
<f:facet name="toggleOpen">
<h:panelGrid columns="7">
<h:graphicImage url="J4Fry/Resource/j4fry_plus.jpg"
style="border:0" />
<%@ include file="filingHeader.jspf" %>
</h:panelGrid>
</f:facet>
<f:facet name="toggleClose">
<h:panelGrid columns="7">
<h:graphicImage url="J4Fry/Resource/j4fry_minus.jpg"
style="border:0" />
<%@ include file="filingHeader.jspf" %>
</h:panelGrid>
</f:facet>
<f:facet name="bodyBottom">
<h:dataTable value="#{filing.scheduleList}"
var="schedule"
bgcolor="#F1F1F1">
<h:column>
<h:panelGrid columns="1">
<h:outputText value="#{schedule.scheduleName}" />
</h:panelGrid>
</h:column>
</h:dataTable>
</f:facet>
</fry:panel>
</h:column>
</h:dataTable>

filingHeader.jspf:

<h:outputText value="#{filing.filingId}" />
<h:outputText value="#{filing.sponsorSigSignedName}" />
<h:outputText value="#{filing.ein}" />
<h:outputText value="#{filing.pn}" />
<h:outputText value="#{filing.ein}" />
<h:outputText value="#{filing.planYearBeginDt}" />

Better use CSS to style your tables. The styling with tag
attributes you are doing is old style and less flexible.
You may want to add and state attribute to your fry:panel
if you want to the server to remember the state when doing roundtrips
or if you want the panels to start of closed.
You may render some lines to indicate the tree structure.
Tell me if you need help with this part.

Greetz,
Ganesh

RE: JSF Tree vs Tomahawk Tree
By: Malini Puli (mpuli) - 2008-06-10 14:53
Ganesh,

Thanks for the response.

1)To render using Tomahawk tree tags, can i get a similar look
as a JSFTree? Meaning in the examples website
http://www.j4fry.org/JSFExamples/faces/facelets/tomahawktree.xhtml
- I see the assets as the top-level parent, can i NOT have that but
just everything below, similar to a JSFTree?

2) For tomahawk tree, do my objects Filing and Schedule extend
TreeNodeBase?

3)Currently when i render with <t:tree2> i get this,
+ FilingID2 CompanyName1 PlanName1 Year1
|__ Form A2
|__ Schedule X2
|__ Schedule Z2
+ FilingID2 CompanyName2 PlanName2 Year2
|__ Form A2
|__ Schedule X2
|__ Schedule Z2

It overwrites the FilingId1 with the last one and the schedule
list is overwritten with the FilingID2 list rather than its own - 1
series. Here is the java code and the view code
public TreeNode getFilingResults()
{
TreeNode parentTreeData = null;

List filingLst = (List) getFilingList(); //From DB
Iterator iter = filingLst.iterator();
while(iter.hasNext())
{
FilingObject filingObj = new FilingObject();
filingObj = (FilingObject)iter.next();

parentTreeData = new TreeNodeBase("filingId",
filingObj.getFilingId(), false);
List schList = filingObj.getScheduleList();
for(int i =0; i < schList.size(); i++)
{
//declare leaf=true because it has no children
Schedule sch = (Schedule)schList.get(i);
TreeNodeBase childNode = new TreeNodeBase("listOfFilings",
(String)sch.getScheduleName(), true);
parentTreeData.getChildren().add(childNode);
}
}

return parentTreeData;
}
-*-*-*-*-*
<h:dataTable value="#{filingObj.filingList}" var="list"
bgcolor="#F1F1F1" border="1" cellpadding="1" cellspacing="3" first="0"
rows="4" width="100%" >
<h:column>
<t:tree2 value="#{filingObj.filingResults}" var="node"
varNodeToggler="t">

<f:facet name="filingId">
<h:panelGroup>
<h:outputText value="#{node.description}"
styleClass="nodeFolder"/>
<h:outputText value=" (#{node.childCount})"
styleClass="childCount" rendered="#{!empty node.children}"/>
</h:panelGroup>
</f:facet>

<f:facet name="listOfFilings">
<h:panelGroup>
<h:outputText value="#{node.description}"
styleClass="nodeFolder"/>
<h:outputText value=" (#{node.childCount})"
styleClass="childCount" rendered="#{!empty node.children}"/>
</h:panelGroup>
</f:facet>
</t:tree2>
</h:column>

<h:column>
<h:outputText value="#{list.sponsorSigSignedName}"></
h:outputText>
</h:column>
<h:column>
<h:outputText value="#{list.ein}"></h:outputText>
</h:column>
<h:column>
<h:outputText value="#{list.pn}"></h:outputText>
</h:column>
<h:column>
<h:outputText value="#{list.planYearBeginDt}"></h:outputText>
</h:column>
</h:dataTable>


4) For JSFTree, I successfully got to render this
+ FilingID1 CompanyName1 PlanName1 Year1
|__ Form A1
|__ Schedule X1
|__ Schedule Z1
+ FilingID2 CompanyName2 PlanName2 Year2
|__ Form A2
|__ Schedule X2
|__ Schedule Z2 .
but on clicking on expand/collapse(plus/minus) it does the
action for both the rows instead of the one i selected. Here is the
code, I am doing server-side toggling.

<h:dataTable value="#{filingObj.filingList}" var="filing" rows="#
{filingObj.size}" bgcolor="#F1F1F1" border="1"
cellpadding="1" cellspacing="1" first="0" width="100%" >
<h:column>

<h:commandLink action="#{filingObj.toggle}">
<h:panelGrid columns="5" >
<h:graphicImage url="/images/plus.gif" style="border: 0"
rendered="#{filingObj.state == 'CLOSE'}" />
<h:graphicImage url="/images/minus.gif" style="border: 0"
rendered="#{filingObj.state != 'CLOSE'}" />


<h:panelGrid columns="5" cellspacing="2" cellpadding="1"
border="2" >
<h:outputText value="#{filing.filingId}" />
<h:outputText value="#{filing.sponsorSigSignedName}"/>
<h:outputText value="#{filing.ein}"/>
<h:outputText value="#{filing.pn}"/>
<h:outputText value="#{filing.planYearBeginDt}" />
</h:panelGrid>
</h:panelGrid>
</h:commandLink>

<h:dataTable value="#{filing.scheduleList}" var="schedule"
rendered="#{filingObj.state != 'CLOSE'}" bgcolor="#F1F1F1"
cellpadding="1" cellspacing="1" rows="0" width="100%" >
<h:column>
<h:panelGrid columns="5" >
<h:outputText value="#{schedule.scheduleName}"/> </
h:panelGrid>
</h:column>
</h:dataTable>


</h:column>
</h:dataTable>

How can i correct this.

Thanks in advance for all the help.

Malini

RE: JSF Tree vs Tomahawk Tree
By: ganesh (ganeshpuriProject Admin) - 2008-06-11 06:55
Hi,

Q1: Try showRootNode="false" for tree2

Q2: Yes, definitely

Q3: For JSFTree it is quite natural that both nodes toggle
simultaniously if You provide only one Object (filingObj) to hold the
state. To have separate toggle states for each node put the state
attribute and the toggle method in the filing object, change your
commandLink to look like this:

<h:commandLink action="#{filing.toggle}">

and your rendered attributes like this:

rendered="#{filing.state == 'CLOSE'}" or rendered="#
{filing.state != 'CLOSE'}"

With tree2 you don't use an outer datatable. Just leave it
off - the inner tree2 is sufficient. Your code does exactly what I
would expect it to do - your method is overwriting parentTreeDate with
each loop. Try this (You will need to extend TreeNodeBase to display
more than the descriptions):

public TreeNode getFilingResults() {
TreeNode parentTreeData = new TreeNodeBase("root", "root",
false);
List filingLst = (List) getFilingList(); //From DB
Iterator iter = filingLst.iterator();
while(iter.hasNext()) {
FilingObject filingObj = new FilingObject();
filingObj = (FilingObject)iter.next();
TreeNode filingNode = new TreeNodeBase("filing",
filingObj.getFilingId(), false);
parentTreeData.getChildren().add(filingNode);
List schList = filingObj.getScheduleList();
for(int i =0; i < schList.size(); i++) {
//declare leaf=true because it has no children
Schedule sch = (Schedule)schList.get(i);
TreeNodeBase childNode = new TreeNodeBase("schedule",
(String)sch.getScheduleName(), true);
filingNode.getChildren().add(childNode);
}
}
return parentTreeData;
}

hth and good luck, Ganesh



RE: JSF Tree vs Tomahawk Tree
By: Malini Puli (mpuli) - 2008-06-12 20:58
Ganesh,

Sorry to bog you down with questions.
Going back to #3 in my previous post.

3) Thanks for the help - the getFilingResults method definitely
helps. I am not overwriting parentTreeData anymore.
Using the same render code - I now get the filing node repeated
twice with its respective schedules

+ FilingID1 CompanyName1 PlanName1 Year1
|__ Form A1
|__ Schedule X1
|__ Schedule Z1
+ FilingID2
|__ Form A2
|__ Schedule X2
|__ Schedule Z2
NEXT ROW
+ FilingID1 CompanyName2 PlanName2 Year2
|__ Form A1
|__ Schedule X1
|__ Schedule Z1
+ FilingID2
|__ Form A2
|__ Schedule X2
|__ Schedule Z2

The view code is the same as in my #3.

Question A) When do we need to use <t:tree2 binding="#
{backingBean}"> ? what does binding do? What kind of a bean can i bind
to?

Questions B) Also I wanted to do away with the h:datatable in
the t:tree2, but i didnt know how to output CompanyName, PlanName,
Plan Year. The facet/tree2 only seem to know about the description and
childcount. How can i call methods of my Filing object?
And where do i put the code inside the tree2 tag, inside the
<facet name="filing">?
Please help.
Here is my code

<t:tree2 value="#{filingObj.filingResults}" var="node"
showRootNode="false" clientSideToggle="true" showLines="true" >
<f:facet name="filing">
<h:panelGrid>
<h:outputText value="#{node.description}" />
<h:outputText value=" (#{node.childCount})" rendered="#{!empty
node.children}"/>
</h:panelGrid>
</f:facet>
<f:facet name="schedule" >
<h:panelGrid>
<h:outputText value="#{node.description}" />
<h:outputText value=" (#{node.childCount})" rendered="#{!empty
node.children}"/>
</h:panelGrid>
</f:facet>
</t:tree2>


thanks,
Malini

RE: JSF Tree vs Tomahawk Tree
By: Malini Puli (mpuli) - 2008-06-13 17:54
To clarify #3 , I would like to add that both the nodes Filing1
and Filing2 appear under the filing Id cell in each row.
Instead of Filing1 and its schedules in row 1, I get Filing1 and
Filing2 in row1 and row2.

This is because I am using t:tree2 within the datable like
this,

<!-- START TOMAHAWK TREE -->
<h:dataTable value="#{filingObj.filingList}" var="list"
bgcolor="#F1F1F1" border="1"
cellpadding="0" cellspacing="0" width="100%" >

<h:column>
<f:facet name="header">
<h:outputText value="Filing ID"/>
</f:facet>

<t:tree2 value="#{filingObj.filingResults}" var="node"
showRootNode="false" >
<f:facet name="filing">
<h:panelGroup>
<h:outputText value="#{node.description}"
styleClass="nodeFolder"/>
<h:outputText value=" (#{node.childCount})"
styleClass="childCount" rendered="#{!empty node.children}"/>
</h:panelGroup>
</f:facet>
<f:facet name="schedule">
<h:panelGroup>
<h:outputText value="#{node.description}"
styleClass="nodeFolder"/>
<h:outputText value=" (#{node.childCount})"
styleClass="childCount" rendered="#{!empty node.children}"/>
</h:panelGroup>
</f:facet>
</t:tree2>
</h:column>

<h:column>
<f:facet name="header">
<h:outputText value="Company Name"/>
</f:facet>
<h:outputText value="#{list.sponsorSigSignedName}"></
h:outputText>
</h:column>
...............

How do i modify this to show me the respective filing with its
schedule list along with the rest of the filing properties(Company
Name, Plan Name) etc.

thanks,
Malini

RE: JSF Tree vs Tomahawk Tree
By: ganesh (ganeshpuriProject Admin) - 2008-06-16 06:14
Hi,

A) You use binding if you need to acces the JSF component
associated with the tag. This is for advanced use like accessing the
clientId or the rowId. For this shouldn't be needed.

B)
Please change class Filing to extend TreeNodeBase, then
use your model as it comes from the database. Don't do the mapping
stuff in getFilingResults(). This will allow you to do this:

<f:facet name="filing">
<h:panelGrid>
<h:outputText value="#{node.sponsorSigSignedName}"></
h:outputText>
<h:outputText value="#{node.ein}"></h:outputText>
<h:outputText value="#{node.pn}"></h:outputText>
<h:outputText value="#{node.planYearBeginDt}"></
h:outputText>
</h:panelGrid>
</f:facet>

Regards,
Ganesh

RE: JSF Tree vs Tomahawk Tree
By: Malini Puli (mpuli) - 2008-06-16 17:50
B) You said - "Dont do the mapping stuff in getFilingResults()?"
can you elaborate on that please? Remove the code in that method?

C) What will the t:tree2 value be? Not like below?
<t:tree2 value="#{filingObj.filingResults}" var="node"
showRootNode="false" >


RE: JSF Tree vs Tomahawk Tree
By: ganesh (ganeshpuriProject Admin) - 2008-06-16 19:26
Hi,

If Filing and Schedule extend TreeNodeBase you can do
something like this (take care to initialize all Filings with
leaf=false and the Schedules with leaf=true):

public TreeNode getFilingResults() {
TreeNode parentTreeData = new TreeNodeBase("parent",
"parent", false);
parentTreeData.getChildren().addAll(getFilingList()); //
from DB
return parentTreeData;
}

Like this you can leave your t:tree2 value as it is.

Regards,
Ganesh

RE: JSF Tree vs Tomahawk Tree
By: Malini Puli (mpuli) - 2008-06-16 19:53
Thanks for the prompt reply.

1) Where do i need to initialize my Filings, Schedules with the
right boolean value for leaf?

I get a NullPointerException
java.lang.NullPointerException: key
at javax.faces.component._ComponentFacetMap.checkKey
(_ComponentFacetMap.java:123)
at javax.faces.component._ComponentFacetMap.get
(_ComponentFacetMap.java:90)
at javax.faces.component._ComponentFacetMap.get
(_ComponentFacetMap.java:25)
at javax.faces.component.UIComponentBase.getFacet
(UIComponentBase.java:462)
at
org.apache.myfaces.custom.tree2.HtmlTreeRenderer.encodeCurrentNode
(HtmlTreeRenderer.java:321)

my getFilingResults method is exactly as above


<t:tree2 value="#{filingObj.filingResults}" var="node"
showRootNode="false" >
<f:facet name="filing">
<h:panelGrid>
<h:outputText value="#{node.pn}"></h:outputText>
<h:outputText value="#{node.ein}"></h:outputText>
<h:outputText value=" (#{node.childCount})" rendered="#{!empty
node.children}"/>
</h:panelGrid>
</f:facet>
<f:facet name="schedule" >
<h:panelGrid>
<h:outputText value="#{node.description}" />
<h:outputText value=" (#{node.childCount})" rendered="#{!empty
node.children}"/>
</h:panelGrid>
</f:facet>
</t:tree2>

I would have lost my confidence completely if you werent so
helpful. Thanks again!

RE: JSF Tree vs Tomahawk Tree
By: ganesh (ganeshpuriProject Admin) - 2008-06-17 06:02
Hi,

Initialize your model objects as you retrieve them from
the database. I know this is kind of ugly, because is introduces
properties needed for the view into the database layer, but it's the
data model of tree2 that requires this. The alternative is to have
view independent classes coming from the database and another set of
classes with identical properties, but extending TreeNodeBase and to
map to database model into the view model during getFilingResults(). I
persosnally don't like this kind of duplicate code for the sake of
separation of application layers.

The NullPointer is because I put "parent" as the facet
name of the root node. Please add

<f:facet name="parent">

<h:outputText value="root node hidden"></h:outputText>
</f:facet>

to your tree and tell me if this helps.

Regards,
Ganesh



RE: JSF Tree vs Tomahawk Tree
By: Malini Puli (mpuli) - 2008-06-17 11:42
"Initialize your model objects as you retrieve them from the
database. I know this is kind of ugly, because is introduces
properties needed for the view into the database layer, but it's the
data model of tree2 that requires this."
A)I am sorry but you have to explain how I should do this

"The alternative is to have view independent classes coming from
the database and
another set of classes with identical properties, but extending
TreeNodeBase
and to map to database model into the view model during
getFilingResults().
I personally don't like this kind of duplicate code for the sake
of separation
of application layers."
B) Isn't this what I am doing currently? Can we focus on getting
this working - as I already have taken a shot at it.
Filing extends TreeNodeBase , Schedule extends TreeNodeBase.
getFilingResults copies over the DB objects over the view objects
(Filing & Schedule). The view code is the same as my previous post.
public TreeNode getFilingResults() {
TreeNode parentTreeData = new TreeNodeBase("root", "root",
false);
List filingLst = (List) getFilingList(); //From DB
Iterator iter = filingLst.iterator();
while(iter.hasNext()) {
Filing filingObj = new Filing();
filingObj = (FilingObject)iter.next();
TreeNode filingNode = new TreeNodeBase("filing",
filingObj.getFilingId(), false);
parentTreeData.getChildren().add(filingNode);
List schList = filingObj.getScheduleList();
for(int i =0; i < schList.size(); i++) {
//declare leaf=true because it has no children
Schedule sch = (Schedule)schList.get(i);
TreeNodeBase childNode = new TreeNodeBase("schedule", (String)
sch.getScheduleName(), true);
filingNode.getChildren().add(childNode);
}
}
return parentTreeData;
}


C) No the NullPointer is not because of "parent" being the facet
name. Because i did add <f:facet name="parent"> in the view and still
got the exception.

D) I think the basic problem is when I do <t:tree2 value="#
{filingObj.filingResults}" var="node" showRootNode="false" > after I
do parentTreeData.getChildren().addAll(getFilingList()); // from DB .
Its expecting it in the traditional TreeNodeBase fashion and all
it sees is a List collection(of Filings and Schedules within).
Hmmm .. not sure why exactly it breaks.


RE: JSF Tree vs Tomahawk Tree
By: ganesh (ganeshpuriProject Admin) - 2008-06-17 19:59
Hi,

Here's a complete working example implementing a t:tree2
with the data you provided in previous posts. Maybe you want to start
from this extending it with the styles and backend data of your
application:

<%@ page session="true" contentType="text/
html;charset=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://j4fry.org/jsf" prefix="fry"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk"
prefix="t"%>
<html>
<head>
<title>JSF Examples</title>
</head>
<body>
<style>
</style>
<f:view>
<fry:onLoad action="#{filingBean.init}" />

<t:tree2 value="#{filingBean.filingResults}" var="node"
showRootNode="false" clientSideToggle="true">
<f:facet name="filing">
<h:panelGrid columns="5">
<h:outputText value="#{node.filingId}" />
<h:outputText value="#{node.sponsorSigSignedName}" />
<h:outputText value="#{node.pn}" />
<h:outputText value="#{node.ein}" />
<h:outputText value="#{node.planYearBeginDt}" />
</h:panelGrid>
</f:facet>
<f:facet name="schedule">
<h:panelGrid columns="3">
<h:outputText value="#{node.x}" />
<h:outputText value="#{node.y}" />
<h:outputText value="#{node.scheduleName}" />
</h:panelGrid>
</f:facet>
</t:tree2>
</f:view>
</body>
</html>


package org.j4fry.jsftree.beans;

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

import org.apache.myfaces.custom.tree2.TreeNodeBase;
import org.j4fry.jsftree.model.Filing;
import org.j4fry.jsftree.model.Schedule;

public class FilingBean {

private List<Filing> filingList;



public String init() {
filingList = new ArrayList<Filing>();
Schedule sch = new Schedule("Form 5500", "type1", "123");
Schedule sch2 = new Schedule ("Schedule B", "type2",
"232");
Schedule sch3 = new Schedule("Schedule C", "type3",
"454");

Filing fyLing = new Filing();
fyLing.setFilingId("112AAG");
fyLing.setSponsorSigSignedName("Company Name");
fyLing.setEin("16-245667");
fyLing.setPn("My Retirement");
fyLing.setPlanYearBeginDt(new Date());

fyLing.getChildren().add(sch);
fyLing.getChildren().add(sch2);
fyLing.getChildren().add(sch3);
this.filingList.add(fyLing);

Schedule sch21 = new Schedule("Short Form", "type1",
"123");
Schedule sch22 = new Schedule ("Schedule B", "type2",
"232");
Schedule sch23 = new Schedule("Schedule H", "type3",
"454");
fyLing = new Filing();
fyLing.setFilingId("11Filing Id");
fyLing.setSponsorSigSignedName("ABC Company");
fyLing.setEin("11-222227");
fyLing.setPn("My Test");
fyLing.setPlanYearBeginDt(new Date());
fyLing.getChildren().add(sch21);
fyLing.getChildren().add(sch22);
fyLing.getChildren().add(sch23);
this.filingList.add(fyLing);
return null;
}

public List<Filing> getFilingList() {
return filingList;
}

public void setFilingList(List<Filing> filingList) {
this.filingList = filingList;
}

public TreeNodeBase getFilingResults() {
TreeNodeBase result = new TreeNodeBase("root", "root",
false);
result.getChildren().addAll(getFilingList());
return result;
}
}


package org.j4fry.jsftree.model;

import java.util.Date;
import java.util.List;

import org.apache.myfaces.custom.tree2.TreeNodeBase;

public class Filing extends TreeNodeBase {

String sponsorSigSignedName;
String filingId;
String ein;
String pn;
Date planYearBeginDt;
public Filing() {
super("filing", "filing", false);
}
public String getSponsorSigSignedName() {
return sponsorSigSignedName;
}
public void setSponsorSigSignedName(String
sponsorSigSignedName) {
this.sponsorSigSignedName = sponsorSigSignedName;
}
public String getFilingId() {
return filingId;
}
public void setFilingId(String filingId) {
this.filingId = filingId;
}
public String getEin() {
return ein;
}
public void setEin(String ein) {
this.ein = ein;
}
public String getPn() {
return pn;
}
public void setPn(String pn) {
this.pn = pn;
}
public Date getPlanYearBeginDt() {
return planYearBeginDt;
}
public void setPlanYearBeginDt(Date planYearBeginDt) {
this.planYearBeginDt = planYearBeginDt;
}
}


package org.j4fry.jsftree.model;

import org.apache.myfaces.custom.tree2.TreeNodeBase;

public class Schedule extends TreeNodeBase {
String scheduleName;
String x;
String y;
public Schedule(String x, String y, String scheduleName)
{
super("schedule", "schedule", true);
this.x = x;
this.y = y;
this.scheduleName = scheduleName;
}
public String getX() {
return x;
}
public void setX(String x) {
this.x = x;
}
public String getY() {
return y;
}
public void setY(String y) {
this.y = y;
}
public String getScheduleName() {
return scheduleName;
}
public void setScheduleName(String scheduleName) {
this.scheduleName = scheduleName;
}
}


<managed-bean>
<managed-bean-name>filingBean</managed-bean-name>
<managed-bean-class>
org.j4fry.jsftree.beans.FilingBean
</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>


RE: JSF Tree vs Tomahawk Tree
By: Malini Puli (mpuli) - 2008-06-17 22:05
Ganesh,

Thank you for posting a detailed response.
I did do the constructor changes of super("filing", ... ) for
both schedule and filing.

A)I am assuming the call in render page - <fry:onLoad action="#
{filingBean.init}" /> is only a means of loadingDB data and is not
contributing toward the t:tree2 logic. Am i right.?

B)Assuming it does not affect - i did what u suggested and it
does not render schedule list, it just renders filings and thats it.
Doesnt display the schedules underneath.

C) Have we failed in this approach? If so what is the other
approach - if there is any.


- thanks... will keep trying - Malini



RE: JSF Tree vs Tomahawk Tree
By: ganesh (ganeshpuriProject Admin) - 2008-06-18 03:42
Hi,

Please post your complete code. The example code I sent
works for me. Did you try clicking the plus sings? The Tree renders
collapsed by default.

Regards,
Ganesh

RE: JSF Tree vs Tomahawk Tree
By: Malini Puli (mpuli) - 2008-06-18 16:07
Here is the complete code.
FLOW BEAN FB:
public class DisseminateFB implements Serializable
{
private List<TestFilingObject> filings;
public TreeNodeBase getFilingResults()
{
TreeNodeBase parentTreeData = new TreeNodeBase("root", "root",
false);
parentTreeData.getChildren().addAll(getFilings());
return parentTreeData;
}
public List<TestFilingObject> getDummyDataList()
{
List<TestFilingObject> dummyDataList = new
ArrayList<TestFilingObject>();
//Start adding dummy data to Filing object
Schedule sch = new Schedule("Form 5500", "type1", "123");
Schedule sch2 = new Schedule ("Schedule B", "type2", "232");
Schedule sch3 = new Schedule("Schedule C", "type3", "454");

TestFilingObject fyLing = new TestFilingObject();
fyLing.setFilingId("112AAG");
fyLing.setCompanyName("IBM");
fyLing.setEin("16-245667");
fyLing.setPn("My Retirement");
fyLing.setPlanYearBeginDt(new Date());

fyLing.setScheduleList(new ArrayList<Schedule>());
fyLing.getScheduleList().add(sch);
fyLing.getScheduleList().add(sch2);
fyLing.getScheduleList().add(sch3);
dummyDataList.add(fyLing);

Schedule sch21 = new Schedule("Short Form", "type1", "123");
Schedule sch22 = new Schedule ("Schedule B", "type2", "232");
Schedule sch23 = new Schedule("Schedule H", "type3", "454");
fyLing = new TestFilingObject();
fyLing.setFilingId("11Filing Id");
fyLing.setCompanyName("Vangent");
fyLing.setEin("11-222227");
fyLing.setPn("My 401k");
fyLing.setPlanYearBeginDt(new Date());
fyLing.setScheduleList(new ArrayList<Schedule>());
fyLing.getScheduleList().add(sch21);
fyLing.getScheduleList().add(sch22);
fyLing.getScheduleList().add(sch23);
dummyDataList.add(fyLing);
return dummyDataList;
}

public List<TestFilingObject> getFilings() {
setFilings(getDummyDataList());
System.out.println("Size is "+ filings.size());
return filings;
}

public void setFilings(List<TestFilingObject> filings) {
this.filings = filings;
}
} //END OF FLOW BEAN.

TESTFILINGOBJECT::
public class TestFilingObject extends TreeNodeBase implements
java.io.Serializable
{
public TestFilingObject()
{
super("filing", "filing", false);
}


/**
* default implementation
*/
private static final long serialVersionUID = 1L;

private String filingId = null;
private String companyName = null;
private String ein = null;
private String pn = null;
private Date planYearBeginDt = null;
private List<Schedule> scheduleList = null;
private String state;

public String getFilingId() {
return filingId;
}

public void setFilingId(String filingId) {
this.filingId = filingId;
}

public String getCompanyName() {
return companyName;
}

public void setCompanyName(String companyName) {
this.companyName = companyName;
}

public String getEin() {
return ein;
}

public void setEin(String ein) {
this.ein = ein;
}

public String getPn() {
return pn;
}

public void setPn(String pn) {
this.pn = pn;
}

public Date getPlanYearBeginDt() {
return planYearBeginDt;
}

public void setPlanYearBeginDt(Date planYearBeginDt) {
this.planYearBeginDt = planYearBeginDt;
}

public List<Schedule> getScheduleList() {
return scheduleList;
}

public void setScheduleList(List<Schedule> scheduleList) {
this.scheduleList = scheduleList;
}

public String toggle()
{
System.out.println("Toggling in TestFilingObje "+ state);
if (state == null || state.equals("OPEN")) {
state = "CLOSE";
} else {
state = "OPEN";
}System.out.println("Toggling in TestFilingObje "+ state);
return null;
}

public String getState() {
return state;
}

public void setState(String state) {
this.state = state;
}

}
// END OF TESTFILINGOBJECT

SCHEDULE OBJECT:
public class Schedule extends TreeNodeBase implements
java.io.Serializable
{

private static final long serialVersionUID =
-3300784267296915982L;
private String scheduleName = null;
private String scheduleType = null;
private String scheduleId = null;

private String state = null;

//initialization options
public Schedule(String name, String type, String id)
{
super("schedule", "schedule", true);
this.scheduleName = name;
this.scheduleId = id;
this.scheduleType = type;
}

/** Getters and Setters **/
public String getScheduleName() {
return scheduleName;
}

public void setScheduleName(String scheduleName) {
this.scheduleName = scheduleName;
}

public String getScheduleType() {
return scheduleType;
}

public void setScheduleType(String scheduleType) {
this.scheduleType = scheduleType;
}

public String getScheduleId() {
return scheduleId;
}

public void setScheduleId(String scheduleId) {
this.scheduleId = scheduleId;
}


public String getState() {
return state;
}

public void setState(String state) {
this.state = state;
}
} // END OF SCHEDULE


VIEW:
<t:tree2 value="#{disseminateFB.filingResults}" var="node"
showRootNode="false" clientSideToggle="true">
<f:facet name="filing">
<h:panelGrid columns="5">
<h:outputText value="#{node.filingId}" />
<h:outputText value="#{node.companyName}" />
<h:outputText value="#{node.ein}"></h:outputText>
<h:outputText value="#{node.pn}" />
<h:outputText value="#{node.planYearBeginDt}" />
</h:panelGrid>
</f:facet>
<f:facet name="schedule" >
<h:panelGrid columns="3">
<h:outputText value="#{node.scheduleName}" />
<h:outputText value="#{node.scheduleType}" />

</h:panelGrid>
</f:facet>
</t:tree2>
//END OF VIEW

Currently i have this
<var name="disseminateFB" scope="conversation"
class="gov.dol.efast.app.portal.disseminate.DisseminateFB"/>
in my flow.xml

I also tried removing and adding the following to faces-
config.xml. No change in behaviour.
<managed-bean>
<managed-bean-name>disseminateFB</managed-bean-name>
<managed-bean-class>
gov.dol.efast.app.portal.disseminate.DisseminateFB
</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>

Hope you can finally crack this one.!

thanks Ganesh.


RE: JSF Tree vs Tomahawk Tree
By: ganesh (ganeshpuriProject Admin) - 2008-06-18 19:04
Hi,

You've mostly got it. Your code works fine (at least on my
machine). Just change your dummy data to fill the filings children
instead of the filing scheduleList, otherwise they won't be found by
tree2:

public List<TestFilingObject> getDummyDataList()
{
List<TestFilingObject> dummyDataList = new
ArrayList<TestFilingObject>();
//Start adding dummy data to Filing object
Schedule sch = new Schedule("Form 5500", "type1", "123");
Schedule sch2 = new Schedule ("Schedule B", "type2",
"232");
Schedule sch3 = new Schedule("Schedule C", "type3",
"454");

TestFilingObject fyLing = new TestFilingObject();
fyLing.setFilingId("112AAG");
fyLing.setCompanyName("IBM");
fyLing.setEin("16-245667");
fyLing.setPn("My Retirement");
fyLing.setPlanYearBeginDt(new Date());

fyLing.getChildren().add(sch);
fyLing.getChildren().add(sch2);
fyLing.getChildren().add(sch3);
dummyDataList.add(fyLing);

Schedule sch21 = new Schedule("Short Form", "type1",
"123");
Schedule sch22 = new Schedule ("Schedule B", "type2",
"232");
Schedule sch23 = new Schedule("Schedule H", "type3",
"454");
fyLing = new TestFilingObject();
fyLing.setFilingId("11Filing Id");
fyLing.setCompanyName("Vangent");
fyLing.setEin("11-222227");
fyLing.setPn("My 401k");
fyLing.setPlanYearBeginDt(new Date());
fyLing.getChildren().add(sch21);
fyLing.getChildren().add(sch22);
fyLing.getChildren().add(sch23);
dummyDataList.add(fyLing);
return dummyDataList;
}

As your schedules are contained in the filings children
now, access the children in JSFTree:

<h:dataTable value="#{disseminateFB.filings}"
var="filing"
cellspacing="1" border="1">
<h:column>
<h:commandLink action="#{filing.toggle}">
<h:panelGrid columns="5" style="background-
color:lightgrey">
<h:graphicImage url="J4Fry/Resource/j4fry_plus.jpg"
style="border: 0" rendered="#{filing.state == 'CLOSE'}" /
>
<h:graphicImage url="J4Fry/Resource/j4fry_minus.jpg"
style="border: 0" rendered="#{filing.state != 'CLOSE'}" /
>

<h:outputText value="#{filing.filingId}" />
<h:outputText value="#{filing.ein}" />
<h:outputText value="#{filing.companyName}" />
<h:outputText value="#{filing.pn}" />
</h:panelGrid>
</h:commandLink>
<h:dataTable value="#{filing.children}" var="schedule"
rendered="#{filing.state != 'CLOSE'}">
<h:column>
<h:panelGrid columns="2">
<h:commandLink value="#{schedule.scheduleName}"
action="displayPDF" target="_self"></h:commandLink>
<h:outputText value="#{schedule.scheduleName}" />
</h:panelGrid>
</h:column>
</h:dataTable>
</h:column>
</h:dataTable>

To enable toggling with JSFTree avoid overwriting the
dummy data with each roundtrip:

public List<TestFilingObject> getFilings() {
if (filings == null) setFilings(getDummyDataList());

Regards,
Ganesh

RE: JSF Tree vs Tomahawk Tree
By: Malini Puli (mpuli) - 2008-06-18 20:12
AWESOME!!!!!! that worked!

Thanks so much Ganesh for all your patience.

Where can i find good documentation about these tag libraries?
Is it all experience and trial& error?

Thanks once again!


Reply all
Reply to author
Forward
0 new messages