Loading Indicator Page Full Refresh in XPages

One of my XPages there are mo many design elements. The page takes time to load more than expected according to connection speed. I would like to create an indicator to show the logged user "The page is loading"... I made it for partial refresh and it works great but i couldn't make it for full refresh. I have been looking for a solution for this. I can try jquery, dojo or ajax.

Any suggestion is important. Regards C.A.

回答1:

I've not yet made a dedicated NotesIn9 show for it yet, but I do a demo of a technique in this TLCC webinar.
https://www.youtube.com/watch?v=jBaRSM9Ng_o&index=3&list=PL9nOJ-QrsuFa00dOsdE6EDh_l2fkiYD0D The relevant part starts around the 26 minute part.

I'm doing this on loading the page initial but I'm sure could be adapted for a full refresh if you were already on the page.

The basic concept is on page load you don't actually load any long running data. You just sent the shell of the page and then in the onClientLoad event you trigger a partial refresh.

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

That's a demo page. The stuff to look at is for dojo resources that are added, the fact that I start off hiding the "MainContent" vie a scoped variable and then the end onClientLoad bit.

So the page loads, but the data to generate the repeat control does NOT run because it's in a non rendered panel. So the users get to the page instantly. Then the onClientLoad kicks - on Start it shows a "Please Wait" kind of thing then runs the function to get the data. When the data is completed, I set a scopedVariable to then show the mainContent area and the endAjaxLoading stuff then triggers and everything gets displayed.

回答2:

How you do this will not be XPages-specific. It's important to understand the order of events.

User clicks link somewhere to open page
Browser sends request to server
Server receives request and loads component tree for page server-side
Server runs beforePageLoad, afterPageLoad, beforeRenderResponse events
Server generates HTML to send to the browser
Server runs afterRenderResponse event
Server passes resulting HTML to the screen
Browser receives response from server

So adding anything to the XPage that is the target of the browser request at step 2 cannot have an effect. You need to do something client-side at step 1, before the request is sent to the browser. If you think about how you did it for the partial refresh and what's happening, again it's running CSJS before triggering the partial refresh, the same process.

If users are coming externally, the only option is to send them to a redirect web page first, render that, and continue programmatically running step 1.