You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Jorge Vásquez <jv...@3eyegroup.com> on 2006/07/19 17:06:29 UTC

Tomahawk tree2

Greetings,

I have been doing some trial and error experiments with tomahawk´s tree2
component and I have some questions:

 

1.	How does the component knows which nodes have been opened, where is
this state kept, in order to choose between the opened and closed images?

 

This is the sample code from the demos available:

 

 

            <t:tree2 id="serverTree" value="#{treeBacker.treeData}"
var="node" 

                  varNodeToggler="t" clientSideToggle="false">

                  <f:facet name="person">

                        <h:panelGroup>

                             <t:graphicImage
value="images/yellow-folder-open.png"

                                   rendered="#{t.nodeExpanded}" border="0"
/>

                             <t:graphicImage
value="images/yellow-folder-closed.png"

                                   rendered="#{!t.nodeExpanded}" border="0"
/>

                             <h:outputText value="#{node.description}"
styleClass="nodeFolder" />

                        </h:panelGroup>

                  </f:facet>

                  <f:facet name="foo-folder">

                        <h:panelGroup>

                             <t:graphicImage
value="images/yellow-folder-open.png"

                                   rendered="#{t.nodeExpanded}" border="0"
/>

                             <t:graphicImage
value="images/yellow-folder-closed.png"

                                   rendered="#{!t.nodeExpanded}" border="0"
/>

                             <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="bar-folder">

                        <h:panelGroup>

                             <t:graphicImage
value="images/blue-folder-open.gif"

                                   rendered="#{t.nodeExpanded}" border="0"
/>

                             <t:graphicImage
value="images/blue-folder-closed.png"

                                   rendered="#{!t.nodeExpanded}" border="0"
/>

                             <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="document">

                        <h:panelGroup>

                             <h:commandLink immediate="true"

                                   styleClass="#{t.nodeSelected ?
'documentSelected':'document'}"

                                   actionListener="#{t.setNodeSelected}"
action="#{treeBacker.nodeSelected}">

                                   <t:graphicImage
value="images/document.png" border="0" />

                                   <h:outputText value="#{node.description}"
/>

                                   <f:param name="docDesc"
value="#{node.description}" />

                                   <f:param name="docType"
value="#{node.type}" />

                             </h:commandLink>

                        </h:panelGroup>

                  </f:facet>

            </t:tree2>

 

 

In the above I don’t understand what is the attribute  varNodeToggler? (and
I think that here is where  the answer to my question lies… )

 

2.	I am trying to develop a web-based file explorer and so far I can
paint the selected item´s data on the right region of the page using an
action mapping on the node, but I also need that according to a click on a
folder on the right pane, the tree opens on the left pane the clicked folder
(in a similar fashion to all file explorers where there´s some sort of
bidirectional listener mechanism between both panes).

 

3.	Finally, if anyone has a reference to some more examples on the use
of this component and documentation please let me know, ´cause I´m a little
scarce on docs and examples (So far I have just checked the faces wiki)

 

Regards to all,

Jorge Vásquez

 

 


Re: Tomahawk tree2

Posted by Andrew Robinson <an...@gmail.com>.
Wow, not sure why the source zip is out of date or if there is an
extra java file lying around. Here is the code in SVN:

http://svn.sourceforge.net/viewcvs.cgi/jsf-comp/trunk/aa/warSource/net/sf/jsfcomp/aa/tree/examples/TreeBean.java?view=markup&rev=585

-Andrew

On 7/21/06, Jorge Vásquez <jv...@3eyegroup.com> wrote:
>
>
>
>
> Andrew, one last request:  the TreeBean found in the source files
> (jsfCompAA-source.zip) is incomplete:
>
>
>
> /**
>
>  *
>
>  */
>
> package warSource.net.sf.jsfcomp.aa.tree.examples;
>
>
>
> /**
>
>  *
>
>  * @author Andrew Robinson (andrew)
>
>  */
>
> public class TreeBean
>
> {
>
>   public TreeBean()
>
>   {}
>
> }
>
>
>
> Would you mind copying me the full source for this Bean.
>
> Thanks a lot and best regards,
>
> JV
>
>
>
>  ________________________________
>
>
> De: Andrew Robinson [mailto:andrew.rw.robinson@gmail.com]
>  Enviado el: viernes, 21 de julio de 2006 10:18
>
>  Para: MyFaces Discussion
>  Asunto: Re: Tomahawk tree2
>
>
>
>
>
>
>
> Sorry, I haven't had time to document it on the web site.
>
>  Here is the link to download it:
>
> http://sourceforge.net/project/showfiles.php?group_id=137466&package_id=197375
>
>
> On 7/21/06, Jorge Vásquez <jv...@3eyegroup.com> wrote:
>
>
>
>
> Thanks Andrew,
>
> I don´t see the component that you mention on that page?
>
> Regards,
>
> JV
>
>
>

