XML Technology Research Lab: JOFC2

JOFC2 - 第二個範例

The materials presented in this web page is provided as is and is used solely for educational purpose. Use at your own risks.
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

請勿轉貼

我們假設你已經依據之前的文章完成的 OFC2 的安裝工作。在本文中，我們開始說明如何將 OFC2 和 JSP 作結合。我們在本範例中，將以亂數來產生四個整數，並將這四個整數值以 BarChart（條型圖）呈現出來。我們在這一系列的教學文件中，都以條型圖為範例，至於其他的圖表，我們建議分別利用舊版的 Open Flash Chart 教學文件以及 JOFC2 的 JavaDoc 來學習。

首先我們來看 JSP 的程式碼：在所有 JOFC2 所產生的圖表都是由一個 jofc2.model.Chart 的物件所形成，而在形成 Chart 物件的時候，我們可以順便為這個圖表產生"標題"。產生 Chart 物件的方式：
```
import jofc2.model.Chart;

Chart cht = new Chart("亂數資料");
```
一旦 Chart 物件 cht 產生之後，我們就可以在這個物件上加上需要的圖表內常見的物件；例如，條型圖（BarChart）（或者其他圖，如 LineChart、PieChart 等），圖例（legend），以及 X、Y 軸等。由於我們希望能產生條型圖，所以我們需要產生一個 jofc2.model.elements.BarChart 物件（其實大多數圖表的物件都是屬於 jofc2.model.elements.Element 的子類別，例如 BarChart、 LineChart、PieChart 等），其產生的方式如下：
```
import jofc2.model.elements.*;

BarChart bc = new BarChart(BarChart.Style.NORMAL);
```
BarChart 的風格有三種，除了程式碼中的 BarChart.Style.NORMAL，還有 BarChart.Style.GLASS 以及 BarChart.Style.THREED 兩種。我們鼓勵讀者在看完本文的範例之後，可以試試看更改 BarChart 的風格。有了 BarChart 物件 bc 之後，我們可以開始為 bc 加上其所要表現的數字。將數字加入 bc 是利用其 addValues() 的方法，其程式碼如下：
```
  for(int i=0; i<4 data-blogger-escaped-10="" data-blogger-escaped-1="" data-blogger-escaped-ath.random="" data-blogger-escaped-bc.addvalues="" data-blogger-escaped-i="" data-blogger-escaped-int="" data-blogger-escaped-pre="">
```
完成了 BarChart 的設定之後，我們需要把它加到 cht 內，其方式如下：
```
  cht.addElements(bc);
```
最後，我們就可以把 cht 轉換成字串，並將它回傳給客戶端，其方式如下：
```
  out.println(cht.toString());
```
這個範例的完整繩式碼如下：
```
<%@page contentType="text/plain" pageEncoding="UTF-8"
        import="jofc2.*,
                jofc2.model.*,
                jofc2.model.elements.*,
                jofc2.model.elements.BarChart.*"%>
<%
  Chart cht = new Chart("亂數資料");

  // 產生 BarChart 並將資料新增到 BarChart
  BarChart bc = new BarChart(BarChart.Style.NORMAL);
  for(int i=0; i<4; i++)
    bc.addValues((int) (Math.random() * 10) + 1);

  cht.addElements(bc);
  out.println(cht.toString());
%>
```
請注意： 跟之前的資料檔一樣，請在儲存這個檔案的時候，務必要把它儲存成 UTF-8 的編碼方式，如此一來 OFC2 才能正確的顯示中文；另外，也請記得將 @page 的 pageEncoding 的值定義成 UTF-8。
請將上述程式檔置放於 tomcat\webapps\test 內，並先執行它以確保該程式能正確的回傳符合 json 格式的資料，而且也可以確定該程式可以正確無誤的執行。假設我們將該程式碼儲存為 ofc2.jsp，執行後的畫面如下：

如果程式可以正確無誤的執行，我們就可以為它開發一個相對應的 HTML 檔。這個檔案的內容跟之前的範例非常類似，差別只在我們為 data-file 設定的值為程式的名稱，也就是 ofc2.jsp。

<html>
<head>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "500", "250", "9.0.0",
                   "expressInstall.swf", {"data-file":"ofc2.jsp"});
</script>
</head>
<body>
 
<p>第二個範例：結合 OFC2 和 JSP</p>
<div id="my_chart"></div>
</body>
</html>

最後，我們可以載入 ofc2.html，其畫面如下：

由於條型圖的內容是由亂數產生器所產生的，因此每一次"重新載入"之後，條型圖的內容應該會改變；這個情形在 Firefox 是完全沒問題的，但是在 IE 8 時，卻往往看到 IE 8 只會繼續使用 cache 的內容，而不會每次都重新執行 ofc2.jsp 並使用其最新的值。日前，有位網友（Jackey）提供了一個解決方式，那就是利用亂數字串給 JSP 檔，如此一來，IE 認定無法重複使用 cache 的內容而必須重新執行。以本範例而言，只需將 {"data-file":"ofc2.jsp"} 改成 {"data-file":"ofc2.jsp?random=(new Date()).valueOf()"} 但是使用時，請切記，你的 JSP 檔（在本例中就是 ofc2.jsp）內不會讀取名為 random 的參數；如果有，請記得將名稱改成一個不用的參數名稱即可。

Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

XML Technology Research Lab

2012年9月26日星期三

JOFC2 - 第二個範例

JOFC2 - 第二個範例

沒有留言:

張貼留言

2012年9月26日 星期三

JOFC2 - 第二個範例

JOFC2 - 第二個範例

沒有留言:

張貼留言

2012年9月26日星期三