How to make a primefaces template that includes ajax status for global use.
So far this is what I’ve done.
template/default.xhtml (Facelets Template)
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition 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://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./../resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="./../resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<title>Facelets Template</title>
</h:head>
<h:body>
<div id="top">
<ui:insert name="top">
<!--modal ajax status here-->
<p:ajaxStatus onstart="statusDialog.show();" oncomplete="statusDialog.hide();"/>
<p:dialog modal="true" widgetVar="statusDialog" header="Loading"
draggable="false" closable="false">
<p:graphicImage value="../resources/images/ajax-loader-square.gif" />
</p:dialog>
<!--modal ajax status end-->
</ui:insert>
</div>
<div id="content" class="center_content">
<ui:insert name="content">Content</ui:insert>
</div>
<div id="bottom">
<ui:insert name="bottom">Bottom</ui:insert>
</div>
</h:body>
login.xhtml (Facelets Template Client)
<?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://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html">
<body>
<ui:composition template="./../../template/default.xhtml">
<ui:define name="top">
top
</ui:define>
<ui:define name="content">
<h:form id="form1">
<p:focus context="form1"/>
<table style="width: 200px; border: solid;">
<tbody>
<!--output msg here-->
<tr>
<td>
<p:messages />
</td>
</tr>
<!--output msg end-->
<!--input here-->
<tr>
<td>
<p:outputLabel for="txtUname" value="Username:" />
<p:inputText id="txtUname" value="#{loginController.username}" size="20" required="true" requiredMessage="Username is required!" maxlength="45"/>
</td>
</tr>
<tr>
<td>
<p:outputLabel for="txtPass" value="Password:" />
<p:password id="txtPass" value="#{loginController.password}" size="20" required="true" requiredMessage="Password is required!"/>
</td>
</tr>
<!--input end-->
<tr>
<th>
<!--ajax submit-->
<p:commandButton value="Login" update="form1" actionListener="#{loginController.validateAccount()}"/>
</th>
</tr>
</tbody>
</table>
</h:form>
</ui:define>
<ui:define name="bottom">
bottom
</ui:define>
</ui:composition>
</body>
</html>
LoginController.java
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package controllers;
import java.io.IOException;
import java.util.List;
import javax.faces.FacesException;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import org.hibernate.Query;
import org.hibernate.Session;
import org.hibernate.Transaction;
import util.NewHibernateUtil;
/**
*
* @author burhan
*/
@ManagedBean
@RequestScoped
public class LoginController {
private String username;
private String password;
/**
* Creates a new instance of LoginController
*/
public LoginController() {
}
private String redirect(String targetPage) {
FacesContext ctx = FacesContext.getCurrentInstance();
ExternalContext extContext = ctx.getExternalContext();
String url = extContext.encodeActionURL(ctx.getApplication().getViewHandler().getActionURL(ctx, targetPage));
try {
extContext.redirect(url);
} catch (IOException ioe) {
throw new FacesException(ioe);
}
return null;
}
public void validateAccount() {
if (!validateAccount(username, password)) {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_WARN, "Invalid username or password!", "WARNING"));
username = "";
password = "";
return;
}
redirect("/views/home.xhtml");
}
public boolean validateAccount(String username, String password) {
Session session = NewHibernateUtil.getSessionFactory().getCurrentSession();
Transaction tx = session.beginTransaction();
Query q = session.createQuery(""
+ "SELECT COUNT(entity) "
+ "FROM "
+ "UserCatalog entity "
+ "WHERE "
+ "entity.username = :uname "
+ "AND "
+ "entity.password = MD5(:pass) "
+ "AND "
+ "entity.active = TRUE "
+ "");
q.setParameter("uname", username);
q.setParameter("pass", password);
List list = q.list();
tx.commit();
if (Integer.parseInt(list.get(0).toString()) == 0) {
return false;
}
return true;
}
/**
* @return the password
*/
public String getPassword() {
return password;
}
/**
* @param password the password to set
*/
public void setPassword(String password) {
this.password = password;
}
/**
* @return the username
*/
public String getUsername() {
return username;
}
/**
* @param username the username to set
*/
public void setUsername(String username) {
this.username = username;
}
}
but the ajax status doesn’t seem to appear.
note: all methods are working correctly and it takes at least 2 seconds to show the target page. I can see on my google chrome browser tab the loading circle when I click the command button. but not the ajax status. It only works when I place an ajax status tag to every page (even w/o global=”true” attribute) but it kills the purpose of template and I have lots of xhtml pages w/ command buttons.
Any content of
<ui:insert>in the template master becomes the default content whenever the template child does not declare any<ui:define>for that. You need to put the ajax status content outside the<ui:insert>if you intend to have it on every template child, also the ones which have<ui:define>declared fortop.See also: