第 1 頁，共 15 頁

PowerBuilder 8開發技術講座 (7) —

Web DataWindow 的應用 (一)

DataWindow物件在 PowerBuilder中的地位是舉足輕重的，幾乎所有 PowerBuilder

運作的核心，都是使用 DataWindow來完成的。然而最近網際網路盛行，愈來愈多的客戶要求將系統移植成Web-based的系統，所以對 PowerBuilder使用者而言，如何將 PowerBuilder程式轉換到Web-based的系統，應是心中第一個想要找到的答案，而這個答案就是Web DataWindow。

/倍力技術小組

DataWindow物件在 PowerBuilder中的地位是非常重要的，幾乎所有 PowerBuilder運作的核心，都是使用 DataWindow來完成的，所以有人常說若要用一個字來代表 PowerBuilder，不用說，就是DataWindow。所以我們試問若要將 PowerBuilder程式轉換到Web-based的系統，什麼是最重要的工作？答案應該很明顯：就是將DataWindow轉換到瀏覽器介面，以 HTML為格式內涵的 DataWindow，而就是Sybase所提出的 Web DataWindow。

Web DataWindow的提出，相信對開發 PowerBuilder應用程式的使用者有一個重大且深遠的影響，開發人員可以輕易地將 DataWindow物件顯示在瀏覽器上，也就代表了可以將 PowerBuilder Client/Server架構的應用程式快速的移轉成 n-tier架構的應用程式，而原本 DataWindow物件所擁有的特性，包括資料的修改﹙包含新增、修改及刪除﹚、資料查詢、顯示格式、驗證規則及輸入格式，都可以全

部且自動的移轉。這篇文章的目的就是針對Web DataWindow所使用的原理，提供一個較詳細且技術性的全面探討，希望能帶給各位對Web DataWindow一個較進階的認識。

由於內容眾多，我們將此篇內容分為多期刊出，總體內容包含介紹Web DataWindow的運作原理以及產生 WebDataWindow的三種方法：

l 使用 PowerBuilder Web Target的 Web DataWindow Page物件，以 Wizard (精靈)的方式來產生

l 自行撰寫程式呼叫Web DataWindow元件，例如 HTMLGenerator及HTMLGenerator80元件，來產生 Web DataWindow

l 使用自定Web DataWindow元件產生 Web DataWindow

第 2 頁，共 15 頁

上述哪一種開發方式，你都可自行選擇並且都可併行於一個系統之中。

Web DataWindow架構介紹

圖 1描繪出Web DataWindow所使用的架構以及其運作原理，在其中你可輕易地看出，我們運用 PowerDynamo(你也可以使用 ASP或 JSP)及 Jaguar CTS中的元件來產生Web DataWindow的內容。

圖 1 Web DataWindow運作程序圖

在圖 1中，我們分析了當使用者需要開啟Web DataWindow的網頁時，所引發的一連串動作。它的執行步驟如下：

1. 首先使用者點選 browser上的網頁。 2. Web Server將使用者點選的網頁要求，傳到 PowerDynamo 的網頁範本，並執行範本內之 Server端 Script，也就是 DynaScript。

3. Server端程式連結到 Jaguar CTS取用其元件(HTMLGenerator80)，並將欲使用的 DataWindow及 Database connection等相關資訊傳給該元件。

4. 透過 HTMLGenerator80元件，到資料庫讀取 DataWindow所須之資料，並將DataWindow之展現方式、資料及狀態轉譯成 HTML及 JavaScript。

5. HTMLGenerator80元件將產生的 HTML及 JavaScript結果，傳回給PowerDynamo。

第 3 頁，共 15 頁

6. PowerDynamo以所傳回之HTML及 JavaScript取代原有網頁範本中 Server端Script，並透過Web Server將網頁回傳給使用者的瀏覽器。

7. 使用者在Web DataWindow網頁中作了某一些動作，如修改資料或點選上下頁。

