primefaces

在這篇文章中，您將看到如何結合PrimeFaces和OmniFaces獲得可緩存的圖表。 為了使事情變得簡單，我們將使用PrimeFaces 折線圖。 對于這種圖表，我們可以在頁面中使用<p：chart />標簽和一個簡單的托管bean。 因此，在頁面中我們可以有：

<p:chart id="someChartId" type="line"model="#{chartView.lineModel}"style="height:300px;width:600px;"/>

ChartView可以編寫如下：

@Named @ViewScoped public class ChartView implements Serializable {private LineChartModel lineModel;@PostConstructpublic void init() {createLineModels();}private void createLineModels() {lineModel = initLinearModel();lineModel.setTitle("Linear Chart");lineModel.setLegendPosition("e");lineModel.setZoom(true);Axis yAxis = lineModel.getAxis(AxisType.Y);yAxis.setMin(0);yAxis.setMax(10);}private LineChartModel initLinearModel() {LineChartModel model = new LineChartModel();LineChartSeries series1 = new LineChartSeries();series1.setLabel("Series 1");Random rnd = new Random();series1.set(rnd.nextInt(10), rnd.nextInt(10));series1.set(rnd.nextInt(10), rnd.nextInt(10));series1.set(rnd.nextInt(10), rnd.nextInt(10));series1.set(rnd.nextInt(10), rnd.nextInt(10));series1.set(rnd.nextInt(10), rnd.nextInt(10));LineChartSeries series2 = new LineChartSeries();series2.setLabel("Series 2");series2.set(rnd.nextInt(10), rnd.nextInt(10));series2.set(rnd.nextInt(10), rnd.nextInt(10));series2.set(rnd.nextInt(10), rnd.nextInt(10));series2.set(rnd.nextInt(10), rnd.nextInt(10));model.addSeries(series1);model.addSeries(series2);return model;}public LineChartModel getLineModel() {return lineModel;} }

此代碼將產生一個簡單的折線圖，如下圖：

現在，讓我們假設在應用程序運行期間，該圖表會定期更新或重新創建（我們將通過隨機序列值和“ Refresh按鈕對此進行模擬）。 每次發生這種情況時，我們都會丟失當前圖表。 但是，緩存（如保存）某些圖表可能很有用，并有可能稍后在當前會話（對于屬于某些用戶的圖表）/應用程序（對于所有用戶通用的圖表）中加載它們。

為了完成此任務，我們可以使用OmniFaces 緩存組件。 基本上，此組件在OmniFaces Showcase和Mastering OmniFaces書中都有很好的描述，但主要思想是：

• Cache組件通過以下方式向JSF頁面作者公開
  <o:cache>標記。
• Cache為“渲染響應”階段生成的標記實現了服務器端緩存機制。
• Cache在“渲染響應”階段執行操作。
• 緩存的標記存儲在OmniFaces生成的密鑰下，或通過可選的<o:cache>密鑰屬性指示。
• 可以通過<o:cache>的可選禁用標志屬性來禁用每個請求的<o:cache> 。
• 緩存的條目可以通過<o:cache> reset flag屬性重新緩存。
• 默認情況下，緩存的數據存儲在會話范圍內（也支持應用程序范圍）。

每個示例，從JSF頁面作者的角度來看，我們可以表明我們想在鍵foo下重新緩存一塊標記，如下所示：

<o:cache id="cacheId" key="foo" disabled="false" reset="true"> ... // the markup produced for this snippet of code will be cached </o:cache>

顯然，在此示例中， disabled屬性可以跳過，因為那是其隱式值。 如果還跳過了key ，則OmniFaces將生成一個。 如果跳過了reset ，則不會重新緩存標記。

既然我們要必須決定哪些圖表緩存和負載的可能性/刪除某個圖表從緩存中，我們不能簡單地做只有這個：

<o:cache id="cacheId"> <p:chart id="someChartId" type="line"model="#{chartView.lineModel}"style="height:300px;width:600px;"/> </o:cache>

基本上，這將緩存第一個圖表，并且在每次回發時，將從緩存中提供該圖表。

因此，一種快速的方法將包括以編程方式處理<o:cache>屬性。 就像我上面說的， Cache在“渲染響應”階段采取行動。 這意味著我們可以從我們的控制
ChartView bean在實際發生Cache之前是Cache組件。 此實現的核心在于以下private方法，該方法允許我們以編程方式配置Cache組件：

private void configureCache(String key, boolean disabled, boolean reset) {Cache cache = Components.findComponent("cacheId");cache.setDisabled(disabled);cache.setReset(reset);cache.setKey(key); }

現在，我們將添加一對一的控制緩存所需的UI。 首先，我們添加一個標記為
刷新。 實際上，每次我們按下此按鈕時，都會生成一個新圖表（新數據）。 這是用于模擬圖表更新。

<h:commandButton action="#{chartView.redrawAction()}" value="Refresh"/>

redrawAction()確保新圖表不被緩存，因此緩存被禁用并且密鑰不相關：

public void redrawAction() {configureCache("none", true, false);createLineModels(); }

此外，我們添加了一個名為Save的按鈕。 按下此按鈕后，當前圖表將緩存在key_ random-number類型的鍵下（在實際情況下，您可能希望允許用戶提供該鍵作為圖表標題）。 該key將在代表已保存圖表的列表中向用戶顯示：

<h:commandButton action="#{chartView.saveChart()}" value="Save"/>

saveChart()方法啟用緩存并生成一個新密鑰。 密鑰存儲在列表中：

private List<String> keys; ... public void saveChart() {String key = "key_" + new Random().nextInt(1000);configureCache(key, false, true);keys.add(key); }

接下來，我們列出緩存的鍵和一個標記為Load的按鈕。 用戶可以選擇一個鍵，然后單擊
加載按鈕以加載緩存的圖表：

<h:selectOneMenu value="#{chartView.selected}"><f:selectItem itemLabel="Select a chart ..." noSelectionOption="true"/><f:selectItems value="#{chartView.keys}" var="t" itemLabel="#{t}" itemValue="#{t}"/> </h:selectOneMenu><h:commandButton value="Load Chart" action="#{chartView.loadChart()}"disabled="#{chartView.keys.size() eq 0}"/>

loadChart()是：

public void loadChart() {if (selected != null) {configureCache(selected, false, false);} }

最后，我們添加一個標記為Delete的按鈕，該按鈕將從緩存中刪除所選圖表：

<h:commandButton value="Delete Chart" action="#{chartView.deleteChart()}"disabled="#{chartView.keys.size() eq 0}"/> |

并且， deleteChart()是：

public void deleteChart() {if (selected != null) {CacheFactory.getCache(Faces.getContext(), "session").remove(selected);keys.remove(selected);configureCache("none", true, false); resetLineModels();} }private void resetLineModels(){ lineModel.getSeries().clear(); }

注意這里，我們如何使用CacheFactory通過鍵從緩存中刪除條目。

這是一個提示性屏幕截圖：

• 完整的應用程序可在此處獲得 。

翻譯自: https://www.javacodegeeks.com/2015/11/programmatically-caching-primefaces-charts-via-omnifaces-cache-component.html

primefaces

總結

以上是生活随笔為你收集整理的primefaces_通过OmniFaces缓存组件以编程方式缓存PrimeFaces图表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。