2

如何制作包含 ajax 状态以供全球使用的 primefaces 模板。

到目前为止,这就是我所做的。

模板/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>

登录控制器.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 页面。

4

1 回答 1

8

只要模板子级没有为此声明任何内容,<ui:insert>模板主控中的任何内容都会成为默认<ui:define>内容。<ui:insert>如果您打算将 ajax 状态内容放在每个模板子级上,您需要将其放在外部,也包括那些<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>

也可以看看:

于 2012-12-24T22:53:41.910 回答