2.4　Java GUI的可視化設計方法

可視化程序設計，也稱為可視化編程，是以“所見即所得”的思想為原則，通過直觀的操作方式進行界面的設計，并即時在設計環境看到在運行環境的實際表現結果，從而實現編程工作的可視化及程序代碼的自動生成。其實質是設計過程可視化，設計結果即時呈現，通俗地講就是“看著畫”界面。NetBeans IDE通過其GUI構建器支持Java GUI程序的可視化設計。本節介紹NetBeans GUI構建器的使用方法和技巧。

2.4.1　NetBeans GUI構建器的界面

NetBeans IDE中有最優秀的Java程序的GUI設計工具——GUI構建器，它可以使Java GUI應用程序設計者采用可視化程序設計方法，像畫圖一樣畫出程序的圖形用戶界面，同時自動生成對應的Java代碼，使程序GUI的設計非常直觀高效。

運行NetBeans IDE，新建Java項目并在該項目中創建JFrame容器，之后IDE啟動GUI構建器，并在一個編輯器標簽中打開新創建的窗體（見圖2.4），該標簽具有包含幾個按鈕的工具欄。新建的窗體在GUI構建器的設計視圖中打開，并自動出現三個其他窗口，利用這些窗口，可以在構建GUI窗體時導航、組織和編輯這些窗體。

GUI構建器的主要窗口（見圖2.16）如下。

設計區域：用于創建和編輯Java GUI窗體的GUI構建器主窗口。

編輯器工具欄：與設計區域緊密配合。“源”按鈕用于查看程序源代碼，“設計”按鈕用于查看GUI組件的圖形視圖，而“歷史記錄”按鈕用于訪問文件更改的本地歷史記錄，其他工具欄按鈕可以方便地訪問常用命令。例如，在選擇模式和連接模式之間切換、對齊組件、設置自動調整組件大小行為以及預覽窗體。

幫助欄：為當前進行的工作提供一些有幫助的內聯提示，并根據已放在容器中的組件情況智能化地提出在當時可能是最優選擇的建議。

導航器：在應用程序中以樹狀分層結構提供所有組件（包括可視和非可視）的表示形式。“導航器”還提供有關樹中哪個組件當前正在GUI構建器中進行編輯的可視反饋——以加粗字體顯示的組件名，并允許在可用面板中組織這些組件。

組件面板：可用組件的可定制列表，包含Swing、AWT和JavaBeans組件的類別以及布局管理器。此外，也可以使用定制器在“組件面板”中創建類別以及刪除和重新排列其中顯示的類別。

屬性窗口：顯示GUI構建器、“導航器”“項目”窗口或“文件”窗口中當前所選組件的屬性。

如果單擊“源”按鈕，IDE將在編輯器中顯示應用程序的Java源代碼，其中包括由GUI構建器自動構建的代碼部分，這些部分將以灰色區域表示（選中時變為藍色），稱為“保護塊”。保護塊是“源”視圖中不可編輯的受保護區域。當處于“源”視圖中時，只能編輯顯示在編輯器白色區域中的代碼。如果需要更改保護塊內的代碼，單擊“設計”按鈕從IDE的編輯器返回至GUI構建器，對窗體等組件及其屬性進行調整。保存所做的更改時，IDE會更新文件的源代碼。也可以使用“定制代碼”功能，有限地修改保護塊中的源代碼。

2.4.2　添加組件及GUI構建器的可視反饋功能

在NetBeans IDE的GUI構建器中，只要像使用絕對定位那樣將組件拖放在所需的位置，便可以構建窗口界面，GUI構建器將確定需要哪些布局屬性，然后自動構建代碼。GUI構建器在我們設計界面時還提供即時動態反饋，提示對齊位置、有關組件錨點和鏈接關系等，這些幫助功能可以加快設計速度。

1. 添加單個組件

一般的GUI界面都包含多個組件，組件都放置在窗口或其他容器中。將組件添加到窗體時，GUI構建器會提供可視反饋，協助設計者根據操作系統的外觀來定位組件。

例2.1　按照2.1節所述步驟創建名為chap02的Java應用程序項目，并在該項目中創建一個命名為UserLogin的JFrame窗體。下面以在該窗體中創建一個標簽組件為例，介紹添加單個組件的基本步驟。

（1）在“組件面板”中，從“Swing控件”類別中選擇“標簽”組件。

（2）將光標移到GUI構建器“設計”視圖中窗體的左上角。當組件的位置靠近容器的左上邊緣時，將出現指示首選邊距的水平和垂直對齊基準線（兩條正交的虛線，見圖2.17）。在窗體中單擊，將該（標簽）組件放在此位置上。

此時，標簽組件出現在窗體中，并以橙色突出顯示，表示它已被選中。在松開鼠標按鍵后，將出現指示符來顯示組件的錨點關系，并在導航器中顯示相應的jLabel1節點（見圖2.18）。

