[SOLVED] Block entire page

Block entire page

When I change the page (page1 to page2) exists some delay and it is possible to click other buttons and these actions go run. So I would like to block the page during the waiting time for loading the following page, how do I?

I use jsf2 and primefaces.

At this time already tested blockUI and blockUI-extensions -> not work

Solution

You should tell us. Why p:blockUI is not work?

Try this. It is work.

page1.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <f:facet name="first">
            <meta http-equiv="Content-Type" 
                  content="text/html; charset=UTF-8" />
            <meta name="viewport" 
                  content="user-scalable=no, 
                  width=device-width, 
                  initial-scale=1.0, 
                  maximum-scale=1.0"/>
        </f:facet>

        <title>page1</title>
    </h:head>

    <h:body id="bodyView">
        page1
        <h:form id="form1">
            <p:editor id="editor" 
                      widgetVar="editorWidget" 
                      width="600" />
        </h:form>
        <h:form id="form2">
            <p:blockUI block=":bodyView" 
                       widgetVar="bui"/>
            <p:commandButton id="redirect" 
                             value="go to page2" 
                             onclick="PF('bui').show();"
                             actionListener="#{blockView.redirect}"/>
        </h:form>
    </h:body>
</html>

page2.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <f:facet name="first">
            <meta http-equiv="Content-Type" 
                  content="text/html; charset=UTF-8" />
            <meta name="viewport" 
                  content="user-scalable=no, 
                  width=device-width, 
                  initial-scale=1.0, 
                  maximum-scale=1.0"/>
        </f:facet>

        <title>page2</title>
    </h:head>

    <h:body>
        <h:form>
            page2
        </h:form>
    </h:body>
</html>

MangedBean

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

/**
 *
 * @author Wittakarn
 */
@ViewScoped
@ManagedBean(name = "blockView")
public class BlockView implements Serializable{
    public void redirect(ActionEvent event){
        try {
            Thread.sleep(4000);
            FacesContext.getCurrentInstance().getExternalContext().redirect("page2.xhtml");
        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }
}