RE: Tomahawk tree2

Posted by Jorge Vásquez <jv...@3eyegroup.com>.
Andrew, one last request:  the TreeBean found in the source files
(jsfCompAA-source.zip) is incomplete:

 

/**

 * 

 */

package warSource.net.sf.jsfcomp.aa.tree.examples;

 

/**

 *

 * @author Andrew Robinson (andrew)

 */

public class TreeBean

{

  public TreeBean()

  {}

}

 

Would you mind copying me the full source for this Bean.

Thanks a lot and best regards,

JV

 

  _____  

De: Andrew Robinson [mailto:andrew.rw.robinson@gmail.com] 
Enviado el: viernes, 21 de julio de 2006 10:18
Para: MyFaces Discussion
Asunto: Re: Tomahawk tree2

 

Sorry, I haven't had time to document it on the web site.

Here is the link to download it:

http://sourceforge.net/project/showfiles.php?group_id=137466
<http://sourceforge.net/project/showfiles.php?group_id=137466&package_id=197
375> &package_id=197375 

On 7/21/06, Jorge Vásquez <jv...@3eyegroup.com> wrote:

Thanks Andrew,

I don´t see the component that you mention on that page?

Regards,

JV

 


Re: Tomahawk tree2

Posted by Andrew Robinson <an...@gmail.com>.
Sorry, I haven't had time to document it on the web site.

Here is the link to download it:

http://sourceforge.net/project/showfiles.php?group_id=137466&package_id=197375

On 7/21/06, Jorge Vásquez <jv...@3eyegroup.com> wrote:
>
>  Thanks Andrew,
>
> I don´t see the component that you mention on that page?
>
> Regards,
>
> JV
>

RE: Tomahawk tree2

Posted by Jorge Vásquez <jv...@3eyegroup.com>.
Thanks Andrew,

I don´t see the component that you mention on that page?

Regards,

JV

 

  _____  

De: Andrew Robinson [mailto:andrew.rw.robinson@gmail.com] 
Enviado el: miércoles, 19 de julio de 2006 11:48
Para: MyFaces Discussion
Asunto: Re: Tomahawk tree2

 

Answer for number 2:

1) if you want to stick with the "standard" implementation, the node
expanded state is kept in the tree state in the form of indexes. So:
A (0)
--A1(0)
--B1(1)

If you want to expand B1 use the indexes shown in the parenthesis.
Specifically "0:0" 

Or 2) use my nodes from http://jsf-comp.sf.net. 
I my node has an expanded and selected property. I used a custom tree state
object to delegate the check for expanding or collapsing to these nodes. So
if you use this code, you can simply: node.setExpanded(true);

-Andrew

On 7/19/06, Jorge Vásquez <jv...@3eyegroup.com> wrote:

Greetings,

I have been doing some trial and error experiments with tomahawk´s tree2
component and I have some questions:

 

1.	How does the component knows which nodes have been opened, where is
this state kept, in order to choose between the opened and closed images?

 

This is the sample code from the demos available:

 

 

            < t:tree2 id = "serverTree" value = "#{treeBacker.treeData}" var
="node" 

                  varNodeToggler = "t" clientSideToggle = "false" >

                  < f:facet name = "person" >

                        < h:panelGroup >

                             < t:graphicImage value =
"images/yellow-folder-open.png"

                                   rendered = " #{t.nodeExpanded}" border
="0" /> 

                             < t:graphicImage value =
"images/yellow-folder-closed.png"

                                   rendered = " #{!t.nodeExpanded}" border
="0" /> 

                             < h:outputText value = "#{node.description}"
styleClass ="nodeFolder" /> 

                        </ h:panelGroup >

                  </ f:facet >

                  < f:facet name = "foo-folder" >

                        < h:panelGroup >

                             < t:graphicImage value =
"images/yellow-folder-open.png"

                                   rendered = " #{t.nodeExpanded}" border
="0" /> 

                             < t:graphicImage value =
"images/yellow-folder-closed.png"

                                   rendered = " #{!t.nodeExpanded}" border
="0" /> 

                             < 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 = "bar-folder" >

                        < h:panelGroup >

                             < t:graphicImage value =
"images/blue-folder-open.gif"

                                   rendered = " #{t.nodeExpanded}" border
