使用 IceFaces 加载 Ajax 样式答案

【问题标题】：Ajax style loading with IceFaces使用 IceFaces 加载 Ajax 样式
【发布时间】：2011-01-14 17:07:21
【问题描述】：

我有一个页面，其中显示了从 Web 服务加载的对象列表。可能还要等一下。现在我想用 Ajax 的方式来做，首先显示页面，然后加载列表。当列表加载时，应该显示一个动画。谁能给我一个示例如何使用 JSF/ICEFaces 做到这一点？谢谢。

【问题讨论】：

【解决方案1】：

我想我有这个问题的答案，因为我在加载 ajax 样式时遇到了同样的问题..

潜伏在许多网站和icefaces论坛后，我有这段代码，没有使用线程：

首先你要下载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">

基本思路很简单，每次ajax调用你只需要显示弹出的div，每次收到icefaces js的确认，你只需要隐藏弹出，

弹出面板是这样的：

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

然后，每次 ajax 请求时，您的弹出窗口都会显示，如果 ajax 停止，您的弹出窗口会隐藏..

希望对您有所帮助..谢谢

【讨论】：

【解决方案2】：

强烈建议不要在 J2EE 服务器中创建新线程。管理线程是服务器的工作。

您可以在页面加载时要求使用 ajax 提交 icefaces 表单，这应该可以解决问题。

【讨论】：

如何询问“使用 ajax 提交 icefaces”？谢谢！
这个想法可以是在页面加载时提交的页面上放置一个隐藏表单。每个 JS 框架都有这样的特性（相当于 body onload="form.submit();"）。从这一点开始，就好像您通过表单提交请求了 ajax 刷新。这是非常基本的，可能不足以用于更复杂的情况，但它具有简单的优点。如果你想做更复杂的事情，最好使用rainwebs的方法，它似乎更符合ICEFaces的做法。

【解决方案3】：

最好使用SessionRenderer。查看我的 ICEfaces 书籍示例 (http://icecube-on-icefusion.googlecode.com/) 并搜索 progressDialog 标签以获取示例。或书中第 244 页。

【讨论】：

PersistentFacesState 有什么问题，是什么让 SessionRenderer 变得更好？我的方法可以解决哪些问题？它似乎工作......

【解决方案4】：

好的，我自己解决了。

这是我的做法：

在托管 Bean 的构造函数中，我正在调用一个创建和启动新线程的方法。该线程加载对象。一旦对象存在，我的 bean 的“加载”标志就会设置为 false 并且

PersistentFacesState.getInstance().renderLater();

被调用。 'loading' 最初设置为 false。

这就是异步加载对象的方法：

 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();      
        }

在我正在显示或隐藏加载标志状态的动画加载图像的视图上。

我不知道这是否是最好的，甚至是好的解决方案。欢迎评论。

【讨论】：