8. Web Server再將其 URL及動作的狀態傳給 PowerDynamo。

由上述描述我們得知在 Jaguar CTS上有一個元件叫做 HTMLGenerator80，將DataWindow的內容轉換成 HTML及 JavaScript格式的工作就是由這個元件來完成，請參考圖 2，至於圖中所顯示 HTMLGenerator元件則是 EAServer 3.6.1之前的版本。

圖 2 HTML Generator80及 HTMLGenerator元件

HTMLGenerator80元件是由 PowerBuilder所撰寫，是一個功能豐富的元件，你可以將這個元件視為一個元件範本，若需要自己製作Web DataWindow元件時，其中所含的注意事項與技術，就可以作為參考。它的原始檔程式是放在

PowerBuilder安裝目錄下的 Code Examples\WebDW子目錄，程式庫檔名為pbdwrmt.pbl，其中內含有一個 NVO叫做 nv_remote_datawindow，這個就是HTMLGenerator80的原始碼。也許有點複雜，但是強烈建議你應該看看這個元件，這樣對開發自己的元件時是非常有助益的。

使用Wizard快速建立Web DataWindow

第 4 頁，共 15 頁

使用這個方式來開發Web DataWindow是最快速的方法，你甚至可以不用撰寫任何程式碼，只以Wizard的方式就可以快速開發 Web DataWindow的Master/Detail的網頁程式，當然若要有更多的功能，只要再自行撰寫程式即可。

要建立Web DataWindow的主要動作包括：

l 建立 DataWindow物件 l 建立Web Target l 建立Web DataWindow網頁 l 部署網頁

建立 DataWindow物件

建立Web DataWindow網頁的第一個步驟就是建立 DataWindow物件，在我們範例中所使用的資料庫為 Sybase Adaptive Server Anywhere，藉由ODBC DSN：EAS Demo DB V4來連接，至於使用到的表格為 sales_order。你可參考表 1中的設定來建立一個名稱為 d_salesorder的 DataWindow物件，未提及的屬性則接受預設值。

屬性 設定值

Presentation Style 選擇 Grid

Data Source 選擇 SQL Select即可，設定畫面較簡單，你也可以設定 Quick Select

Table 選擇 sales_order

Column 勾選所有 columns

表 1 建立 DataWindow物件：d_saleorder的屬性設定

DataWindow物件建立好後，接下來就是功能設定及外觀的部份，步驟說明如下：

1. 建立 Button物件於 DataWindow的 Footer區域，並設定此 Button的 Action為 InsertRow()，Text為新增。

2. 依上述步驟依序建立修改(Update)、刪除(DeleteRow)、重讀(Retrieve)、下一頁(PageNext)、上一頁(PagePrior)、第一頁(PageFirst)及最後一頁(PageLast)等按鈕。

3. 切換到 DataWindow物件屬性的 HTML Generation頁次，在屬性 Rows Per Page輸入 10，也就是說我們以一頁 10筆為畫面顯示的標準。

4. 檢查DataWindow物件上的欄位，確保資料可以輸入，不會因為預設Edit Style

第 5 頁，共 15 頁

樣式造成資料無法輸入的情形，最後請確保所有欄位的 Tab Order皆大於 0。 5. 由於有牽涉到資料的異動，所以請檢查 DataWindow物件的 Update屬性為可異動的。

6. 重複建立一個欄位”id”，其 TabOrder為 0，這可以作為連結其他網頁用，其預設新的欄位名稱為”id_1”。

7. 最後依喜好設定外觀顏色及中文化，並存檔為 d_saleorder。整個DataWindow最後的畫面如下圖 3。

圖 3 d_saleorder的預視畫面

