如何在 Backing Bean 中使用 Primefaces 回调？答案

【问题标题】：How to use Primefaces Callback in Backing Bean?如何在 Backing Bean 中使用 Primefaces 回调？
【发布时间】：2014-10-20 18:06:07
【问题描述】：

我正在开发一个带有 HTML5 画布的网页，它将显示在实时仪表板中，因为我使用 ManagedBean 来返回它们的值，我的页面有一个用 JavaScript 开发的组件，其变量声明为全局，并且每 3 秒应该通过 Primefaces 的 pool 更新它的值，但它不会发生，代码在页面渲染后只执行一次，如下面的 primefaces 生成的代码所示：

<script id="j_idt2:j_idt3_s" type="text/javascript">
    $(function() {
        PrimeFaces.cw("Poll", "widget_j_idt2_j_idt3", {
            id: "j_idt2:j_idt3",
            widgetVar: "widget_j_idt2_j_idt3",
            frequency: 2,
            autoStart: true,
            fn: function() {
                PrimeFaces.ab({
                    s: 'j_idt2:j_idt3',
                    f: 'j_idt2',
                    u: 'j_idt2',
                    d: 3,
                    onco: function(xhr, status, args) {
                        radial1.setValueAnimated(36.16220080628247);
                    }
                });
            }
        });
    });
</script>

如何通过ManageBean的方法在JavaScript中调用一个有时间间隔的JavaScript方法来设置我的对象的值？

<body onload="init()">
    <h:outputScript library="primefaces" name="jquery/jquery.js" />

    <h:form>
        <p:poll oncomplete  =   "radial1.setValueAnimated(#{mBeanTesteIsolado.teste})" listener="#{mBeanTesteIsolado.teste}" 
                autoStart   =   "true"
                delay       =   "3"
                update      =   "@form"
        />              

        <table>

            <tr>
                <td width="100%">
                    <canvas id="canvasRadial1" width="200" height="200">
                        No canvas in your browser...sorry...
                    </canvas>
                </td>
            </tr>

        </table>


    </h:form>

</body>


<script type="text/javascript">

     var radial1;

    function init()
    {
        // Define some sections
        var sections = Array(steelseries.Section(0, 25, 'rgba(0, 0, 220, 0.3)'),
                             steelseries.Section(25, 50, 'rgba(0, 220, 0, 0.3)'),
                             steelseries.Section(50, 75, 'rgba(220, 220, 0, 0.3)'));

        // Define one area
        var areas = Array(steelseries.Section(75, 100, 'rgba(220, 0, 0, 0.3)'));


        // Initialzing gauge
        radial1 = new steelseries.Radial('canvasRadial1', {
                                         gaugeType: steelseries.GaugeType.TYPE1,
                                         section: sections,
                                         area: areas,
                                         titleString: 'Title',
                                         unitString: 'Unit',
                                         threshold: 50,
                                         lcdVisible: true
                            });

        // O método abaixo deve ser executado eternamente, como sugerido usando pool, mas o fato de estar em uma função JavaScript
        // aparentemente não é possível
        gauge.setValueAnimated(#{mBeanTesteIsolado.teste});
    }
</script>

【问题讨论】：

标签： javascript html jsf primefaces

【解决方案1】：

解决办法是：

使用 Primefaces p:poll primefaces 或 p:remoteCommand 调用支持 Bean action。

<p:poll autoStart="true" listener="#{mBeanTesteIsolado.teste}"
        oncomplete="handleComplete(xhr, status, args)" interval="3" />

或使用p:remoteCommand：

<p:remoteCommand name="atualizarUI" actionListener="#{mBeanTesteIsolado.teste}" oncomplete="handleComplete(xhr, status, args)" />

如果是p:remoteCommand，使用 setInterval 来调用时间：

setInterval(function() { atualizarUI(); }, 3000);

在 Backing Bean 中，使用 RequestContext.addCallbackParam 将值返回给 oncomplete 中使用的 JavaScript 函数，p:poll 的大部分内容为 p:remoteCommand。

设置Backing Bean返回Javascript函数：

托管 Bean

public void teste() {
    // Processamento necessário

    RequestContext context = RequestContext.getInstance();

    // Adiciona as variáveis para o JS (variável args da assinatura)
    context.addCallbackParam("nomeDoAtributo", "valor");
}

在 JavaScript 中处理返回：

function handleComplete(xhr, status, args) {
    var nomeDoAtributo = args.nomeDoAtributo;

    // Atualizar UI
    gauge.setValueAnimated(nomeDoAtributo);
}

【讨论】：