带有JAX-RS和PrimeFaces的RESTful图表

通常，利用图表提供数据的可视表示很有用。 PrimeFaces提供制图解决方案，可轻松将数据的可视表示形式添加到Web和移动应用程序中。如果将PrimeFaces图表组件与RESTful Web服务数据结合使用，我们可以创建自定义图表，以适合桌面和移动设备。

在本文中，我将更新Java EE 7动手练习MoviePlex应用程序，以提供一个仪表板，我们可以在其中集成PrimeFaces图表组件。在本示例中，我们将创建一个图表，但是您可以利用本文帮助您以类似的方式构建更多图表。具体来说，我们将利用RESTful Web服务收集电影院的容量信息，并使用PrimeFaces条形图显示每个剧院的容量。

首先，请下载Java EE 7动手练习应用程序解决方案归档文件（如果尚未下载）。从那里，在NetBeans IDE中打开它。要创建这篇文章，我正在使用NetBeans 8.0.2。将项目导入到NetBeans中之后，通过右键单击项目并选择“运行”，将其部署到应用程序服务器（在我的情况下为GlasFish 4.1）。部署完成后，通过打开以下URL在浏览器中打开Theater Web服务：http：// localhost：8080 / ExploringJavaEE7 / webresources / theater /。该Web服务应产生一个与图1类似的清单。

图1：Theater Web Service XML

我们将利用此Web服务中的数据来提供仪表板小部件。首先创建后端代码，然后处理UI。首先，通过右键单击Source Packages，然后选择“ New…”->“ Java Packages”，创建一个名为org.glassfish.movieplex7.jsf的新软件包。接下来，通过右键单击该包并选择“ New…”->“ JSF Managed Bean”，创建一个JSF Managed Bean控制器，并将其命名为DashboardController 。让我们将控制器注释为@SessionScoped ，然后实现java.io.Serializable 。在此控制器中，我们将获取数据，并为仪表板构建模型。我们将首先使用JAX-RS客户端查询Web服务，然后将利用数据填充Theater对象的列表。因此，我们需要定义以下四个字段才能开始：

Client jaxRsClient;
// Typically not hard coded...store in a properties file or database
String baseUri = "http://localhost:8080/ExploringJavaEE7/webresources/theater/";private List<Theater> theaterList;
private BarChartModel theaterCapacityModel;

Client类型为javax.ws.rs.client.Client ，我们将通过调用javax.ws.rs.client.ClientBuilder来初始化类构造函数中的字段，如下所示：

public DashboardController() {jaxRsClient = ClientBuilder.newClient();
}

接下来，我们需要创建一种方法来加载数据，创建和配置模型。在我们的控制器中， init()方法基本上包含将任务委派给其他方法的实现。 init()方法的实现调用两个方法： loadData()和createTheaterCapacityModel() 。

public void init() {loadData();createTheaterCapacityModel();
}

编写代码是为了方便日后向我们的仪表板添加更多小部件。 loadData()方法提供了将数据从Web服务加载到本地列表的实现。

private void loadData() {theaterList = jaxRsClient.target(baseUri).request("application/xml").get(new GenericType>() {});}

如果我们有更多的小部件，那么我们也将那些数据模型的数据加载代码也添加到此方法中。接下来，我们需要初始化已定义的org.primefaces.model.chart.BarChartModel ，并使用来自Web服务的数据加载它。 initTheaterCapacityModel()方法包含用于创建BarChartModel的实现，并用一个或多个ChartSeries对象填充它以构建数据。

public BarChartModel initTheaterCapacityModel() {BarChartModel model = new BarChartModel();ChartSeries theaterCapacity = new ChartSeries();theaterCapacity.setLabel("Capacities");for (Theater theater : theaterList) {theaterCapacity.set(theater.getId(), theater.getCapacity());}model.addSeries(theaterCapacity);return model;
}

如您所见，该模型由单个org.primefaces.model.chart.ChartSeries对象组成。实际上，模型可以包含多个ChartSeries对象，并且将使用不同的彩色条在图表中显示该数据。在这种情况下，我们只需将剧院ID和每个Theater对象的容量添加到ChartSeries对象，然后将其添加到BarChartModel 。在我们的init()方法中调用createTheaterCapacityModel()方法，并在其中调用initTheaterCapacityModel()方法来创建org.primefaces.model.chart.BarChartModel ，然后进行相应的配置。

private void createTheaterCapacityModel() {theaterCapacityModel = initTheaterCapacityModel();theaterCapacityModel.setTitle("Theater Capacity");theaterCapacityModel.setLegendPosition("ne");theaterCapacityModel.setBarPadding(3);theaterCapacityModel.setShadow(false);Axis xAxis = theaterCapacityModel.getAxis(AxisType.X);xAxis.setLabel("Theater");Axis yAxis = theaterCapacityModel.getAxis(AxisType.Y);yAxis.setLabel("Capacity");yAxis.setMin(0);yAxis.setMax(200);}

如您所见，在方法内部，我们通过调用initTheaterCapacityModel()初始化模型，然后通过一系列“设置”方法对其进行配置。具体来说，我们设置标题，位置并提供一些视觉配置。接下来，通过调用模型的getAxis()方法并传递X和Y轴常量来设置轴。然后，通过为Y轴设置标签和最小/最大值来配置每个轴。请参阅本文末尾的课程的完整资源。

