Creating a UI with nested layouts
GridLayout
. Notice, since the labels in the status bar are empty, the status bar collapses at the bottom of the UI. To remedy this, select label 2 and do the following:
Status:
in the text
property.
font
value to "SansSerif, regular, 12"
foreground
value to "Black"
Notice how GridLayout
changes all the status bars to exactly the same size.
GridLayout
object in the component tree and change the hgap
property to 2 to widen the raised area between the status bars. (This step is purely a matter of taste and not a necessity.)
BorderLayout
. It should assign panel 2 to the North, panel 3 to the Center, and panel 4 to the South. If this doesn't happen, select each panel and correct its constraints
property in the Inspector.
contentPane
in the component tree and change it to BorderLayout
. Make sure jPanel1
's constraints
property is set to Center.
If, after changing the container to BorderLayout
, your entire UI design is clumped together at one edge of the frame, the panel's constraints
property is not Center. Just select jPanel1
again and change its constraints
property to Center.
You're almost done. Your UI components should all be in their correct places now.
Move on to the last step.