這邊要補充說明的是，其實以往使用 PowerBuilder開發系統的時候，所有的DataWindow都是放在Window物件上顯示，若有需要做資料的異動，會在Window上放上 Button物件，然後在 Button的 Clicked Event撰寫 DataWindow有關資料異動的指令。例如新增一列，我們會下 dw_cname.insertrow(0) 指令(其中dw_cname 是 DataWindow Control名稱) ，刪除一列，我們會下dw_cname.deleterow(row_no) 指令。可是今天我們開發的是Web-based的系統，在 browser上我們並沒有 PowerBuilder的Window物件，所以這些 Button就無法放在 browser上。為了解決這個問題，PowerBuilder從 7.0開始就可以在DataWindow 物件上放 Button物件，擺放的方式有兩種：一種是直接在DataWindow物件中放上這些 Button物件，另一種是事後在 Web DataWindow的網頁中加入 HTML Button物件，然後撰寫 Client端程式碼。不論是哪一種方式我們皆會在這些 Button上賦予一些 Action，例如 InsertRow()、DeleteRow()、Udpate()、Retrieve()… 等。這些 Action都是會發揮效用的，假如今天我們把它放在 browser上，這些物件也會隨 DataWindow物件出現，並且也會發揮該有的功能。所以我們可以說這個特性，事實上就是 PowerBuilder讓 DataWindow物件可以在 browser上繼續運作的主要因素之一。

第 6 頁，共 15 頁

建立Web Target

由於所要建立的網頁，是屬於Web Target，所以接下來要先把 Web Target建立起來。你可以從 menu上選擇 File->New，在 New視窗切換至 Target頁次，選擇Web Site，按 OK按鈕，接下來的設定請參考表 2。

視窗 屬性 設定值

Specify New Web Target Web Target 輸入Web Target的所在目錄及名稱，例如 D:\Book\page\order.pbt，你可依狀況更改。

Specify New Web Target Web Target Source Folder

輸入 D:\Book\page\order\Source，你可依狀況更改。

Specify New Web Target Web Target Build Folder

輸入 D:\Book\page\order\Build，你可依狀況更改。

表 2 Web Target：order屬性設定

建立Web DataWindow網頁

Web DataWindow的建立是從 menu上選擇 File->New，在 New視窗切換至Web頁次，選擇Web DataWindow Page，按 OK按鈕，接下來的設定請參考表 3。

視窗 屬性 設定值

Specify New HTML File

Title 輸入WebDW_SaleOrder

Specify New HTML File

File Name D:\Book\page\order\Source\WebDW_SaleOrder.htm

Choose EAServer Profile

EAServer Profiles 接受先前建立的 Jaguar

Choose Web DW Component Type

Web DW Component Types

選擇 Standard Web DW Component

Specify Source of DataWindow

DataWindow Definition

選擇 PowerBuilder Library or Report

File

Specify Library or Report File

PowerBuilder Library or Report

輸入 D:\Book\website\book.pbl

Specify Library or Generate Absolute 勾選

第 7 頁，共 15 頁

Report File path in Script

Choose DataWindow Object

DataWindows 選擇 d_saleorder

Specify Database Connection

Database Profiles 選擇 EAS Demo DB V4

表 3 網頁WebDW_SaleOrder.htm的屬性設定

最後請按 finish按鈕，完成這個網頁設定，所產生的畫面就如圖 4所示。

圖 4 網頁WebDW_SaleOrder.htm

到此為止，這個網頁雛形已經出來，接下來讓我們說明一些重要的屬性設定。由

於使用Wizard的方式建立 Web DataWindow，事實上就是在這個網頁上放入一個Sybase Web DataWindow DTC的物件，所以只要針對這個物件設定屬性即可。在網頁上的 Sybase Web DataWindow DTC上(也就是網頁上方出現 DataWindow物件的方型區域內)按滑鼠右鍵，選擇 Sybase Web DataWindow DTC Properties，在出現的視窗中切換至 Link頁次。這個頁面在設定連結(Hyperlink)的機制，也就是你可在所出現的物件列表上設定連接屬性，這樣當使用著點選該物件後，就具有

