javascript - 如何在由支持 bean 管理的进度条上设置 JS 效果？

Question

我有

<h:form id="form">
    <p:progressBar id="pbAjax" value="#{backingBean.value}" labelTemplate="{value} %"/>
    <p:poll listener="#{backingBean.updateValue()}" update="pbAjax"/>
</h:form>

还有

@ManagedBean
public class BackingBean implements Serializable {
    private Integer value;

    @PostConstruct
    public void init(){
        this.value = (int)Math.round(Math.random()*10);    
    }

    public Integer getValue(){
        this.value = (int)Math.round(Math.random()*10);    
        return value;
    }

    public void setValue(Integer value){
        this.value = value;
    }

    public void updateValue(){
        this.value = (int)Math.round(Math.random()*5);
    }
}

进度条工作正常。

现在我想实现“缓入”效果。由于值随支持 bean 上的 Ajax 请求而不是 Javascript 函数而变化，因此如何在进度条上放置 javascript 效果，或“拦截”XHR 响应以在更新之前在 Javascript 中应用“缓入”效果组件？

如果有帮助，我会看到这种 Ajax 响应:

<?xml version='1.0' encoding='UTF-8'?>
<partial-response id="j_id1">
    <changes>
        <update id="form:j_idt40:18:pbAjax">
            <![CDATA[
                <div id="form:j_idt40:18:pbAjax" class="ui-progressbar ui-widget ui-widget-content ui-corner-all">
                    <div class="ui-progressbar-value ui-widget-header ui-corner-all" style="display:block;width:9%">
                    </div>
                    <div class="ui-progressbar-label" style="display:block">
                        9 %
                    </div>
                </div>
                <script id="form:j_idt40:18:pbAjax_s" type="text/javascript">
                    $(function() PrimeFaces.cw(
                        "ProgressBar",
                        "widget_form_j_idt40_18_pbAjax",    
                            {
                                id:"form:j_idt40:18:pbAjax",
                                initialValue:6,
                                ajax:false,
                                labelTemplate:"{value} %"
                             }
                         );
                     });
                </script>
            ]]>
        </update>
        <update id="j_id1:javax.faces.ViewState:0">
            <![CDATA[-1946172786751610988:-1619424769397867671]]>
        </update>
    </changes>
</partial-response>

感谢您的帮助。

Answer 1

通过上面显示的设置，以下解决方案有效。

1. 我已在托管 Bean 中将“更新”方法设置为静态。

   public static Integer updateValue(){
       return (int)Math.round(Math.random()*5);
   }
   

2. 在响应正文中使用静态方法的内容创建了一个 servlet。

   @WebServlet(name = "ProgressBarServlet", urlPatterns = ("/ProgressBarServlet"})
   public class ProgressBarServlet extends HttpServlet {
   
   protected void processRequest(HttpServletRequest request, HttpServletResponse response) 
   throws ServletException, IOException {
       response.setHeader("Cache-Control", "no-cache");
       response.setHeader("ProgressBarUpdate", "no-cache");
       PrintWriter out = response.getWriter();
       out.print(BackingBean.updateValue()+"");
   }
   
   @Override
   protected void doGet(HttpServletRequest request, HttpServletResponse response)
       throws ServletException, IOException {
       processRequest(request, response);
   }
   

3. 在 servlet url 上创建了循环 XHR 请求。

    <script type="text/javascript">
           setInterval(function () {
                   testAjax("ProgressBarServlet");
           }, 5000);
   
           function testAjax(servletURL) {
                   var xmlhttp;
                   if (window.XMLHttpRequest) {
                       xmlhttp = new XMLHttpRequest();
                   }
                   else {
                       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                   }
                   xmlhttp.open("GET", servletURL, true);
                   xmlhttp.onreadystatechange = function() {
                       if (xmlhttp.readyState === 4) { 
                           if (xmlhttp.status === 200) {
                               PF('pbAjax').setValue(xmlhttp.responseText);
                           }    
                           else {
                               PF('pbAjax').setValue("Error");
                           }
                       }
                   };
                   xmlhttp.send(null);
            }
   </script>
   

因此进度条的值是使用 PrimeFaces Javascript 设置的，并且具有缓入效果。

虽然它可能不是更新组件的最有效方法，但此解决方案对于一个或几个组件可能很有用。

这与我的情况无关，因为我有一个 p:dataTable，每行都有一个进度条，并且无法将生成的 id 链接到 Javascript。