通常，利用圖表提供數(shù)據(jù)的可視表示很有用。 PrimeFaces提供制圖解決方案，可輕松將數(shù)據(jù)的可視表示形式添加到Web和移動(dòng)應(yīng)用程序中。 如果將PrimeFaces圖表組件與RESTful Web服務(wù)數(shù)據(jù)結(jié)合使用，我們可以創(chuàng)建自定義圖表，以適合桌面和移動(dòng)設(shè)備。

在本文中，我將更新Java EE 7動(dòng)手練習(xí)MoviePlex應(yīng)用程序，以提供一個(gè)儀表板，我們可以在其中集成PrimeFaces圖表組件。 在本示例中，我們將創(chuàng)建一個(gè)圖表，但是您可以利用本文幫助您以類似的方式構(gòu)建更多圖表。 具體來(lái)說(shuō)，我們將利用RESTful Web服務(wù)收集電影院的容量信息，并使用PrimeFaces條形圖顯示每個(gè)劇院的容量。

首先，請(qǐng)下載Java EE 7動(dòng)手練習(xí)應(yīng)用程序解決方案歸檔文件 （如果尚未下載）。 從那里，在NetBeans IDE中打開(kāi)它。 要?jiǎng)?chuàng)建這篇文章，我正在使用NetBeans 8.0.2。 將項(xiàng)目導(dǎo)入到NetBeans中之后，通過(guò)右鍵單擊項(xiàng)目并選擇“運(yùn)行”，將其部署到應(yīng)用程序服務(wù)器（在我的情況下為GlasFish 4.1）。 部署完成后，通過(guò)打開(kāi)以下URL在瀏覽器中打開(kāi)Theater Web服務(wù)：http：// localhost：8080 / ExploringJavaEE7 / webresources / theater /。 該Web服務(wù)應(yīng)產(chǎn)生一個(gè)與圖1類似的清單。

圖1：Theater Web Service XML

我們將利用此Web服務(wù)中的數(shù)據(jù)來(lái)提供儀表板小部件。 首先創(chuàng)建后端代碼，然后處理UI。 首先，通過(guò)右鍵單擊Source Packages，然后選擇“ New…”->“ Java Packages”，創(chuàng)建一個(gè)名為org.glassfish.movieplex7.jsf的新軟件包。 接下來(lái)，通過(guò)右鍵單擊該包并選擇“ New…”->“ JSF Managed Bean”，創(chuàng)建一個(gè)JSF Managed Bean控制器，并將其命名為DashboardController 。 讓我們將控制器注釋為@SessionScoped ，然后實(shí)現(xiàn)java.io.Serializable 。 在此控制器中，我們將獲取數(shù)據(jù)，并為儀表板構(gòu)建模型。 我們將首先使用JAX-RS客戶端查詢Web服務(wù)，然后將利用數(shù)據(jù)填充Theater對(duì)象的列表。 因此，我們需要定義以下四個(gè)字段才能開(kāi)始：

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 ，我們將通過(guò)調(diào)用javax.ws.rs.client.ClientBuilder來(lái)初始化類構(gòu)造函數(shù)中的字段，如下所示：

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

接下來(lái)，我們需要?jiǎng)?chuàng)建一種方法來(lái)加載數(shù)據(jù)，創(chuàng)建和配置模型。 在我們的控制器中， init()方法基本上包含將任務(wù)委派給其他方法的實(shí)現(xiàn)。 init()方法的實(shí)現(xiàn)調(diào)用兩個(gè)方法： loadData()和createTheaterCapacityModel() 。

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

編寫代碼是為了方便日后向我們的儀表板添加更多小部件。 loadData()方法提供了將數(shù)據(jù)從Web服務(wù)加載到本地列表的實(shí)現(xiàn)。

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

如果我們有更多的小部件，那么我們也將那些數(shù)據(jù)模型的數(shù)據(jù)加載代碼也添加到此方法中。 接下來(lái)，我們需要初始化已定義的org.primefaces.model.chart.BarChartModel ，并使用來(lái)自Web服務(wù)的數(shù)據(jù)加載它。 initTheaterCapacityModel()方法包含用于創(chuàng)建BarChartModel的實(shí)現(xiàn)，并用一個(gè)或多個(gè)ChartSeries對(duì)象填充它以構(gòu)建數(shù)據(jù)。

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; }

