Question

我有一个名为 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>

我需要什么（单击p：menuItem时显示“正在加载请等待”的消息，p：ajaxStatus）是要更改“menubar.xhtml”还是“layout.xhtml”？

Answer 1

您的问题在此页面中得到了“一半”回答：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:layoutUnit>时，AJAX会更新中心<p:menuItem>。

页面示例：

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

Answer 2

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

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

如何用p：MenuBar显示p：ajaxStatus？

2 个答案: