Tutorial Step 10 Step 12

Step 11: Nested Layouts

Now for the middle section of the UI. What you want to end up with is something that looks pretty much the same as it does right now in XYLayout. To accomplish this, let's start with Panel 12 that contains the Label and the TextField.
  1. Select Panel 12 and change it to BorderLayout.
    Because of the way you drew the two components in this panel, BorderLayout assigns the Label to the West, and the TextField to either the Center or the West of the BorderLayout panel (either will work).
  2. Next, select Panel 3 and set it also to BorderLayout.
    Again, since you drew Panel12 the width of Panel 3, and filled the rest of the panel with the TextArea, BorderLayout assigns the correct layout constraints: Panel 12 is North, and the TextArea is Center.

Your UI won't have changed much visibly by doing this, but it should look something like this now:

Tutorial Step 10 Step 12