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

第 5 課:建立網頁

在本課程中,您將以 Faces JSP 檔的形式建立網頁。在下一課程中,您將使用在上一課程中建立的資料組件和函數,新增資料至此頁面。完成該頁面之後,它將顯示資料庫中每一個記錄的清單。
這個指導教學使用 JavaServer Faces (JSF) 技術。JSF 提供了為 Web 應用程式開發使用者介面的架構。 JSF 中的網頁是 JavaServer Pages (JSP)。JSP 包含 JavaServer 控制項,可供您用於將 Java 程式碼內嵌至頁面,以提供動態內容。

從範本建立 JSP 檔

  1. 在「企業瀏覽器」視圖中,用滑鼠右鍵按一下 EGLWeb 專案中的 WebContent 資料夾,然後按一下新建 > 網頁 選取您要在其中放置新檔案的位置非常重要;否則,新檔案可能不會出現在您預期的位置。 這時會開啟「新建網頁」視窗。
  2. 檔名欄位中,輸入此檔名(包括副檔名):
    allcustomers.jsp
  3. 請確保資料夾欄位列出 /EGLWeb/WebContent 資料夾。
  4. 範本清單中,展開範本範例並按一下系列 A(無導覽) 此種類中的簡式網頁範本會顯示在預覽方框中。
  5. 預覽方框中,按一下 A_gray.htpl 範本。
  6. 確保已選取鏈結頁面至範本勾選框。

    「新建網頁」視窗與此圖片相似:

    「新建 Faces JSP 檔」畫面

  7. 按一下完成 這時會在編輯器中開啟新的 Faces JSP 檔。
  8. 按一下設計以在完整的編輯器視窗中顯示設計視圖。 您可能會在編輯器視窗右側看到「JSF 追蹤」視圖。依預設,Eclipse 會建立這個視圖,並與「選用區」視圖以及其他視圖共用空間。對於這個指導教學,不需要「JSF 追蹤」視圖。 可以按一下標籤中的 X 將其關閉。
    「JSF 追蹤」視圖可能會顯示黃色的警告三角形。
    您通常要在此視圖中顯示「選用區」。您可能需要按一下小雙箭頭,然後從功能表中選取「選用區」視圖:
    選取「選用區」視圖。
  9. 在新的 allcustomers.jsp 檔中,移除內容為 "Place your page content here" 的預設文字,用下列文字取代:
    所有客戶的清單
  10. Enter 鍵三次以插入空白行。 這些行會保留空間,讓您在下一課程中新增內容至此頁面。

    該頁面與此圖片相似:

    頁面的外觀

  11. 儲存檔案。

在伺服器上預覽網頁

現在,網頁上還沒有資料庫中的任何資料,但您可以在 Web 應用程式伺服器上執行 JSP 檔,並查看該頁面到目前為止的外觀。這個步驟非常重要;它可確保在頁面變得複雜之前,應用程式伺服器正確運作。
  1. 確保應用程式伺服器已啟動。伺服器名稱在伺服器視圖(依預設位於「編輯器」視圖下面)中,應該是可見的。伺服器應該在名稱後面顯示括在方括弧([ ])中的單字已啟動已同步。如果未顯示「已啟動」,請用滑鼠右鍵按一下伺服器名稱,然後按一下啟動。啟動過程可能需要幾分鐘。
    WebSphere Application Server 已啟動且已同步
  2. 必要的話,在「企業瀏覽器」視圖中,展開 EGLWeb/WebContent 資料夾。用滑鼠右鍵按一下 allcustomers.jsp 檔,然後按一下執行身分 > 在伺服器中執行 這時會開啟「定義新的伺服器」視窗。
  3. 定義新的伺服器視窗中,選取您的伺服器:
  4. 選取執行此專案時一律使用此伺服器勾選框。
    已選取伺服器。
  5. 按一下完成

這時會在工作台內的 Web 瀏覽器中開啟網頁。 該頁面與此圖片相似:

內部 Web 瀏覽器中頁面的外觀

如果您看到 HTTP 404 錯誤訊息(找不到頁面),請重新啟動伺服器,然後重新整理瀏覽器視窗。

如果您偏好使用外部 Web 瀏覽器,則可以從工作台內的 Web 瀏覽器中複製 URL,並將該 URL 貼到外部瀏覽器的位址欄位中。

Eclipse 可能會再次顯示「JSF 追蹤」視圖。您可以永久地移除該視圖,方法是向下捲動,直到找到內容為不要再次開啟它的鏈結,然後按一下該鏈結。
處理「JSF 追蹤」視圖的選項。

此頁面上尚未包含任何資料。在下一課程中,您將使用 EGL 新增資料至此頁面。

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

意見