Tutorial Step 12

Step 13: Nested Layouts

You're all done now, except for a little cleanup and polish. If you did change the colors of any panels, now is your opportunity to change them back to their original gray.
  1. Using multiple selection in the Component Tree (holding down the Ctrl key), select all the panels in your design.
  2. In the Inspector, double-click the background property and set the RGB values to 192, 192, 192.
Next, lets eliminate the bevels on the panels.
  1. Select all the panels in your design except Panel 4, the status bar (we already flattened the bevels on that one).
  2. In the Inspector, change the bevelOuter property to Flat. (Both bevelOuter and bevelInner properties should be Flat for all the BevelPanel components).
Now, the UI is complete except for any other finishing touches you might want to add.

For example, to put a little more gap between the first two toolbars:

  1. Select the FlowLayout object for Panel 7.
  2. Change the hgap property to 10, if that number works in your design.

This is how our design looks 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.

A note about toolbars: There is a Borland toolbar component on the Controls tab of the Component Palette called ButtonBar that you could have used instead of panels and buttons. However, you don't add buttons to a ButtonBar from the Palette. Instead, you specify the button labels, and the buttons are created automatically. For the purposes of this tutorial, we used panels and buttons to demonstrate how to use nested panels and layouts to get the look you want.

This concludes the tutorial. To learn how to write code that responds to user events in your application, see the tutorial Building a simple text editor.

Tutorial Step 12