連結的功能。例如，你可在欄位”id_1”的右方空白區域點選 browser鍵 ，進入Link Definition視窗，請參考圖 5的範例。

第 8 頁，共 15 頁

圖 5 欄位 id_1的連結屬性設定

上述設定說明如表 4。

屬性 描述

URL 所要連結的網頁

Name 我們使用網頁參數來傳遞資料，所以這裏輸入參數名稱，例如 p_1

Bind Type 所傳遞資料的來源型態

Bind Value 所傳遞資料的值

Frame Target 所連接網頁在該網頁出現的 Frame 名稱

表 4 Link Definition的屬性說明

接下來請切換到 HTML Generator頁次，這個頁次在設定Web DataWindow所使用的元件，在執行後續動作之前請先啟動 Jaguar Server，並參考圖 6的設定，確保 Jaguar Server 所 在 的 位 置 及 Web Datawindow 所 使 用 的 元 件 為

HTMLGenerator80。其中若 Selected Component Name 與畫面不同的話，你可在HTMLGenerator80元件上雙擊滑鼠左鍵以設定之。

第 9 頁，共 15 頁

圖 6 設定Web DataWindow所使用的元件

請切換到 Retrieval頁次，這個頁次在設定 DataWindow物件有關 Data Source參數的來源，例如在Master/Detail格式的網頁中，有關Detail網頁必須接受由Master網頁所傳來的參數，然後這個參數才可傳給 DataWindow物件。如果你建立另一個Web DataWindow網頁來接收WebDW_SaleOroder.htm所傳來的參數(圖 5所傳入的名稱：p_1)，則你必須在 Retrieval頁次設定之，如圖 7所示，然後這個參數就會自動地傳給底層的 DataWindow作為 Retrieval Argument之用。

圖 7 DataWindow參數來源設定

Retrieval Argument的設定說明如表 5。

第 10 頁，共 15 頁

屬性 描述

Argument DataWindow的參數名稱

Bind Type 參數來源的類型

Bind Value 參數來源的名稱 表 5 Retrieval的屬性說明

部署網頁

網頁設定完成，接下來的動作就是將網頁部署(Deploy)到 Page Server上，所以我們要設定部署的屬性。請各位在 order Web Target上按滑鼠右鍵，選擇 Properties，

切換到 Deploy頁次，並在 local configurations按新增按鈕 ，並參考表 6的設定，

未說明部份接受預設值。

視窗 屬性 設定及描述

Select Web Server Select the Web Server to deploy to

請選擇 Dynamo

Create or Select URL Prefix Mapping

URL Prefix Mapping 請輸入/Book，亦可在Existing Mappings中點選

Specify HTTP Server Information

HTTP Server Name 請輸入 IP Address

Specify HTTP Server Information

HTTP Port 請輸入 80

表 6 部署屬性設定

設定好後，回到 order Web Target，請在 order Web Target上再按一次滑鼠右鍵，這次選擇 Deploy，你就可以把這個網頁部署到 PowerDynamo，部署的 Web Site為 Book，請檢查網頁 webdw_saleorder.htm是否已出現在 Book Web Site內。

請開啟瀏覽器，輸入 http://localhost/book/webdw_saleorder.htm，執行看看所建立的Web DataWindow，並執行資料的修改以確保程式執行無誤。最後請參考圖 8的執行畫面。

在圖 8你會發現訂單明細資料的連結，這部分功能就請各位自行完成了。

第 11 頁，共 15 頁

圖 8 webdw_saleorder.htm執行結果

程式解說

讓我們來看看這個網頁所產生的程式碼，來了解它是如何運作的。事實上在

PowerBuilder Web Target內產生的網頁程式會經過一層包裝，這樣所產生的程式才會比較簡潔，程式設計員也不用再撰寫複雜的程式碼。那 PowerBuilder網頁如何被包裝？其實網頁在被部署至 PowerDynamo時，PowerBuilder就會把ObjMod80.ssc這個程式碼檔也部署至 PowerDynamo，它被部署至所對應網站的根目錄下。你在部署網頁時可注意 Output View視窗內的資訊，如圖 9。

