Dynamically refresh a page in a layout of nested layouts

Question

I am new to JSF and PrimeFaces and have a couple of problems developing a full page layout with multiple menus.

ISSUE No. 1

We have a full page layout using PrimeFaces 3.3 with nested layout blocks on the left:

<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 bean support:

 @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 a menu item, the whole LayoutUnit (inner_center) disappears. I tried many combinations of Forms and Panel controls with Ajax and could not load the second page and menu. Maybe my approach is wrong due to my limited knowledge in JSF. I hope this is something simple and I will just skip it.

From the menuItem element, I want to load another PrimeFaces bean menu in the internal center layout. Perhaps I do not need to do this and just call up the menu via Ajax?

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

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

Any help or advice on a general approach is greatly appreciated!

Thanks!

Answer 1

This question seems to be popular, so I have to at least share the solutions that we have developed to handle the overall design of applications based on many other Qaru Q & A methods, my own experiments, JSF, BalusC standards , as well as many other people and blogs that have contributed to the learning curve.

BACKGROUND -

Our application is an enterprise service management solution that comes with a user interface and any number of licensed modules. We looked at OSGI and other heavy application environments, but decided on an Enterprise Maven project with easy .jar management through configuration files and database settings. We use object objects supported by mySQL, passing only objects back to the user interface.

DECISION -

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

The idea is for the user interface to be fully dynamic as follows:

• JSF Core Application Development

  • Data Managed JavaEE Enterprise Maven Application
  • Mostly single page processing via Ajax
  • Security PhaseListener (helps with global Ajax issues)
  • Phaselistener error handling (helps with global Ajax issues)

• Security

  • We use glasses-based safety on Glassfish. With JSF 2.2, you can easily annotate directories, controls, pages, methods for competent role management.

• Navigation

  • Dynamically built from an XML configuration based on a user role in Realm.

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

• Content and Template Elements

  • Content is delivered through entities filled with entities. Most of the data comes from the database. Only basic application initialization is done through local configuration files.

  • Control generation is performed through the xml properties file for any object data that must be controlled through the user interface.

As you know, a rabbit hole has many tunnels. If any part of our application design is similar to yours and you want more information and / or code samples, please feel free to ask, and I will publish in this thread so that others can continue to learn.