加载指示器页面在 XPages 中完全刷新

我的 XPage 之一有很多设计元素。根据连接速度，页面加载时间超出预期。我想创建一个指示器来显示登录用户“页面正在加载”...我将其用于部分刷新，效果很好，但我无法使其进行完全刷新。我一直在寻找解决方案。 我可以尝试 jquery、dojo 或 ajax。

任何建议都很重要。 问候 C.A.

我还没有为此制作专门的 NotesIn9 演示，但我在这个 TLCC 网络研讨会中做了一个技术演示。
相关部分在26分钟左右开始。

我在初始加载页面时执行此操作，但我确信如果您已经在页面上，则可以进行完全刷新。

基本概念是在页面加载时，您实际上并不加载任何长时间运行的数据。您刚刚发送了页面的 shell，然后在 onClientLoad 事件中触发部分刷新。

<xp:this.resources>
    <xp:script src="/xpUtilities.jss" clientSide="false"></xp:script>
    <xp:dojoModule name="extlib.dijit.ExtLib"></xp:dojoModule>
    <xp:dojoModule name="extlib.dijit.Loading"></xp:dojoModule>
    <xp:styleSheet href="/app.css"></xp:styleSheet>
</xp:this.resources>
Page 1


<xp:this.beforePageLoad><![CDATA[#{javascript:viewScope.put("vsHasData", false);}]]></xp:this.beforePageLoad>
&#160;&#160;-&#160;&#160;Header UI goes here....<xp:br></xp:br>
<xp:br></xp:br>

<xp:br></xp:br>

<xp:panel id="MainContentWrapper">
<xp:panel id="MainContent">

    <xp:this.rendered><![CDATA[#{javascript:return viewScope.get("vsHasData");}]]></xp:this.rendered>
    <xp:br></xp:br>

    <xp:repeat id="repeat1" rows="100" var="rowData"
        indexVar="rowIdx">
        <xp:this.value><![CDATA[#{javascript:viewScope.get("vsStateMap").keySet()}]]></xp:this.value>
        <xp:text escape="true" id="computedField2"
            value="#{rowData}">
        </xp:text>
        -
        <xp:text escape="true" id="computedField3">
            <xp:this.value><![CDATA[#{javascript:viewScope.get("vsStateMap").get(rowData)}]]></xp:this.value>
            <xp:this.converter>
                <xp:convertNumber type="number"
                    integerOnly="true">
                </xp:convertNumber>
            </xp:this.converter>
        </xp:text>
        <xp:br></xp:br>
    </xp:repeat>
    <xp:br></xp:br>
    <xp:br></xp:br>
</xp:panel>
</xp:panel>
<xp:eventHandler event="onClientLoad" submit="true" refreshMode="partial" refreshId="MainContentWrapper">
    <xp:this.action><![CDATA[#{javascript:return getStateTotals();}]]></xp:this.action>
    <xp:this.onStart><![CDATA[XSP.startAjaxLoading("Calculating State Totals. This may take a few moments.")]]></xp:this.onStart>
    <xp:this.onComplete><![CDATA[XSP.endAjaxLoading()]]></xp:this.onComplete>
    <xp:this.onError><![CDATA[XSP.endAjaxLoading()]]></xp:this.onError>
</xp:eventHandler>

那是一个演示页面。需要注意的是添加的 dojo 资源，事实上，我首先隐藏“MainContent”（通过作用域变量），然后隐藏 onClientLoad 位。

因此，页面会加载，但生成重复控件的数据不会运行，因为它位于未呈现的面板中。这样用户就可以立即到达该页面。然后 onClientLoad 启动 - 在 Start 上它显示“请稍候”之类的内容，然后运行该函数以获取数据。 数据完成后，我设置一个scopedVariable来显示mainContent区域和endAjaxLoading内容，然后触发并显示所有内容。