="0" /> 

                             < t:graphicImage value =
"images/blue-folder-closed.png"

                                   rendered = " #{!t.nodeExpanded}" border
="0" /> 

                             < 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 = "document" >

                        < h:panelGroup >

                             < h:commandLink immediate = "true"

                                   styleClass = " #{t.nodeSelected ?
'documentSelected':'document'}"

                                   actionListener = "#{t.setNodeSelected}"
action ="#{treeBacker.nodeSelected}"> 

                                   < t:graphicImage value =
"images/document.png" border = "0" />

                                   < h:outputText value =
"#{node.description}" /> 

                                   < f:param name = "docDesc" value =
"#{node.description}" /> 

                                   < f:param name = "docType" value =
"#{node.type}" /> 

                             </ h:commandLink >

                        </ h:panelGroup >

                  </ f:facet >

            </ t:tree2 >

 

 

In the above I don't understand what is the attribute  varNodeToggler? (and
I think that here is where  the answer to my question lies… )

 

2.	I am trying to develop a web-based file explorer and so far I can
paint the selected item´s data on the right region of the page using an
action mapping on the node, but I also need that according to a click on a
folder on the right pane, the tree opens on the left pane the clicked folder
(in a similar fashion to all file explorers where there´s some sort of
bidirectional listener mechanism between both panes).

 

3.	Finally, if anyone has a reference to some more examples on the use
of this component and documentation please let me know, ´cause I´m a little
scarce on docs and examples (So far I have just checked the faces wiki)

 

Regards to all,

Jorge Vásquez

 

 

 


Re: Tomahawk tree2

Posted by Andrew Robinson <an...@gmail.com>.
Answer for number 2:

1) if you want to stick with the "standard" implementation, the node
expanded state is kept in the tree state in the form of indexes. So:
A (0)
--A1(0)
--B1(1)

If you want to expand B1 use the indexes shown in the parenthesis.
Specifically "0:0"

Or 2) use my nodes from http://jsf-comp.sf.net.
I my node has an expanded and selected property. I used a custom tree state
object to delegate the check for expanding or collapsing to these nodes. So
if you use this code, you can simply: node.setExpanded(true);

-Andrew

On 7/19/06, Jorge Vásquez <jv...@3eyegroup.com> wrote:
>
>  Greetings,
>
> I have been doing some trial and error experiments with tomahawk´s tree2
> component and I have some questions:
>
>
>
>    1. How does the component knows which nodes have been opened, where
>    is this state kept, in order to choose between the opened and closed images?
>
>
>
> This is the sample code from the demos available:
>
>
>
>
>
>             <t:tree2 id="serverTree" value="#{treeBacker.treeData}" var="node"
>
>
>                   varNodeToggler="t" clientSideToggle="false">
>
>                   <f:facet name="person">
>
>                         <h:panelGroup>
>
>                              <t:graphicImage value="images/yellow-
> folder-open.png"
>
>                                    rendered="#{t.nodeExpanded}" border="0"
> />
>
>                              <t:graphicImage value="images/yellow-
> folder-closed.png"
>
>                                    rendered="#{!t.nodeExpanded}" border="0"
> />
>
>                              <h:outputText value="#{node.description}"
> styleClass="nodeFolder" />
>
>                         </h:panelGroup>
>
>                   </f:facet>
>
>                   <f:facet name="foo-folder">
>
>                         <h:panelGroup>
>
>                              <t:graphicImage value="images/yellow-
> folder-open.png"
>
>                                    rendered="#{t.nodeExpanded}" border="0"
> />
>
>                              <t:graphicImage value="images/yellow-
> folder-closed.png"
>
>                                    rendered="#{!t.nodeExpanded}" border="0"
> />
>
>                              <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="bar-folder">
>
>                         <h:panelGroup>
>
>                              <t:graphicImage value="images/blue-
> folder-open.gif"
>
>                                    rendered="#{t.nodeExpanded}" border="0"
> />
>
>                              <t:graphicImage value="images/blue-
> folder-closed.png"
>
>                                    rendered="#{!t.nodeExpanded}" border="0"
> />
>
>                              <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="document">
>
>                         <h:panelGroup>
>
>                              <h:commandLink immediate="true"
>
>                                    styleClass="#{t.nodeSelected ?
> 'documentSelected':'document'}"
>
>                                    actionListener="#{t.setNodeSelected}"
> action="#{treeBacker.nodeSelected}">
>
>                                    <t:graphicImage value="images/document.png"
> border="0" />
>
>                                    <h:outputText value="#{node.description
> }" />
>
>                                    <f:param name="docDesc" value="#{
> node.description}" />
>
>                                    <f:param name="docType" value="#{
> node.type}" />
>
>                              </h:commandLink>
>
>                         </h:panelGroup>
>
>                   </f:facet>
>
>             </t:tree2>
>
>
>
>
>
> In the above I don't understand what is the attribute  varNodeToggler?
> (and I think that here is where  the answer to my question lies… )
>
>
>
>    1. I am trying to develop a web-based file explorer and so far I can
>    paint the selected item´s data on the right region of the page using an
>    action mapping on the node, but I also need that according to a click on a
>    folder on the right pane, the tree opens on the left pane the clicked folder
>    (in a similar fashion to all file explorers where there´s some sort of
>    bidirectional listener mechanism between both panes).
>
>
>
>    1. Finally, if anyone has a reference to some more examples on the
>    use of this component and documentation please let me know, ´cause I´m a
>    little scarce on docs and examples (So far I have just checked the faces
>    wiki)
>
>
>
> Regards to all,
>
> Jorge Vásquez
>
>
>
>
>