2. 可視反饋功能

在創建界面的過程中，GUI構建器針對組件應在窗體中放置的位置提供一些有幫助的內聯提示和其他可視反饋，并自動使組件沿基準線對齊。

1）對齊基準線

當添加或移動組件時會出現對齊基準線，提示松開鼠標按鍵時組件將對齊的首選位置。定位后對齊基準線將被實線和錨點指示符所取代，實線指明組件之間共享的公共對齊位置。

首先明確幾個相關的排版術語（見圖2.19）。基線（Baseline）是一條虛構的線，如圖示2.19所示字母“e”所在的底線。上坡度（Ascent）是從基線到坡頂的距離，如圖2.19所示字母“b”和“k”及大寫字母的上面部分。下坡度（Descent）是從基線到坡底的距離，如圖2.19所示中字母“p”和“g”類字母的底線。行間距（Leading）是指某一行的坡底到相鄰下一行的坡頂之間的空隙。

（1）插入量（Inset）是組件與其所在容器邊框之間的首選距離，通過水平和垂直基準虛線來指示（見圖2.20）。

（2）偏移（Offset）是相鄰組件之間的首選距離，包括水平偏移和垂直偏移，通過水平和垂直基準虛線來指示。

例2.2　單擊“組件面板”中的“標簽”圖標，然后將光標移動到UserLogin窗體中jLabel1組件下方，微小距離垂直反復移動，將會看到“已移至距上方組件的較小首選位置”基準虛線及幫助欄相關提示（見圖2.21（a））、“已移至距上方組件的中間首選位置”（見圖2.21（b））、“距上方組件的較大首選位置”（見圖2.21（c））。當較大首選位置基準線出現時單擊鼠標左鍵，創建jLabel2組件。

例2.3　單擊“組件面板”中的“文本字段”圖標，然后將光標移動到UserLogin窗體中jLabel2組件右邊，微小距離水平反復移動，將會看到“已移至距左側組件的較小首選位置”基準虛線及幫助欄相關提示（見圖2.22（a））、“已移至距左側組件的中間首選位置”（見圖2.22（b））、“已移至距左側組件的較大首選位置”（見圖2.22（c））。當較小首選位置基準線出現，且與jLabel2基線對齊時單擊鼠標左鍵，創建jTextField1組件。

（3）基線（Baseline）與邊（Edge）對齊是包含文本的相鄰組件之間的首選關系。通過水平或垂直基準虛線來指示。在例2.3中當微距垂直移動jTextField1組件時，可以看到幫助欄提示“基線與另一個組件對齊”（見圖2.23（a））、“與另一個組件的頂邊對齊”（見圖2.23（b））及“與另一個組件的底邊對齊”（見圖2.23（c））。

例2.4　單擊“組件面板”中的“文本字段”圖標，然后將光標移動到UserLogin窗體中jTextField1組件下方，微小距離反復移動，將會看到“與另一個組件的左邊對齊”基準虛線及幫助欄相關提示（見圖2.24（a））和“與另一個組件的右邊對齊”（見圖2.24（b））。當左邊對齊基準線出現，且距上方jTextField1較大首選位置時單擊鼠標左鍵，創建jTextField2組件。

請試著創建jLabel3組件，位于距容器左邊框的首選位置，且與右邊jTextField2基線對齊。

（4）縮進（Indent）是一種特殊的對齊關系，其中一個組件位于另一個組件的下方并稍微向右偏移。通過兩條垂直的基準虛線來指示（見圖2.25）。

使用GUI構建器的上述功能可以幫助我們對齊組件的位置。

2）錨點指示符

當組件對齊到位后，會出現實心錨點指示符，指明組件之間共享的公共對齊位置。

（1）容器：將各個組件連接到它們所在容器的錨點以小的半圓指示符表示，并有從組件本身延伸到容器邊緣的虛線（見圖2.26）。如圖2.26中jLabel1有向上延伸到容器上邊緣和向左延伸到容器左邊緣的錨點指示符。

（2）組件：將一個組件連接到相鄰組件的錨點以小的半圓指示符表示，并有從該組件延伸到其他組件的虛線（見圖2.27）。如圖2.27中jTextField2有向上延伸到jTextField1和向左延伸到jLabel3的錨點指示符。

3）突出顯示和控柄

（1）突出顯示：當在一個組件上按住鼠標左鍵并拖動時，會在目標位置出現一個橙色提示框指明選定組件將要放置的位置（見圖2.28）。

（2）控柄：當單擊一個組件時該組件被選定，組件周圍出現小方形大小調整控柄，光標放在某個控柄上會出現水平或垂直或斜向雙向箭頭光標（見圖2.29），此時按住鼠標左鍵并移動鼠標可以向相應方向改變組件大小。

4）大小調整指示符

