Skip to main content

Quickly Enclosing Components in a Container

Posted by pkeegan on December 21, 2007 at 1:05 PM PST

In the first comment on my last post, I was asked why there isn't a separate JPanel generated for both the master and detail views in NetBeans' Java Desktop Application template. In the process of trying to answer that question, I learned a thing or two about the Swing Application Framework and was reminded of a very useful trick in the GUI Builder (the ability to generate a container to surround components that have already been added to the form).

I found that the main reason why there is just one panel to serve both the master and detail views is the structure of the org.jdesktop.application.FrameView component.

When you generate a master/detail database app using the Java Desktop Application template in NetBeans IDE 6.0, you get a component structure similar to what we ended up with in the ContactMasterDetail app that I wrote about a few days ago. The representation of those components is shown below in a screenshot of the Inspector window.

enclose-in-InspectorPrevious.png

You'll notice the FrameView component appears as the first node under the root node of the form. If you switch from Design view to Source view and poke around the code, you'll find that the ContactsMasterDetailView class extends FrameView and that the other components get added to this component.

I decided to learn more about this class by looking at it's Javadoc, which is bundled with the IDE. So I right-clicked FrameView in the Source Editor and chose Show Javadoc as shown below.

enclose-in-showjavadoc.png

Looking at the Javadoc, I didn't find much about FrameView, but I did noticed that it extends View, which has much more interesting documentation. It turns out that it is a wrapper for some standard elements - a menu bar, tool bar, component, and a status bar, all of which are optional. It seems that the IDE's Java Desktop Application uses three of those (menu bar, component, and status bar) and that the generated mainPanel serves as the "component".

So, in the current app, we can't remove mainPanel and replace it with two new panels (at least not without a lot of fuss). But we can put two panels within the main panel and divide the parts of the UI that way. And there is a way we *can* do that without too much fuss - use the Enclose In feature:

  1. In the Inspector window (remember to put the form back into Design view so that the Inspector window is displayed), Ctrl-click to select masterScrollPane, newButton, and deleteButton.
  2. Right-click the selection and choose Enclose In > Panel.
  3. enclose-in.png

  4. Rename jPanel1 to something that you'll remember, e.g. masterPanel.
  5. Ctrl-click to select detailScrollPane, saveButton, refreshButton, deleteDetailButton, and newDetailButton.
  6. Right-click the selection and choose Enclose In > Panel.
  7. Rename jPanel2 to detailPanel.

Voila! Now the master and detail sections are separately encapsulated on the form, which will make it easier to add other components to the form without disturbing the layout of the existing components. You can also easily provide some visual separation between the two sections. I did the latter by adding some titled borders to both masterPanel and detailPanel (which you can do by selecting the panel in the Inspector window and customizing its border property in the Properties window.

My results are below. Not a work of art, but hopefully demonstrative of some of the possibilities at your fingertips.

enclose-in-runningapp.png