RE: Tomahawk tree2

Posted by Jorge Vásquez <jv...@3eyegroup.com>.
But  precisely my question is which class provides the implementation for
the methods:  nodeSelected, setNodeSelected, nodeExpanded…

I have been looking in the source files from tomahawk and have found that
the direct methods are:  

public boolean isNodeExpanded()…

public void setNodeSelected(ActionEvent event)…

public boolean isNodeSelected()…

Which are implemented by the class:
org.apache.myfaces.custom.tree2.UITreeData, which uses a delegate from a
TreeState implementor,  and the TreeModel itself also has a reference to a
TreeState, so I guess that the answer lies in the TreeState class…This kind
of answers my first question, still 2 and 3 going…

 

Regards,

JV

 

  _____  

De: Romain PELISSE [mailto:romain.pelisse@atosorigin.com] 
Enviado el: miércoles, 19 de julio de 2006 10:37
Para: MyFaces Discussion
Asunto: Re: Tomahawk tree2

 


"In the above I don’t understand what is the attribute  varNodeToggler? (and
I think that here is where  the answer to my question lies… )"

Exactly, the varNodeToggler is a session bean created by the component. The
varNodeToggler will stored the state of the tree and be used by the
framework to render the tree.... at least, this is what i understand from my
expirement. 


Jorge Vásquez wrote: 

Greetings,

I have been doing some trial and error experiments with tomahawk´s tree2
component and I have some questions:

 

1.	How does the component knows which nodes have been opened, where is
this state kept, in order to choose between the opened and closed images?

 

This is the sample code from the demos available:

 

 

            <t:tree2 id="serverTree" value="#{treeBacker.treeData}"
var="node" 

                  varNodeToggler="t" clientSideToggle="false">

                  <f:facet name="person">

                        <h:panelGroup>

                             <t:graphicImage
value="images/yellow-folder-open.png"

                                   rendered="#{t.nodeExpanded}" border="0"
/>

                             <t:graphicImage
value="images/yellow-folder-closed.png"

                                   rendered="#{!t.nodeExpanded}" border="0"
/>

                             <h:outputText value="#{node.description}"
styleClass="nodeFolder" />

                        </h:panelGroup>

                  </f:facet>

                  <f:facet name="foo-folder">

                        <h:panelGroup>

                             <t:graphicImage
value="images/yellow-folder-open.png"

                                   rendered="#{t.nodeExpanded}" border="0"
/>

                             <t:graphicImage
value="images/yellow-folder-closed.png"

                                   rendered="#{!t.nodeExpanded}" border="0"
/>

                             <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="bar-folder">

                        <h:panelGroup>

                             <t:graphicImage
value="images/blue-folder-open.gif"

                                   rendered="#{t.nodeExpanded}" border="0"
/>

                             <t:graphicImage
value="images/blue-folder-closed.png"

                                   rendered="#{!t.nodeExpanded}" border="0"
/>

                             <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="document">

                        <h:panelGroup>

                             <h:commandLink immediate="true"

                                   styleClass="#{t.nodeSelected ?
'documentSelected':'document'}"

                                   actionListener="#{t.setNodeSelected}"
action="#{treeBacker.nodeSelected}">

                                   <t:graphicImage
value="images/document.png" border="0" />

                                   <h:outputText value="#{node.description}"
/>

                                   <f:param name="docDesc"
value="#{node.description}" />

                                   <f:param name="docType"
