如何使用 p:MenuBar 显示 p:ajaxStatus？答案

【问题标题】：how to be displayed p:ajaxStatus with p:MenuBar?如何使用 p:MenuBar 显示 p:ajaxStatus？
【发布时间】：2013-12-18 04:52:49
【问题描述】：

我有一个名为 mwnubar.xhtml 的 xhtml 页面。有p:menuBar。当我单击 p:menuitem ，它正在导航到一个页面。当页面加载时，我同时从一个页面传递到另一个页面，它显示为空页面，我想要点击p:menuitem 它必须显示 ajaxStatus 并带有消息“页面正在加载，请稍候”。如何使用 menuBar 显示消息“页面正在加载，请稍候”？

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:p="http://primefaces.org/ui">

<f:view contentType="text/html" beforePhase="#{loginView.checkLogin}">
       <p:ajaxStatus onstart="statusDialog.show();" oncomplete="statusDialog.hide();"/>
<p:dialog modal="true" widgetVar="statusDialog" resizable="false" position="center" header="Page is loading..Please wait"  width="250" draggable="false" closable="false">
</p:dialog>
    <h:head>

    </h:head>


  <h:body >
         <h:form id="menuForm">
        <p:menubar autoDisplay="true"  >
            <p:menuitem value="homepage" icon="dt dt18" 
                        url="index.jsf" /> 
            <p:submenu label="user actions"  icon="dt dt01"> 
                <p:menuitem  value="define user " 
                            url="defineuser.jsf"/>
             </p:submenu>

            <p:submenu label="#{etiketler.yapilandirmaIslemleri}" icon="dt dt03" > 
                <p:menuitem  value="#{etiketler.sablonIslemleri}"
                            url="sablonTanimlama.jsf"/>
                <p:menuitem  value="#{etiketler.sistemYapilandirma}"
                            url="sistemYapilandirma.jsf"
                            />
            </p:submenu>
      <p:menuitem  value="help"
                         icon="dt dt19" url="yardim.jsf"/>
            <p:menuitem  value="exit" icon="dt dt17"
                        url="logout.jsf" />                
  </p:menubar>
    </h:form>
   <p:growl id="messages"/>
         <ui:insert name="ajaxStaus">
        </ui:insert>
    </h:body>
</f:view>
</ui:composition>

实际上，上面提到的代码属于“menubar.xhtml”我想添加“layout.xhtml”页面，包括“menubar.xhtml”。

<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"
      xmlns:f="http://java.sun.com/jsf/core"
      >

    <script type="text/javascript" language="javascript">
        function goLogoutPage(pageName) {
            window.location = pageName;
        }

        function goPage(loc) {
            window.location = loc;
        }
    </script>

    <h:head>
        <title>
            <ui:insert name="title">NAME OF THE PROJECT</ui:insert>
        </title>
        <link rel="stylesheet" type="text/css" href="resources/css/tsmp.css"/>

    </h:head>
    <h:body>

        <f:view contentType="text/html" locale="#{localeBean.locale}" >

            <p:ajaxStatus onstart="waitDialog.show()" oncomplete="waitDialog.hide()"/>
            <p:dialog modal="true" resizable="false" widgetVar="waitDialog" header="PROCESSING...PLEASE WAIT " draggable="false" closable="false">
                <h:graphicImage value="resources/images/loading.gif"/>
            </p:dialog>

            <p:layout fullPage="true" >

                <p:layoutUnit position="north" size="112" collapsible="false" >
                    <div id="page-header" >
                        <div class="container content">
                            <h1>
                                <a>PROJECT A</a>
                            </h1>

                            <div class="login" >
                                <h:graphicImage value="resources/images/k.png"/>  
                                <h:outputLabel  value="NAME"/>

                            </div>
                        </div>
                    </div>

                    <ui:include src="/menubar.xhtml" />
                </p:layoutUnit>

                <p:layoutUnit  position="south" >
                    <ui:include src="/footer.xhtml" />
                </p:layoutUnit>

                <p:layoutUnit position="center" >

                    <p:growl id="msgs" life="8000" autoUpdate="true"/>

                    <ui:insert name="pageContent">
                    </ui:insert>
                </p:layoutUnit>



            </p:layout>
        </f:view>
      </h:body>
       </html>

我需要改变“menubar.xhtml”或“layout.xhtml”？

【问题讨论】：

标签： javascript ajax jsf primefaces xhtml

【解决方案1】：

我想出了这个问题，但我认为可以找到更好的解决方案。在 menubar.xhtml 中我以这种方式更改这部分代码；

    <h:form id="menuForm">

    <p:menubar autoDisplay="true"  >
     <p:menuitem value="homepage" icon="dt dt18" 
            action="index.jsf?faces-redirect=true" /> 
       ...
        ...             
    </p:menubar>
    </h:form>

而不是

     <h:form id="menuForm">

    <p:menubar autoDisplay="true"  >
    <p:menuitem value="homepage" icon="dt dt18" 
            url="index.jsf" /> 
           ...
           ...             
         </p:menubar>
          </h:form>

因此，layout.xhtml 中的 ajaxStatus 正在工作并且在 menubar.xhtml 中也可见但是 ajaxStatus 对话框隐藏得很快，尽管我改变了 p:growl 的生活（p:growl 在“layout.xhtml”中）

 <p:growl id="msgs" life="8000" autoUpdate="true"/>

对不起我的英语，如果有人有更好的主意，请分享！，谢谢..

【讨论】：

【解决方案2】：

您的问题在此页面中得到了“一半”的回答：http://stackoverflow.com/questions/15674244/dynamic-page-loading-using-uiinclude-is-initializing-beans-only-once

此外，您还可以在 PrimeFaces 展示中查看如何使用 <p:ajaxStatus> 组件。这真的很简单。看看这个：http://www.primefaces.org/showcase/ui/ajaxStatus.jsf

您需要做的是在<p:layout> 中组织整个页面，当您单击<p:menuItem> 时，AJAX 会更新中心<p:layoutUnit>。

页面示例：

<p:layout fullPage="true">
    <p:layoutUnit position="west">
        <h:form>
            <p:menu>
                <p:menuitem value="Page 1" action="#{navigationBean.changePage('page1')}" ajax="true" update=":main-content"/>
                <p:menuitem value="Page 2" action="#{navigationBean.changePage('page2')}" ajax="true" update=":main-content"/>
            </p:menu>
        </h:form>
    </p:layoutUnit>

    <p:layoutUnit position="center" >
         <h:panelGroup id="main-content">
              <ui:include src="#{navigationBean.page}.xhtml" />
         </h:panelGroup>
    </p:layoutUnit>
</p:layout>

豆示例：

@ManagedBean
@SessionScoped
public class NavigationBean {
    private String page;

    public String getPage() {
        return page;
    }

    public void setPage(String page) {
        this.page = page;
    }

    public void changePage(String page){
        this.page = page;
    }
}

【讨论】：