Question

我是jsf的新手，我正在使用Primefaces 4.0编写一个tabView。我想在点击特定标签时在我的Backing Bean中做一些事情，所以我尝试了这个：

页：

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

支持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...
            }
   }

到目前为止一切正常，但由于某种原因，Backing Bean很慢，我想在Backing Bean正在进行时显示一个包含进度条的Dialog：

像这样的对话：

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

那么，当我点击“统计”标签时，如何显示对话框？

Answer 1

解决方案可能是在对话框中使用visible属性：

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

在你的bean中：

private boolean showDialog;

public void displayDialog() {
    showDialog = true;
}

public boolean getShowDialog() {
    return showDialog;
}

然后

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

还要确保您的ajax组件更新对话框

Answer 2

你可以这样做：

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

我想我解决了这个问题。我在看到this thread之后使用了p:remoteCommand。

这是我的最终代码：

页：

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

豆：

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

无论如何，谢谢你们，Lamq和Emil Kaminski。在没有你帮助的情况下我永远找不到那个帖子，因为我从你的答案中输入了关键词。

如何在PrimeFaces的tabView中单击特定选项卡时显示Dialog

3 个答案: