如何使用p:MenuBar显示p:ajaxStatus

how to be displayed p:ajaxStatus with p:MenuBar?

本文关键字：ajaxStatus 显示 MenuBar 何使用      更新时间：2024-01-14

我有一个名为mwnubar.xhtml的xhtml页面。这里有p:menuBar。当我单击一个p:menuitem，它正在导航到一个页面。当页面加载时，我同时从一个页面传递到另一个页面，它显示为空页面，我希望当我单击p:menuitem时必须显示ajaxStatus，并显示消息"页面正在加载，请稍候"。如何用菜单栏显示消息"页面正在加载，请稍候"？

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

我需要的（点击p:menuItem时显示"页面正在加载，请稍候"消息和p:ajaxStatus）是更改"menubar.xhtml"还是"layout.xhtml"？

您的问题在本页中回答了"一半"：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>

Bean示例：

@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;
    }
}

我发现了这个问题，但我认为可以找到更好的解决方案。在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:groll在"layout.xhtml"中）

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

对不起我的英语，如果有人有更好的想法，请分享！，谢谢

相关文章：