My JSF Books/Videos My JSF Tutorials OmniFaces/JSF PPTs
JSF 2.3 Tutorial
JSF Caching Tutorial
JSF Navigation Tutorial
JSF Scopes Tutorial
JSF Page Author Beginner's Guide
OmniFaces 2.3 Tutorial Examples
OmniFaces 2.2 Tutorial Examples
JSF Events Tutorial
OmniFaces Callbacks Usages
JSF State Tutorial
JSF and Design Patterns
JSF 2.3 New Features (2.3-m04)
Introduction to OmniFaces
25+ Reasons to use OmniFaces in JSF
OmniFaces Validators
OmniFaces Converters
JSF Design Patterns
Mastering OmniFaces
Reusable and less-verbose JSF code

My JSF Resources ...

Java EE Guardian
Member of JCG Program
Member MVB DZone
Blog curated on ZEEF
OmniFaces is an utility library for JSF, including PrimeFaces, RichFaces, ICEfaces ...

.

.

.

.

.

.

.

.


[OmniFaces Utilities] - Find the right JSF OmniFaces 2 utilities methods/functions

Search on blog

Petition by Java EE Guardians

Twitter

marți, 10 februarie 2015

Dynamically load content from WEB-INF in PrimeFaces center layout unit using Facelets and AJAX

In this post, you can see how to dynamically load content from WEB-INF folder in a PrimeFaces layout unit (e.g. center layout unit) using Facelets tags and AJAX. The main page, index.xhtml contains the PrimeFaces Layout component. In the west layout unit we have two buttons for loading pageA or pageB content in the center layout unit (pageA and pageB are stored in WEB-INF folder). Moreover, we have an AJAX loading indicator:

...
<p:layout fullPage="true">
 <p:layoutUnit position="west" size="200">
  Select Page
  <hr/>
  <h:form>
   <p:commandButton value="Page A" update=":mainPanelId"
    action="#{pageBean.changePageAction('/WEB-INF/pages/pageA.xhtml')}"/>
  </h:form>
  <h:form>
   <p:commandButton value="Page B" update=":mainPanelId"
     action="#{pageBean.changePageAction('/WEB-INF/pages/pageB.xhtml')}"/>
  </h:form>                               
  <hr/>      
  <p:ajaxStatus style="display:block;margin-bottom:2em;height:24px;">                   
   <f:facet name="start">
    <h:graphicImage library="default" name="images/ajax_loader.gif" />
   </f:facet>                  
  </p:ajaxStatus>
 </p:layoutUnit>

 <p:layoutUnit position="center">               
  <h:panelGroup id="mainPanelId" layout="block">
   <ui:include src="#{pageBean.page}" />
  </h:panelGroup>              
 </p:layoutUnit>
</p:layout>
...

The pageA is pretty simple (pageB is almost identical):

<?xml version='1.0' encoding='UTF-8' ?>
<!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://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html">

 <ui:composition>           
  <h:outputText value="This is page A content ..." style="color: #cc0000;"/>
 </ui:composition>
</html>

And the managed bean:

@ManagedBean
@ViewScoped
public class PageBean {

 private String page = "/WEB-INF/pages/pageA.xhtml";

 public String getPage() {
  return page;
 }

 public void setPage(String page) {
  this.page = page;
 }

 public void changePageAction(String page) {              
  this.page = page;
 }
}

Output:

Complete code on GitHub [PFChangeLayoutContent]

Niciun comentariu :

Trimiteți un comentariu

JSF BOOKS COLLECTION

Postări populare

OmniFaces/JSF Fans

Visitors Starting 4 September 2015

Locations of Site Visitors