（1）相同大小：選擇兩個或多個組件之后，右擊出現快捷菜單（見圖2.30）。選擇“相同大小”|“相同寬度”時，設計界面出現“H”形相同寬度指示符（見圖2.31）；選擇“相同大小”|“相同高度”時，設計界面出現“工”形相同高度指示符（見圖2.32）。

（2）自動調整大小：在編輯器工具欄中單擊“更改水平大小可調性”按鈕，或者在圖2.30的快捷菜單中選擇“自動調整大小”|“水平”，或者在組件的屬性窗口中選取“可水平調整大小”，則該組件的大小在運行時將根據窗口的大小自動調整寬度，設計視圖中組件左右移動則出現寬度調整指示符，工具欄按鈕處于選擇（按下）狀態（見圖2.33）。用同樣的方法（）可以設置組件的高度可調性，并出現高度調整指示符（見圖2.34）。

3. 添加多個組件

有時候需要向圖形界面中連續添加多個相同類型的組件，這時在“組件面板”中單擊這個組件后，在按住Shift鍵的同時連續多次單擊拖放組件，可以快速向窗體中添加多個這種組件。執行此任務時，GUI構建器同樣會顯示用于建議首選組件間距的水平和垂直基準線。

例2.5　向例2.4所設計的界面中添加用于選擇用戶角色的單選按鈕。

采用添加多個組件的技巧創建三個相鄰顯示的單選按鈕，步驟如下。

（1）單擊“組件面板”中的“Swing控件”組中的“單選按鈕”組件，光標移到jLabel3標簽的下方，當幫助欄中出現“縮進組件。已移至距上方組件的中間首選位置。”時，按住Shift鍵并單擊鼠標。

（2）鼠標向右移動，當幫助欄出現“已移至距左側組件的中間首選位置。基線與另一個組件對齊。”提示時，單擊。

由于步驟（2）操作中沒有按住Shift鍵（忘記了！），不能繼續連續創建第三個單選按鈕，留待后面介紹插入組件時解決。例2.5得到如圖2.35所示界面。

注意，連續創建一組組件時需要按住Shift鍵。但在創建最后一個組件時應松開Shift鍵，如果沒有松開可以按Esc鍵終止成組創建狀態。

4. 插入組件

經常出現需要在窗體中已放置的組件之間添加組件的情況。在兩個現有組件之間添加組件時，GUI構建器就會自動移動它們，以便為新組件留出空間。

例2.6　在例2.5完成的圖2.35界面中，補上標簽“我是一名：”和一個單選按鈕。

采用插入組件技術補上，操作步驟如下。

（1）單擊“組件面板”中“Swing控件”類別中的“單選按鈕”組件。

（2）將光標移到位于第4行的兩個單選按鈕上，使jRadioButton3與兩者都重疊，并與它們的基線對齊（）。如果在放置新組件時遇到困難，可以將其與原來兩個組件中第二個的左基準線對齊。

（3）單擊鼠標即將jRadioButton3放置在jRadioButton1和jRadioButton2之間。

（4）單擊“組件面板”中“Swing控件”類別中的“標簽”組件。

（5）將光標移到位于第3行和第4行行首的兩個組件上，使新建組件jLabel4與兩者都重疊，并移至容器左邊緣的首選位置（見圖2.36）。

（6）單擊鼠標即在原第3行和第4行之間新增一行，將jLabel4放置在該新行的行首（圖2.37）。

5. 復制粘貼組件

一些需要新創建的組件如果與窗體中某個已有的組件屬性設置等基本一致，可以通過復制快速創建和設置該新組件。

把已有的組件先復制到剪貼板中，然后反復進行粘貼而制作該組件的多個副本。操作步驟如下。

（1）單擊選取已有的組件。

（2）右擊該組件，在出現的快捷菜單中選擇第一個“復制”命令。注意，有兩個行為不同的“復制”命令。

（3）右擊空白處，在出現的快捷菜單中選擇“粘貼”命令。此時在原組件上錯位重疊出現一個新組件并處于選取狀態（）。

（4）將粘貼生成的組件移動到適當位置。

（5）如果需要，重復（3）和（4）步，粘貼生成更多該組件的副本。

6. 插入新行“復制”組件

此方法在已有的組件下方插入一個空行，然后創建該組件的一個副本，并與原組件左邊框對齊。操作步驟如下。

（1）單擊選取已有的組件。

（2）右擊該組件，在出現的快捷菜單中選擇第二個（靠下的）“復制”命令。

用上述兩種方法創建的新組件除了位置、組件名稱和顯示文字（一般是text屬性）不同外，其他屬性都與原組件相同。

7. 刪除組件

如果窗體中某個組件不再需要或不符合要求需要刪除，直接選取該組件后按Delete鍵，或者右擊該組件，在快捷菜單中選擇“刪除”命令。

組件刪除后，原來占據的位置會保留下來。