< 上一個課程 | 下一個課程 >

第 6 課:新增資料至頁面

在此練習中,您會將資料從這個指導教學隨附的資料庫中,新增至您在前一練習中建立的網頁上。
此項作業包含下列部分:

在本課程中,您還將使用 EGL 內容輔助功能,這個工具可供您用於完成程式設計陳述式,而不需要輸入整個陳述式。

新增記錄陣列至「頁面資料」視圖和「JSF 處理程式」

  1. 如果未開啟 allcustomers.jsp 檔,請透過在「企業瀏覽器」視圖中按兩下該檔案來開啟它。
  2. 找到「頁面資料」視圖,該視圖通常位於工作台的左下端。您可以透過使用標籤來顯示「頁面資料」視圖,但如果您找不到該視圖,請按一下視窗 > 顯示視圖 > 頁面資料
  3. 找到「選用區」視圖,該視圖通常位於工作台右側。如果找不到該視圖,請按一下視窗 > 顯示視圖 > 基本 > 選用區
  4. 選用區視圖中,按一下 EGL 抽屜以開啟它。
  5. 新建變數圖示從「選用區」視圖拖曳至編輯器中的 allcustomers.jsp 頁面。 這時會開啟建立新的 EGL 資料變數視窗。
  6. 選取類型下面,按一下記錄
  7. 記錄類型下面,按一下客戶 這樣,您選取了「記錄」組件,每一個陣列元素都將基於此組件。
  8. 輸入欄位的名稱欄位中,輸入此文字:
    customers
  9. 陣列內容下面,選取陣列勾選框。大小欄位留空。
  10. 清除新增控制項以在網頁上顯示 EGL 元素勾選框。

    「建立新的 EGL 資料變數」視窗與此圖片相似:

    「建立新的 EGL 資料變數」視窗

  11. 按一下確定 這時,在您拖曳變數的 JSP 上不會出現任何內容。原因是 EGL 在單獨的檔案(稱為「JSF 處理程式」)中建立了變數,該檔案包含用於回應 JSP 中事件的程式碼。 一個代表新變數的項目,會出現在 JSF 處理程式 > 資料下的「頁面資料」視圖中。
  12. 展開 JSF 處理程式 > 資料,然後展開 customers - Customer[] 客戶下方有 12 個圖示,代表此資料庫記錄中的 12 個欄位。

「頁面資料」視圖與此圖片相似:

具有可見之客戶陣列變數的「頁面資料」視圖

透過新增項目至「頁面資料」視圖,您同時也新增了記錄的陣列至 JSF 處理程式。在下一小節中,您將在網頁上建立相關欄位。

在網頁上顯示資料

可將列在「頁面資料」視圖中的資料,新增至網頁。
  1. 從「頁面資料」視圖中,將 customers - Customer[] 陣列變數拖曳到 allcustomers.jsp 檔上,並在「所有客戶的清單」文字下面,於前一練習中新增的空白行中釋放它。

    這時會開啟「插入清單控制項」視窗。此視窗列出資料庫記錄中的所有欄位。您可以利用這個視窗來選擇要在頁面上顯示的欄位。

  2. 要建立的資料控制項下面,請保留預設值多直欄資料表
  3. 建立控制項的用途下面,請按一下顯示現有記錄(唯讀)

    如果選取此選項,則頁面上的資料將顯示在唯讀輸出欄位中。如果選擇更新現有記錄,則頁面上的欄位將是您能夠在其中輸入的輸入欄位,在這些欄位下面將是供您連結動作的按鈕。您將在另一個頁面上建立此類型的欄位。對我們來說,建立新的記錄選項與更新現有記錄除了預設按鈕不同之外,均相同。

  4. 要顯示的直欄下面,請按一下按鈕。 這時您已取消選取所有欄位。
  5. 選取這些欄位旁邊的勾選框:
    • CUSTOMERID
    • FIRSTNAME
    • LASTNAME

    「插入清單控制項」視窗與此圖片相似:

    「插入清單控制項」視窗

  6. 按一下完成 這時會在頁面上建立一個資料表,其中包含您在「插入清單控制項」視窗中所選取三個欄位的三個直欄。
  7. 儲存頁面。

