2014-10-20 69 views
0

我正在開發一個帶有HTML5畫布的網頁,它將在實時儀表板中呈現,因爲我使用ManagedBean來返回它們的值,我的頁面有一個在JavaScript中開發的組件,其變量被聲明爲全局的,並且每3秒應該更新其值,通過Primefaces的pool,但它不會發生,代碼在頁面呈現後僅執行一次,如可在以下由primefaces生成的代碼中看到的:如何在支持Bean中使用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> 

回答

0

的解決方案是:

  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); 
    
  2. 在輔助Bean,使用RequestContext.addCallbackParam返回值到oncomplete中使用的JavaScript功能,p:poll的那麼多,作爲p:remoteCommand

    塞汀輔助Bean返回JavaScript函數:

    Managed 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中的回報:

    JS

    function handleComplete(xhr, status, args) { 
        var nomeDoAtributo = args.nomeDoAtributo; 
    
        // Atualizar UI 
        gauge.setValueAnimated(nomeDoAtributo); 
    } 
    
相關問題