我无法确定将数据从 Java 支持/托管 bean 传递到 jQuery/Javascript 组件(例如 Highcharts)的最佳方法，以便我的网络应用程序以动态、实时的方式生成/显示数据。我在 Java 方面非常扎实，但我对 JavaScript/jQuery 的了解非常有限，这显然是我失败的地方。据我所知，最好的方法是在我的网络应用程序上对一个隐藏字段进行 Ajax 化并传递一个 JSON 对象或字符串？进入它，然后将该值传递到我的 JS 组件中。
首先，这似乎有点费力，因为我需要一个 Ajax 调用来更新 JSON 数据，然后调用 setInterval 将数据重新读取到 JS 组件中？我希望我可以将数据直接传递到 JS 组件中......
无论哪种方式，如果与上述不同，有人可以巩固我的知识并告诉我一个经过实践检验的好方法...指南/演示也将受到极大的赞赏!!
如果这会影响建议的方法，我也使用 Primeface 的 2.2.1？
干杯
盟友
更新:
代码在下面，但我只想描述我想要快速实现的目标:实际上，我正在尝试实现一个动态 Highcharts 图表，使用我的支持 bean 中的一个简单的 count++ 函数。显然，我将进一步使用实时提要来提供此数据，但目前我只是试图让 Highcharts 根据来 self 的 JSF 支持 bean 的信息变化来工作。
这是我的简单计数函数和到 JSON 的转换(我不确定 JSON 方法是否真的有必要，因为只传递了 1 个值(int)，但我想保留这个方法，因为我确信我会在网络应用程序的其他部分更广泛地使用):
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 外部 JS 文件，再次值得注意的是，在我开始附加从 JSF Beans 获得的值之前，我在图表底部维护了系列函数以构建/填充图表:
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;
})()
}]
});
});
以及我的 XHTML 页面上的内联 JS 函数:
这个有效:
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
}
但是当我尝试传递我的 bean 值时:
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
}
那行不通...
此外，我一直在尝试使用 remoteCommand 和 Poll 来使图表正常工作，但我都没有成功:
<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>
正如我在 Bhesh 之前说过的，非常感谢您的帮助，如果再提供帮助就太好了!
干杯
盟友
最佳答案
如果您使用的是 PrimeFaces 2.2.1，那么应该很容易实现您的目标。
PF 有一个组件 p:remoteCommand，您可以使用它 Ajaxicaly 调用托管 bean 方法。
<h:form id="frmIrsChartData">
<p:remoteCommand name="fetchChartData"
action="#{chartManagedBean.prepareChartData()}"
oncomplete="updateChartData(xhr, status, args);"/>
</h:form>
在 prepareChartData() 方法中，您生成 JSON 字符串并使用 PF 提供的 RequestContext 将其发送回客户端:
public void prepareChartDate() {
// Produce you JSON string (I use Gson here)
RequestContext reqCtx = RequestContext.getCurrentInstance();
reqCtx.addCallbackParam("chartData", jsonString);
}
并且在 Javascript 回调函数 updateChartData(xhr, status, args) 中，您可以处理 JSON 响应并加载到图表中:
function updateChartData(xhr, status, args) {
var jsonResponse = args.chartData;
//parse it, process it and load it into the chart
}
要定期更新图表，只需使用 Javascript setInterval 或 setTimeout 并传递 remoteCommand 的 name > 这实际上是一个 Javascript 函数。
setInterval("fetchChartData()", 5000);
我就是这样做的。
PF 还有另一个组件 p:poll 可以更容易地实现实时图表。
更新:
你错了。在
您需要做的是先在文档就绪的情况下渲染图表，然后开始轮询。
$(document).ready(function() {
chart = new Highcharts.Chart({
//....
});
// start your poll here
});
p:poll 回调函数 updateChartData(xhr, status, args) 需要是全局的，以便轮询可以在 oncomplete 上调用它事件。
function updateChartData(xhr, status, args) {
var jsonResponse = args.chartData;
//parse it, process it and load it into the chart
//you will load data into the same chart created in document-ready
}
当您使用轮询时，您不需要 setTimeout 或 setInterval。
更新 2:
首先，在 updateChartData 函数中，您应该更新您创建的 chart:
function updateChartData(xhr, status, args) {
var series = chart.series[0]; // <--- no more this instead global variable "chart"
var newData = args.chartData;
var x = (new Date()).getTime()
var y = eval('(' + newData + ')');
series.addPoint([x, y], true, true);
}
接下来，updateChartData是回调函数所以不要自己调用它，每次请求完成时由remote-command调用。
并且，给远程命令一个单独的形式:
<h:form>
<p:remoteCommand name="fetchChartData"
action="#{testBean.prepareChartDate()}"
oncomplete="updateChartData(xhr, status, args);"/>
</h:form>
注意 oncomplete="updateChartTest(xhr, status, args);" 在你的代码中回调函数应该是 updateChartTest 而不是 updateChartTest.
图表加载完成后触发ajaxical轮询:
events: {
load: function() {
setInterval("fetchChartData()", 5000); //update the chart every 5 seconds
}
}
仅用于测试，尝试从您的托管 bean 返回一个随机值:
public void prepareChartDate() {
// Produce you JSON string (I use Gson here)
RequestContext reqCtx = RequestContext.getCurrentInstance();
reqCtx.addCallbackParam("chartData", new Random().nextInt(500));
}
关于javascript - 将数据从 Java/JSF2 bean 传递到 Javascript/jQuery 组件作为返回值的最佳方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7930047/