轉載於:https://netbeans.org/kb/docs/java/quickstart-gui_zh_CN.html#project
(真的學到了 哈哈)
目錄
要學完本教程,您需要具備以下軟件和資源。
軟件或資源 | 要求的版本 |
---|---|
NetBeans IDE | 版本 6.9 及更高版本 |
Java 開發工具包 (JDK) | 版本 6、7 或 8 |
入門指南
使用 IDE 的 GUI 構建器,用戶無需深入了解布局管理器,便可以構建具有專業外觀的 GUI。只需將組件置於所需的位置,即可設置窗體布局。
有關 GUI 構建器可視反饋的描述,可參見 GUI 構建器可視反饋圖例。
創建項目
由於 IDE 中的所有 Java 開發都是在項目內進行的,因此我們首先需要新建一個用來存儲源文件及其他項目文件的 ContactEditor 項目。IDE 項目是一組 Java 源文件,外加與其關聯的元數據,其中包括特定於項目的屬性文件、控制構建和運行設置的 Ant 構建腳本以及一個將 Ant 目標映射到 IDE 命令的 project.xml 文件。盡管 Java 應用程序通常包括幾個 IDE 項目,但是,在本教程中,我們將構建一個完全存儲在單個項目中的簡單應用程序。
要創建新的 ContactEditor 應用程序項目,請執行以下操作:
- 選擇“文件”>“新建項目”。或者,也可以單擊 IDE 工具欄中的“新建項目”圖標。
- 在“類別”窗格中選擇 "Java" 節點,在“項目”窗格中選擇“Java 應用程序”。單擊“下一步”。
- 在“項目名稱”字段中輸入 ContactEditor,然后指定項目位置。
- 將“使用專用文件夾存儲庫”復選框保留為取消選中狀態。
- 確保“設置為主項目”復選框處於選中狀態,並清除“創建主類”字段。
- 單擊“完成”。
IDE 在系統上的指定位置創建 ContactEditor 文件夾。此文件夾包含項目的所有關聯文件,其中包括其 Ant 腳本、用於存儲源文件和測試的文件夾以及用於存儲特定於項目的元數據的文件夾。要查看項目結構,請使用 IDE 的“文件”窗口。
創建 JFrame 容器
創建新應用程序后,您可能已注意到“項目”窗口中的“源包”文件夾包含一個空的 <默認包> 節點。要繼續構建界面,我們需要創建一個 Java 容器,以便放置所需的其他 GUI 組件。在此步驟中,我們將使用 JFrame 組件創建一個容器,並將該容器置於一個新包中。
要添加 JFrame 容器,請執行以下操作:
- 在“項目”窗口中,右鍵單擊 ContactEditor 節點,然后選擇“新建”>“JFrame 窗體”。
此外,也可以選擇“新建”>“其他”>“Swing GUI 窗體”>“JFrame 窗體”以查找 JFrame 窗體。- 輸入 ContactEditorUI 作為類名。
- 在“包”中輸入 my.contacteditor。
- 單擊“完成”。
IDE 在 ContactEditorUI.java 應用程序內創建 ContactEditorUI 窗體和 ContactEditorUI 類,並在 GUI 構建器中打開 ContactEditorUI 窗體。請注意,my.contacteditor 包取代了默認包。
熟悉 GUI 構建器
現在,我們已為應用程序設置了一個新的項目,接下來讓我們再花點時間來熟悉 GUI 構建器的界面。
注:要通過交互式演示了解 GUI 構建器界面,請觀看了解 GUI 構建器 (.swf) 截屏視頻。
添加了 JFrame 容器后,IDE 會在一個 "Editor"(編輯器)標簽中打開新創建的 ContactEditorUI 窗體,該標簽具有一個包含幾個按鈕的工具欄,如上圖所示。ContactEditor 窗體在 GUI 構建器的 "Design"(設計)視圖中打開,並沿 IDE 的邊緣自動出現三個其他窗口;利用這些窗口,可以在構建 GUI 窗體時導航、組織和編輯這些窗體。
GUI 構建器的各個窗口包括:
- 設計區域。用於創建和編輯 Java GUI 窗體的 GUI 構建器主窗口。在該工具欄中,"Source"(源)按鈕用於查看類的源代碼,"Design"(設計)按鈕用於查看 GUI 組件的圖形視圖,而 "History"(歷史記錄)按鈕用於訪問文件更改的本地歷史記錄。使用其他工具欄按鈕可以方便地訪問常用命令,例如,在選擇模式和連接模式之間切換、對齊組件、設置自動調整組件大小行為以及預覽窗體。
- 導航器。在應用程序中以樹狀分層結構提供所有組件(包括可視和非可視)的表示形式。"Navigator"(導航器)還提供有關樹中哪個組件當前正在 GUI 構建器中進行編輯的可視反饋,並允許您在可用面板中組織這些組件。
- 組件面板。可用組件的可定制列表,包含 JFC/Swing、AWT 和 JavaBeans 組件的標簽以及布局管理器。此外,您也可以使用定制器在 "Palette"(組件面板)中創建類別以及刪除和重新排列其中顯示的類別。
- 屬性窗口。顯示 GUI 構建器、"Navigator"(導航器)窗口、"Projects"(項目)窗口或 "Files"(文件)窗口中當前所選組件的屬性。
如果單擊 "Source"(源)按鈕,IDE 將在編輯器中顯示應用程序的 Java 源代碼,其中包括由 GUI 構建器自動構建的代碼部分,這些部分將以灰色區域表示(選中時變為藍色),稱為“保護塊”。保護塊是 "Source"(源)視圖中不可編輯的受保護區域。當處於 "Source"(源)視圖中時,只能編輯顯示在編輯器白色區域中的代碼。如果需要更改保護塊內的代碼,請單擊 "Design"(設計)按鈕從 IDE 的編輯器返回至 GUI 構建器,以便對窗體進行必要的調整。保存所做的更改時,IDE 會更新文件的源代碼。
注:還有一個供高級開發者使用的 "Palette Manager"(組件面板管理器),使用該管理器可以將 JAR、庫或其他項目中的定制組件添加到 "Palette"(組件面板)中。要通過組件面板管理器添加定制組件,請選擇 "Tools"(工具)> "Palette"(組件面板)> "Swing/AWT Components"(Swing/AWT 組件)。
主要概念
通過簡化創建圖形界面的工作流,IDE 的 GUI 構建器解決了創建 Java GUI 的核心問題,從而使開發者不必再使用復雜的 Swing 布局管理器。這一點是通過擴展目前的 NetBeans IDE GUI 構建器功能以支持直觀的“自由設計”模式(具有易於理解和使用的簡單布局規則)來實現的。設置窗體布局時,GUI 構建器將提供可視基准線,用於建議最佳組件間距和對齊方式。在后台,GUI 構建器會將您的設計理念轉化為使用新的 GroupLayout 布局管理器和其他 Swing 結構實現的功能性 UI。由於它使用動態布局模型,因此使用 GUI 構建器構建的 GUI 在運行時將按預期方式工作,同時會在不改變組件之間的定義關系的情況下進行相應的調整以適應所做的任何更改。只要您調整窗體大小、轉換語言環境或指定不同的外觀,GUI 就會根據目標外觀的插入和偏移量自動進行調整。
自由設計
在 IDE 的 GUI 構建器中,只需像使用絕對定位那樣將組件放在所需的位置,便可以構建窗體。GUI 構建器將確定需要哪些布局屬性,然后自動構建代碼。您無需關注插入量、錨點以及填充之類的問題。
自動組件定位(對齊放置)
將組件添加到窗體時,GUI 構建器將提供可視反饋,協助您根據操作系統的外觀來定位組件。GUI 構建器針對組件應在窗體中放置的位置提供一些有幫助的內聯提示和其他可視反饋,並自動使組件沿基准線對齊。它根據已放在窗體中的組件的位置提出這些建議,同時使填充仍保持靈活性,以便在運行時能夠正確地呈現不同的目標外觀。
可視反饋
GUI 構建器還提供有關組件錨點和鏈接關系的可視反饋。通過這些指示符,可以快速識別各種定位關系和組件鎖定行為,這些關系和行為將影響 GUI 在運行時的顯示和行為方式。這加快了 GUI 的設計過程,使您能夠快速創建具有專業外觀和相應功能的可視界面。
先打基礎
現在,您已熟悉了 GUI 構建器的界面,接下來該着手開發 ContactEditor 應用程序的 UI 了。在此部分,我們將介紹如何使用 IDE 的組件面板將所需的各種 GUI 組件添加到窗體中。
有了 IDE 的“自由設計”模式,您將不必再費力地使用布局管理器來控制容器內組件的大小和位置。只需將所需的組件拖放至 GUI 窗體中,如下面提供的各圖所示。
注:有關以下部分的交互式演示,請觀看添加單個和多個組件 (.swf) 截屏視頻。
添加組件:基礎
盡管 IDE 的 GUI 構建器簡化了創建 Java GUI 的過程,但是在開始布局之前大體設計出界面的外觀通常還是會很有幫助的。許多界面設計者將此視為一種“最佳做法”技術,但對本教程來說,只需跳轉至后面的預覽 GUI 部分,瀏覽一下最終窗體應具有的外觀即可。
由於我們已經將 JFrame 添加為窗體的頂層容器,因此下一步需要添加幾個 JPanel,以便使用帶標題的邊框將 UI 的多個組件歸到其中。請參見以下各圖,並注意在完成此操作時 IDE 的“拖放”行為。
添加 JPanel:
- 在 "Palette"(組件面板)窗口中,通過單擊並松開鼠標按鈕,從 "Swing Containers"(Swing 容器)類別中選擇 "Panel"(面板)組件。
- 將光標移到 GUI 構建器中窗體的左上角。當組件的位置靠近容器的左上邊緣時,將出現指示首選邊距的水平和垂直對齊基准線。在窗體中單擊,將 JPanel 放在此位置上。
JPanel 組件出現在 ContactEditorUI 窗體中,並以橙色突出顯示,表示它已選中。在松開鼠標按鈕后,將出現小指示符來顯示組件的錨點關系,並在 "Navigator"(導航器)窗口中顯示相應的 JPanel 節點,如下圖所示。
接下來,需要調整 JPanel 的大小,為稍后在其中放置的組件留出空間,在此我們需要先花一些時間了解 GUI 構建器的另一個可視化功能。要執行此操作,我們需要取消選中剛添加的 JPanel。由於尚未添加標題邊框,因此將看不到該面板。不過請注意,當將光標移動到 JPanel 上時,其邊緣會變為淺灰色,這樣便可以清楚地看見它的位置。只需單擊該組件內的任意位置,便可以重新選中它,並且將會再次出現大小調整控柄和錨點指示符。
調整 JPanel 的大小:
- 選中剛剛添加的 JPanel。小的方形大小調整控柄將會再次出現在組件周圍。
- 單擊並按住 JPanel 右邊緣上的大小調整控柄,然后拖動直到靠近窗體邊緣處出現對齊基准虛線。
- 松開大小調整控柄以調整組件大小。
按照建議的偏移將 JPanel 組件延伸至容器的左邊距和右邊距,如下圖所示。
至此,我們已添加了用於容納 UI 名稱信息的面板,接下來需要重復該過程來添加另一個面板,它位於第一個面板正下方,用於容納電子郵件信息。請參見以下各圖再次執行前面的兩個任務,同時注意 GUI 構建器的建議位置。請注意,建議的兩個 JPanel 之間的垂直間距要比邊緣處的間距小得多。添加了第二個 JPanel 后,調整其大小,使它充滿窗體的其余垂直空間。
由於我們需要在外觀上區分出 GUI 上半部分和下半部分的功能,因此需要為每個 JPanel 添加邊框和標題。我們將首先使用 "Properties"(屬性)窗口完成此操作,然后將嘗試使用彈出式菜單完成此操作。
將標題邊框添加到 JPanel 中:
- 選擇 GUI 構建器中的頂部 JPanel。
- 在 "Properties"(屬性)窗口中,單擊 "border" 屬性旁邊的省略號按鈕 (...)。
- 在出現的 JPanel 邊框編輯器中,選擇 "Available Borders"(可用邊框)窗格中的 "TitledBorder"(帶標題的邊框)節點。
- 在位於下方的 "Properties"(屬性)窗格中,為 "Title"(標題)屬性輸入 Name。
- 單擊 "Font"(字體)屬性旁邊的省略號 (...),然后為 "Font Style"(字體樣式)選擇 "Bold"(粗體),為 "Size"(大小)輸入 12。單擊 "OK"(確定)退出對話框。
- 選擇底部 JPanel 並重復步驟 2 至 5,但此次需要右鍵單擊 JPanel,然后使用彈出式菜單訪問 "Properties"(屬性)窗口。為 "Title"(標題)屬性輸入 E-mail。
帶標題的邊框將添加到兩個 JPanel 組件中。
將單個組件添加到窗體
現在,我們需要着手添加一些組件,它們實際上將提供聯系人列表中的聯系人信息。在此任務中,我們將添加四個顯示聯系人信息的 JTextField 以及描述它們的 JLabel。執行此任務時,請注意 GUI 構建器顯示的水平和垂直基准線,它們用於根據操作系統外觀所定義的間距來建議首選組件間距。這可確保在運行時自動呈現與目標操作系統的外觀一致的 GUI。
將 JLabel 添加到窗體中:
- 在 "Palette"(組件面板)窗口中,從 "Swing Controls"(Swing 控件)類別中選擇 "Label"(標簽)組件。
- 將光標移到先前添加的 Name JPanel 上。當出現基准線指示 JLabel 位於 JPanel 的左上角(此時與上邊緣和左邊緣之間存在較小的邊距)時,請單擊鼠標以放置此標簽。
JLabel 將添加到窗體中,並且 "Inspector"(檢查器)窗口中將添加表示該組件的相應節點。
在繼續操作之前,我們需要編輯剛添加的 JLabel 的顯示文本。盡管可以在任何時候編輯組件顯示文本,但最簡便的方法是在添加它們時進行編輯。
編輯 JLabel 的顯示文本:
- 雙擊 JLabel 以選中其顯示文本。
- 鍵入 First Name:,然后按 Enter 鍵。
將顯示 JLabel 的新名稱,並且組件的寬度會隨着編輯的內容進行相應地調整。
接下來,我們將添加 JTextField,以便大致了解 GUI 構建器的基線對齊功能。
將 JTextField 添加到窗體中:
- 在 "Palette"(組件面板)窗口中,從 "Swing Controls"(Swing 控件)類別中選擇 "Text Field"(文本字段)組件。
- 將光標移到緊靠剛添加的 First Name: JLabel 右側的位置。當出現水平基准線指示 JTextField 的基線與 JLabel 的基線對齊,並且以垂直基准線給出兩個組件之間的建議間距時,請單擊鼠標以放置 JTextField。
JTextField 將與窗體中 JLabel 的基線對齊,如下圖所示。請注意,JLabel 略微向下進行了移動,以便與較高的文本字段的基線對齊。同以前一樣,"Navigator"(導航器)窗口中將添加表示該組件的節點。
在繼續操作之前,我們需要在剛添加的兩個組件的右側緊接着再添加一個 JLabel 和一個 JTextField,如下圖所示。這次輸入 Last Name: 作為 JLabel 的顯示文本,並暫時將 JTextField 的占位符文本保留原樣。
調整 JTextField 的大小:
- 選中剛添加到 Last Name: JLabel 右側的 JTextField。
- 將 JTextField 右邊緣的大小調整控柄向封閉 JPanel 的右邊緣拖動。
- 當出現垂直對齊基准線以給出文本字段與 JPanel 右邊緣之間的建議邊距時,請松開鼠標按鈕以調整 JTextField 的大小。
JTextField 的右邊緣將與 JPanel 的邊緣對齊,並留出建議的邊緣邊距,如下圖所示。
將多個組件添加到窗體
現在,我們將添加 Title: 和 Nickname: JLabel,它們用於描述我們將在稍后添加的兩個 JTextField。我們將在按住 Shift 鍵的同時拖放組件,以便將它們快速添加到窗體中。執行此任務時,同樣請注意 GUI 構建器顯示的用於建議首選組件間距的水平和垂直基准線。
將多個 JLabel 添加到窗體中:
- 在 "Palette"(組件面板)窗口中,通過單擊並松開鼠標按鈕,從 "Swing Controls"(Swing 控件)類別中選擇 "Label"(標簽)組件。
- 將光標移到先前在窗體中添加的 First Name: JLabel 的正下方。當出現基准線指示新 JLabel 的左邊緣與上方 JLabel 的左邊緣對齊,並且它們之間存在較小邊距時,請按住 Shift 鍵單擊鼠標以放置第一個 JLabel。
- 繼續按住 Shift 鍵的同時,在緊鄰第一個 JLabel 的右側放置另一個 JLabel。確保在放置第二個 JLabel 前松開 Shift 鍵。如果在放置最后一個 JLabel 前忘記松開 Shift 鍵,只需按 Esc 鍵即可。
JLabel 將添加到窗體中,從而創建第二行組件,如下圖所示。"Navigator"(導航器)窗口中將添加表示每個組件的節點。
在繼續操作之前,我們需要編輯 JLabel 的名稱,以便能夠看到將在以后設置的對齊效果。
編輯 JLabel 的顯示文本:
- 雙擊第一個 JLabel 以選中其顯示文本。
- 鍵入 Title:,然后按 Enter 鍵。
- 重復步驟 1 和 2,為第二個 JLabel 的名稱屬性輸入 Nickname:。
JLabel 的新名稱將顯示在窗體中,並且它們會隨着編輯內容的加寬而發生位移,如下圖所示。
插入組件
注:有關以下部分的交互式演示,請觀看插入組件 (.swf) 截屏視頻。
通常,需要在窗體中已放置的組件之間添加組件。只要在兩個現有組件之間添加組件,GUI 構建器就會自動移動它們,以便為新組件留出空間。為了對此進行演示,我們將在先前添加的兩個 JLabel 之間插入一個 JTextField,如下面的兩幅圖所示。
在兩個 JLabel 之間插入 JTextField:
- 在 "Palette"(組件面板)窗口中,從 "Swing Controls"(Swing 控件)類別中選擇 "Text Field"(文本字段)組件。
- 將光標移到位於第二行的 Title: 和 Nickname: JLabel 上,使 JTextField 與兩者都重疊,並與它們的基線對齊。如果在放置新文本字段時遇到困難,可以將其與 Nickname JLabel 的左基准線對齊,如下面的第一幅圖所示。
- 單擊鼠標以將 JTextField 放置在 Title: 和 Nickname: JLabel 之間。
JTextField 在兩個 JLabel 之間對齊放置。最右側的 JLabel 會向 JTextField 的右側移動,以適應建議的水平偏移。
我們仍需要將另外一個 JTextField 添加到窗體中,它將在窗體的右側顯示每個聯系人的昵稱。
添加 JTextField:
- 在 "Palette"(組件面板)窗口中,從 Swing 類別中選擇 "Text Field"(文本字段)組件。
- 將光標移到 Nickname 標簽的右側,然后單擊鼠標以放置該文本字段。
JTextField 在其左側的 JLabel 旁邊對齊放置。
調整 JTextField 的大小:
- 將在先前任務中添加的 Nickname: 標簽的 JTextField 大小調整控柄向封閉 JPanel 的右側拖動。
- 當出現垂直對齊基准線以給出文本字段與 JPanel 邊緣之間的建議邊距時,請松開鼠標按鈕以調整 JTextField 的大小。
JTextField 的右邊緣將與 JPanel 的邊緣對齊,並留出建議的邊緣邊距;同時,GUI 構建器會推斷出合適的大小調整行為。
- 按 Ctrl-S 組合鍵保存該文件。
更進一步
對齊是創建具有專業外觀的 GUI 的一個最基本方面。在上一部分中,我們通過將 JLabel 和 JTextField 組件添加到 ContactEditorUI 窗體中,大致了解了 IDE 的對齊功能。接下來,我們將在使用應用程序所需的其他各種組件的過程中更深入地了解 GUI 構建器的對齊功能。
組件對齊
注:有關以下部分的交互式演示,請觀看對齊和錨定組件 (.swf) 截屏視頻。
每次將組件添加到窗體中時,GUI 構建器都會有效地將它們對齊,出現的對齊基准線可以證明這一點。但是,有時也需要在組件組之間指定不同的關系。先前我們添加了四個 ContactEditor GUI 所需的 JLabel,但並未將它們對齊。現在,我們將對齊兩列 JLabel,以使它們的右邊緣排列整齊。
對齊組件:
- 按住 Ctrl 鍵,然后單擊以選擇窗體左側的 First Name: 和 Title: JLabel。
- 單擊工具欄中的 "Align Right in Column"(列向右對齊)按鈕 (
)。或者,也可以右鍵單擊其中任一組件,然后從彈出式菜單中選擇 "Align"(對齊)> "Right"(列右側)。
- 對 Last Name: 和 Nickname: JLabel 也重復此操作。
JLabel 的位置將會移動,以使它們的顯示文本的右邊緣對齊。同時,也會更新錨點關系,指示組件已分組。
在結束先前添加的 JTextField 的操作之前,我們需要確保 JLabel 之間插入的兩個 JTextField 設置為可正確調整大小。與拉伸到窗體右邊緣的兩個 JTextField 不同,所插入組件的大小可調性不是自動設置的。
設置調整組件大小行為:
- 按住 Ctrl 鍵單擊兩個插入的 JTextField 組件,以便在 GUI 構建器中將它們選中。
- 在同時選中這兩個 JTextField 的情況下,右鍵單擊其中的任何一個,然后從彈出式菜單中選擇 "Auto Resizing"(自動調整大小)> "Horizontal"(水平)。
JTextField 將被設置為在運行時水平調整大小。同時,也會更新對齊基准線和錨點指示符,以提供組件關系的可視反饋。
將組件設置為相同大小:
- 按住 Ctrl 鍵單擊窗體中的所有四個 JTextField 以將它們選中。
- 在選中了這些 JTextField 的情況下,右鍵單擊其中任何一個,然后從彈出式菜單中選擇 "Set Same Size"(設置相同大小)> "Same Width"(相同寬度)。
這些 JTextField 均會設置為相同的寬度,並且每個 JTextField 的上邊緣都將添加指示符,以提供組件關系的可視反饋。
現在,我們需要添加另一個描述 JComboBox 的 JLabel,用戶可以使用該 JComboBox 來選擇 ContactEditor 應用程序將顯示的信息格式。
將 JLabel 與組件組對齊:
- 在 "Palette"(組件面板)窗口中,從 Swing 類別中選擇 "Label"(標簽)組件。
- 將光標移到 JPanel 左側的 First Name 和 Title JLabel 下方。當出現基准線指示新 JLabel 的右邊緣與上方組件組(兩個 JLabel)的右邊緣對齊時,請單擊鼠標以放置該組件。
該 JLabel 將與上方的 JLabel 列右側對齊,如下圖所示。GUI 構建器將更新指示組件間距和錨點關系的對齊狀態線。
與在先前的示例中一樣,雙擊該 JLabel 以選中其顯示文本,然后輸入 Display Format: 作為顯示名稱。請注意,當該 JLabel 對齊放置時,其他組件將發生位移以適應較長的顯示文本。
基線對齊
每當添加或移動包含文本的組件(JLabel、JTextField 等)時,IDE 就會提供對齊建議,這些建議基於組件中文本的基線。例如,先前插入 JTextField 時,其基線會自動與相鄰的 JLabel 對齊。
現在,我們將添加一個組合框,用戶可以使用它來選擇 ContactEditor 應用程序將顯示的信息格式。在添加 JComboBox 時,我們會將其基線與 JLabel 文本的基線對齊。請再次注意為幫助定位而出現的基線對齊基准線。
對齊組件的基線:
- 在 "Palette"(組件面板)窗口中,從 "Swing Controls"(Swing 控件)類別中選擇 "Combo Box"(組合框)組件。
- 將光標移到緊靠剛添加的 JLabel 右側的位置。當出現水平基准線指示 JComboBox 的基線與 JLabel 中文本的基線對齊,並且以垂直基准線給出兩個組件之間的建議間距時,請單擊鼠標以放置該組合框。
該組件將與其左側的 JLabel 中的文本的基線對齊,如下圖所示。GUI 構建器將顯示指示組件間距和錨點關系的狀態線。
調整 JComboBox 的大小:
編輯組件模型不在本教程的涉及范圍內,因此我們將暫時保留 JComboBox 的占位符項列表的原樣。
回顧所學內容
我們已經出色地完成了構建 ContactEditor GUI 的過程,現在我們需要花幾分鍾再添加幾個界面所需的組件來重溫學過的內容。
到目前為止,我們一直在介紹如何將組件添加到 ContactEditor GUI 中,並使用 IDE 的對齊基准線來幫助定位。但還有另一個重要方面,就是了解如何在組件放置過程中使用錨點。盡管我們尚未討論它,但您已經利用了此功能,只是沒有意識到。如前面所提到的,只要將組件添加到窗體中,IDE 就會通過基准線給出建議的目標外觀首選位置。在放置新組件的同時,會將該組件錨定在最近的容器邊緣或組件上,以確保在運行時保持組件關系。在此部分,我們將重點介紹如何以更簡化的方式完成這些任務,同時指出 GUI 構建器在后台執行的工作。
添加、對齊和錨定
在 GUI 構建器中,可以通過簡化典型工作流操作來快捷、輕松地設置窗體布局。只要將組件添加到窗體中,GUI 構建器就會自動將組件對齊放置到首選位置並設置所需的鏈接關系,以便您可以專注於設計窗體,而不必疲於應付復雜的實現細節。
添加並對齊 JLabel 以及編輯其顯示文本:
- 在 "Palette"(組件面板)窗口中,從 "Swing Controls"(Swing 控件)類別中選擇 "Label"(標簽)組件。
- 將光標移到窗體底部 JPanel 的 E-mail 標題的正下方。當出現基准線指示該標簽位於 JPanel 的左上角(此時與上邊緣和左邊緣之間存在較小的邊距)時,請單擊鼠標以放置 JLabel。
- 雙擊 JLabel 以選中其顯示文本。然后,鍵入 E-mail Address: 並按 Enter 鍵。
JLabel 將對齊放置到窗體中的首選位置,並且錨定在封閉 JPanel 的上邊緣和左邊緣。同以前一樣,"Navigator"(導航器)窗口中將添加表示該組件的相應節點。
添加 JTextField:
- 在 "Palette"(組件面板)窗口中,從 "Swing Controls"(Swing 控件)類別中選擇 "Text Field"(文本字段)組件。
- 將光標移到緊靠剛添加的 E-mail Address 標簽右側的位置。當出現基准線指示 JTextField 的基線與 JLabel 中文本的基線對齊,並且以垂直基准線給出兩個組件之間的建議邊距時,請單擊鼠標以放置該文本字段。
JTextField 在 E-mail Address: JLabel 的右側對齊放置並鏈接到該 JLabel。"Inspector"(檢查器)窗口中也將添加與其對應的節點。
- 將 JTextField 的大小調整控柄向封閉 JPanel 的右側拖動,直到出現對齊基准線以給出 JTextField 和 JPanel 邊緣之間的建議偏移。
JTextField 的右邊緣將與指示首選邊距的對齊基准線對齊。
現在,我們需要添加 JList,它將用於顯示 ContactEditor 的整個聯系人列表。
添加 JList 並調整其大小:
- 在 "Palette"(組件面板)窗口中,從 "Swing Controls"(Swing 控件)類別中選擇 "List"(列表)組件。
- 將光標移到先前添加的 E-mail Address JLabel 的正下方。當出現基准線指示 JList 的左邊緣和上邊緣分別與 JPanel 的左邊緣和上方的 JLabel 對齊(留出首選邊距)時,請單擊鼠標以放置 JList。
- 將 JList 的右側大小調整控柄向封閉 JPanel 的右側拖動,直到出現對齊基准線以指示其寬度與上方 JTextField 的寬度相同。
JList 在對齊基准線指定的位置對齊放置,並且 "Inspector"(檢查器)窗口中顯示與其對應的節點。另請注意,窗體將會擴展以適應新添加的 JList。
由於 JList 用於顯示較長的數據列表,因此通常需要添加 JScrollPane。只要添加了需要 JScrollPane 的組件,GUI 構建器就會自動為您添加 JScrollPane。因為 JScrollPane 是非可視組件,所以必須使用 "Inspector"(檢查器)窗口才能查看或編輯 GUI 構建器創建的任何 JScrollPane。
調整組件大小
注:有關以下部分的交互式演示,請觀看縮進組件並調整其大小 (.swf) 截屏視頻。
通常,將幾個相關組件(如模態對話框中的按鈕)設置為相同大小對保持外觀一致性很有好處。為演示此操作,我們將在 ContactEditor 窗體中添加四個 JButton,這些按鈕用於添加、編輯和刪除聯系人列表中的各個條目,如以下各圖所示。之后,我們將四個按鈕設置為相同大小,以便能夠容易地識別出它們在提供相關的功能。
添加並對齊多個按鈕以及編輯其顯示文本:
- 在 "Palette"(組件面板)窗口中,從 "Swing Controls"(Swing 控件)類別中選擇 "Button"(按鈕)組件。
- 將 JButton 移到底部 JPanel 中 E-mail Address JTextField 的右邊緣。當出現基准線指示 JButton 的基線和右邊緣與 JTextField 的基線和右邊緣對齊時,請按住 Shift 鍵單擊鼠標,從而沿 JFrame 的右邊緣放置第一個按鈕。在松開鼠標按鈕時,JTextField 的寬度會縮減以容納 JButton。
- 將光標移到底部 JPanel 中 JList 的右上角。當出現基准線指示 JButton 的上邊緣和右邊緣與 JList 的上邊緣和右邊緣對齊時,請按住 Shift 鍵單擊鼠標,從而沿 JFrame 的右邊緣放置第二個按鈕。
- 在已添加的兩個 JButton 的下方再添加兩個 JButton,以創建一個列。請確保按照建議的間距放置 JButton 並保持間距的一致性。如果在放置最后一個 JButton 前忘記松開 Shift 鍵,只需按 Esc 鍵即可。
- 設置每個 JButton 的顯示文本。(可以通過右鍵單擊按鈕並選擇 "Edit Text"(編輯文本)來編輯按鈕的文本。或者,也可以單擊按鈕,稍等片刻,然后再次單擊按鈕。)為最上面的按鈕輸入
Add
,為第二個按鈕輸入Edit
,為第三個按鈕輸入Remove
,為第四個按鈕輸入As Default
。JButton 組件在對齊基准線指定的位置對齊放置。按鈕的寬度將會更改以適應新名稱。
現在,已將按鈕放置在所需的位置,接下來,我們要將四個按鈕設置為相同的大小以保持外觀一致性,同時表明它們在功能上是彼此相關的。
將組件設置為相同大小:
縮進
通常,需要將多個組件歸到另一個組件下,以表明它們屬於一個相關功能組。一個典型的例子是,在同一標簽下放置幾個相關的復選框。利用 GUI 構建器中提供的專用基准線(針對操作系統外觀給出首選偏移建議),可以輕松完成縮進。
在此部分,我們將在一個 JLabel 下添加幾個 JRadioButton,用戶可以使用這些 JRadioButton 定制應用程序顯示數據的方式。請參見以下各圖來執行此任務,或者單擊此操作過程之后的“查看演示”鏈接來查看交互式演示。
縮進 JLabel 下的 JRadioButton:
- 將一個名為 Mail Format 的 JLabel 添加到窗體中 JList 的下方。確保該標簽與上方的 JList 左側對齊。
- 在 "Palette"(組件面板)窗口中,從 "Swing" 類別中選擇 "Radio"(單選按鈕)組件。
- 將光標移到剛添加的 JLabel 下方。當出現基准線指示 JRadioButton 的左邊緣與 JLabel 的左邊緣對齊時,請將 JRadioButton 稍微向右移動,直到出現次級縮進基准線。按住 Shift 鍵單擊鼠標以放置第一個單選按鈕。
- 將光標移到第一個 JRadioButton 的右側。按住 Shift 鍵單擊鼠標以放置第二個和第三個 JRadioButton,同時注意保持建議的組件間距。請確保在放置最后一個 JRadioButton 前松開 Shift 鍵。
- 設置每個 JRadioButton 的顯示文本。(可以通過右鍵單擊按鈕並選擇 "Edit Text"(編輯文本)來編輯按鈕的文本。或者,也可以單擊按鈕,稍等片刻,然后再次單擊按鈕。)為左側的單選按鈕輸入
HTML
,為第二個單選按鈕輸入Plain Text
,為第三個單選按鈕輸入Custom
。三個 JRadioButton 將添加到窗體中,並且縮進在 Mail Format JLabel 的下方。
現在,我們需要將三個 JRadioButton 添加到一個 ButtonGroup 中來實現所需的開啟/關閉行為,即一次只能選中一個單選按鈕。這又將確保 ContactEditor 應用程序的聯系人信息能夠以我們選擇的郵件格式顯示。
將 JRadioButton 添加到 ButtonGroup 中:
- 在 "Palette"(組件面板)窗口中,從 "Swing Controls"(Swing 控件)類別中選擇 "Button Group"(按鈕組)組件。
- 單擊 GUI 構建器設計區域中的任何位置,以將 ButtonGroup 組件添加到窗體中。請注意,ButtonGroup 本身不會顯示在窗體中,而是顯示在 "Navigator"(導航器)的 "Other Components"(其他組件)區域中。
- 選擇窗體中的所有三個 JRadioButton。
- 在 "Properties"(屬性)窗口中,從 "buttonGroup" 屬性組合框中選擇 "buttonGroup1"。
三個 JRadioButton 將添加到此按鈕組中。
- 按 Ctrl-S 組合鍵保存該文件。
進行最后的調整
我們已大致成功地生成了 ContactEditor 應用程序的 GUI,但還有幾項工作尚待完成。在此部分,我們將介紹 GUI 構建器簡化的其他幾項典型布局任務。
最后加工
現在,我們需要添加一些按鈕,使用戶可以確認他們輸入的單個聯系人的信息,並將該信息添加到聯系人列表中,或者取消添加,從而使數據庫保持不變。在此步驟中,需要添加兩個按鈕並編輯這些按鈕,以便它們在窗體中顯示相同的大小,即使它們的顯示文本具有不同的長度。
添加按鈕並編輯其顯示文本:
- 如果底部 JPanel 延伸到了 JFrame 窗體的下邊緣處,請向下拖動 JFrame 的下邊緣。這可以在 JFrame 的邊緣和 JPanel 的邊緣之間為 OK 和 Cancel 按鈕留出空間。
- 在 "Palette"(組件面板)窗口中,從 "Swing Controls"(Swing 控件)類別中選擇 "Button"(按鈕)組件。
- 將光標移到窗體中的 E-mail JPanel 下方。當出現基准線指示 JButton 的右邊緣與 JFrame 右下角對齊時,請單擊鼠標以放置該按鈕。
- 將另一個 JButton 添加到第一個 JButton 的左側,同時確保按照與 JFrame 下邊緣的建議間距放置它。
- 設置每個 JButton 的顯示文本。為左側按鈕輸入 OK,為右側按鈕輸入 Cancel。請注意,按鈕的寬度將會更改以適應新名稱。
- 將兩個 JButton 設置為相同大小,方法是:選中它們,右鍵單擊其中任何一個,然后從彈出式菜單中選擇 "Same Size"(相同大小)> "Same Width"(相同寬度)。
JButton 組件將出現在窗體中,且 "Navigator"(導航器)窗口中將顯示與其對應的節點。JButton 組件的代碼也將添加到窗體的源文件中,可以在編輯器的 "Source"(源)視圖中查看該文件。每個 JButton 的大小將被設置為與名稱最長的按鈕的大小相同。
- 按 Ctrl-S 組合鍵保存該文件。
需要做的最后一項工作是刪除各個組件中的占位符文本。請注意,在設置了大致的窗體布局后刪除占位符文本對避免出現組件對齊和錨點關系問題很有幫助,大多數開發者通常會在設置窗體布局的過程中刪除此類文本。請在瀏覽窗體時選擇並刪除每個 JTextField 的占位符文本。我們將保留 JComboBox 和 JList 中的占位符項,供以后的教程使用。
預覽 GUI
現在,您已成功構建了 ContactEditor GUI,接下來可以嘗試用該界面查看結果了。您可以在工作過程中預覽窗體,方法是單擊 GUI 構建器工具欄中的 "Preview Form"(預覽窗體)按鈕 ()。此時窗體在單獨的窗口中打開,以便您在構建並運行窗體之前對其進行測試。
部署 GUI 應用程序
為使通過 GUI 構建器創建的界面能夠在 IDE 外部使用,必須編譯應用程序以使用 GroupLayout 布局管理器的類,並確保這些類在運行時可用。這些類包括在 Java SE 6 中,但不包括在 Java SE 5 中。如果開發的應用程序要運行在 Java SE 5 上,則應用程序需要使用 Swing 布局擴展庫。
如果在 JDK 5 上運行 IDE,IDE 將自動生成應用程序代碼以使用 Swing 布局擴展庫。在部署應用程序時,需要將 Swing 布局擴展庫包含在應用程序中。構建應用程序(“構建”>“構建主項目”)時,IDE 將自動在應用程序的 dist/lib 文件夾中提供該庫的 JAR 文件副本。IDE 還會將位於 dist 文件夾中的每個 JAR 文件添加到應用程序 JAR 文件的 manifest.mf 文件內的 Class-Path 元素中。
如果在 JDK 6 上運行 IDE,IDE 可生成應用程序代碼以使用 Java SE 6 中的 GroupLayout 類。這意味着您可以部署應用程序,使其在安裝了 Java SE 6 的系統上運行,並且不需要將 Swing 布局擴展庫打包到該應用程序中。
分發和運行獨立的 GUI 應用程序
為 IDE 外部的分發准備 GUI 應用程序:
- 將項目的 dist 文件夾壓縮為一個 zip 檔案文件。(dist 文件夾可能還包含 lib 文件夾,您需要將此文件夾一並包括在其中。)
要運行應用程序,請右鍵單擊項目名稱,然后從上下文菜單中選擇“運行”。在“運行項目”對話框中,選擇主類名(如果是指剛創建的項目,則為 my.contacteditor.ContactEditorUI),然后單擊“確定”。此時應用程序將啟動並正常運行。
通過命令行來運行獨立的 GUI 應用程序:
- 導航至項目的 dist 文件夾。
- 鍵入以下命令:
java -jar <jar_name>.jar
注:如果遇到以下錯誤:
Exception in thread "main" java.lang.NoClassDefFoundError: org/jdesktop/layout/GroupLayout$Group
請確保 manifest.mf 文件引用的是當前安裝的 Swing 布局擴展庫版本。