简体   繁体   English

使用IceFaces加载Ajax样式

[英]Ajax style loading with IceFaces

I have a page on which I show a list of objects which are loaded from a webservice. 我有一个页面,其中显示了从Web服务加载的对象的列表。 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. 现在,我想以Ajax方式进行操作,首先显示页面,然后加载列表。 While the list is loading a animated should be shown. 在加载列表时,应显示动画。 Can anybody give me an example how to do that with JSF/ICEFaces? 谁能给我一个例子,说明如何使用JSF / ICEFaces做到这一点? Thanks. 谢谢。

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. 在Managed Bean的构造函数中,我正在调用一个创建并启动新线程的方法。 This thread loads the objects. 该线程加载对象。 As soon as the objects are there the 'loading' flag of my bean is set to false and 对象一到位,我的bean的“正在加载”标志就会设置为false,

PersistentFacesState.getInstance().renderLater();   

is called. 叫做。 'loading' is initially set to false. “ loading”最初设置为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 would be better to use the SessionRenderer. 最好使用SessionRenderer。 Have a look at my ICEfaces book examples ( http://icecube-on-icefusion.googlecode.com/ ) and search for the progressDialog tag for an example. 看看我的ICEfaces图书示例( http://icecube-on-icefusion.googlecode.com/ ),然后搜索progressDialog标签以获取示例。 Or page 244ff in the book. 或本书第244ff页。

It is strongly discouraged to create new threads in a J2EE server. 强烈建议不要在J2EE服务器中创建新线程。 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. 您可以在加载页面时要求使用ajax提交icefaces表单,这可以解决问题。

i think i have answer for this question, because i have the same trouble about ajax style loading.. 我想我已经回答了这个问题,因为我对ajax样式加载也有同样的麻烦。

after lurking in many sites and icefaces forum, i have this code, without using thread: 潜入许多站点和icefaces论坛后,我有了这段代码,而没有使用线程:

first you have to download jquery, and then the code is like this: 首先您必须下载jquery,然后代码如下:

<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, 基本思想很简单,每个ajax调用只需要显示弹出窗口div,每收到一次来自icefaces js的确认,您都必须隐藏弹出窗口,

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.. 然后,每次执行ajax请求时,将显示您的弹出窗口,如果ajax停止,则您的弹出窗口将被隐藏。

hope this help..thanks 希望这个帮助..谢谢

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM