Saturday, January 19, 2013

dynamic include in Richfaces tabPanel

The main purpose to have dynamic include in <rich:tabPanel /> is save bandwidth and reduce the page size, especially when the tabs having a lots of content.

This can be achieve through the attribute "onenter" and <a4j:jsFunction />

Steps:
managedBean
1. create a session scoped or view scoped managedBean.
2. create the managedBean attribute for tab page, and getter setter for these attributes.
    assuming there are 4 tabs, then 4 attributes need to be created.
dynamic include in tabPanel - managedBean property

3. setting default page.
dynamic include in tabPanel - managedBean property

4. create tab action for each tab.
dynamic include in tabPanel - managedBean property
    create tab2Action, tab3Action, tab4Action also.
    this action is to dynamically include the required page into the tab content, and set the other tab content to null.


XHTML
1. create the <rich:tabPanel /> in the main page, eg. tabPanel.xhtml
dynamic include in tabPanel - xhtml
    highlighted text is the page content to be dynamically included.

2. create the tab content. eg, tab1.xthml, tab2.xhtml, tab3.xhtml, tab4.xhtml

3. create the onenter jsFunction.
dynamic include in tabPanel - jsFunction
    highlighted text is the action created in managedBean. the highlighted text is the action to be invoked when calling the jsFunction.

Done!!

other dynamic include posts in JSF/Richfaces.
http://www.kianworknotes.blogspot.com/search/label/dynamic%20include

LinkWithin

Related Posts Plugin for WordPress, Blogger...