該頁面與此範例相似:

頁面的現行外觀

資料表中的直欄具有標題,這些標題基於資料庫中欄位的名稱。您可以變更這些標題,方法是按一下它們,開啟「內容」視圖,然後變更欄位。

資料表中的這三個文字欄位(分別顯示為 {CUSTOMERID}{FIRSTNAME}{LASTNAME}),代表資料庫資訊將出現在頁面上的位置。

從 EGL 程式庫呼叫函數

下一步是要新增程式碼至此頁面,此程式碼用於呼叫 CustomerLibrary.egl 程式庫中的函數。該函數從資料庫讀取資料,並讓該資料在頁面上可用。

  1. 用滑鼠右鍵按一下 allcustomers.jsp 檔內開放式區域中的任意位置。
  2. 從蹦現功能表中,按一下編輯頁面程式碼

    這時會在編輯器中開啟 allcustomers.egl 檔。此檔案用於保留「JSF 處理程式」組件。在接下來的步驟中,您新增程式碼至此「JSF 處理程式」,該程式碼用於從資料庫擷取資料,並將該資料放置在頁面上。

  3. 在 allcustomers.egl 檔中,找到 customers Customer[0];

    此程式碼行用於定義您建立的,要在頁面上顯示的記錄變數。您還需要定義一個記錄,用來儲存 SQL 呼叫的成功或失敗碼。

  4. 在緊跟 customers Customer[0]; 行之後的空白行中,請完全依照下面撰寫的內容新增下列程式碼:
    status StatusRec;
    請注意 StatusRec 下面的紅色波浪線,指出處理程式不知道該類型。需要新增 import 陳述式,以指示處理程式在何處尋找 StatusRec 記錄定義。您可以用滑鼠右鍵按一下編輯器視窗中的空白空間,然後按一下組織匯入,來自動執行此動作。
    StatusRec 下面的紅色波浪線和顯示「組織匯入」選項的下拉功能表。

    此功能的鍵盤快速鍵是 Ctrl+Shift+O。EGL 會檢查它可以看到的所有檔案,找出必要的資訊,然後將 import 陳述式新增至該檔案的頂端。

    現在,您將從資料庫和 SQL 狀態記錄擷取記錄。新增資料至頁面的最終步驟,是將這兩個變數傳遞至存取資料庫的函數。 此名為 GetCustomerListAll() 的函數,由「資料存取應用程式」精靈在上一課程中建立。

    請注意 handler 宣告後面大括弧內的行。 這些行會將值指定給「JSF 處理程式」的內容。 在 EGL 中,內容是名稱/值配對,用於修改組件的行為方式。 大部分類型的 EGL 組件具有一個以上的內容,且每一種類型的組件可以具有不同內容。在此情況下,「JSF 處理程式」已定義了 4 個內容:

    onConstructionFunction = onConstruction
    onConstructionFunction 內容會指定「JSF 處理程式」中的函數,當與「JSF 處理程式」相關聯的網頁 (JSP) 第一次顯示在瀏覽器中時,會執行該函數。在此情況下,內容會指定名為 onConstruction 的函數,依預設會在「JSF 處理程式」中建立該函數。在這個指導教學中,您將不使用此函數。
    onPreRenderFunction = onPreRender
    onPreRenderFunction 內容會指定「JSF 處理程式」中的函數,當相關聯的 JSP 每次顯示在瀏覽器中時(包括當使用者重新整理頁面,或檢視另一個頁面之後回到該頁面時),會執行該函數。在此情況下,內容會指定名為 onConstruction 的函數,依預設會在「JSF 處理程式」中建立該函數。在接下來的幾個步驟中,您將新增程式碼至此函數,以在頁面每次載入時從資料庫擷取現行資料。
    view = "allcustomers.jsp"
    view 內容會指定與「JSF 處理程式」相關聯的網頁。依預設,網頁和「JSF 處理程式」的名稱相同,副檔名除外。
    viewRootVar = viewRoot
    您使用 viewRoot 變數來取得對 JSF 元件樹狀結構的存取權。在這個指導教學中,您將不使用 viewRoot 變數。如需 JSF 元件和 viewRoot 變數的相關資訊,請參閱元件樹狀結構存取
  5. onPreRender() 函數中,新增程式碼以呼叫 GetCustomerListAll() 程式庫函數。此函數會從資料庫擷取客戶資料。在此情況下,請嘗試使用 EGL 編輯器中的內容輔助工具:
    1. 將游標放置在 function onPreRender()end 之間的空白行中。
    2. 輸入下列程式碼:
      cust
    3. Ctrl + 空格鍵 這時會開啟完成程式碼視窗,其中包含以 cust 開頭的所有可用的 EGL 指令和資源。
    4. 從內容輔助視窗中,選取 CustomerLib 程式庫,方法是使用鍵盤來強調顯示該程式庫並按 Enter 鍵,或使用滑鼠按兩下該程式庫。

      現在,新程式碼行會讀取 CustomerLib

    5. CustomerLib 之後,輸入一個句點。
    6. 再次按 Ctrl + 空格鍵 這時會再次開啟完成程式碼視窗。
    7. 從完成程式碼視窗中,選取 GetCustomerListAll(customerArray Customer[], status StatusRec) 函數,方法是強調顯示該函數並按 Enter 鍵,或使用滑鼠按兩下該函數。 請多加留意,不要選取函數 GetCustomerList(listSpec ListSpecification, listOut Customer[], status StatusRec)

      現在,新程式碼行會讀取 CustomerLib.GetCustomerListAll(customerArray, status),並已強調顯示 customerArray 引數。

    8. 將新程式碼行中的預設 customerArray 引數變更成您記錄變數的名稱:customers
    9. 使用分號結束該程式碼行。
    最後,新程式碼行會成為:
    CustomerLib.GetCustomerListAll(customers, status);
    另請注意,在檔案頂端附近有一個新的 import 陳述式,該陳述式會讀取 import eglderbydb.access.CustomerLib;。此行會匯入程式庫,因此您不需在程式碼中撰寫程式庫的完整路徑,可改為直接參照它。

    內容輔助已自動新增此 import 陳述式。 如果您尚未使用內容輔助或「組織匯入」功能來建立此 import 陳述式,則必須指定程式庫的明確位置,並使用下列名稱來定義程式庫名稱:eglderbydb.access.CustomerLib

  6. 儲存檔案。
