Creating a UI with nested layouts
Note: Projects in JBuilder are saved by default to the /[home]/jbproject
directory. It is recommended that only advanced users change this default path.
The project appears in the project pane of the AppBrowser. You'll see four files in the project pane: the project file (NestedLayouts.jpr
), Application1.java
, and Frame1.java
(the UI container), and an HTML file for project information and notes.
Frame1.java
in the project pane, then click the Design tab at the bottom of the content pane to open the visual design tools.
The structure pane now contains a component tree and the content pane contains the UI designer, the Inspector on the right, and the component palette above the designer.
Notice the structure of your UI design in the component tree as created by the Application wizard. What you have is a frame called this
, under which is the contentPane (BorderLayout)
placed in the UI
folder. It is under this folder and frame that JBuilder will place all the visual UI components as you add them to your design. What you will actually be designing in the UI designer is the contentPane
.
this
in the component tree. Notice that on the Properties page of the Inspector, the value of the title
property is "Frame Title". Triple-click Frame Title
to highlight it, type Nested Layouts
in its place, then press Enter. This will show in the frame's title bar at runtime.
Select this
in the component tree to place black sizing nibs around the frame on the design surface.
Click the bottom right corner nib with the mouse and drag it diagonally away from the center of the frame to enlarge it in the designer.
What you are actually resizing when you do this is the main container frame for your UI (a component called JFrame
).
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:
miniminumSize
, preferredSize
, maximumSize
, alignmentX
, and alignmentY
of the frame's components.
You can manually change the size of the UI frame by resizing it at runtime.
If you want more room in the UI designer, maximize the AppBrowser before you drag the frame to a larger size. If you want even more space, hide the project and structure panes by selecting View|Toggle Curtain. Note, however, that closing the curtain hides the component tree which is in the structure pane, so you'll have to toggle the curtain every time you want to see the tree.
contentPane
in the component tree. Notice that it also becomes selected in the UI designer and the Inspector.
JPanel
icon. Click contentPane(BorderLayout)
in the component tree. This drops the panel into the contentPane
.
Notice that a new component called jPanel1
was added to the UI
folder in the component tree under the contentPane
. Notice, also, that jPanel1
completely hides the contentPane
in the designer. (You can see black sizing nibs around the edges of the panel showing its size and location.)
If your panel is not filling the contentPane
, you need to explicitly set its constraints
property to the correct value. With jPanel1
selected in the component tree, click the Properties tab in the Inspector and look at the constraints
value. It should say CENTER. If it doesn't, click the drop-down list and change the value.
contentPane
in BorderLayout
, at some point during the visual design process, you might accidently drag jPanel1
with the mouse to another area of the BorderLayout
frame, causing the panel to shrink in height or width and move to one of the edges of the frame (North, South, East, or West). If this happens after you have the UI design populated with lots of components, it might be difficult for you to immediately determine what the problem is.
To prevent this from happening, select the contentPane
in the component tree, then select its layout
property on the Properties tab of the Inspector. Click the drop-down arrow and select XYLayout
or null
from the list. You'll change it back to BorderLayout
at the end, after all the other panels are converted to their ultimate layouts.
jPanel1
. Click the icon jPanel1
in the component tree to expand that selection. Under jPanel1
, you will see the layout manager it uses, which is FlowLayout
. Select jPanel1
and change its layout
property in the Inspector to XYLayout
or null
.
border
property and choose RaisedBevel from the drop-down list.
While it isn't necessary to use a border on the panels during design, it does make the design work easier when you are nesting multiple panels and components. This is because as soon as you select a component on the palette, then click the panel, the panel's sizing nibs disappear and you can't see if you are still inside the panel when you drag the new component to its desired size.
For the purpose of demonstration, the images in this tutorial also show the panels in contrasting shades of gray to make it easier to differentiate them. Changing the background color of the panels is another way you could make them visible in the designer if you don't want to use borders.
At this point, it would be a good idea to save the entire project. Choose File|Save All from the main menu.
Now, add three more panels (panel 2, 3, and 4) to the design panel (panel1) shown in the example below. Don't forget to change their layouts to your prototype layout. Also add a border if you want.
JPanel
on the component palette.
JComboBox
components at the top of the application. Draw it to fill the top inch of the frame and the full width of the frame. (Notice that panel 2 appears in the component tree as jPanel2
.
To drag a whole panel, select the panel and move the mouse to the center black nib in the panel. You'll see a four-headed arrow appear. Click and drag the component to the new location. Be careful not to drag it out of its container and into another container, like the contentPane
. If you make a mistake, just choose Edit|Undo and the design will return to its previous state.
Notice the structure of your UI design now in the component tree: