如何制作包含全局使用的 ajax 状态的 primefaces 模板。
到目前为止，这就是我所做的。
template/default.xhtml(Facelets 模板)
<?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 模板客户端)
<?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>
登录 Controller .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;
}
}
但是ajax状态好像没有出现。
注意:所有方法都正常工作，至少需要 2 秒才能显示目标页面。单击命令按钮时，我可以在 google chrome 浏览器选项卡上看到加载圆圈。但不是ajax状态。它仅在我将 ajax 状态标记放置到每个页面(即使没有 global="true"属性)时才起作用，但它扼杀了模板的用途，并且我有很多带有命令按钮的 xhtml 页面。
最佳答案
<ui:insert>的任何内容每当子模板未声明任何 <ui:define> 时，主模板中的内容将成为默认内容为了那个原因。您需要将 ajax 状态内容放在 <ui:insert> 之外如果您打算在每个 子模板上使用它，还有那些具有<ui:define> 的子模板为 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 name="top">
Some default top content.
</ui:insert>
另见:
关于ajax - primefaces 模板 ajax 状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14022664/