Close all existing projects and create a new UI application project with the Application Wizard.
Change the package and project to \NestedLayouts\NestedLayouts.jpr. Change any other defaults you want in the other fields, then press Finish. The Application Wizard starts.
When the AppBrowser appears with your new project, you'll see four files in the Navigation pane: the project file (NestedLayouts.jpr), Application1.java, and Frame1.java (the UI container), and an HTML file (for project information).
Notice the structure of your UI design now in the Component Tree, as created by the Application Wizard.
What you have is an outer frame called "this (BorderLayout)" which contains a panel called "bevelPanel1 (XYLayout)".
What you are actually resizing is the main container frame for your UI which is a Borland component called DecoratedFrame. Since the main design panel currently is XYLayout, if you run your program now, it will be the same size it is in the designer. However, keep in mind that the actual screen size of a UI container at runtime is not necessarily determined by the size you make it in the UI Designer. Initial runtime screen size is determined by the container's layout manager, which determines the size based on the following:
Now you're ready to start adding panels and components to create your UI design. For this tutorial, the only type of panel we'll use will be the Borland BevelPanel, since it is easier to see at design time than the AWT Panel. To make the tutorial simpler to read, we'll refer to these panels by the generic term "panel" (for example, Panel 1, Panel 2). What you will actually see in the Component Tree is bevelPanel1, bevelPanel2, and so on.
When you add a new BevelPanel to the UI design, it will behave as a FlowLayout. Initially, you'll change the panel to XYLayout, then after you have all the panels and other components in place in your UI, you'll set it to its final layout.
As you draw a BevelPanel in the UI Designer, you will see an outline as you drag the mouse. You can modify the size of the panel using the sizing handles which are visible around the edges of the selected panel. To move the panel, click anywhere inside it and drag it with the mouse.
Draw three new panels (Panels 2, 3, and 4) on the design panel (Panel 1) as shown in the example below:
Remember that as you add each new panel in this tutorial, you need to change it to XYLayout.
Change the panel colors
To make prototyping with nested panels easier, you can change the background color of the panels as we did to make them easier to distinguish in the UI designer. The examples in this tutorial will use alternating shades of gray to make our illustrations easier to understand. It is your choice whether to take the time to do this or not. Since we are using BevelPanel (which has distinguishable edges) instead of the AWT Panel, you may choose not to do this. (An AWT Panel has no borders or visible edges, so giving it a different color than its container allows you to see where to click when you add components to it.)
If you do use different panel colors for this tutorial, you will get a chance to change all the panels to one color again in one easy step at the end of the tutorial.
To change the background color of a panel,