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

第 1.5 課:設計「送出」按鈕

當送出您的輸入表單時,頁面會將新記錄自動加到資料庫中。 在這一課,您將設計刊登新的清單送出按鈕來回到 all_records.jsp 頁面,讓您立即檢視資料庫中新的記錄。

若要設計送出按鈕:

  1. 在 new_record.jsp 檔案中,用滑鼠右鍵按一下您在網頁表單中建立的刊登新的清單按鈕,再選取內容
  2. 按一下新增規則。這時會開啟「新增導覽規則」視窗。
  3. 從「頁面」下拉框中,選取 all_records.jsp,再按一下確定
  4. 儲存頁面。 若要嘗試將記錄新增至資料庫,以驗證是否回到 all_records.jsp 頁面,請在測試伺服器上執行 new_record.jsp。
防止索引鍵重複
重要:

由於 ID 直欄是 ADS 表格中的主鍵,因此,您不能新增表格中已有 ID 值的記錄。在單元 2 中,您將知道如何使用自動產生序鍵為每筆新記錄自動建立新的未用索引鍵。

到時候,您必須在這個頁面中輸入未用的 ID 號碼來新增新的記錄。資料庫隨附的記錄使用 1 至 24 的 ID 號碼,所以您可以輸入 24 以上的任何數字做為主要索引鍵。 如果您輸入多筆記錄,請確定沒有重複的索引鍵。

將輸入連結至關聯式記錄(選用)

頁面中的輸入表單是一組已連結至您建立的關聯式記錄的 JavaServer Faces 輸入欄位。 請回想一下,您先前建立了關聯式記錄來代表資料庫 ADS 表格中的新記錄。透過連結方式,您可以將 JavaServer Faces 輸入元件連結至關聯式記錄中的直欄。

當您建立關聯式記錄時,精靈會自動將它的所有直欄連結至頁面中的輸入欄位。 如果您要手動變更,您可以將其他直欄連結至其他輸入欄位。 如果要將關聯式記錄中的直欄連結至輸入欄位,請從「頁面資料」視圖將直欄拖曳至欄位中。 您可以在表單上刪除「說明」輸入欄位,然後再重建,體驗一下這個過程。

您通常可以在工作台的左下角找到「頁面資料」視圖。 如果您找不到它,請移至功能表列,按一下視窗 > 顯示視圖 > 頁面資料。 一般而言,您只會在建立動態網頁時使用「頁面資料」視圖。

「頁面資料」視圖會用關聯式記錄或關聯式記錄清單等資料物件形式來儲存資料庫之類資料來源的連線。 這些資料物件不代表資料來源本身或頁面中的任何元件。 相反地,這些資料物件代表專案和資料來源之間的連線。 建立好這個連線之後,您可以從「頁面資料」視圖中,將資料物件拖曳到網頁來完成連線,以及在網頁中顯示資料來源中的資訊。 例如,以下是「頁面資料」視圖的圖片,顯示本指導教學期間建立的關聯式記錄清單:

「頁面資料」視圖。

在這個圖片中,您可以看到 all_recordlist (ADS) 關聯式記錄清單,後面接著這個關聯式記錄清單中的所有直欄。 定義好這個資料物件之後,您可以在「頁面資料」視圖中,依您所需要的任意次數,將這些直欄拖曳到網頁中的輸入元件,且不需要重新連接資料庫。

比方說,如果您要在網頁中顯示 DESCRIPTION 直欄的值,您會先將文字輸出欄位拖曳至頁面中,再從「頁面資料」視圖中,將 DESCRIPTION 直欄拖曳至這個文字輸出欄位。 這稱為將直欄連結至輸出欄位。

另外,如果您要讓使用者輸入資料庫 DESCRIPTION 直欄的新值,您也可以將文字輸入欄位拖曳到頁面中。 之後,再將 DESCRIPTION 直欄拖曳到這個文字輸入欄位。

下列步驟用來說明輸入欄位的概念以及連結程序;不過,這個指導教學中的這些步驟是選用的。 如果不需要,請跳至下一個課程。

  1. 在 new_record.jsp 檔中,按一下說明輸入欄位。按刪除鍵。
  2. 在「選用區」視圖中,按一下展開加強型 Faces 元件抽屜。
  3. 從選用區中,將輸入元件拖曳至您剛刪除的說明輸入欄位所在的資料格中。 這個資料格中現在有一個輸入欄位,但其中沒有 {ID} 或 {TITLE} 之類的文字,因為這個輸入欄位沒有連結至任何直欄。
  4. 在「頁面資料」視圖中,按一下展開關聯式記錄 > create_record(服務資料物件) > create_record (ADS), 再將 DESCRIPTION 直欄拖曳至您剛建立的輸入元件。輸入元件內的文字會改變, 表示現在已連結至 DESCRIPTION 直欄,如下圖所示:
    「頁面資料」視圖。
  5. 將檔案儲存起來,如果您想要的話,請在測試伺服器中執行頁面。

課程回顧

您已完成第 1.5 課。在這一課,您學到如何設計指令按鈕,也學到從選用區將 JSF 小組件拖放至網頁,讓資料連結至輸入欄位。

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