圖 9 部署網頁過程的 Output View

有了這個觀念，再來看看部署至 PowerDynamo的 Web DataWindow程式碼。請你進入 PowerDynamo，連結進入 Book的 WebSite，你應該會看到 ObjMod80.ssc

第 12 頁，共 15 頁

檔及WebDW_SaleOrder.htm網頁，請開啟網頁 WebDW_SaleOrder.htm。

WebDW_SaleOrder.htm網頁第一行程式就是將 ObjMod80.ssc程式檔 import進來，以便在這個網頁程式內能夠引用。import程式碼如下所示：

Import ObjMod80.ssc程式片斷

1. <!--SCRIPT PSOBJMOD

2. import( site.GetRootDocument().location + "/ObjMod80.ssc" );

3. session.active = true;

4. InitObjects(session);

5. -->

第 2行程式就是呼叫載入 ObjMod80.ssc程式檔的 import()函數，其中的site.GetRootDocument().location就是 Web Site的根目錄，因為ObjMod80.ssc都是被部署至根目錄的。至於第 3及第 4行程式則是在做有關 session的初使設定。

強烈建議你參考 ObjMod80.ssc內的程式碼，因為由 PowerBuilder部署過來的程式碼就是經由 ObjMod80.ssc所包裝的。讓我們先看下一段產生的程式，再來說明它是如何引用 ObjMod80.ssc。

產生 Web DataWindow的 6行程式

1. <!--SCRIPT // {{ SCRIPT()

2. jagConn = new PSJaguarConnection("localhost:9000","jagadmin",

"","DataWindow/HTMLGenerator80", false);

3. dwSource = new PSDataWindowSourceClass("D:/Book/pb/book.pbl", "d_saleorder");

