OFC2 - 第一個範例
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 的安裝工作，也已經把 ofc0.html
以及 data.json 放在適當的目錄下。
在本文中，我們開始說明第一個範例的內容：
- 由於在資訊系統中，資料的內容常常會因為資料庫的內容改變而不同，因此
系統開發時撰寫一份固定的資料檔（也就是範例中的 data.json）是沒什麼道理的。
一般來說，data.json 的內容會由程式產生，在我們的教學文件中，這些資料是由
JSPs/servlets 來產生。除非讀者有意願開發一套類似 JOFC2 的套件，大多數開發
人員是不需要知道 data.json 的內容的。
- 就像之前說明的，OFC2 是利用 open-flash-chart.swf 來讀取資料並將結果
呈現在網頁中的，所以需要呈現 OFC2 圖表的網頁必須要有一個機制將該 swf 檔
下載到瀏覽器；這個部分還蠻簡單的，因為 OFC2 的作者利用了一個 Javascript
檔（就是下列原始碼中的 swfobject.js）讓這個過程變的非常簡單。載入並使用
swfobject.js 的方式如下原始碼的綠色部分：在這段程式碼中，總共有兩段
<script>，第一段幾乎不必改變，可能需要改變以及說明的在第二段；
這兩段 <script> 習慣上會置放於 <head> 標籤之間。在第二段
<script> 中，我們呼叫了 swfobject.embedSWF() 方法（定義於
swfobject.js 內），該方法共有五個參數，第一個參數用來載入 open-flash-chart.swf
（這個部分大多不會變，除非你將該檔置放於其他位置），第二個參數在指出該
圖表出現的地方；以我們這個範例來說，圖表會出現在一個 id 為 my_chart 的
標籤內，也就是如原始碼紅色的部分所示。
<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");
</script>
</head>
<body>
<p>第一個範例：使用 SWFObject.js</p>
<div id="my_chart"></div>
</body>
</html>
第三和第四個參數分別代表該圖表的 X 軸和 Y 軸的長度，以本範例來說，該圖表的
大小為 500x250 的方形；最後一個參數代表 Flash 的版本數，從這裡看得出來，
open-flash-chart.swf 是以 Flash 9 版所寫出來的。
- 練習題： 請將 my_chart 改成 first_chart，另將大小改成
800x400，並試著將圖表置放於網頁的中央。
在上述範例中，我們必須在瀏覽器的 URL 欄位中多輸入
?ofc=data.json，
雖然這個方法比較有彈性（讓使用者傳入不同的資料檔，例如之前的 wdata.json），
但是如果資料檔是固定的，或者資料來源是一個固定的程式執行後的結果，那麼
有沒有直接將檔案或者程式名稱寫在 HTML 檔案內的方式？答案是有的，請看下列程式碼：
<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":"data.json"}
);
</script>
</head>
<body>
<p>第一個範例：使用固定來源名稱</p>
<div id="my_chart"></div>
</body>
</html>
這段原始碼跟之前的範例幾乎相同，不同的地方在於綠色部分：利用 swfobject.embedSWF() 來呼叫 expressInstall.swf，並利用它來讀取資料的來源，該資料來源的名稱必須
是
data-file，而其值可以依據資料來源的不同而不同，利用想使用
wdata.json 的話，請將 data.json 改成 wdata.json；或者如果想呼叫遠端程式
ofc2.jsp 的話，請將 data.json 改成 ofc2.jsp 即可；讀者可以點一下
測試頁 並觀察 URL 欄位的值。
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu
