How to implement a loading page in JSF 2.2

Question

I want to implement a loading page like gmail in my JSF web Application.

User enters login and password i take him to a simple page with progress bar (loading Application Page).
once the progress bar hits 100% the Application page is shown.

(hits 100% means that it gets progress value according to the progress of the initialization of the Application page).

Now, what do i really need to implement this, backing beans scopes, number of facelets, faces-config..

Additional info :

i'm using Primefaces 4.0
i'm using a WebFilter :

@WebFilter(filterName = "AuthFilter", urlPatterns = {"*.xhtml"}) to redirect the not connecetd user to the login page.

enter image description here

This is what I've tried so far but no luck (the application stops in the loading page).

login.xhtml backing bean userBean(session scoped).

userBean.doLogin()  ==> return "loaderPage";

loaderPage.xhtml no backing bean

<h:body>
    <p:progressBar widgetVar="pbAjax" ajax="true"
                   value="#{dyna.progress}"
                   labelTemplate="{value}%"
                   styleClass="animated">  
        <p:ajax event="complete" listener="#{userBean.onComplete}" />  
    </p:progressBar>  
</h:body>

dyna.progress <==this is located on the Application page backing bean (session scoped)

this is how i set the value on progress bar of loadingPage.xhtml

@ManagedBean(name = "dyna", eager = true)
@SessionScoped
@PostConstruct
public void init() {
    try {
        progress = 0;
        etatdateOptions = ListsMaker.getDateFilters();
        progress = 10;
        optionspatState = ListsMaker.getPatientStates();
        progress = 20;
        optionsCotpatState = ListsMaker.getPayementStates();
        progress = 30;
         ...}

This is the faces-config

<faces-config version="2.2"
          xmlns="http://java.sun.com/xml/ns/javaee"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_2.xsd">

<navigation-rule>
    <from-view-id>/loader.xhtml</from-view-id>
    <navigation-case>
        <from-action>#{userBean.oncomplete}</from-action>
        <to-view-id>/AppPlace.xhtml</to-view-id>
    </navigation-case>
</navigation-rule>

<navigation-rule>
    <from-view-id>/AppPlace.xhtml</from-view-id>
    <navigation-case>
        <from-action>#{dyna.killView}</from-action>
        <from-outcome>success</from-outcome>
          <to-view-id>/login.xhtml</to-view-id>
           <redirect>     
           </redirect>
       </navigation-case>
   </navigation-rule>

i thought its a clean and clear question though no one could answer. — Jalal Sordo
I wouldn't recommend to get JSF do the "progress" thing... I think you might need a client-side solution.. maybe like this gayadesign.com/diy/queryloader-preload-your-website-in-style — Hatem Alimam
I want to get the progress of the init method of the view scoped managed bean how would a client side solution help ? — Jalal Sordo

Manuel Manuel · Accepted Answer · 2014-03-25T17:49:29

Have a look at the solution Primefaces provides, namely ProgressBar. In your case I would not make the init() method @PostConstruct, I would call the init() method once the client is forwarded to the loaderPage.xhtml. From there on you can call getProgress().

How to implement a loading page in JSF 2.2

1 Answers