Primefaces page layout with tree menu as navigation

Question

I am using primefaces 3.1 with `, having four positions. In the west position(west) I have added tree menu. JSF code is follows

<p:layoutUnit position="west" size="200" header="Left"
            resizable="true" collapsible="true">
            <h:form>
                <p:tree dynamic="true" value="#{treeBean.root}" var="node" id="tree"
                    selectionMode="single">
                    <p:treeNode id="treeNode">
                        <h:outputText value="#{node}" id="lblNode" />
                    </p:treeNode>
                </p:tree>
            </h:form>
        </p:layoutUnit>

and in the TreeBean I have

root = new DefaultTreeNode("Root", null);  
        TreeNode node0 = new DefaultTreeNode("Color", root);  


        TreeNode node00 = new DefaultTreeNode("Red", node0);  
        TreeNode node01 = new DefaultTreeNode("Blue", node0);
        TreeNode node02 = new DefaultTreeNode("Green", node0);

Is it possible to have navigation when I expand and click one of those nodes and upon clicking respective nodes how could I display jsf pages in the center position of layout. i.e. if I click node Blue, ideally I would like to have another jsf page being loaded into the center position of layout.

Any help is highly appreciable.

Thanks

Update 1

I have added the following code and it does a navigation to start.xhtml. However start.xhtml is displayed not inside my layout, start.xhtml is displayed as a new page.

public void onNodeSelect(NodeSelectEvent event) {

        try {
            System.out.println(" here " + event.getTreeNode().getData());
            FacesContext
                    .getCurrentInstance()
                    .getApplication()
                    .getNavigationHandler()
                    .handleNavigation(FacesContext.getCurrentInstance(),
                            "null", "/start.xhtml?faces-redirect=true");
        } catch (Exception e) {
            logger.info("error "+e.getMessage());
            // TODO: handle exception
        }

rags · Answer 1 · 2012-05-04T09:11:19.147

This is achieved with the help of layout. Define layout template for your application. Sample is shown here ...

myLayoutTemplate.xhtml

       <p:layout>
        <p:layoutUnit position="east" header="Menu"  collapsed="true" scrollable="true" collapsible="true" >
            <ui:insert name="appMenu">
                Place Your menu here ...
            </ui:insert>
        </p:layoutUnit>

        <p:layoutUnit position="center" scrollable="true">
            <ui:insert name="pageContent">
                Page Content is loaded here .....
            </ui:insert>
        </p:layoutUnit>
    </p:layout>

In Your Page.xhtml which is to be loaded on click of your menu item, .....

<ui:composition template="myLayoutTemplate.xhtml">
    <ui:define name="pageContent">

    </ui:define>
</ui:composition>

Are there any other ways of achieving this? – Jacob May 04 '12 at 13:27 — Jacob, May 04 '12 at 13:27

score 1 · Accepted Answer · edited May 23 '17 at 11:56

1

I think that this post will be very useful for you Include one xhtml inside another JSF

It describes how you create a template and then use it in your template client. @rags already told you that, but you don't really have to use <p:layout>. Article linked above is just more precise. I believe you will find what you need there. Regards

edited May 23 '17 at 11:56

Community

1
1

answered May 07 '12 at 21:10

Fallup

2,417
19
30

Primefaces page layout with tree menu as navigation

2 Answers2

Linked