Xpages: Loading…. (images and masking)

On November 10, 2009, in Uncategorized, by Mark Hughes

Sometimes for various reasons, clicking on links in in X-page, or refreshing a view or a page may take several seconds to complete. So that users do not keep clicking on the button, or think the browser is not working, i have added a “loading image” and a mask to show people that the page is working, just a little slow.

I hope someone shows me a better way to do this… but here is my attempt.

1. In the css file for the page add

<span style="color: rgb(0, 0, 255);">div</span><span style="color: rgb(204, 102, 51);">.loading</span> {<br />   <span style="color: rgb(0, 0, 255);">background-image</span>: url(ajax-loader<span style="color: rgb(204, 102, 51);">.gif</span>);<br />   <span style="color: rgb(0, 0, 255);">background-repeat</span>: no<span style="color: rgb(0, 96, 128);">-repeat;</span><br />   <span style="color: rgb(0, 0, 255);">background-position</span>: <span style="color: rgb(0, 96, 128);">center;</span><br />   <span style="color: rgb(0, 0, 255);">background-color</span>:<span style="color: rgb(0, 96, 128);">black;</span><br />}

2. Add a JavaScript library and name it loading, then add these lines

dojo.require(<span style="color: rgb(0, 96, 128);">'dijit.Dialog'</span>)<br /><br /><span style="color: rgb(0, 0, 255);">function</span> loading() {<br />   underlay = <span style="color: rgb(0, 0, 255);">new</span> dijit.DialogUnderlay({<span style="color: rgb(0, 96, 128);">'class'</span>: <span style="color: rgb(0, 96, 128);">'loading'</span>});<br />   underlay.show();<br />}<br /><span style="color: rgb(0, 0, 255);">function</span> stoploading(){<br />   underlay.hide()<br />   }

3. Insert the JavaScript library loading on the page under the resources section

Now to implement this in a button that does not do a “full update”

1. In the outline on the button expand the button and click on event handler, then clcik the all properties tab.

image

2. in the onStart event enter loading()

3. in the onComplete enter stoploading()

Now to implement this in a button that does a “full update”

1. In the onClick event, choose the client tab, then enter in loading()

image

Now to implement this in view column link

1. First we have to change how it open a document, click on the onClick event.

2. Create an action on the server side to execute a script.

3. set the script to:

doc = viewEntry.getDocument();<br />applicationScope.docid1 =  doc.getUniversalID();<br />

4. Create another action to open a new page, put in the page name to open, then edit document, then document id should be computed to

applicationScope.docid1

image

5. On the Client tab, enter in loading()

All of these will produce a mask covering the whole screen with a loading image in the middle like

image

image

 

3 Responses to Xpages: Loading…. (images and masking)

  1. Declan Lynch says:

    I had just implemented exactly this in an internal application and I was going to blog how to do it. Great minds and all that.

    When I saw the new events for the partial refreshes this was the first thing that entered my head.

  2. Nicholas Hopkins says:

    This is great, but can it be used without a click event, such as when first opening an xpage?

    My solution is to use bubbling.js in a custom control which fires off whenever a page open/refresh happens.

    Works well, but would rather use dojo than import all the yahoo stuff I am at the moment though.

  3. Gayathri says:

    Great sharing,. Keep blogging. Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *