Ajax style loading with IceFaces
I have a page on which I show a list of objects which are loaded from a webservice. This may take a while. Now I'd like to do it the Ajax way and first show the page and then load the list. While the list is loading a animated should be shown. Can anybody give me an example how to do that 开发者_如何转开发with JSF/ICEFaces? Thanks.
It would be better to use the SessionRenderer. Have a look at my ICEfaces book examples (http://icecube-on-icefusion.googlecode.com/) and search for the progressDialog tag for an example. Or page 244ff in the book.
Ok, solved it myself.
Here's how I'm doing it:
in the Managed Bean's constructor I'm calling a method which creates and starts a new thread. This thread loads the objects. As soon as the objects are there the 'loading' flag of my bean is set to false and
PersistentFacesState.getInstance().renderLater();
is called. 'loading' is initially set to false.
That's the method for loading the objects in async mode:
private void asyncLoading() {
final MyBackingBean bean = this;
final String userName = CallerContextUtil.getCurrentUserCompany();
new Thread() {
@Override
public void run() {
bean.setLoading(true);
PersistentFacesState.getInstance().renderLater();
load(userName );
bean.setLoading(false);
PersistentFacesState.getInstance().renderLater();
}
}.start();
}
On the view I'm showing or hiding an animated loading images on the state of the loading flag.
I don't know if that is the best or even a good solution. Comments are welcome.
It is strongly discouraged to create new threads in a J2EE server. It's server's job to manage threads.
You can ask for the submission of an icefaces form using ajax when your page is loaded, that should do the trick.
i think i have answer for this question, because i have the same trouble about ajax style loading..
after lurking in many sites and icefaces forum, i have this code, without using thread:
first you have to download jquery, and then the code is like this:
<script type="text/javascript" src="js/jquery-1.6.min.js"/>
<script type="text/javascript">
var j = jQuery.noConflict();
j(document).ready(function(){
j(".wrapper-popup-loading").hide();
});
function icesubmitlocal() {
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = j(".wrapper-popup-loading").height();
var popupWidth = j(".wrapper-popup-loading").width();
j(".wrapper-popup-loading").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
}).show();
j(".wrapper-popup-white").show();
}
function icereceivelocal() {
j(".wrapper-popup-loading").hide();
j(".wrapper-popup-white").hide();
}
function init() {
Ice.onSendReceive('document:body',icesubmitlocal,icereceivelocal);
}
</script>
<body onload="init()" id="outputBody1" style="-rave-layout: grid">
the basic idea is simple, every ajax call you just have to show the popup div, and every you receive confirmation from icefaces js, you just have to hide the popup,
the popup panel is like this:
<div class="wrapper-popup-loading"><!-- start wrapper -->
<div class="wrapper-popup-white"><!-- start wrapper -->
<center>
<img src="images/aed-popup.png" alt="" style="margin-top: 5px;"/>
<br />
<img src="images/aed-garuda.gif" alt="" style="margin-top: 5px;"/>
</center>
</div>
</div><!-- end footer -->
then, everytime ajax request on, your popup is show, and if ajax stop, your popup is hide..
hope this help..thanks
加载中,请稍侯......
精彩评论