JSF2、PrimeFaces 和 Highcharts - Ajax答案

【问题标题】：JSF2, PrimeFaces, and Highcharts - AjaxJSF2、PrimeFaces 和 Highcharts - Ajax
【发布时间】：2011-08-25 05:30:20
【问题描述】：

有人同时使用过 JSF2、PrimeFaces 和 Highcharts 吗？我真的很困惑我应该如何将所有这些放在一起，特别是关于从服务器获取数据以馈送到视图上的 Highcharts 以更新图表的 ajax 请求。

我现在拥有的是一个处理 Ajax 请求的 servlet，它使用 JQuery.ajax() 方法发送，并使用 JQuery 使用作为 JSON 对象接收的新数据来更新图表。我正在使用 GSon.toJSon 将 Java 对象转换为 JSON 对象。

我想在这里实现的是我想用 JSF2 替换那个 servlet。我不想使用不同的 servlet，而是想使用 JSF 并有一些支持 bean 来准备 JSON 对象并将其发送到客户端。

有人吗？

【问题讨论】：

标签： jsf-2 primefaces highcharts

【解决方案1】：

在下面的示例中，p:commandButton 启动 ajax 请求。您要使用的 JSON 对象可以存储在 h:inputHidden 字段中。当 p:commandButton 完成时，将调用 javascript 函数来更新图表。 javascript 函数将能够从 h:inputHidden 字段访问 JSON 对象。

xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">

    <h:head>
        <script type="text/javascript">           
            function dosomething() {
                var value = jQuery("#beanvalue").attr('value');
                alert(value);
            }
        </script>
    </h:head>
    <h:body>
        <h:form prependId="false" >
            <p:commandButton value="update" action="#{testBean.update}" update="beanvalue" oncomplete="dosomething();" />
            <h:inputHidden value="#{testBean.output}" id="beanvalue"  />
        </h:form>
    </h:body>
</html>

豆

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean
@ViewScoped
public class TestBean {

    private String output;

    public TestBean() {
        output = "1";
    }

    public void update() {
        output += "1";
    }

    public String getOutput() {
        return output;
    }

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

【讨论】：

这正是我们想要的。谢谢你，马克，你让我很开心。