primefaces template ajax status

ajax templates jsf primefaces facelets

10,411

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 for 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>

borj

Updated on June 04, 2022

Comments

borj almost 2 years

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>

<?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.