The GUI Designer
GUI designing is not the most difficult part of making a program, but it can be somewhat tedious and also tricky to get right. The GUI Designer tool provides a simple way to quickly create a GUI design and the source code to compile it.
The GUI Designer is entirely 'Swing' based; that is, it builds a JPanel using other JComponents, including the containers JTabbedPane and JSplitPane. JPanels can also be used in the designer as a way of grouping components together and such a tree-like hierarchy of containers can be constructed to any depth.
You may choose to use the GUI Designer simply as a prototyping tool - or even just to visually experiment with layout possibilities. In any case, you will probably need to modify the designer's generated source code to tweak the design and add event listeners.
The GUI Designer
Complex GUIs are composed of a number of JPanels - and other containers, such as JSplitPane and JTabbedPane. Each panel, including those on each side of a JSplitPane or each tab of a JTabbedPane, can contain a number of other JComponents (buttons etc., and even child panels) arranged by a layout manager.
Each panel has its own layout manager. The Java API contains a number of different layout managers and third party ones are also available; you could even write your own. The GUI Designer provides three layout managers:
- 'Horizontal' - based on FlowLayout
- 'Vertical' - based on BoxLayout
- 'Grid' - based on GridLayout
By using these three layout managers to layout panels - and to combine panels - complex arrangements are possible and most designs can be readily achieved.
The top-level containers JFrame and JDialog have a content pane that is a JPanel. So, for example, to create a JDialog with the GUI Designer, create a JPanel with the GUI Designer and set it as the content pane of a JDialog. In the following code snippet, class MyGUI extends JPanel and was created by the GUI Designer.
MyGUI myGUI=new MyGUI();
JDialog d=new JDialog(myFrame, "Dialog", true);
d.getContentPane().add(myGUI);
A content pane has a default layout manager of BorderLayout for which add(pan) is equivalent to add("Center", pan) such that panel pan will take up all available space.
All the components are 'operational' within the GUI Designer - for example, a text field accepts text, the buttons 'click' and you can change tabs on a JTabbedPane.
Inserting Components
Select a component on the panel you wish to add to, so that the component is shown with a blue border. Now you can click on the appropriate button to add a new component. The chosen component is added according to the currently selected order option:
- 'Before'
- 'After'
- 'At End'.
If you have the blue border set on an inner panel, that panel is treated as a component and the insertion will take place in that panel's parent panel if 'before' or 'after' is currently selected. To insert into an empty inner panel, first set the option 'At End' (or simply select the 'Empty' label).
The 'before', 'after' or 'at end' setting also applies when pasting after a 'cut'.
The 'before', 'after' or 'at end' setting also applies when adding a tab to a tabbed pane. To remove a tab, select the tab's main body panel and then select 'cut'. You could move that tab's panel to another tab location (creating a new tab first, if required) by selecting the 'Empty' label on the main body panel of the tab and then selecting 'paste'.
Note that the 'Empty' labels are just a design aid and not added to the generated source code.
The GUI Designer allows you to insert scrollable JTables and JTrees. The tree or table is placed within a JScrollPane automatically and this scrollpane is set to display 'as required' (dependent on whether the tree or table will fit within the available space). Dummy data is displayed in the tree or table thus enabling you to better visualise your layout. In the generated source code you can simply supply different data to the tree or table model, perhaps via a setter method.
If you wish your GUI to include a component not currently provided by the GUI Designer - for example, a JSpinner - you can add a JLabel that describes it (for example, 'Date Selector') and insert the desired JSpinner code in place of this label in the generated source code.
Selecting, Cutting and Pasting
You can select any component - including panels - to set or change certain properties such as preferred size, foreground color and identifier. The current property values are shown when the component is selected.
The currently selected component is shown with a blue border.
Properties that apply to panels as containers, such as alignment (left, right or center), are indicated for the selected component's parent panel, if the selected component is not itself a panel.
To remove a component, use the 'Cut' button after selecting it so that it is shown with a blue border. The last cut component can be placed elsewhere by using the 'Paste' button.
In the case of a container, all the container's children (and their children, if any) are cut and pasted.
The 'Borders' Option
The 'Borders' option, when selected, shows a thin black line border around all JPanels so that you can see clearly where panels are located. These borders are not included in the generated source code. To see what your design looks like without these guide borders, simply switch the 'Borders' option to off. You can switch it on and off as required.
Main Panel Size
By default, the top-level panel has no preferred size set and its size will be determined by the container it is added to. You can specify a preferred size or maximum size from the 'Options' menu if you wish.
If the preferred panel size is larger than the GUI Designer's display area, it will be shown within a scroll pane - so you can design panels of any size.
The 'Show Current Preferred Panel Size' option ('Options' menu), allows you to see your design in its 'packed' state - how small it can be while still being reasonably well laid out. If the layout does not change, you have probably set a preferred size on the main panel; you can clear that with the '<Clear>' button. To return to 'full-screen' size, select the 'Clear Sizes' option.
Adjusting the sizes of inner panels / containers
You can use the buttons marked '<width', 'width>', '<height' and 'height>' to incrementally shrink or expand the preferred width or height of any inner panel. However, note that the effect of this depends on the layout manager of the parent container and the constraints of its preferred size (if set) and other child containers' preferred sizes (if set).
In some circumstances you cannot adjust a panel size that is the last component within a container without first adding an empty panel after it (which acts to take up the slack).
The behaviour may sometimes seem odd; the layout managers, working together, do not always produce the optimum layout as we would like to see it. For example, sometimes preferred sizes that are no longer reasonable (as your design changes) may need to be 'cleared' before a panel will resize itself properly. You can use the '<clear>' button to clear the preferred size property of the current panel.
There is a menu option for removing all preferred sizes from the design ('Clear Sizes').
Component Naming
You can opt to provide a source-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. Then click on the adjacent 'Set' button (you may be able to simply press the 'enter' key instead of clicking on the 'Set' button).
In cases where no 'code name' is specified by you, the GUI Designer names components in the source code in the following way (these names can later be changed either in the GUI Designer or in the generated source code if desired). The component's class name (minus the 'J' prefix) is used with a lowercase first character and unique numeric postfix. For example: panel2, button3, etc.
Loading and Saving
When you select 'Save', two files are created (or updated) - a '.gui' file which contains all the information required by the GUI Designer to recreate the panel for further editing, and a '.java' source code file.
To edit a panel created by the GUI Designer, you can select a '.gui' file from the 'Java Files' tab of the current project and then click on the 'Open' button (or simply double-click on the name of the file). Or you can select/open the GUI Designer and then choose the 'Open' option within the 'File' menu to select a '.gui' file from the current project.
The GUI Designer 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. Saving will overwrite the previously generated source code.
Similarly, existing source files can not be 'fed into' the GUI Designer.
While TJI is running, switching to and from the GUI Designer is possible - the existing layout is maintained between sessions.
The GUI Designer 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, set button groups and initial state, etc. At least the layout is as you want 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. This problem can be corrected by giving the components different names. In fact you can do this while building your panel; rather than relying on automatic name generation, enter an identifying source-code name in the 'Identifier' text field and then click on the adjacent 'Set' button. This identifier will be used in the generated source code when referring to the currently selected (blue bordered) component.
Building a Dialog Box
Add an instance of a panel created with the GUI Designer 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 GUI Designer 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 with a preferred size of 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", ...);