value="#{node.type}" />

                             </h:commandLink>

                        </h:panelGroup>

                  </f:facet>

            </t:tree2>

 

 

In the above I don’t understand what is the attribute  varNodeToggler? (and
I think that here is where  the answer to my question lies… )

 

2.	I am trying to develop a web-based file explorer and so far I can
paint the selected item´s data on the right region of the page using an
action mapping on the node, but I also need that according to a click on a
folder on the right pane, the tree opens on the left pane the clicked folder
(in a similar fashion to all file explorers where there´s some sort of
bidirectional listener mechanism between both panes).

 

3.	Finally, if anyone has a reference to some more examples on the use
of this component and documentation please let me know, ´cause I´m a little
scarce on docs and examples (So far I have just checked the faces wiki)

 

Regards to all,

Jorge Vásquez

 

 

 


RE: Facelets Layout / Command Button Issue

Posted by Tom Innes <To...@allTiers.com>.
Thanks for the advice David.

 

I have tried the f:view / h:form on main page inside the ui:composition tag
and outside the ui:composition tag and I basically get the same error that
the command buttons must be inside an h:form.

 

I have tried using an ui:insert on the main page with the same issue that
the command buttons must be inside a h:form.

 

Have you successfully placed command buttons inside a layout on any of the
facelets work you have done?  

 

Meanwhile I have printed out the documentation and will try some of the
other things you have suggested. Hopefully something will eventually
work!!!!

 

Tom

 

 

 

-----Original Message-----
From: David Friedman [mailto:humble@ix.netcom.com] 
Sent: Wednesday, July 19, 2006 12:52 PM
To: MyFaces Discussion
Subject: RE: Facelets Layout / Command Button Issue

 

Tom,

 

I think you need to review the Facelets Guidebook:
<https://facelets.dev.java.net/nonav/docs/dev/docbook.html#template-composit
ion>
https://facelets.dev.java.net/nonav/docs/dev/docbook.html#template-compositi
on

 

ui:composition removes everything from the page except for what is inside
your tags.  That means you LOST your f:view and h:form tags and that seems
to match your posted errors.  I recommend your main page use a different tag
such as ui:decorate, ui:insert, or ui:fragment (not reallly recommended
because you must create a binding name).

 

