Creating a UI with nested layouts
background
property and select light gray (RGB value 192, 192, 192). Don't worry about its appearance in the designer at this point. The bevels make a lot of white space. You might also want to select all the buttons and make their backgrounds the same as the panels.
Next, lets eliminate any unwanted borders.
border
property to <none>
.
This is purely your choice and may be influenced by which look and feel you decide to use. You can even customize a border by clicking the ellipses button at the right of the border
property to open the Border Property Editor.
We removed all the borders except for the following:
Panel 1 = RaisedBevel
Panel 2 = Etched
Panel 3 = Etched
Text Area = Lowered Bevel
Labels 2, 3, 4 = Lowered Bevel
Now, the UI is complete except for any other finishing touches you might want to add. This is approximately how your design should look now:
And that's all there is to it! While it seems slow in the learning phase, once you become familiar with the different layouts, you'll be able to plan and implement layouts more quickly.
It is easy to see, now, that using multiple levels of panels with only the easier layouts can actually be pretty tedious and complicated. A better alternative is to take the time to learn GridBagLayout
. In the end, all your UI designs will be much simpler and better controlled. You will still use nested layouts, but only one or two levels deep. GridBagLayout
will control the rest of the layout behavior.
For example, the entire toolbar stack in this UI could have been replaced by one GridBagLayout
container holding just three components: two GridLayout
panels (containing buttons 1-8) and one button (button 9).
There are, of course, toolbar components on the component palette that you would normally use instead of panels and buttons. For the purposes of this layout tutorial, we just used panels and buttons to demonstrate how to use nested panels and layouts to get the look you want. The buttons could have been any other type of component in your design.
We strongly recommend that if you are serious about doing Java UI development, you take the time to learn how to use GridBagLayout
. Once you understand it, you'll find it indispensable.
For an indepth tutorial on GridBagLayout
, see the "GridBagLayout Tutorial".
To learn how to write code that responds to user events in your application, see the online tutorial called Building a Java text editor.
This concludes the tutorial.
For additional suggestions on improving this tutorial, send email to jpgpubs@inprise.com.