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
Vous devez vous connecter pour publier un commentaire.
Si vous utilisez PrimeFaces 2.2.1 ensuite, il devrait être assez facile à réaliser ce que vous essayez de faire.
PF a une composante
p:remoteCommand
avec lequel vous pouvez Ajaxicaly invoquer un managed-bean méthode.Et dans la méthode
prepareChartData()
vous produire votre chaîne JSON et l'utilisationRequestContext
fournis par PF pour le renvoyer au client:Et dans le Javascript de la fonction de rappel
updateChartData(xhr, status, args)
vous pouvez traiter la réponse JSON et charger la carte:Et de mettre à jour périodiquement le graphique suffit d'utiliser le Javascript
setInterval
ousetTimeout
et passer lename
de laremoteCommand
qui est en fait une fonction Javascript.C'est comment je le fais.
PF a aussi un autre composant
p:poll
ce qui le rend plus facile à mettre en œuvre en direct, des graphiques.Mise à jour:
Vous vous êtes trompé. Sur
Ce que vous devez faire est sur le document prêt pour rendre le graphique en premier et ensuite commencer à vous sondage.
La
p:poll
fonction de rappelupdateChartData(xhr, status, args)
doit être globale, de sorte que le sondage peut appeleroncomplete
événement.Et quand vous êtes à l'aide de sondage vous n'avez pas besoin de la
setTimeout
ousetInterval
.Mise à jour 2:
Tout d'abord, dans
updateChartData
de la fonction vous êtes censé mettre à jour lechart
que vous avez créé:Prochaine,
updateChartData
est fonction de rappel afin de ne pas appeler vous-même, il est appelé par la distance-commande à chaque fois que la demande est complète.Et de, donner à distance-commande un formulaire distinct de lui-même:
Note dans
oncomplete="updateChartTest(xhr, status, args);"
dans votre code, la fonction de callback doit êtreupdateChartTest
au lieu deupdateChartTest
.Déclencher la ajaxical d'interrogation après le tableau est fait de chargement:
À des fins de test, en essayant de retourner une valeur aléatoire de vous managed-bean:
Toute chance vous pourriez montrer la structure ou de donner un exemple pour vous les données JSON et la façon dont vous avez la charge qui en HighCharts? J'ai ce que vous avez écrit ci-dessus, mais son chargement dans highcharts j'ai encore de la difficulté à... je ne sais pas si sa ce que je suis en train de passer dans ou comment je suis en train de le charger dans!
Pouvez-vous poster le code que vous avez?
bien à peu près comme vous l'avez posté ci-dessus à l'exception de la gi à l'aide d'un sondage: <p:intervalle de sondage="10" listener="#{testBean.mise à jour}" update="beanvalue" oncomplete="fetchChartData();"/> ... j'ai aussi ajouté une alerte de mon script donc toutes les 10 secondes, je vois ma chaîne de mise à jour. Pour le moment je ne suis qu'en essayant de passer dans mon 'Y' valeur de l'axe de la chaîne, en gardant l'axe des x: var x = (new Date()).getTime(), mais comme je l'ai dit il ma méthode d'essayer de transmettre mes valeurs dans le Highcharts fichier JS je pense que c'est complètement faux!
Alors, êtes-vous recevoir le JSON correctement dans votre
fetchChartData();
? Si oui, alors merci de poster votre code JS (Highcharts) et pas dans un commentaire, mettre à jour votre post original.OriginalL'auteur Bhesh Gurung