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

Question

我的一个 XPage 有很多设计元素。根据连接速度，页面加载时间超过预期。我想创建一个指示器来显示已登录的用户 "The page is loading"...我将其用于部分刷新并且效果很好但我无法将其用于完全刷新。我一直在为此寻找解决方案。我可以试试 jquery、dojo 或 ajax。

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

Answer 1

执行此操作的方式与 XPage 无关。了解事件的顺序很重要。

用户点击link某处打开页面
浏览器向服务器发送请求
服务器接收请求并为页面服务器端加载组件树
服务器运行 beforePageLoad、afterPageLoad、beforeRenderResponse 事件
服务器生成HTML发送给浏览器
服务器在 RenderResponse 事件后运行
服务器将结果 HTML 传递给屏幕
浏览器收到服务器的响应

因此，在步骤 2 中向作为浏览器请求目标的 XPage 添加任何内容都不会产生任何效果。在将请求发送到浏览器之前，您需要在步骤 1 中在客户端执行一些操作。如果你想一下你是如何为部分刷新做的以及发生了什么，它又是运行 CSJS 在触发部分刷新之前，同样的过程。

如果用户来自外部，唯一的选择是先将他们发送到重定向网页，呈现该网页，然后以编程方式继续运行步骤 1。

Answer 2

我还没有为它制作专门的 NotesIn9 节目，但我在这个 TLCC 网络研讨会上做了一个技术演示。
https://www.youtube.com/watch?v=jBaRSM9Ng_o&index=3&list=PL9nOJ-QrsuFa00dOsdE6EDh_l2fkiYD0D 相关部分从26分钟左右开始。

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

基本概念是在页面加载时您实际上不会加载任何长运行ning 数据。您刚刚发送了页面的 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" vie 作用域变量然后结束 onClientLoad 位。

所以页面加载了，但是生成重复控件的数据没有运行因为它在一个未呈现的面板中。因此用户可以立即访问该页面。然后 onClientLoad 启动 - 在 Start 上显示 "Please Wait" 类的东西然后运行s 函数获取数据。数据完成后，我设置一个 scopedVariable 以显示 mainContent 区域，然后触发 endAjaxLoading 内容并显示所有内容。

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

Loading Indicator Page Full Refresh in XPages

loading

xpages