4. dbConn = new PSConnectionParmsClass("ConnectString='DSN=EAS Demo DB

V4;UID=dba;PWD=sql',

ConnectOption='SQL_DRIVER_CONNECT,SQL_DRIVER_NOPROMPT'" );

5. webDW = new PSDataWindowClass("webDW", false, jagConn, dwSource, dbConn);

6. webDW.SetColumnLink("id_1", "WebDW_SaleOrder_Item.htm", "p_1='id + \"\"'", "");

7. webDW.Generate();

8. // }}

9. -->

上述程式核心只有 6行，就是這 6行會產生出Web DataWindow。讓我們先看第2行程式碼：new PSJaguarConnection()，它建立了一個 PSJaguarConnection類別複本，並存在 jagConn變數中。這個類別宣告存在於 ObjMod80.ssc程式檔內，所以讓我們開啟 ObjMod80.ssc檔，用搜尋的方式找到這個類別宣告。請參考下

第 13 頁，共 15 頁

列程式，我們列出這個類別的宣告。

PSJaguarConnection類別宣告

1. /*******************

2. ** Definition of PSJaguarConnection

3. */

4. // this replaces / with .

5. class PSJaguarConnection(sServerName, sUserId, sPassword, sComponentName, bOneTrip)

6. {

7. function createJavaComponent(sComponentName, sInterfaceName)

8. {

9. if (arguments.length < 1 || sComponentName == null) {

10. sComponentName = this.sComponentName;

11. }

12. // If the component name used to be DataWindow/HTMLGenerator, then the user

13. // was using the default generator. Therefore we should change the name to the

14. // new default.

15. if (sComponentName == "DataWindow/HTMLGenerator") {

16. sComponentName = "DataWindow/HTMLGenerator80"

17. }

18. if (sComponentName == "") {

19. sComponentName = "DataWindow/HTMLGenerator80"

20. }

21. if (sComponentName == null) {

22. sComponentName = "DataWindow/HTMLGenerator80"

23. }

24. if (arguments.length < 2) {

25. sInterfaceName = sComponentName;

26. }

27. // make sure server name is an URL

28. var serverName = this.sServerName;

29. if (serverName.indexOf ("iiop:") == -1) serverName = "iiop://" +serverName;

30. var newComponent = java.CreateComponent(sComponentName, serverName,

this.sUserId, this.sPassword, sInterfaceName);

31. var jagError;

32. if (newComponent == null)

33. {

34. jagError = site.GetErrorInfo ();

第 14 頁，共 15 頁

35. psDocument.WriteLn ("ERROR: Creating Jaguar component '" + sComponentName + "', '" + jagError + "'<BR>");

36. }

37. return newComponent;

38. }

39. // default the args

40. var numArgs = arguments.length;

41. if (numArgs < 5) {

42. bOneTrip = false;

43. }

44. if (numArgs < 4) {

45. sComponentName = null;

46. }

47. if (numArgs < 3) {

48. sPassword = "guest";

49. }

50. if (numArgs < 2) {

51. sUserId = "Jaguar";

52. }

53. if (numArgs < 1) {

54. sServerName = "";

55. }

56. this.sServerName = sServerName;

57. this.sUserId = sUserId;

58. this.sPassword = sPassword;

59. this.sComponentName = sComponentName;

60. this.bOneTrip = bOneTrip;

61. this.CreateComponent = createJavaComponent;

62. }

我們來解釋它所含有的功能。這個類別宣告了一個函數，叫做

createJavaComponent()，範圍由第 7行至第 38行。其中第 12行到第 23行程式會將使用者所使用的Web DataWindow核心元件一律改成 HTMLGenerator80，不過前提是使用者要建立的是Web DataWindow才可以。第 30行會執行 DynaScript呼叫 Jaguar Server元件的命令：java.CreateComponent()，以建立元件複本，若成功的話，就將該元件複本傳回，如第 37行所示。函數宣告之後是類別本身屬性的宣告，它會依據參數的多寡來決定相關屬性的值，如第 39行至第 61行程式所示。

第 15 頁，共 15 頁

所以各位應該針對所新增的類別，查看其內容，這樣會更了解類別所含有的功

能。讓我們再回到Web DataWindow的 6行程式。先前 PSJaguarConnection()類別的主要功能在設定Web DataWindow核心元件所在的 Jaguar Server相關資訊，包括 Jaguar Server所在的 IP Address、連接的 Port Number、登入 Jaguar Server的 Id、Pwd以及所使用的元件名稱。至於第 3行程式，新增一個PSDataWindowSourceClass類別，其目的在設定Web DataWindow所使用的DataWindow物件及其所在的程式庫檔名及路徑。第 4行程式新增一個PSConnectionParmsClass類別，其目的在設定資料庫連結的相關資訊。第 5行程式新增一個很重要的類別，叫做 PSDataWindowClass，這個類別會將第 2、3及第 4行程式所新增的類別當作參數傳入，其目的為何？你可以想像這個類別就像包裹(Package)一樣，將所有功能彙集在一起，待需要的時候再呼叫它。所以最後第 6行及第 7行程式就是呼叫被包含進來類別的函數。你若要研究ObjMod80.ssc，就應該從 PSDataWindowClass類別參考起。

結論

在本篇文章中我們介紹了Web DataWindow的架構以及如何建立Web DataWindow網頁。在下一期文章中，我們將會介紹如何設定相關的 HTML屬性設定以及自行撰寫程式呼叫 HTMLGenerator80元件以產生 Web DataWindow的方法，同時也會介紹自行產生 HTMLGenerator80元件，以符合自己系統開發的需求。相信這樣的開發方式，對開發人員而言應是較具有彈性的，對於熟悉 n-tier的程式開發人員，就應該採用這樣的方式，建立各種不同的樣板程式，並套用物

件導向的觀念，才可以較快速及彈性的方式開發程式。