Tuesday, November 10, 2009

Xpages: Loading…. (images and masking)

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

div.loading {
background-image: url(ajax-loader.gif);
background-repeat: no-repeat;
background-position: center;
background-color:black;
}




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

dojo.require('dijit.Dialog')

function loading() {
underlay = new dijit.DialogUnderlay({'class': 'loading'});
underlay.show();
}
function stoploading(){
underlay.hide()
}



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();
applicationScope.docid1 = doc.getUniversalID();



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

Declan Lynch said...

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.

Nicholas Hopkins said...

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.

Gayathri said...

Great sharing,. Keep blogging. Thanks.

Post a Comment