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

第 1.2 課:新增和佈置員工表

在這一課,您將利用 Java 視覺化編輯器將 JScrollPane 和 JTable 新增至應用程式。 在稍後的練習中,您將設計 JTable 從 Web 服務取得資料,Web 服務會傳回公司目錄中所有員工的記錄清單。

新增 JTable 之後,您將利用 Java 視覺化編輯器的設計視圖來自訂 JTable 的佈置,使它符合下列規格:

  • 使 JTable 水平跨越三個資料格,垂直跨越兩個資料格。
  • 新增左側插入項 15 像素。
  • 將 JTable 重新命名為 employeesTable。

在 Java 視覺化編輯器中開啟 DirectoryApp.java 檔案

如果要在 Java 視覺化編輯器中開啟 DirectoryApp.java 檔,請執行下列動作:
  1. 在 Java 視景的「套件瀏覽器」視圖中,展開 MyDirectory 專案和 directory.client 套件。
  2. 用滑鼠右鍵按一下 DirectoryApp.java 檔案,選取開啟工具 > 視覺化編輯器。 Java 視覺化編輯器會載入 Java 類別,並於圖形畫布區域上顯示設計。
提示:
  • 若要變更 Java 視覺化編輯器的外觀和操作方式,請跳至視窗 > 喜好設定 > Java > 視覺化編輯器,指定 Swing 外觀和操作方式。 您下次開啟類別時,喜好設定便會生效。 這個指導教學使用 Windows 外觀和操作方式。
  • 若要讓「視覺化編輯器」成為所有 Java 檔的預設編輯器,請按一下視窗 > 喜好設定,再跳至工作台 > 檔案關聯頁面來定義您的喜好設定。

在 JScrollPane 上新增 JTable

DirectoryApp.java 的主視窗利用含 JPanel 的 JFrame 來作為它的主要內容窗格。 我們的應用程式中的 JPanel 稱為 jContentPane。jContentPane 已設成使用稱為 GridBagLayout 的佈置管理程式類型。 GridBagLayout 以視覺化元件所能佔用的資料格線為基礎,是一種功能強大的佈置設計。 Java 視覺化編輯器會顯示格線邊框,方便您使用 GridBagLayout。 它也會在您將新元件放在格線上時顯示放置標記,此外,它亦會顯示在 GridBagLayout 上調整大小或移動的元件之控點。

如果要將員工表 (javax.swing.JTable) 新增至 DirectoryApp.java 使用者介面中,請執行下列動作:
  1. 在設計視圖或 Java Bean 視圖中,用滑鼠右鍵按一下 jContentPane,選取顯示格線。 紅色點虛線顯示格線邊框,藍色圓圈編號指示列和直欄號碼。 例如,請注意新建按鈕佔用第 1 列(格線 y)和第 3 欄(格線 x)的資料格。

    圖形式畫布的格線

  2. 在 Java 視覺化編輯器選用區中,選取 JScrollPane 上的 JTable 「JScrollPane 上的 JTable」圖示 Swing 元件, 此元件分配在選用區的 Swing 元件抽屜下。
    提示: 依預設,選用區會收合在設計區的右邊。您可以調整選用區的大小,也可以移動選用區。
  3. 將滑鼠指標移至第 1 列、第 0 直欄格線中的資料格:

    放在格線的位置

    • 當您將滑鼠指標移到格線上,滑鼠指標會顯示兩個編號方塊來根據滑鼠指標位置說明格線中的 x 和 y 座標。
    • 如果您將滑鼠指標直接停在格線邊框上,可能會建立新的列和直欄,現有的列和直欄會重新編碼。 在這個情況下,滑鼠指標的黃色方塊、格線之間的黃線,以及黃色直欄和列標籤表示這個行為,且會指出放置所將造成的影響。
  4. 按一下將 JScrollPane 和 JTable 放在第 0 欄和第 1 列的資料格中:

    將表格放在格線上

使 JScrollPane 和 JTable 跨越格線的多個直欄和列

現在,您要使 JScrollPane(及其子項 JTable)跨越三個直欄和兩列,以便有更好的調整間距和大小的行為。 如果要使表格跨越直欄和列,請執行下列動作:
  1. 在設計區域或 Java Beans 視圖中選取 JScrollPane(它應該仍在選取狀態,因為它是剛加入的)。 請注意 JScrollPane 的右側和底端的小綠方塊。 您將利用這些調整大小的控點來拖曳 JScrollPane,使它跨越多列和多直欄。
  2. 在 JScrollPane 右側的綠色控點上,按住滑鼠左鍵。
  3. 將滑鼠指標向右移,直到位置指出第 1 列、第 2 直欄為止。放開滑鼠按鈕時,深灰色陰影也會指出元件將佔用的資料格。

    拖曳表格跨越三個直欄

  4. 放開滑鼠按鈕。這時 JScrollPane 會跨越三個直欄。
  5. 重複類似的程序,拖曳 JScrollPane 的底端控點,直到 JScrollPane 跨入第 2 列為止:

    拖曳表格跨越兩列

在 GridBag 內自訂 JScrollPane 的間距

GridBagLayout 管理程式的另一個特性是您可以指定各種限制來進一步自訂佈置。 比方說,您可以指定下列限制:
  • 錨點:指定元件在資料格內的錨點方向,當使用者調整應用程式大小時,將影響元件如何移動。 比方說,元件錨點可以定在左上、左中、中間或右下。
  • 填入:指定元件依水平、垂直方向或兩者來佔用一或多個資料格內的所有可用空間。
  • 插入項:指定元件在上、下、左、右的邊距,讓元件和格線邊緣之間留有空隙。

如果要自訂 JScrollPane 的錨點、填入項和插入項,請執行下列動作:

  1. 在設計視圖或 Java Bean 視圖中,用滑鼠右鍵按一下 JScrollPane,選取自訂佈置

    jScrollPane 的蹦現功能表

    提示: 在選取和變更不同元件的版面配置時,「自訂佈置」對話框可以開著。 您可以隨時按一下功能表列中的「自訂佈置」按鈕來開啟「自訂佈置」對話框:

    「自訂佈置」功能表圖示

  2. 在「自訂佈置」對話框的「元件」標籤中,確定已按下「置中固定」按鈕。
  3. 確定已按下水平填入垂直填入按鈕。
  4. 增加 15 像素的插入項,讓 JScrollPane 的左邊距和應用程式的其他視覺化元件相似。

    「自訂佈置」對話框

    例如,表格現在對齊過濾器標籤。

    「自訂佈置」對話框

將新的 JTable 重新命名為更有用的值,並設為選取單一列:

由於您稍後會使用表格,因此,將 JTable 實例及其 getter 方法重新命名將會很有用。 如果要重新命名表格,請執行下列動作:
  1. 在 Java Bean 視圖中,用滑鼠右鍵按一下 jTable 元件,從蹦現功能表中選取重新命名欄位

    jTable 的蹦現功能表

  2. 輸入 employeesTable,按一下確定。 這時 JTable 名稱為 employeesTable,建立它的實例方法是 getEmployeesTable。
  3. 將表格設為只能選取一列:
    1. 在設計視圖中,選取 employeesTable。
    2. 在「內容」視圖中,選取 selectionMode 內容並設為 SINGLE_SELECTION。

      顯示 JTable 之 SINGLE_SELECTION 的「內容」視圖

    3. 儲存 DirectoryApp.java 檔。

課程回顧

在這一課,您已瞭解如何利用視覺化編輯器,將表格新增至現有的使用者介面。 您也學到如何自訂佈置、位置及間距。

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