現在,allcustomers.egl 檔與下列範例相似:
allcustomers.egl 檔的程式碼

如果您在編輯器中看到使用紅色 X 符號標示的任何錯誤,請確保您的程式碼與此檔案中的程式碼相符:第 6 課之後完成的 allcustomers.egl 檔

測試頁面

現在,該頁面已準備好在伺服器上執行。請遵循下列步驟來測試該頁面,並查看資料庫資料如何出現在頁面上。

在繼續之前,請採取下列預防措施:
  1. 儲存 allcustomers.egl 和 allcustomers.jsp 檔(如果尚未儲存),然後關閉這些檔案。
  2. 確保應用程式伺服器已啟動並已同步。
  1. 在「企業瀏覽器」視圖中,用滑鼠右鍵按一下 EGLWeb 專案,然後按一下產生
  2. 在「企業瀏覽器」視圖中,用滑鼠右鍵按一下 allcustomers.jsp 檔,而不是 allcustomers.egl 檔。
  3. 從蹦現功能表中,按一下執行方式 > 在伺服器中執行

    與上一課程相同,這時會在工作台內的 Web 瀏覽器中開啟網頁。此時,動態資料會出現在頁面上。如果您看不到動態資料,請按一下位址列旁邊的「重新整理」圖示。該頁面與此圖片相似:

    allcustomers.jsp 頁面的現行外觀

在下一課程中,您將建立詳細頁面,以顯示個別客戶記錄中的所有欄位。
< 上一個課程 | 下一個課程 >

意見