Dynamic page update in nested primefaces layout

Question

I am fairly new to JSF and PrimeFaces and have a couple issues in developing a full page layout with multiple menus.

ISSUE #1

We have a full page layout using PrimeFaces 3.3 with nested layout units on the left side as follows:

<p:layoutUnit id="west" position="west" header="Services" resizable="true" closable="true" collapsible="true" effect="drop">
            <p:layout>                                          
                <p:layoutUnit id="inner_center" position="center">                        
                   <h:form id="formMainMenu">
                        <ui:include src="#{menuBean.pageToDisplay}.xhtml" />
                   </h:form>               
                </p:layoutUnit>
                <p:layoutUnit id="inner_south" size="200" position="south">                                       
                    <h:form id="formStartMenu">
                        <p:menu>
                            <p:submenu label="Start Menu">                                    
                                <p:menuitem value="Start" actionListener="#{#menuBean.setPageToDisplay('template/menu/start')}" update=":inner_center" />                                    
                            </p:submenu>
                        </p:menu>
                    </h:form>
                </p:layoutUnit>
            </p:layout>
        </p:layoutUnit>

Here is the backing bean:

@ManagedBean(name = "menuBean")
@SessionScoped
public class menuBean implements Serializable {

private String pageToDisplay = "template/menu/main";

public String getPageToDisplay() {
    return this.pageToDisplay;
}

public void setPageToDisplay(String pageToDisplay) {
    this.pageToDisplay = pageToDisplay; 
} }

When I click on the menuItem, the entire LayoutUnit (inner_center) disappears. I have tried numerous combinations of Forms and Panel controls along with Ajax and cannot get the second page and menu to load. Maybe my approach is incorrect due to my limited knowledge in JSF. I am hoping this something simple and I am just missing it.

From a menuItem action, I want to load another PrimeFaces menu bean in the inner_center layout unit.. maybe I don't need to do this and just call the menu via Ajax?

ISSUE # 2 With these nested layoutunits, when the page loads, the parent LayoutUnit header "Services" disappears completely.

<p:layoutUnit id="west" position="west" header="Services" resizable="true" closable="true" collapsible="true" effect="drop">

Any help or advice on the overall approach is greatly appreciated!!

Thanks!

Answer 1

This question seems to be popular, so I feel compelled to at least share the solutions we have come up with to handle overall application design based on numerous other Stack Overflow Q&A, my own experimenting, JSF standards, BalusC, and countless other people and blogs that have contributed to the learning curve.

BACKGROUND -

Our application is an enterprise-level service management solution that ships with a UI and any number of licensed modules. We reviewed OSGI, and other heavy application frameworks, but decided on an Enterprise Maven project with lightweight .jar management via config files and database settings. We use entity objects backed by mySQL, passing only objects back to the UI.

SOLUTION -

For our initial release, we have created a JSF template website based on this layout: http://www.mkyong.com/jsf2/jsf-2-templating-with-facelets-example/

The idea is to have the UI be completely dynamic as follows:

1. JSF Core Application Design

   • Data-driven JavaEE Enterprise Maven application
   • Mostly Single-page processing via Ajax
   • Security PhaseListener (helps with Global Ajax issues)
   • Error Handling Phaselistener (helps with Global Ajax issues)

2. Security

   • We are using realm-based security on Glassfish. With JSF 2.2, you can easily annotate directories, controls, pages, methods for granular role management.

3. Navigation

   • Dynamically built from XML config based on user role in Realm.

   • Dynamic navigation and forms are all managed via scoped beans as needed. This link contains so many good answers to REAL problems you will encounter: http://balusc.blogspot.com/2011/09/communication-in-jsf-20.html

4. Template Content and Controls

   • Content is delivered via objects populated by entities. The majority of all data comes from the database. Only base application initialization is done via a local config files.

   • Control generation is done via an xml properties file for any object data that needs to managed via the UI.

As you know, the rabbit hole has many tunnels. If there is any part of our application design that resembles yours and you want more information and/or code samples, please feel free to ask and I will post on this thread for others to keep learning.