Return to index
The Panel Builder
GUI building is not the most difficult part of making a program, but it can be somewhat tedious and also tricky to get right. The Panel Builder tool simplifies one of the most complex tasks by providing an easy-to-use means of visual construction - arranging together a number of small visual components, such as buttons, on a panel.
The Panel Builder is entirely 'Swing' based; that is, it builds a JPanel using other JComponents.
You should bear in mind that a panel constructed with the Panel Builder places components in fixed positions and therefore the layout will not scale itself as the parent panel or frame is resized (if allowed); however, this is rarely a problem.
You may choose to use the Panel Builder simply as a prototyping tool - or even just to visually experiment with layout possibilities - and then hand code using layout managers. Or you can let the Panel Builder write Java source code that you can later modify as required. It is entirely up to you.
The Panel Builder
Complex GUIs are composed of a number of panels. A tabbed pane and a dialog box, for example, are containers of panels; similarly, main frames are composed of one or more panels. Indeed, panels are unique in being both components and containers; hence, panels can include other panels - and this is the way complex user interfaces are constructed.
The Panel Builder allows you to place and move any combination of 11 different component types within a panel of specified size. When you select 'Save', two files are created (or updated) - a '.panel' file which contains all the information required by the Panel Builder to recreate the panel for further editing, and a '.java' source code file, which is generated automatically by the Panel Builder.
Loading and Saving
To edit a panel created by the Panel Builder, you can select a '.panel' file from the 'Files' tab of the current project and then click on the 'Open' button, or load the Panel Builder and then choose its 'Open' option within the 'File' menu to select a '.panel' file from the current project.
The Panel Builder cannot understand a java source file, and so changes made to the source file will not appear in the Panel Builder; hence, do not begin editing the generated source file until you are completely happy with the layout. Similarly, existing source files can not be 'fed into' the Panel Builder.
While TJI is running, switching to and from the Panel Builder is possible - the existing layout is maintained between sessions.
The Panel Builder offers only the most widely used options for the components - size, foreground colour, text, etc., and by doing so, bewildering lists of properties are avoided. Nevertheless, once the basic code is produced - which will be in a ready-to-run state, but without event handling - you can add extra property modifications as desired. At least the layout is as you wanted it!
The source files produced will normally compile without any errors. In rare cases, however, more than one component may share the same name, resulting in a compile-time error; for example, if you have two buttons with the same icon. This problem can be remedied by giving the components different names. In fact you can do this while building your panel; rather than relying on automatic name generation, enter your preferred component code name (identifier) in the 'Code Name' text field and then click on the adjacent button.
Inserting Components
Select the component type that you wish to add and then click the mouse on the panel where you wish to place that component. If you double-click, and keep the mouse button pressed on the second click, you can immediately move the component into the exact desired location.
Selecting, Moving and Deleting
To select a component, simply click on the blue square 'handle' at the top left corner. To move a component, first choose the 'select' tool and then click on the blue top-left corner to drag it to a new location. Actually, it is possible to move a component without first choosing the select tool - but if you click too far from the component handle, it will be assumed that you wish to add another component, so be careful (this is easily removed, however).
The use of a 'positioning grid' facilitates the accurate lining up of components. You can choose from two grid sizes or choose to use no grid. Similarly, component sizes can take account of a 'sizing grid'; again, there are two grid sizes available or you can opt to let the components take their natural preferred sizes. The settings for the two grid types are available in the 'Options' menu on the Panel tab.
A currently selected component may be removed from the panel by clicking on the Remove Component ('Rem') button. The 'Clear' button removes all components from the panel.
The components added to the panel are 'operational' within the Panel Builder - for example, a text field accepts text, the buttons 'click' and the radio buttons will operate in a group.
Component Sizing
The Panel Builder employs auto-sizing for most components. The exceptions are buttons, labels and text fields. These can be resized using the two purple arrow marked resizing buttons at the bottom of the Panel Builder. Buttons and textfields have their width increased or decreased; for labels, the font size is increased or decreased.
Component Naming
You can opt to provide a code name (identifier) for each component - select the component then type the required name to use for this component in the generated source file into the appropriate text field and then click on the adjacent 'Set C.N.' button.
In cases where no 'code name' is specified by you, the Panel Builder names components in the source code in the following way (these names can later be changed in the source code itself if desired) :
- Text Buttons - by the text displayed (up to the first space, if any)
- Toggle Buttons - "
- Icon Buttons - by the name of the icon (minus path and extention)
- Images (icon images) - "
- Check Boxes - by the attached label
- Radio Buttons - "
- Labels - by the text displayed
- Text Fields, Password Fields and Text Areas - by the text typed into the text field or set via the 'Set Text' button
- DropDown Lists - the text set via the 'Set Text' button
The Main Panel
The panel itself may be resized at any time. Set the two scrollers to the required length and height values and then click on the 'Set Panel Size' button. The panel's preferred size is set by these values, but layout managers for containers (including JPanels) that the panel is added to may modify the exact size as required. This normally presents no problem but may necessitate a redesign.
If you choose the 'select' tool and then click on the panel away from any added component, the panel itself becomes, in effect, the selected component. The colour of the panel can then be set by selecting a color from the color tool bar.
GIF Files
Icon-buttons and 'images' (icon images) can be added only once a GIF file is chosen from the GIF file selection box. Clicking on the 'GIFs' button presents a selection box showing all the GIF files that have been added to the current project. This list box can be moved or closed and re-opened as required.
Button Groups
All radio buttons added to the panel are added to a single button group. Similarly, all toggle buttons are added to a single button group. This means that only one of the group can be selected at any one time. This is what is required in the great majority of cases but is easily changed in the resultant code if desired.
Building a Dialog Box
Add an instance of a panel created with the Panel Builder to a JDialog's contentPane :
JDialog myDialog=new JDialog(parentFrame, title, modal);
myDialog.getContentPane().add(myPanel);
You can also add your panel to a JOptionPane - see the JOptionPane API for help on this.
Building a Tool Bar
A JMenuBar is normally added to a JFrame in a predefined location using a particular method (setMenuBar()). A JToolBar, in contrast, is added to the content pane of a JFrame, just like any other panel. For this reason, it is not necessary to use or extend JToolBar - the Panel Builder can be used to make a panel that can act as a tool bar; simply add the buttons required (and possibly other components too) and later add this to your main frame. For example, if your main frame is 800 x 600, and you want a tool bar across the top of the frame just under the menu bar, as is the convention, create a panel of size 800 x 25. Set a border layout for the main frame's content panel and add the tool bar panel to the 'North' position of the content panel's BorderLayout (toolBar and myFrame are previously defined instances in the following code):
JPanel mainPanel = (JPanel)myFrame.getContentPane();
mainPanel.setLayout(new BorderLayout());
mainPanel.add("North", toolBar);
// now add your other components
mainPanel.add("Center", ...);