How to show Dialog while clicking a specific tab in tabView of PrimeFaces

Question

I'm new to jsf and I'm using Primefaces 4.0 to write a tabView. I want to do something in my Backing Bean when specific tab is clicked, so I tried this:

page:

<p:tabView effect="fade" effectDuration="normal">
            <p:ajax event="tabChange" listener="#{myConsoleBean.onTabChange}" update=":rightForm"/>

            <p:tab title="My">
            </p:tab>
            <p:tab id="statTab" title="Stat">
            </p:tab>
        </p:tabView>

Backing Bean:

public void onTabChange(final TabChangeEvent event) {
            TabView tv = (TabView) event.getComponent();
            int activeTabIndex = tv.getActiveIndex();
            System.out.println(activeTabIndex);
            if(activeTabIndex==1)//Stat tab clicked
            {                    
                //do something here...
            }
   }

Everything works till now,but the Backing Bean is slow for some reason,I want to show a Dialog which contains a progress bar while the Backing Bean is progressing:

Dialog like this:

<p:dialog id="pBarDialog" header="Progressing..." widgetVar="dlg" modal="true" height="70" resizable="false" closable="false">  
    <h:outputText value="Please wait, we're generating your info..." />  
    <p:progressBar widgetVar="pbAjax" ajax="true" value="100" styleClass="animated">     </p:progressBar>  
 </p:dialog>  

So, how can I show the dialog when I click the "Stat" tab?

Answer 1

I think I resolved this problem. I used p:remoteCommand after I saw this thread.

And here's my final codes:

Page:

            <p:tabView effect="fade" effectDuration="normal">
            <p:ajax event="tabChange" listener="#{myConsoleBean.onTabChange}" oncomplete="dlg.hide()" update=":rightForm"/>
            <p:tab title="My">

            </p:tab>
            <p:tab id="statTab" title="Stat">
                <p:remoteCommand actionListener="#{myConsoleBean.goToUrl('myStat.xhtml')}" update=":rightForm" name="showStat" global="true" onstart="dlg.show()" oncomplete="dlg.hide()"></p:remoteCommand>
            </p:tab>
        </p:tabView>

        <p:dialog id="pBarDialog" header="Progressing..." widgetVar="dlg" modal="true" height="70" resizable="false" closable="false">  
            <h:outputText value="Please wait, we are generating your info..." />  
            <p:progressBar widgetVar="pbAjax" ajax="true" value="100" styleClass="animated">  
            </p:progressBar>  
        </p:dialog>  

Bean:

 public void onTabChange(TabChangeEvent event) {
            TabView tv = (TabView) event.getComponent();
            int activeTabIndex = tv.getActiveIndex();
            if(activeTabIndex==1)
            {
                RequestContext.getCurrentInstance().execute("showStat()");
            }
   }

No matter how, thank you both,Lamq and Emil Kaminski. I will never find that thread without your help because I type key words from your answers.

Answer 2

You could do something like this :

public void onTabChange(TabChangeEvent event) {
    TabView tv = (TabView) event.getComponent();
    int activeTabIndex = tv.getActiveIndex();
    System.out.println(activeTabIndex);
    if(activeTabIndex==1)//Stat tab clicked
    {                    
        //do something here...
    }
    if(activeTabIndex==2){
        RequestContext.getCurrentInstance().execute("PF('dlg').show()"); //For Primeface 4.0
        RequestContext.getCurrentInstance().execute("dlg.show()"); //Before Primeface 4.0
    }
}

Answer 3

A solution could be to use the visible attribute on the dialog:

<p:dialog id="pBarDialog" header="Progressing..." visible="#{myConsoleBean.showDialog}"
    modal="true" height="70" resizable="false" closable="false">

In your bean:

private boolean showDialog;

public void displayDialog() {
    showDialog = true;
}

public boolean getShowDialog() {
    return showDialog;
}

And then

 if(activeTabIndex==1)//Stat tab clicked
            {                    
                myConsoleBean.displayDialog();
            }

Also be sure that your ajax components updates the dialog