La meilleure méthode pour transmettre des Données à partir de Java/JSF2 fève de Javascript/jQuery Composants comme valeurs de retour

J'ai du mal à le clouer la meilleure méthode pour transmettre des données à partir d'un Java sauvegarde/managed bean à un jQuery/Javascript composant comme Highcharts, de sorte que mon application web produit/affiche les données dans une dynamique, en temps réel. Je suis assez solide sur mon Java côté des choses, mais j'ai une assez limité connaissance de JavaScript/jQuery qui est évidemment là où je suis en train de chuter. Pour autant que j'ai lu, le meilleur moyen est de Ajaxify un champ caché sur mon application web et de passer un objet JSON ou string? pour elle, puis passez cette valeur dans mon JS composant.

Tout d'abord cela semble un peu intensif en main d'œuvre que j'aurais un appel Ajax pour mettre à jour les données JSON et puis un setInterval appel à re-lire les données dans le JS composant? J'espérais que je pourrais transmettre les données directement dans le JS composant...

De toute façon, si quelqu'un pouvait juste raffermir mes connaissances et de me dire une bonne méthode éprouvée, si différente de ci-dessus... Guides/Demo serait également très apprécié!!

J'utilise aussi Primeface de l'2.2.1 si cela va affecter une méthode proposée?

Acclamations

Allié

Mise à JOUR:

Code est ci-dessous, mais je veux juste pour décrire ce que je suis en train de réaliser rapidement: Effectivement, je suis en train de mettre en œuvre une dynamique Highcharts graphique, à l'aide d'un simple count++ fonction de mon backing bean. Évidemment aller plus loin, je vais les utiliser en temps réel des flux de fournir ces données, mais pour le moment je suis juste essayer d'obtenir Highcharts de travail en fonction de l'évolution de mon JSF backing bean.

Voici mon simple fonction de comptage et de la conversion en JSON (je ne sais pas si la méthode JSON est vraiment nécessaire puisque seulement 1 valeur(int) est passé, mais je tiens à conserver cette méthode car je suis sûr que je vais être en utilisant plus largement sur d'autres parties de l'application web):

public class TestBean {

    private int output;

    public TestBean() {
        output = 1;
    }

    public int getOutput() {
        return output;
    }

    public void setOutput(int output) {
        this.output = output;
    }

    public void update() {
        setOutput(getOutput() + 1);
    }

    public void prepareChartDate() {
        //Produce you JSON string (I use Gson here)
        RequestContext reqCtx = RequestContext.getCurrentInstance();
        reqCtx.addCallbackParam("chartData", new Gson().toJson(output));
    }
}

Highcharts Fichier JS Externe, de nouveau, il est intéressant de noter que j'ai maintenu la série de fonction au bas de l'organigramme de construire/remplir le graphique avant de commencer l'ajout de valeurs obtenues à partir de la JSF Haricots:

Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
backgroundColor: "#F8F0DB",
renderTo: 'containerHigh',
defaultSeriesType: 'area',
margin: 10,
marginLeft:30,
marginBottom:17,
zoomType: 'y',
events: {
load: updateChartData
}
},
title: {
text: 'Feed Flow Rate '
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+ 
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: [0, 0, 0, 100],
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(2,0,0,0)']
]
},
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1                        
}
}
}
},
series: [{
name: 'Random data',
data: (function() {
//generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 10000,
y: 50 * Math.random()
});
}
return data;
})()
}]
});        
}); 

Et la JS inline Fonction de tenue sur ma page XHTML:

Cela fonctionne:

 function updateChartData(xhr, status, args) { 
var series = this.series[0];
setInterval(function() {            
var x = (new Date()).getTime()
y = 50 * Math.random();
series.addPoint([x, y], true, true);   
}, 1000)       
//parse it, process it and load it into the chart
}

mais quand j'essaie de passer mon haricot valeur:

 function updateChartData(xhr, status, args) { 
var jsonString = args.chartData
var series = this.series[0];
setInterval(function() {            
var x = (new Date()).getTime()
y = jsonString 
series.addPoint([x, y], true, true);   
}, 1000)       
//parse it, process it and load it into the chart
}

Qui ne fonctionne pas...

Aussi j'ai essayé les deux remoteCommand et de Sondage pour obtenir le graphique de travailler, ni de qui j'ai eu du succès avec:

 <h:form>                       
<p:commandButton value="update" action="#{testBean.update}" update="beanvalue"/> 
<h:outputText value="#{testBean.output}" id="beanvalue"/> <br />
<h:outputText value="#{testBean.output}" id="chartValue"/> <br />
<p:commandButton value="Load" type="button" onclick="fetchChartData();"/>
<p:remoteCommand name="fetchChartData"
action="#{testBean.prepareChartDate()}"
oncomplete="updateChartTest(xhr, status, args);"/>            
</h:form>

Comme je l'ai dit avant Bhesh, votre aide est très apprécié et de plus ce serait génial!

Acclamations

Allié

OriginalL'auteur Ally | 2011-10-28