Also, you should keep requests like this on the facelets list (I know you
subscribe to both, I've seen your postings) and just have patience if you
want help.  Or review the documentation slowly and find the nicely
documented "quirks" or each taglib.  Again, the Facelets docbook is an
excellent guide to  print out and keep by your desk.  I did when I first
started with Facelets. See you on the facelets list!

 

Regards,

David

-----Original Message-----
From: Tom Innes [mailto:Tom.Innes@allTiers.com]
Sent: Wednesday, July 19, 2006 11:48 AM
To: 'MyFaces Discussion'
Subject: Facelets Layout / Command Button Issue

I apologize, if this is the correct group for my question.  

 

I am trying to create a facelets layout hierarchy for a crud based
application I am building in JSF.  I have a proto type working fine in JSF
and now I want to use facelets to standardize the layouts before we begin
the actual application.  I have created a base layout that defines things
like message blocks and such.  I would like to create a QBE layout that
includes my base layout and a button panel that has buttons like find,
clear, etc. 

 

The problem is that I am unable to place a h:commandbuttom inside the
layout.  For Instance

 

 

aQBEButtonPanel.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"

      xmlns:ui="http://java.sun.com/jsf/facelets"

      xmlns:h="http://java.sun.com/jsf/html">

      <ui:composition>

                 <h:panelGrid rows="3" columns="1">

                        <h:commandButton value="Find"
action="#{theQBEController.action.find}" id="findButton"/>

                        <h:commandButton value="Clear"
action="#{theQBEController.action.clear}" id="clearButton"
immediate="true"/>

                        <h:commandButton value="Add"
action="#{theFormController.action.add}" id="addButton"  immediate="true"/>

                 </h:panelGrid>

      </ui:composition>

</html>

 

I have a base Layout defined as

 

aBaseLayout.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

      xmlns:ui="http://java.sun.com/jsf/facelets"

      xmlns:h="http://java.sun.com/jsf/html">

      <head>

        <title>#{title}</title>

        <link rel="stylesheet" type="text/css" href="./css/main.css" />

      </head>

      <body>

            <div id="qbe-buttons">

                <ui:include src="aQBEButtonPanel.xhtml"/>

            </div>            

            <div id="center">

              <ui:insert name="content">

                 <div>

                  <ui:include src="content.xhtml"/>  

                </div>

              </ui:insert>

            </div>

      </body>

</html>

 

 

And the countryQBE.xhtml is defined as follows

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml"

      xmlns:ui="http://java.sun.com/jsf/facelets"

      xmlns:h="http://java.sun.com/jsf/html"

      xmlns:f="http://java.sun.com/jsf/core"

      xmlns:t="http://myfaces.apache.org/tomahawk"

      xmlns:as="http://com.alltiers.client.jsf/allTierSystems">

      

<f:view>

      <h:form id="countryQBEForm">

            <body>

                  <ui:composition
template="/facelets/layout/aBaseLayout.xhtml">

                        <ui:param name="title"
value="#{countryQBEController.title}"/>

                        <ui:param name="theQBEController"
value="#{countryQBEController}"/>

                        <ui:param name="theFormController"
value="#{countryFormController}"/>

                        <ui:define name="content">

                              <h:panelGrid columns="3">

                                                            Bunch of Input
Fields

                                                            

                                                            Etc

 

The problem is that I get this exception

23:11:04,062 INFO  [STDOUT] 6-Jun-2006 11:11:04 PM
com.sun.facelets.FaceletViewHandler handleRenderException

SEVERE: Error Rendering View[/pages/countryQBE.xhtml]

java.lang.IllegalArgumentException: Component findButton must be embedded in
an form

      at
org.apache.myfaces.shared_impl.renderkit.html.HtmlButtonRendererBase.buildOn
Click(Htm

 

 

Now the commandButtons cannot be contained in a different Form than the
Input Fields otherwise the Model is not updated.  Does anybody know how to
place a command button in a facelets layout?

 

Tom

                                                            

 


RE: Facelets Layout / Command Button Issue

Posted by David Friedman <hu...@ix.netcom.com>.
Tom,

I think you need to review the Facelets Guidebook:
https://facelets.dev.java.net/nonav/docs/dev/docbook.html#template-compositi
on

ui:composition removes everything from the page except for what is inside
your tags.  That means you LOST your f:view and h:form tags and that seems
to match your posted errors.  I recommend your main page use a different tag
such as ui:decorate, ui:insert, or ui:fragment (not reallly recommended
because you must create a binding name).

Also, you should keep requests like this on the facelets list (I know you
subscribe to both, I've seen your postings) and just have patience if you
want help.  Or review the documentation slowly and find the nicely
documented "quirks" or each taglib.  Again, the Facelets docbook is an
excellent guide to  print out and keep by your desk.  I did when I first
started with Facelets. See you on the facelets list!

Regards,
David
  -----Original Message-----
  From: Tom Innes [mailto:Tom.Innes@allTiers.com]
  Sent: Wednesday, July 19, 2006 11:48 AM
  To: 'MyFaces Discussion'
  Subject: Facelets Layout / Command Button Issue


  I apologize, if this is the correct group for my question.



  I am trying to create a facelets layout hierarchy for a crud based
application I am building in JSF.  I have a proto type working fine in JSF
and now I want to use facelets to standardize the layouts before we begin
the actual application.  I have created a base layout that defines things
like message blocks and such.  I would like to create a QBE layout that
includes my base layout and a button panel that has buttons like find,
clear, etc.



  The problem is that I am unable to place a h:commandbuttom inside the
layout.  For Instance





  aQBEButtonPanel.xhtml

  <html xmlns="http://www.w3.org/1999/xhtml"

        xmlns:ui="http://java.sun.com/jsf/facelets"

        xmlns:h="http://java.sun.com/jsf/html">

        <ui:composition>

                   <h:panelGrid rows="3" columns="1">

                          <h:commandButton value="Find"
action="#{theQBEController.action.find}" id="findButton"/>

                          <h:commandButton value="Clear"
action="#{theQBEController.action.clear}" id="clearButton"
immediate="true"/>

                          <h:commandButton value="Add"
action="#{theFormController.action.add}" id="addButton"  immediate="true"/>

                   </h:panelGrid>

        </ui:composition>

  </html>



  I have a base Layout defined as



  aBaseLayout.xhtml

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml"

        xmlns:ui="http://java.sun.com/jsf/facelets"

        xmlns:h="http://java.sun.com/jsf/html">

        <head>

          <title>#{title}</title>

          <link rel="stylesheet" type="text/css" href="./css/main.css" />

        </head>

        <body>

              <div id="qbe-buttons">

                  <ui:include src="aQBEButtonPanel.xhtml"/>

              </div>

              <div id="center">

                <ui:insert name="content">

                   <div>

                    <ui:include src="content.xhtml"/>

                  </div>

                </ui:insert>

              </div>

        </body>

  </html>





  And the countryQBE.xhtml is defined as follows

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



  <html xmlns="http://www.w3.org/1999/xhtml"

        xmlns:ui="http://java.sun.com/jsf/facelets"

        xmlns:h="http://java.sun.com/jsf/html"

        xmlns:f="http://java.sun.com/jsf/core"

        xmlns:t="http://myfaces.apache.org/tomahawk"

        xmlns:as="http://com.alltiers.client.jsf/allTierSystems">



  <f:view>

        <h:form id="countryQBEForm">

              <body>

                    <ui:composition
template="/facelets/layout/aBaseLayout.xhtml">

                          <ui:param name="title"
value="#{countryQBEController.title}"/>

                          <ui:param name="theQBEController"
value="#{countryQBEController}"/>

                          <ui:param name="theFormController"
value="#{countryFormController}"/>

                          <ui:define name="content">

                                <h:panelGrid columns="3">

                                                              Bunch of Input
Fields



                                                              Etc



  The problem is that I get this exception

  23:11:04,062 INFO  [STDOUT] 6-Jun-2006 11:11:04 PM
com.sun.facelets.FaceletViewHandler handleRenderException

  SEVERE: Error Rendering View[/pages/countryQBE.xhtml]

  java.lang.IllegalArgumentException: Component findButton must be embedded
in an form

        at
org.apache.myfaces.shared_impl.renderkit.html.HtmlButtonRendererBase.buildOn
Click(Htm





  Now the commandButtons cannot be contained in a different Form than the
Input Fields otherwise the Model is not updated.  Does anybody know how to
place a command button in a facelets layout?



  Tom





Facelets Layout / Command Button Issue

Posted by Tom Innes <To...@allTiers.com>.
I apologize, if this is the correct group for my question.  

 

I am trying to create a facelets layout hierarchy for a crud based
application I am building in JSF.  I have a proto type working fine in JSF
and now I want to use facelets to standardize the layouts before we begin
the actual application.  I have created a base layout that defines things
like message blocks and such.  I would like to create a QBE layout that
includes my base layout and a button panel that has buttons like find,
clear, etc. 

 

The problem is that I am unable to place a h:commandbuttom inside the
layout.  For Instance

 

 

aQBEButtonPanel.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"

      xmlns:ui="http://java.sun.com/jsf/facelets"

      xmlns:h="http://java.sun.com/jsf/html">

      <ui:composition>

                 <h:panelGrid rows="3" columns="1">

                        <h:commandButton value="Find"
action="#{theQBEController.action.find}" id="findButton"/>

                        <h:commandButton value="Clear"
action="#{theQBEController.action.clear}" id="clearButton"
immediate="true"/>

                        <h:commandButton value="Add"
action="#{theFormController.action.add}" id="addButton"  immediate="true"/>

                 </h:panelGrid>

      </ui:composition>

</html>

 

I have a base Layout defined as

 

aBaseLayout.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

      xmlns:ui="http://java.sun.com/jsf/facelets"

      xmlns:h="http://java.sun.com/jsf/html">

      <head>

        <title>#{title}</title>

        <link rel="stylesheet" type="text/css" href="./css/main.css" />

      </head>

      <body>

            <div id="qbe-buttons">

                <ui:include src="aQBEButtonPanel.xhtml"/>

            </div>            

            <div id="center">

              <ui:insert name="content">

                 <div>

                  <ui:include src="content.xhtml"/>  

                </div>

              </ui:insert>

            </div>

      </body>

</html>

 

 

And the countryQBE.xhtml is defined as follows

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml"

      xmlns:ui="http://java.sun.com/jsf/facelets"

      xmlns:h="http://java.sun.com/jsf/html"

      xmlns:f="http://java.sun.com/jsf/core"

      xmlns:t="http://myfaces.apache.org/tomahawk"

      xmlns:as="http://com.alltiers.client.jsf/allTierSystems">

      

<f:view>

      <h:form id="countryQBEForm">

            <body>

                  <ui:composition
template="/facelets/layout/aBaseLayout.xhtml">

                        <ui:param name="title"
value="#{countryQBEController.title}"/>

                        <ui:param name="theQBEController"
value="#{countryQBEController}"/>

                        <ui:param name="theFormController"
value="#{countryFormController}"/>

                        <ui:define name="content">

                              <h:panelGrid columns="3">

                                                            Bunch of Input
Fields

                                                            

                                                            Etc

 

The problem is that I get this exception

23:11:04,062 INFO  [STDOUT] 6-Jun-2006 11:11:04 PM
com.sun.facelets.FaceletViewHandler handleRenderException

SEVERE: Error Rendering View[/pages/countryQBE.xhtml]

java.lang.IllegalArgumentException: Component findButton must be embedded in
an form

      at
org.apache.myfaces.shared_impl.renderkit.html.HtmlButtonRendererBase.buildOn
Click(Htm

 

 

Now the commandButtons cannot be contained in a different Form than the
Input Fields otherwise the Model is not updated.  Does anybody know how to
place a command button in a facelets layout?

 

Tom

                                                            

 


Re: Tomahawk tree2

Posted by Romain PELISSE <ro...@atosorigin.com>.
"In the above I don't understand what is the attribute  varNodeToggler? 
(and I think that here is where  the answer to my question lies... )"

Exactly, the varNodeToggler is a session bean created by the component. 
The varNodeToggler will stored the state of the tree and be used by the 
framework to render the tree.... at least, this is what i understand 
from my expirement.


Jorge Vásquez wrote:
>
> Greetings,
>
> I have been doing some trial and error experiments with tomahawk´s 
> tree2 component and I have some questions:
>
>  
>
>    1. How does the component knows which nodes have been opened, where
>       is this state kept, in order to choose between the opened and
>       closed images?
>
>  
>
> This is the sample code from the demos available:
>
>  
>
>  
>
>             <t:tree2 id="serverTree" value="#{treeBacker.treeData}" 
> var="node"
>
>                   varNodeToggler="t" clientSideToggle="false">
>
>                   <f:facet name="person">
>
>                         <h:panelGroup>
>
>                              <t:graphicImage 
> value="images/yellow-folder-open.png"
>
>                                    rendered="#{t.nodeExpanded}" 
> border="0" />
>
>                              <t:graphicImage 
> value="images/yellow-folder-closed.png"
>
>                                    rendered="#{!t.nodeExpanded}" 
> border="0" />
>
>                              <h:outputText value="#{node.description}" 
> styleClass="nodeFolder" />
>
>                         </h:panelGroup>
>
>                   </f:facet>
>
>                   <f:facet name="foo-folder">
>
>                         <h:panelGroup>
>
>                              <t:graphicImage 
> value="images/yellow-folder-open.png"
>
>                                    rendered="#{t.nodeExpanded}" 
> border="0" />
>
>                              <t:graphicImage 
> value="images/yellow-folder-closed.png"
>
>                                    rendered="#{!t.nodeExpanded}" 
> border="0" />
>
>                              <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="bar-folder">
>
>                         <h:panelGroup>
>
>                              <t:graphicImage 
> value="images/blue-folder-open.gif"
>
>                                    rendered="#{t.nodeExpanded}" 
> border="0" />
>
>                              <t:graphicImage 
> value="images/blue-folder-closed.png"
>
>                                    rendered="#{!t.nodeExpanded}" 
> border="0" />
>
>                              <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="document">
>
>                         <h:panelGroup>
>
>                              <h:commandLink immediate="true"
>
>                                    styleClass="#{t.nodeSelected ? 
> 'documentSelected':'document'}"
>
>                                    
> actionListener="#{t.setNodeSelected}" action="#{treeBacker.nodeSelected}">
>
>                                    <t:graphicImage 
> value="images/document.png" border="0" />
>
>                                    <h:outputText 
> value="#{node.description}" />
>
>                                    <f:param name="docDesc" 
> value="#{node.description}" />
>
>                                    <f:param name="docType" 
> value="#{node.type}" />
>
>                              </h:commandLink>
>
>                         </h:panelGroup>
>
>                   </f:facet>
>
>             </t:tree2>
>
>  
>
>  
>
> In the above I don't understand what is the attribute  varNodeToggler? 
> (and I think that here is where  the answer to my question lies... )
>
>  
>
>    2. I am trying to develop a web-based file explorer and so far I
>       can paint the selected item´s data on the right region of the
>       page using an action mapping on the node, but I also need that
>       according to a click on a folder on the right pane, the tree
>       opens on the left pane the clicked folder (in a similar fashion
>       to all file explorers where there´s some sort of bidirectional
>       listener mechanism between both panes).
>
>  
>
>    3. Finally, if anyone has a reference to some more examples on the
>       use of this component and documentation please let me know,
>       ´cause I´m a little scarce on docs and examples (So far I have
>       just checked the faces wiki)
>
>  
>
> Regards to all,
>
> Jorge Vásquez
>
>  
>
>  
>