如您所見(jiàn)，該模型由單個(gè)org.primefaces.model.chart.ChartSeries對(duì)象組成。 實(shí)際上，模型可以包含多個(gè)ChartSeries對(duì)象，并且將使用不同的彩色條在圖表中顯示該數(shù)據(jù)。 在這種情況下，我們只需將劇院ID和每個(gè)Theater對(duì)象的容量添加到ChartSeries對(duì)象，然后將其添加到BarChartModel 。 在我們的init()方法中調(diào)用createTheaterCapacityModel()方法，并在其中調(diào)用initTheaterCapacityModel()方法來(lái)創(chuàng)建org.primefaces.model.chart.BarChartModel ，然后進(jìn)行相應(yīng)的配置。

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);}

如您所見(jiàn)，在方法內(nèi)部，我們通過(guò)調(diào)用initTheaterCapacityModel()初始化模型，然后通過(guò)一系列“設(shè)置”方法對(duì)其進(jìn)行配置。 具體來(lái)說(shuō)，我們?cè)O(shè)置標(biāo)題，位置并提供一些視覺(jué)配置。 接下來(lái)，通過(guò)調(diào)用模型的getAxis()方法并傳遞X和Y軸常量來(lái)設(shè)置軸。 然后，通過(guò)為Y軸設(shè)置標(biāo)簽和最小/最大值來(lái)配置每個(gè)軸。 請(qǐng)參閱本文末尾的課程的完整資源。

這樣做是針對(duì)服務(wù)器端代碼的，現(xiàn)在讓我們看一下用于顯示圖表組件的UI代碼。 首先，通過(guò)右鍵單擊并選擇"New..."-> "XHTML..." ，在項(xiàng)目的Web Pages文件夾的根目錄處生成一個(gè)新的XHTML文件，并將文件命名為dashboard.xhtml 。 dashboard.xhtml的源應(yīng)包含以下內(nèi)容：

<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>

相當(dāng)簡(jiǎn)單，JSF視圖包含PrimeFaces布局，包括面板和圖表。 在視圖頂部附近，使用了一個(gè)f：event標(biāo)記來(lái)調(diào)用偵聽(tīng)器方法，該方法在DashboardController類中實(shí)現(xiàn)，該類identified by initView() 。 出于本示例的目的， p:chart標(biāo)簽是發(fā)生魔術(shù)的地方。 盡管可以使用其他選項(xiàng)（在http://www.primefaces.org/showcase），但在這種情況下，圖表類型設(shè)置為“條形”。 該模型設(shè)置為#{dashboardController.theaterCapacityModel} ，我們?cè)诳刂破黝愔卸x，填充和配置了該模型。 然后，我們提供寬度和高度，以使圖表很好地顯示。 萬(wàn)一數(shù)據(jù)發(fā)生變化（我知道劇院的大小通常不會(huì)增加或減少，但是請(qǐng)與我一起去），我們添加了PrimeFaces民意測(cè)驗(yàn)組件，調(diào)用pollData( ）方法，該組件會(huì)定期刷新數(shù)據(jù)。 在這種情況下，數(shù)據(jù)將每60秒刷新一次。 完成后，圖表應(yīng)如圖2所示。

圖2：PrimeFaces條形圖

圖表是交互式的，如果單擊標(biāo)簽，則條形圖將被隱藏。 如果您有多個(gè)類別（通過(guò)ChartSeries ），這將很方便。 您甚至可以在圖表組件中包含p:ajax標(biāo)記，并在單擊圖表時(shí)調(diào)用一個(gè)動(dòng)作…也許會(huì)彈出一個(gè)對(duì)話框，以顯示有關(guān)單擊的項(xiàng)目的一些其他數(shù)據(jù)。 做到了……現(xiàn)在您可以利用PrimeFaces和RESTful Web服務(wù)創(chuàng)建更多圖表。 我建議在MoviePlex應(yīng)用程序的基礎(chǔ)上，看看還有其他可能性。 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;}}

翻譯自: https://www.javacodegeeks.com/2015/02/restful-charts-with-jax-rs-and-primefaces.html

總結(jié)

以上是生活随笔為你收集整理的带有JAX-RS和PrimeFaces的RESTful图表的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。