这样做是针对服务器端代码的，现在让我们看一下用于显示图表组件的UI代码。首先，通过右键单击并选择"New..."-> "XHTML..." ，在项目的Web Pages文件夹的根目录处生成一个新的XHTML文件，并将文件命名为dashboard.xhtml 。 dashboard.xhtml的源应包含以下内容：

<html xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns="http://www.w3.org/1999/xhtml"><h:head><title>Theater Dashboard</title></h:head><h:body><f:event listener="#{dashboardController.initView}" type="preRenderView"/><h:form id="theaterDash" prependid="false"><p:growl id="growl" showdetail="true"/><p:layout fullpage="true"><p:layoutUnit position="center"><p:panel header="Capacity for Theaters" id="theater_capacity" style="border: 0px;"><p:chart model="#{dashboardController.theaterCapacityModel}" style="border: 0px; height: 200px; width: 500px;" type="bar"></p:chart></p:panel></p:layoutUnit></p:layout><p:poll interval="60" listener="#{dashboardController.pollData}"/></h:form></h:body>
</html>

相当简单，JSF视图包含PrimeFaces布局，包括面板和图表。在视图顶部附近，使用了一个f：event标记来调用侦听器方法，该方法在DashboardController类中实现，该类identified by initView() 。出于本示例的目的， p:chart标签是发生魔术的地方。尽管可以使用其他选项（在http://www.primefaces.org/showcase），但在这种情况下，图表类型设置为“条形”。该模型设置为#{dashboardController.theaterCapacityModel} ，我们在控制器类中定义，填充和配置了该模型。然后，我们提供宽度和高度，以使图表很好地显示。万一数据发生变化（我知道剧院的大小通常不会增加或减少，但是请与我一起去），我们添加了PrimeFaces民意测验组件，调用pollData( ）方法，该组件会定期刷新数据。在这种情况下，数据将每60秒刷新一次。完成后，图表应如图2所示。

图2：PrimeFaces条形图

图表是交互式的，如果单击标签，则条形图将被隐藏。如果您有多个类别（通过ChartSeries ），这将很方便。您甚至可以在图表组件中包含p:ajax标记，并在单击图表时调用一个动作…也许会弹出一个对话框，以显示有关单击的项目的一些其他数据。做到了……现在您可以利用PrimeFaces和RESTful Web服务创建更多图表。我建议在MoviePlex应用程序的基础上，看看还有其他可能性。 DashboardController类的完整源代码：

package org.glassfish.movieplex7.jsf;import java.util.List;
import javax.inject.Named;
import javax.enterprise.context.SessionScoped;
import javax.faces.component.UIComponent;
import javax.faces.component.UIViewRoot;
import javax.faces.context.FacesContext;
import javax.ws.rs.client.Client;
import javax.ws.rs.client.ClientBuilder;
import javax.ws.rs.core.GenericType;
import org.glassfish.movieplex7.entities.Theater;import org.primefaces.model.chart.Axis;
import org.primefaces.model.chart.AxisType;
import org.primefaces.model.chart.BarChartModel;
import org.primefaces.model.chart.ChartSeries;/**** @author Juneau*/
@Named(value = "dashboardController")
@SessionScoped
public class DashboardController implements java.io.Serializable {Client jaxRsClient;// Typically not hard coded...store in a properties file or databaseString baseUri = "http://localhost:8080/ExploringJavaEE7/webresources/theater/";private List theaterList;private BarChartModel theaterCapacityModel;/*** Creates a new instance of FamisEquipPmChartController*/public DashboardController() {jaxRsClient = ClientBuilder.newClient();}public void init() {loadData();createTheaterCapacityModel();}/*** Initializes the view on page render...if we wish to grab a reference* to a panel, etc.*/public void initView(){UIViewRoot viewRoot =  FacesContext.getCurrentInstance().getViewRoot();// Do something}public void pollData() {System.out.println("polling data...");loadData();}/*** JAX-RS client to poll the data*/private void loadData() {theaterList = jaxRsClient.target(baseUri).request("application/xml").get(new GenericType>() {});}/*** Initialize the Bar Chart Model for Displaying PM Estimated Hours by Month** @return*/public BarChartModel initTheaterCapacityModel() {BarChartModel model = new BarChartModel();ChartSeries theaterCapacity = new ChartSeries();theaterCapacity.setLabel("Capacities");for (Theater theater : theaterList) {theaterCapacity.set(theater.getId(), theater.getCapacity());}model.addSeries(theaterCapacity);return model;}private void createTheaterCapacityModel() {theaterCapacityModel = initTheaterCapacityModel();theaterCapacityModel.setTitle("Theater Capacity");theaterCapacityModel.setLegendPosition("ne");theaterCapacityModel.setBarPadding(3);theaterCapacityModel.setShadow(false);Axis xAxis = theaterCapacityModel.getAxis(AxisType.X);xAxis.setLabel("Theater");Axis yAxis = theaterCapacityModel.getAxis(AxisType.Y);yAxis.setLabel("Capacity");yAxis.setMin(0);yAxis.setMax(200);}/*** @return the theaterCapacityModel*/public BarChartModel getTheaterCapacityModel() {return theaterCapacityModel;}/*** @param theaterCapacityModel the theaterCapacityModel to set*/public void setTheaterCapacityModel(BarChartModel theaterCapacityModel) {this.theaterCapacityModel = theaterCapacityModel;}}